Alright, the series of articles goes to frontend part. I post an article related to Blockchain with React.js and Next.js. If you haven’t seen my previous posts Part 1 Introduction, Part 2 Hardhat, and Part 3 Golang Gin, please read them first.

In this article, I demonstrate how to use React.js (Next.js) to interact with smart contract by Golang Gin API and hardhat RPC URL, and implement a simple Sign-in with Ethereum (SIWE) authentication and setGreeting to Solidity.

Okay, let’s start it.

It’s time to Blockchain with Golang. If you haven’t seen my previous post Part 1 Introduction and Part 2 Hardhat, please read them first.

Again, does Dapp need a Backend?

reddit

• You can pretty much make a dapp without backend, but there are some things that can’t be done with a smart contract.
• You need a backend among other reasons for off-chain or metadata that won’t be stored in the smart contracts.

Have you ever thought about how Moralis works?

Off-chain: Backend infrastructure that collects data from the blockchain, offers an API to clients like web apps and mobile apps, indexes the blockchain, provides real-time alerts, coordinates events that are happening on different chains, handles the user life-cycle and so much more.
Moralis Dapp is used in order to speed up the implementation of the off-chain infrastructure. Moralis Dapp is a bundled solution of all the features most Dapps need in order to get going as soon as possible.

This is a series articles of Blockchain fullstack structure, please read Part 1 Introduction first. In this part, I will show how to set docker to Hardhat, but this is simpler than my previous article Hardhat Solidity NFT tutorial.

Recently, I ogranized a template of my blockchain fullstack project, including a Hardhat Solidity, Golang backend, and React js frontend. Does it need golang backend? Actually, I’m not sure. But there is a post said:

Server:
Even though you have your smart contracts as backend, often times a Dapp will still have an additional traditional server running. Not always, but probably more often than you think.

So, I combined Harhat, Golang gin, and Next.js to my dApp-structure github repo, added some basic, simple interaction from Next.js to Blockchain, and from Golang to Blockchain.

我們上一篇已經設定好docker及hardhat專案，這一篇就從NFT開始。

Generate NFT metadata

先建立一個images資料夾後，把你想要的圖片放進去，並存成1, 2, 3….之類的檔名，然後用ipfs-car指令打包在一起。

找不到圖可以先用opensea doc裡的圖當練習

接著到NFT Storage上傳images.car檔案就可以了。

農曆年前結束了一個博弈業的案子，開啟了虛擬貨幣及區塊鏈的契機。年後，整個2月都在研究區塊鏈的各種應用，NFT、opensea、solidity、hardhat、ipfs、testnet，今天這篇文章來記錄一下我用Solidity / Hardhat上架NFT的過程，以免以後金魚腦忘光。

Prerequisite: Sign-up these services.

• Etherscan (這個服務是之後用來verify contract用的，如果不想驗證可以跳過申請。)
• Metamask
• Infura
• NFTStorage

Init project

我是使用docker, docker-compose，所以先來看看我的初始專案架構及docker-compose.yml跟Dockerfile。

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12

version: '3'

services:
  hardhat:
    build:
      context: ./hardhat
      dockerfile: Dockerfile.dev
    volumes:
      - ./hardhat:/app
      - /app/node_modules
    ports:
      - 8545:8545

Previously blog I used NodeJs/Typescript as a backend and deployed with AWS Cloud Development Kit (AWS CDK). The same framework, but more complex than the sample, is used on our Firstage. So this post I will show how we structure our AWS CDK project codebase.

Project Structure

Recently I got a Trello ticket to add Facebook Pixel tracking code, and they gave me a token to use. As a frontend engineer on that project, it’s confusing to me, because the token is for Facebook Conversions API. The biggest difference between Facebook Conversions API and Facebook Pixel is Facebook conversions API is invoked on the server, and Facebook Pixel is on the client. Besides, Facebook Conversions API is to solve IOS 14 updates. Now, let me write the usage of Facebook Conversions API down.

Get Facebook Conversions API token.

這篇文章我決定用中文寫，主要原因是中文的資料太少，而且也很多不是Google Analytics 4 + Google Tag Manager (GA4+GTM) 的設定，所以我覺得用中文記錄一下，好讓大家要搜尋的可以搜得到。

在以前GA追蹤埋追蹤碼時，我們要紀錄的user_id經過規劃後會視情況放在category, action, label, value或複雜一點的custom dimensions裡，GA經過長時間的演進，再加上GTM的助攻，現在已經可以有各種變化、也有多種templates可以套用在網站及應用程式裡。

至於要怎麼做呢？首先一樣從GTM上方的管理 > 安裝 Google 代碼管理工具把追蹤程式碼塞到我們的網站上，然後回到GA4去取得評估ID。

如果你只有通用型GA分析的話，也可以從管理 > Google Analytics (分析) 4 資源設定輔助程式開啟GA4追蹤功能

Ruby on Rails (RoR) is my favorite web framework, and today I will share an AWS serverless framework of RoR: Ruby on Jets. I’m not an AWS expert and even have no AWS certifications, and besides, this is my first time to use AWS Lambda, API gateway, dynamodb, and other serverless services.

Preparation:

1. Add aws_access_key_id and aws_secret_access_key to ~/.aws/credentials
2. Docker / Docker-compose I use in this demo.

Let’s look at initial project structure: