báo cáo thực tập doanh nghiệp front end developer

Web 3 hay còn gọi là Semantic Web, là thế hệ thứ 3 của nền tảng công nghệ internet nhằm khắc phục những nhược điểm và tối ưu hơn nữa các tiện ích với công nghệ AI, blockchain và tiến tới

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP DOANH NGHIỆP

Front-end Developer

Người phụ trách hướng dẫn 1 : Nguyễn Hữu Hạnh Người phụ trách hướng dẫn 2 : Trần Bá Mẫu Giảng viên hướng dẫn : Lê Thanh Trọng

Thành phố Hồ Chí Minh, ngày 26 tháng 12 năm 202

LỜI MỞ ĐẦU 3

LỜI CẢM ƠN 4

Lê Ngọc Minh 4

CHƯƠNG 1: GIỚI THIỆU CÔNG TY 5

1 Giới thiệu công ty thực tập 5

2 Môi trường làm việc: 5

3 Công nghệ sử dụng: 5

CHƯƠNG 2: TỔNG QUÁT QUÁ TRÌNH THỰC TẬP 6

1 Vị trí thực tập: Frontend Developer 6

2 Thời gian thực tập: 6

3 Công việc được gia: 6

4 Bảng tóm tắt công việc được giao 7

CHƯƠNG 3: CHI TIẾT CÁC DỰ ÁN VÀ KIẾN THỨC HỌC ĐƯỢC 8

1 Tram Wallet Connect: 8

a Tổng quan: 8

b Công nghệ sử dụng 9

c Những gì đã học được thông qua dự án 10

2 Esollab Landing Page 11

3 Money Map 13

4 G-club Web3 game platform 15

CHƯƠNG 4: KẾT QUẢ, KHÓ KHĂN VÀ HẠN CHẾ TRONG CÔNG VIỆC 18

Web Development là quá trình xây dựng các trang web và ứng dụng cho internet, từ các trang web tĩnh đến các nền tảng và ứng dụng truyền thông xã hội, hay từ các trang web thương mại điện tử đến hệ quản trị nội dung (CMS)

Ngày nay, web3-một thế hệ cải tiến từ web1 và web2 đã dần trở nên nổi tiếng Web 3 hay còn gọi là Semantic Web, là thế hệ thứ 3 của nền tảng công nghệ internet nhằm khắc phục những nhược điểm và tối ưu hơn nữa các tiện ích với công nghệ AI, blockchain và tiến tới Metaverse để biến internet thành hiện thực như chính cuộc sống của chúng ta

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn đến quý công ty ATOM Solution đã tạo điều kiện cho em có cơ hội được thực tập và phát triển tại công ty Trong suốt quá trình thực tập em đã học hỏi được rất nhiều điều, từ những kiến thức chuyên môn cho đến những kỹ năng mềm cần thiết trong môi trường làm việc chuyên nghiệp

Đặc biệt, em muốn gửi lời cảm ơn chân thành đến mentor của mình là anh Nguyễn Hữu Hạnh, người đã luôn bên cạnh hướng dẫn, giúp đỡ và cho em những lời khuyên trong quá trình thực tập tại ATOM Bên cạnh đó em cũng muốn gửi lời cảm ơn đến những thành viên của Design,Tester và Marketing team, những anh/chị đã giúp đỡ em rất nhiều từ ngày những đầu em đến công ty Và cũng không thể không kể đến sự hỗ trợ từ bộ phận nhân sự và bộ phận IT tại ATOM, em xin cảm ơn rất nhiều vì sự hỗ trợ tận tình mà mọi người đã dành cho em cũng như dành cho các bạn thực tập sinh khác tại ATOM

Cuối cùng, em xin cảm ơn các thầy cô tại trường Đại học Công nghệ Thông tin cũng như các thầy cô tại khoa Công nghệ phần mềm đã tận tâm giảng dạy em trong suốt những năm đại học của mình để em có thể tự tin vững bước trên con đường sự nghiệp Em cũng xin chân thành cảm ơn đến thầy Mai Xuân Hùng đã hỗ trợ nhiệt tình cho e để hoàn thiện bài báo cáo này

