báo cáo thực tập thực tế xây dựng web app ứng dụng blockchain

LỜI CẢM ƠN Sau thời gian thực tập tại công ty Vonic Software đã giúp em có cơ hội được học tập, học hỏi, vận dụng các kiến thức đã được học vào dự án thực tế cũng như gặt hái được những

Trang 1

KHOA CÔNG NGHỆ THÔNG TIN -

MAI TRẦN GIA HÂN

BÁO CÁO THỰC TẬP THỰC TẾ XÂY DỰNG WEB APP ỨNG DỤNG

BLOCKCHAIN

Ngành: Công nghệ thông tin

Thành phố Hồ Chí Minh – Năm 2023

Trang 2

LỜI CẢM ƠN

Sau thời gian thực tập tại công ty Vonic Software đã giúp em có cơ hội được học tập, học hỏi, vận dụng các kiến thức đã được học vào dự án thực tế cũng như gặt hái được những kinh nghiệm quý báu trong suốt quá trình nghiên cứu, áp dụng và học hỏi Đây chắc chắn sẽ là hành trang quý giá để em có thể tiếp tục nỗ lực trau dồi bản thân tự tin bước vào nghề sau này

Qua đây, em xin gửi lời cảm ơn chân thành và lòng biết ơn sâu sắc đến những thầy cô khoa Công Nghệ Thông Tin Trường Đại Học Khoa Học Tự Nhiên –

ĐHQG TP Hồ Chí Minh đã tạo điều kiện thuận lợi nhất cho chúng em trong suốt thời gian học tập tại trường và trong thời gian hoàn thành thực tập

Em cũng xin chân thành cảm ơn công ty Vonic Software đã hỗ trợ và giúp đỡ tận tình để em có thể hoàn thành quá trình thực tập của mình

Em xin trân trọng cảm ơn!

Trang 3

MỤC LỤC

I Giới thiệu đơn vị thực tập 5

II Mô tả công việc thực tập 5

III Nội dung thực tập 8

1 Lịch trình 8

2 Kiến thức đã học 10

a Các kỹ năng 10

b NextJS (cụ thể là NextJS 13) 10

c Blockchain 13

d Mantine 13

IV Kinh nghiệp của bản thân 15

V Cơ hội nghề nghiệp 15

VI Những điểm hài lòng/ không hài về việc tổ chức học phần thực tập 15

Trang 4

TÀI LIỆU THAM KHẢO

https://drive.google.com/drive/folders/1xiioAnOoh1XWXkar6An6CiYN3rPoRzd https://nextjs.org/docs

https://mantine.dev/pages/getting-started/

Trang 5

I Giới thiệu đơn vị thực tập

Công ty TNHH VONIC SOFTWARE (VONIC SOFTWARE COMPANY LIMITED) là một doanh nghiệp trong lĩnh vực blockchain, chuyên cung cấp dịch vụ outsource phần mềm và đồng hành cùng các doanh nghiệp, đặc biệt mong muốn phát triển cùng những doanh nghiệp có ý tưởng kinh doanh táo bạo Vonic luôn chủ động bắt kịp xu hướng những kỹ thuật và nền tảng công nghệ hiện đại, đặc biệt, đã có nhiều năm kinh nghiệm trong lĩnh vực công nghệ blockchain, tài chính, tiền điện tử, thương mại điện tử, giáo dục và

CRM,

Các sản phẩm của Vonic có tính ứng dụng thực tiễn cao nhờ những kinh nghiệm thiết kế UI/ UX Vonic không chỉ dừng ở việc xây dựng, thiết kế và lập trình hệ thống mà còn cung cấp giải pháp công nghệ cho khách hàng Công ty nằm ở địa chỉ 243/2/7 Chu Văn An, P.12, Q.Bình Thạnh, TP.Hồ Chí Minh

II Mô tả công việc thực tập

− Đề tài thực hiện: Xây dựng Web App ứng dụng Blockchain

− Mô tả chung về công việc:

o User Authentication

o Tích hợp Web3JS tương tác với các Smart Contract được deploy trên các chain BSCMainnet, Arbitrum,…

o Xây dựng giao diện martketplace là nơi trao đổi, mua bán các sản phẩm NFTs

o Xây dựng các module dành cho admin để quản lý các tính năng của sản phẩm

o Nghiên cứu và xây dựng Decentralized Applications (dApps)

− Vai trò: Intern Front-end Developer

− Kết quả của quá trình thực tập:

