มาลองสร้าง dApp ด้วย Web3.js แบบง่ายๆกันเถอะ ตอนที่ 1

สำหรับ Blog นี้ เราก็จะสร้าง dApp ด้วย Web3.js แบบง่ายๆ พร้อมทั้งลองเขียน Smart Contract ฉบับ Beginnerไปด้วยกัน ซึ่งเราจะมาลองทำเกี่ยวกับเว็บไซต์ข่าวสารกัน โดยตอนแรกนี้ เราจะมาขึ้นโครงหน้าตาของตัวเว็บไซต์กันก่อนโดยใช้ React และ Tailwindcss นะครับ

หน้าตาคร่าวๆของเว็บไซต์ข่าวสารของเรา

โดยเว็บไซต์ข่าวสารที่เราจะสร้างก็สามารถเพิ่มลบแก้ไขข่าวสารและสามารถโดเนทให้ผู้ที่เขียนข่าวสารที่เราชื่นชอบหรือถูกใจได้แบบง่ายๆ งั้นเรามาลุยกันเลยครับ

ขั้นตอนแรกเราต้องสร้างโปรเจ็คโดยใช้คำสั่ง

npx create-react-app first-my-dapp-web3

หลังจากนั้น เราก็จะได้โปรเจ็คที่เป็น React ขึ้นมา จากนั้นเราก็จะลองรันโดยคำสั่ง

cd first-my-dapp-web3
npm start #หรือ yarn start

เมื่อรันแล้ว หน้าเว็บเราจะเปิดให้อัตโนมัติ หรือ http://localhost:3000 หน้าตาเว็บเราก็จะได้ประมาณนี้แบบนี้

http://localhost:3000

จากนั้นเราต้องลง Tailwindcss และไฟล์ tailwind.config.js โดยใช้คำสั่ง

npm install -D tailwindcss
npx tailwindcss init

จากนั้นเปิดไฟล์ tailwind.config.js จากนั้นแก้ไข content: []เป็น

content: ["./src/**/*.{html,js}"]

และไฟล์ src/index.css ให้เพิ่ม @tailwind ดังต่อไปนี้ถัดจากบรรทัดสุดท้าย

@tailwind base;
@tailwind components;
@tailwind utilities;

หลังจากนี้เรามาลุยสร้างหน้าตาของเว็บเรากันดีกว่าครับ

ก่อนอื่นเราจะสร้าง Navbar โดยจะเก็บไว้ที่ src/components/Navbar.js

ต่อด้วย Form ที่เอาไว้กรอกข้อมูล src/components/Form.js

ต่อด้วยส่วนแสดงรายการข่าวทั้งหมด src/components/NewsList.js

และสุดท้ายเป็น Modal ที่เอาไว้แสดงข้อมูลข่าว src/components/Modal.js

จากนั้นจะทำทุกส่วนมาประกอบร่างกันที่ src/App.js และขอ import useState, useEffect มารอไว้ก่อน

เมื่อประกอบร่างเสร็จ เราก็จะได้หน้าตาเว็บของเราประมาณนี้

หน้าตาคร่าวๆของเว็บไซต์ข่าวสารของเรา (โดย Comment <Modal /> เอาไว้ก่อน)

หน้าตาคร่าวๆของเว็บไซต์ข่าวสารของเราเมื่อกดอ่านเพิ่มเติม

ในตอนแรกนี้เราก็ได้สร้างโปรเจคด้วย React พร้อมกับลง Tailwindcss เพิ่มแล้วนำมาทำออกแบบโครงสร้างของเว็บไซต์ข่าวหลักๆเสร็จแล้ว ซึ่งตอนแรกนี้ขอจบไว้เพียงเท่านี้ก่อน เดียวตอนถัดไปเราจะมาลอง Connect Wallet ด้วย Metamask แล้วลองใช้ Event Listener ต่างๆกัน

สุดท้ายนี้ก็ขอขอบคุณทุกคนที่หลงเข้ามาอ่านถึงตรงนี้นะครับ