Sinh viên thực hiện

Lê Ngọc Minh

CHƯƠNG 1: GIỚI THIỆU CÔNG TY 1 Giới thiệu công ty thực tập

● Địa chỉ website của công ty: https://atomsolution.vn/vi/

● Địa chỉ công ty: 92M Hoàng Quốc Việt, Phú Mỹ, quận 7, Thành phố HCM ● Thời gian làm việc: Thứ 2 đến thứ 6 (9:00 đến 18:00)

● Phòng Lab Esollab: https://esollabs.com/

Là nơi nghiên cứu, phát triển những dự án, hạ tầng blockchain, công nghệ Web 3.0 cho công ty

2 Môi trường làm việc:

Môi trường làm việc của công ty rất thoải mái, thân thiện, năng động và đầy động lực Công ty được thành lập bởi chính người Việt nên văn hóa Việt Nam vẫn là chủ yếu Các cử ăn trưa được công ty hỗ trợ tiền ăn và đồ ăn xế đều được sắp xếp sẵn cho nhân viên mỗi ngày

Thời gian làm việc là từ 9h00 – 18h từ thứ 2 – 6 Thời gian làm việc của em thì em được xin phép nghỉ thứ 3 hàng tuần để lên trường

3 Công nghệ sử dụng:

CHƯƠNG 2: TỔNG QUÁT QUÁ TRÌNH THỰC TẬP

1 Vị trí thực tập: Frontend Developer 2 Thời gian thực tập:

Thời gian thực tập bắt đầu từ ngày: 08/08/2023 đến ngày: 08/11/2023

3 Công việc được gia:

Ngay khi vào ngày đầu tham gia quá trình thực tập em được anh Trần Bá Mẫu giao cho công việc tìm hiểu về ví MetaMask, cách hoạt động và quy trình kết nối Tìm hiểu về NextJS và các thư viện như Wagmi, RainBowKit,… Đây đều là những kiến thức liên quan đến Web 3.0 và đều được ứng dụng trong những dự án của công ty

Những tuần tiếp theo em được giao phát triển:

● TRAM Wallet Connect: đây là ứng dụng Dapp cho phép người dùng lưu trữ tài sản

kỹ thuật số như token, coin , ngoải ra cho phép thực hiện giao dịch Buy/Sell hoặc Swap các loại cryptocurrency

○ Nhiệm vụ được giao: Tham gia lập trình front-end cập nhật lại giao diện theo thiết kế mới nhất, xây dựng chức năng đăng nhập, đăng ký, hiện thông tin thị trường

● Esollab Landing Page: đây là một trang landing page của Esol Lab – trực thuộc Atom Solutions

○ Nhiệm vụ được giao: Tham gia xây dựng UI được thiết kế sẵn, tiến hành Responsive cho từng trang

● Atom Website: Đây là website chính của công ty Atom Solution

○ Nhiệm vụ được giao: Cập nhật lại giao diện theo Figma, sửa lỗi UI/UX lỗi logic và cập nhật nội dung

● Money Map: Đây là dự án cá nhân được bên phía công ty giao cho phụ trách Dự án

là nền tảng theo dõi các Token Meme nổi tiếng trên thị trường cryptocurrency dưới

4 Bảng tóm tắt công việc được giao

THỜI GIAN NỘI DUNG CÔNG VIỆC ĐƯỢC GIAO

TUẦN 1 - Làm quen với các công nghệ công ty đang sử dụng

- Tìm hiểu về công ty, cách tổ chức của công ty

- Làm quen với cách làm việc theo mô hình Agile của công ty

- Làm quen với các công cụ làm việc trong công ty (kênh chat trực tuyến của công ty - Telegram, Zrise, Jira của công ty)

- Code UI trang Login Register, Home cho Dapp Tram Wallet

- Cài đặt môi trường để chuẩn bị cho dự án

- Làm quen với các khái niệm và công nghệ Web3.0 để áp dụng vào dự án thực tế

TUẦN 2 - Tham gia thiết kế giao diện Website Esol Lab

- Tham gia fix bugs và cập nhật tính năng trong dự án Dapp Tram Wallet

TUẦN 3 - Tham gia fix bugs và cập nhật tính năng trong dự án Dapp Tram Wallet - Tham gia fix bugs và cập nhật tính

năng trong dự án Esol Landing Page - Tham gia dự án Money Map và một

số dự án khác

- Tham gia các buổi thuyết trình về đa chủ đề trong ứng dụng blockchain, những công nghệ làm FrontEnd mới để mọi người cùng biết tới

- Triển khai thiết kế luồng cho Money Map Website

- Triển khai UI/UX, lên ý tưởng cho dự án

- Tham gia vào quá trình quản lý dự án - Học thêm nhiều công nghệ mới

CHƯƠNG 3: CHI TIẾT CÁC DỰ ÁN VÀ KIẾN THỨC HỌC ĐƯỢC

1 Tram Wallet Connect:

a Tổng quan:

Là nền tảng Dapp Wallet chạy trên nhiều mạng lưới blockchain khác nhau như: Eth, Sui, Aptos, … Cho phép người dùng lưu trữ tài sản kỹ thuật số của họ Cho phép người dùng lưu trữ, swap, mua/bán tài sản ngay trên nền tảng extension của trình duyệt cũng như trên nền tảng điện thoại Android và IOS

b Công nghệ sử dụng

Đây là nền tảng ví điện tử được xây dựng trên nền tảng Tiện ích mở rộng (Extension) cho các trình duyệt hiện nay như Chrome, Firefox, Brave, Safari, Ứng dụng được viết bằng ngôn ngữ ReactJS kết hợp với các thư viện khác như Wagmi, Web3Modal và Redux Toolkit

● Wagmi: là tập hợp React Hook chứa mọi thứ bạn cần để bắt đầu làm việc với

Ethereum Wagmi giúp bạn dễ dàng "Kết nối Ví", hiển thị thông tin về số dư và ENS, ký tin nhắn, tương tác với hợp đồng và hơn thế nữa — tất cả đều có bộ nhớ đệm, yêu cầu chống trùng lặp và tính lưu giữ lâu dài

● Web3Modal: Đăng nhập ví đơn giản, trực quan Với SDK giao diện người

dùng thả vào này, cho phép người dùng của bất kỳ ví nào đăng nhập liền mạch vào ứng dụng của bạn và tận hưởng trải nghiệm thống nhất, mượt mà

c Những gì đã học được thông qua dự án

● Nắm được cách một extension hoạt động và các triển khai thực tế

● Nắm được các web 3.0 hoạt động, cách gọi và triển khai API vào trong ứng dụng

● Học được cách code UI cho một ứng dụng từ đầu

● Học được kỹ năng làm việc nhóm, khả năng giao tiếp với mọi người trong nhóm để cùng nhau phát triển dự án

● Quy trình phát triển phần mềm và quản lý dự án qua Jira ● Quy trình Fix Bugs

2 Esollab Landing Page

a Tổng quan:

Đây là một trang landing page của Esol Lab – trực thuộc Atom Solutions Dưới đây là một vài hình ảnh về dự án

b Công nghệ sử dụng:

● Nextjs: NextJS là một framework mã nguồn mở được xây dựng trên nền tảng của React, cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện NextJS ra đời năm 2016, thuộc sở hữu của Vercel.

NextJS không chỉ đơn giản là một framework React Nó là một môi trường phát triển mạnh mẽ, mang lại hiệu suất tuyệt vời và trải nghiệm người dùng vượt trội Bằng cách tận dụng các tính năng quan trọng này, NextJS cho phép chúng ta xây dựng các ứng dụng React một cách nhanh chóng và hiệu quả

● ReduxToolkit: Redux Toolkit (RTK) là một thư viện giúp viết Redux dễ hơn, đơn giản hơn và tốt hơn RTK giúp giảm boilerplate code và đơn giản hóa

Logic Apps của bạn RTK bao gồm các công cụ như configureStore(),

createReducer(), createAction(), và createSlice() Có thể cài đặt RTK bằng lệnh npm install @reduxjs/toolkit.

c Những gì đã học được thông qua dự án

● Học cách sử dụng thành thạo HTML, Css và Typescript ● Nắm được rõ ràng NextJS

● Nắm được cách thiết kế layout, responsive cho một trang web chuẩn SEO và đem lại hiệu năng cao

● Cách sửa lỗi liên quan đến UI/UX hiệu quả

3 Money Map

a Tổng quan:

Money Map là nền tảng có công nghệ tích hợp blockchain, cho phép những người chơi Meme Token có thể nắm bắt nhanh chóng tình hình thị trường, cung cấp cái nhìn tổng quan về nguồn cung, giá trị vốn hóa hiện tại, khả năng tăng giá của những Token đó trong tương lai

b Công nghệ sử dụng

Dự án sử dụng NextJS và Wagmi để tương tác với smart contract

c Những gì đã học được thông qua dự án

● Ứng dụng css nâng cao để triển khai cho web ● Học được cách lên ý tưởng UI/UX cho website ● Nắm được thông tin thị trường về Meme Token

● Sử dụng thư viện Chart.js để mô hình hóa dữ liệu On-chain

4 G-club Web3 game platform

a Tổng quan

Chức năng chính của web đóng vai trò là một nền tảng Gaming, đưa hàng ngàn tựa game Web2.0 lên Web3.0 một cách nhanh nhất có thể Cung cấp trải nghiệm chơi game tương lai cho người dùng

Ngoài ra trang web còn cung cấp tính năng cho phép người chơi tự tạo ra tựa game Web3.0 ưa thích nhờ vào những công cụ có sẵn, cũng như sự hỗ trợ từ AI mà bên G-Club cung cấp

b Công nghệ sử dụng:

Công nghệ chính web sử dụng là NextJS và Redux Toolkit

c Những gì đã học được thông qua dự án

● Học được cách lên kế hoạch, quản lý cho một dự án từ đầu đến cuối ● Học được cách lên ý tưởng UI/UX

● Học được kỹ năng css nâng cao, sử dụng những thư viện animation ● Triển khai được Redux để lưu những tựa games cho web

● Nắm được ngôn ngữ Typescript nâng cao

● Nắm được Websocket để triển khai tính năng mạng xã hội

CHƯƠNG 4: KẾT QUẢ, KHÓ KHĂN VÀ HẠN CHẾ TRONG CÔNG VIỆC

1 Kết quả

- Hoàn thành các nhiệm vụ được giao trong các dự án đúng hạn

- Học hỏi và tích lũy thêm nhiều kiến thức không chỉ thuộc mảng Front-end mà còn về Business Analyst, Product Design,…

- Hiểu được quy trình, nguyên tắc xây dựng phần mềm đi từ ý tưởng đến việc phân tích rồi đi vào thực hiện đưa ý tưởng thành hiện thực

- Nâng cao khả năng tư duy và kỹ năng lập trình khi tiếp cận nhiều công nghệ mới

- Nâng cao khả năng làm việc nhóm và học được cách quản lý công việc, thời gian

- Kỹ năng giao tiếp, tư duy phản biện, giải quyết vấn đề được nâng cao

trong quá trình làm thì vừa học vừa tiếp cận nên đôi khi cũng có nhiều khó khăn

- Deadline: Vì công ty vừa làm dự án product và vừa nhận outsource nên deadline rất

gắt gao Ở dự án đầu tiên, kiến thức thực tiễn còn hạn chế nên em đã trễ deadline, nhưng may mắn là được sếp cũng như là CTO thông cảm và giúp đỡ

3 Hạn chế

- Tuy cũng có cải thiện được phần nào tư duy logic, giải quyết vấn đề cũng như là UX nhưng code vẫn còn lỗi, chưa tối ưu hóa nhất hiệu năng có thể

4 Định hướng trong tương lai

- Em cảm thấy có hứng thú với Framework Nextjs nói riêng cũng như lập trình

blockchain nói chung Em sẽ trau dồi thêm kiến thức chuyên môn, đi chuyên sâu vào công nghệ để tương lai trở thành một nhà lập trình Fullstack Web3

- Đầu tư nhiều hơn vào ngoại ngữ

- Củng cố lại kiến thức ERP để có thể ứng dụng vào sản phẩm, tạo ra sản phẩm tốt nhất có thể