o Nghiên cứu và được ứng dụng framework mới là NextJS

o Tiếp thu được kiến thức cốt lõi về Blockchain

o Sử dụng được Metamask, kiểm tra được các giao dịch trên testnet

o Nâng cao chuyên môn về thiết kế giao diện (UX/UI) cũng như là học hỏi được cách tái sử dụng và tối ưu code

o Xây dựng các giao diện:

▪ Marketplace

Trang 6

▪ Inventory

▪ Store

▪ Launchpads

Trang 7

▪ Affiliate

▪ Admin Card Visit

Trang 8

o Integrate API:

▪ Collection

▪ List newest sales

▪ Top salers

▪ Recent activities

▪ Inventory

▪ NFT card

▪ Search bar

▪ Store tickets, NFTs

▪ Admin Card Visit

III Nội dung thực tập

1 Lịch trình

− Tuần 1:

o Công việc:

▪ Tìm hiểu về framework mới là NextJS

▪ Thuyết trình về kiến thức đã học được vào cuối tuần

o Kiến thức đã học được: nghiên cứu được các khái niệm của NextJS 13, thấy được sự khác biệt cũng như điểm mạnh, điểm yếu của nó so với NextJS 12

o Kỹ năng đã học được: tự học, giao tiếp và thuyết trình

o Môi trường làm việc: thân thiện, dễ gần

− Tuần 2:

o Công việc:

▪ Tìm hiểu về thư viện Mantine

▪ Thuyết trình về kiến thức đã học được vào cuối tuần

o Kiến thức đã học được: sự tiện lợi của Mantine và cách sử dụng

o Kỹ năng đã học được: tự học, giao tiếp và thuyết trình

− Tuần 3:

Trang 9

o Công việc:

▪ Luyện tập xây dựng giao diện cho web về phim cách nhiệt của công

ty sử dụng NextJS, Mantine (5 ngày)

▪ Được leader Front-end check code và tối ưu code (hàng ngày)

▪ Chỉnh sửa code sau khi được leader review (hàng ngày)

o Kiến thức đã học được: sử dụng frameword NextJS kết hợp với Mantine

o Kỹ năng đã học được: tự học, giao tiếp, hỏi để học hỏi

− Tuần 4:

o Công việc:

▪ Luyện tập xây dựng giao diện cho web của công ty đối tác mục đích

là đặt lịch hẹn và quản lý sử dụng NextJS, Mantine (3 ngày)

▪ Integrate API cho các giao diện (2 ngày)

o Kiến thức đã học được: sử dụng framework NextJS kết hợp với Mantine

− Tuần 5:

o Công việc:

▪ Nghiên cứu về Blockchain cụ thể là công nghệ sử dụng Web3

▪ Được train về Blockchain (2 ngày) bởi leader

o Kiến thức đã học được: các khái niệm quan trọng liên quan đến blockchain, cách sử dụng Metamask, cách kiểm tra giao dịch

o Kỹ năng: tự học, đặt câu hỏi, tư duy phản biện, hỏi để học hỏi, cải thiện, giao tiếp

− Tuần 6:

o Công việc:

▪ Bắt đầu tham gia vào xây dựng vào dự án thực tế ứng dụng Blockchain, thiết kế giao diện theo mẫu design được giao (5 ngày)

o Kiến thức đã học được: bổ sung thêm kiến thức khi thiết kế giao diện làm sao cho đẹp mắt và hợp lý

− Tuần 7:

o Công việc:

▪ Thiết kế giao diện Marketplace cho dự án thực tế ứng dụng Blockchain

▪ Integrate API cho Marketplace

Trang 10

qua Front-end

− Tuần 8:

o Công việc:

▪ Thiết kế giao diện Inventory, Store, Affiliate cho dự án thực tế ứng dụng Blockchain

▪ Thiêt kế giao diện Admin Card Visit

▪ Integrate API cho Marketplace, Store, Affiliate, Card Visit

o Kiến thức đã học được: thành thạo NextJS kết hợp Mantine hơn, học hỏi được tối ưu code sau khi được sửa Biết được cách tương tác với contract qua Front-end

− Phương thức giao tiếp trong quá trình thực tập:

o Discord riêng của công ty cho công việc, sẽ có những chain chung và riêng cho từng vị trí

o Group Zalo riêng của công ty cho các hoạt động khác

2 Kiến thức đã học

a Các kỹ năng

− Chủ yếu là cải thiện các kỹ năng của bản thân như tự học là chính, thúc đẩy những suy nghĩ sáng tạo và tư duy phản biện, thuyết trình

− Về làm việc nhóm, bản thân xác định được vai trò, luôn chủ động trau dồi và cộng tác với thành viên khác trong nhóm

− Về giao tiếp, bản thân đã chủ động làm quen để gây dựng mối quan hệ đồng thời học hỏi kinh nghiệm từ mọi người

b NextJS (cụ thể là NextJS 13)

− Là một framework dựa trên React có hỗ trợ các tools cũng như config cần thiết cho React, các cấu trúc thư mục, tính năng tối ưu hơn, giúp xây dựng các ứng dụng web tĩnh và động một cách dễ dàng và hiệu quả

− Có 3 dạng rendering trong NextJS: SSR, CRS và State Site Generation

− Trong ứng dụng React, bên client pre-rendering html trống, đợi ReactDOM kết hết với HTML DOM mới hiển thị ra UI => Trong NextJS, Pre-render mỗi page mặc định => HTML được tạo trước ở trên server thay vì đợi code Javascript bên phía client thực hiện để render ra giao diện

− Nextjs 13 giới thiệu App Router được xây dựng trên React Server Components hỗ trợ chia sẻ layouts, nesting routing, loading states, error handling,…

Trang 11

Chia sẻ layout

nesting routes

Trang 12

sử dụng loading.js

− Không giống như folder pages trong NextJS 12 sử dụng client-side routing, App Router sử dụng server-centric routing để phù hợp với Server Components và data fetching ở server

− Một số điểm khác biệt giữa NextJS 12 và NextJS 13:

o Phiên bản cũ, sử dụng Pages Router, layouts không có khả năng bố cục,

và data fetching không thể được nạp dữ liệu với component

o Phiên bản cũ, pages/document.js cho phép customize thẻ html và body cho server req bằng cách thêm những framew-spe features thay vì viết HTML elements

 NextJS 13 không cần phải import các element như <Html>,… từ NextJS nữa mà chỉ cần dùng React

o Phiên bản cũ, bạn chỉ có thể import global stylesheets từ những packages npm bên ngoài vdu như các thư viện component trong _app.js

 App router, bạn có thể import any CSS file in any component

o Phiên bản cũ, việc SSR thông qua hàm getServerSideProps có nghĩa là tương tác với ứng dụng bị block cho đến khi toàn bộ trang được tải hết (hydrated), nó không hỗ trợ React Suspense

 Với App Router, nó đã tái cấu truc để tích hợp được với React Suspense, nghĩa là có thể hydrat có chọn lọc cho các phần của trang

mà không chặn các thành phần khác trong giao diện ví dụ như khả năng tương tác, xử lý việc tải dữ liệu và hiển thị trạng thái chờ

o Ở phiên bản gốc, muốn fetch data thì dùng getInitialProps, cho phép fetch

và trả kết quả về cho props được truyền vào các Component

 Để phát trien việc nạp tìm dữ liệu API, NextJS cho ra đời getServerSideProps và getStaticProps, các API này làm rõ hơn nơi code đang chạy, client hoặc server, và cho phép ứng dụng Nextjs được automatically statically optimization

Trang 13

o Với App Router, việc fetch data sử dụng async, await Không có API nào mới, theo mặc định, tất cả các components là React Server Components,

vì vậy data fetching xảy ra an toàn ở phía server

c Blockchain

− Các kiến thức quan trọng về blockchain:

o Là sổ cái phi tập trung, có thể coi như là một database nhưng nó được phân tán ở nhiều nơi

o Wallet: chứa các crypto currencies gồm Address (công khai) và Private key

o Mnemonic: khi tạo wallet mới thì ta sẽ nhận được dãy random 12/15/18 chữ => đại diện cho private key, sử dụng chuẩn BIP39 Mnemonic

o Ethereum: chain mới mang tính bảo mật và minh bạch, môi trường cho việc xây dựng các ứng dụng phi tập trung (dApps) và các dịch vụ dựa trên blockchain => nó sdung Smart Contract

o Smart Contract: được ví như một account user, nó được lập trình và không thể sửa đổi => không cần bên thứ 3 đứng ra làm chứng nữa

o Token: một smart contract

o Coin: native token

o Web3: để các ứng dụng có thể thao tác được với blockchain vì người dùng không thể giao private key cho browser để xử lý transaction được

vì tính bảo mật, vì vậy Web3 ra đời và bản chất nó là một plugin js được nhúng vào browser (VD: Metamask – là extension trong Chrome)

▪ Provider này thường là Wallet sẽ quản lý private key và sign các transaction khi có yêu cầu

▪ App có sdung Web3 Provider sẽ đc gọi là DApp (Decentralized App)

o DeFi (Decentralized Finance): nền tảng tài chính phi tập trung, sử dụng blockchain để phi tập trung, minh bạch và phi ủy thác, điều phối lại dòng tiền, cốt lõi là các Smart Contract nên sẽ mang tính minh bạch

o Token NFT: đóng vai trò như vật phẩm trong dự án, tài sản ảo, đại diện cho quyền sở hữu của người dùng cho một vật phẩm nào đó

 Chỉ xác định quyền sở hữu của ai đó với phiên bản gốc

 Chỉ giúp lưu quyền sở hữu với một vật phẩm trong hệ sinh thái, bản thân NFT không lưu dữ liệu của vật phẩm đó

o Testnets Faucet: dùng faucets.chain.link kết nối vs metamask để lấy token

để test

o Gas: đơn vị đo, khi giao dịch sẽ tốn một phí gas nhất định => transaction càng phức tạp, phí gas càng cao

o Genesis Block: block đầu tiên trong blockchain có hash toàn là 0

o Nonce: con số để các miner tìm được mã hash của một block

o Có 2 cơ chế hoạt động trong blockchain:

▪ Chain Selection (cơ chế chuỗi)

▪ Sybil Resistance

d Mantine

Trang 14

slider,…, tối ưu hóa hiệu suất và cung cấp trải nghiệm, giúp giảm thiểu tác động đến thời gian tải trang và xây dựng giao diện một cách nhanh chóng

− Cung cấp nhiều hooks hữu ích cho việc quản lý trạng thái tương tác trong ứng dụng

− Các component trong Mantine được viết bằng Typescript và cung cấp các định nghĩa types cho chúng

Trang 15

Ví dụ sử dụng Component AppShell trong Mantine

IV Kinh nghiệm của bản thân

− Về kiến thức, em rất vui vì đã nâng cao được chuyên môn của mình cụ thể là Front-end Developer, đặc biệt là được ứng dụng một framework mới và có tiềm năng hơn trong tương lai là NextJS Đồng thời, em cũng có cơ hội được trau dồi thêm kiến thức về Blockchain mà trước đây em chưa thật sự hiểu rõ

về công nghệ này

− Về kỹ năng, em đã nắm vững việc quản lý thời gian, làm việc nhóm hiệu quả

và giao tiếp một cách dễ dàng, em cũng đã học cách lắng nghe và tương tác với đồng nghiệp, từ đó thúc đẩy sự hợp tác và đạt được mục tiêu chung một cách hiệu quả

− Về thái độ, em luôn coi mọi thách thức là cơ hội để phát triển Sự kiên nhẫn,

tự giác tìm tòi và tích cực học hỏi đã giúp em hoàn thành công việc một cách nghiêm túc Em cũng luôn cố gắng duy trì tinh thần đoàn kết và sẵn sàng hỗ trợ đồng đội

− Về môi trường làm việc, em đã học được rằng sự hỗ trợ và tương tác tích cực

từ đồng nghiệp và cấp trên có vai trò quan trọng trong việc thúc đẩy sự phát triển cá nhân Môi trường làm việc cởi mở, động lực và tôn trọng đã giúp em cảm thấy tự tin hơn trong việc đóng góp và học hỏi từ mọi người xung quanh

V Cơ hội nghề nghiệp

− Sau 2 tháng thực tập, em nhận ra em có niềm yêu thích với việc phát triển ứng dụng phần mềm, đặc biệt là những ứng dụng có những tính năng mới hay áp dụng công nghệ mới có thể cải thiện những nhu cầu của người dùng trong cuộc sống tốt hơn

− Để thực hiện mục tiêu nghề nghiệp, lấy chứng chỉ ngoại ngữ là yếu tố đầu tiên để làm nổi bật bản thân trong thời thế kinh tế suy thoái bây giờ, đồng thời em cũng sẽ tự nâng cao chuyên môn của mình qua luận văn sắp tới

Trang 16

nghiệp nhất là những doanh nghiệp chưa từng hợp tác với trường

− Em mong muốn học phần thực tập tiếp theo đừng thông qua quá nhiều bước như bây giờ

Định dạng
Số trang	16
Dung lượng	0,91 MB