Skip to content

Latest commit

 

History

History
327 lines (294 loc) · 8.88 KB

README.md

File metadata and controls

327 lines (294 loc) · 8.88 KB
Raw

weekly46

Learning graphql and more

Deno Chat Deploy

Deno install

Deno deploy

  • denochat/api/index.js
addEventListener("fetch", (event) => {
  const response = new Response("Hi Deno Chat Step One!!", {
    status: 200, 
    headers: { "content-type": "text/plain"}
  });
  event.respondWith(response);
});
A     denochat-api.simpledoers.com  34... 
AAAA  denochat-api.simpledoers.com  26::0::: 
TXT   denochat-api.simpledoers.com  deno-com-validation=1...

git add .
git commit -m 'feat(api): deploy deno Hi!!'
git push

Deploy changes 2 oak middelware Application

  • denochat/api/index.ts
import { Application  } from "https://deno.land/x/oak/mod.ts";
const app  = new Application();
app.use( (ctx) => {
  ctx.response.body = 'Hi, from oak deno module!!';
});
addEventListener('fetch', app.fetchEventHandler());

Deploy changes 3 oak middelware Router

  • denochat/api/index.ts
import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
const messages = [];
const router = new Router();
router
  .get('/', (ctx, next) => {
    ctx.response.body = 'Deno Chat Server:';
  })
  .get('/messages', (ctx, next) => {
    ctx.response.body = messages;
  })
  .post('/messages', async (ctx, next) => {
    const message = await ctx.request.body().value;
    messages.push(message);
    ctx.response.body = messages;
  })
const app  = new Application();
app.use(router.routes());
app.use(router.allowedMethods());
addEventListener('fetch', app.fetchEventHandler());

Fresh - install ui ( like nextjs framework )

https://github.com/lucacasonato/fresh

  • Makefile
step46_1303 denochat_ui:
	deno install -A -f --no-check -n fresh https://raw.githubusercontent.com/lucacasonato/fresh/main/cli.ts
	cd denochat && fresh init ui

Run Local environment

  • Makefile
step46_1304 denochat_deployctl_local:
	cd denochat/ui && deployctl run --no-check --watch main.ts

ui Run Local fetch online api

  • denochat/ui/pages/index.tsx
import { h, IS_BROWSER, useState, useEffect, useCallback } from "../deps.ts";
interface Message {
  text: string;
}
export default function Home() {
  const [messages, setMessages] = useState<Message[]>([]);
  const getMessages = useCallback( async () => {
    const res = await fetch('https://denochat-api.simpledoers.com/messages');
    const data = await res.json();
    setMessages(data);
  }, []);
  useEffect( () => {
    getMessages();
  }, []);
  return (
    <div>
      {JSON.stringify(messages)}
    </div>
  );
}

api oak cors

import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { oakCors } from 'https://deno.land/x/cors/mod.ts';
const messages = [];
const router = new Router();
router
  .get('/', (ctx, next) => {
    ctx.response.body = 'Deno Chat Server:';
  })
  .get('/messages', (ctx, next) => {
    ctx.response.body = messages;
  })
  .post('/messages', async (ctx, next) => {
    const message = await ctx.request.body().value;
    messages.push(message);
    ctx.response.body = messages;
  });
const app  = new Application();
app.use( oakCors() );
app.use(router.routes());
app.use(router.allowedMethods());
addEventListener('fetch', app.fetchEventHandler());

ui local access api, and send messages

import { h, IS_BROWSER, useState, useEffect, useCallback } from "../deps.ts";
interface Message {
  text: string;
}
export default function Home() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [text, setText] = useState("");
  const getMessages = useCallback( async () => {
    const res = await fetch('https://denochat-api.simpledoers.com/messages');
    const data = await res.json();
    setMessages(data);
  }, []);
  useEffect( () => {
    getMessages();
  }, []);
  const onSendMessage = useCallback(async () => {
    await fetch('https://denochat-api.simpledoers.com/messages', {
      method: 'POST',
      headers: {
        'content-type':'application/json'
      },
      body: JSON.stringify({
        text
      })
    });
    setText('');
    getMessages();
  }, [text]);
  return (
    <div>
      <input type='text' value={text} onChange={ (evt) => setText(evt.target.value) } />
      <button onClick={onSendMessage}>Add</button>
      <div>{JSON.stringify(messages)}</div>
    </div>
  );
}

Breadcast channel chat deno oak

import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { oakCors } from 'https://deno.land/x/cors/mod.ts';
const messages = [];
const channel = new BroadcastChannel('chat');
channel.onmessage = (event) => {
  messages.push(event.data);
}
const router = new Router();
router
  .get('/', (ctx, next) => {
    ctx.response.body = 'Deno Chat Server:';
  })
  .get('/messages', (ctx, next) => {
    ctx.response.body = messages;
  })
  .post('/messages', async (ctx, next) => {
    const message = await ctx.request.body().value;
    messages.push(message);
    channel.postMesssage(message);
    ctx.response.body = messages;
  });
const app  = new Application();
app.use( oakCors() );
app.use(router.routes());
app.use(router.allowedMethods());
addEventListener('fetch', app.fetchEventHandler());

ui Deploy

A     denochat.simpledoers.com  34... 
AAAA  denochat.simpledoers.com  26::0::: 
TXT   denochat.simpledoers.com  deno-com-validation=1...

Start having a codebase from dappuniversity,

install ganache local blockchain network

metamask wallet in your browser

  • Makefile
step46_50 dapp_ui_init:
	cd dapp/defi_tutorial && npm i
#step10 web3-client:
#	npm i -g truffle
step46_52 web3_ganache_install:
	curl https://github.com/trufflesuite/ganache/releases/download/v2.5.4/ganache-2.5.4-linux-x86_64.AppImage; mv ganache-2.5.4-linux-x86_64.AppImage /usr/local/bin/; chmod +x /usr/local/bin/ganache-2.5.4-linux-x86_64.AppImage; ln -s /usr/local/bin//usr/local/bin/ganache-2.5.4-linux-x86_64.AppImage /usr/local/bin/ganache;
step46_53 web3_browser_metamask:
	echo 'Install metamask in google chrome https://metamask.io/download.html'
step46_54 web3_ganache_run:
	cd dapp/defi_tutorial && ganache

How you connect to the blockchain, in this case ganache running locally

  • dapp/defi_tutorial/truffle-config.js #
require('babel-register');
require('babel-polyfill');

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545, // here is the port where ganache is attending soy we connect
      network_id: "*" // Match any network id
    },
  },
  contracts_directory: './src/contracts/', // here is changed public intentional contracts
  contracts_build_directory: './src/abis/', // 
  compilers: {
    solc: {
      optimizer: {
        enabled: true,
        runs: 200
      },
      evmVersion: "petersburg"
    }
  }
}

Adding TokenFarm Smart Contract to the codebase

Adding the Solidity contract

  • dapp/defi_tutorial/src/contracts/TokenFarm.sol
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.5.16;

contract TokenFarm{
  string public name = "Dapp Token Farm";
}

Adding Migration Deploy Contract to the network

  • dapp/defi_tutorial/migrations/2_deploy_contracts.js
const TokenFarm = artifacts.require('TokenFarm')

module.exports = function(deployer) {
  deployer.deploy(TokenFarm);
}

Deploy

  • Makefile
step46_55 web3_compile_contracts:
	cd dapp/defi_tutorial && npm i -D truffle 
step46_56 web3_compile_contracts:
	cd dapp/defi_tutorial && ./node_modules/.bin/truffle compile