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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b> BỘ GIÁO DỤC VÀ ĐÀO TẠO </b>

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

<b>BÁO CÁO THỰC TẬP DOANH NGHIỆP </b>

<b> Front-end Developer </b>

<b>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 </b>

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU ... 3 </b>

<b>LỜI CẢM ƠN ... 4 </b>

<b>Lê Ngọc Minh ... 4 </b>

<b>CHƯƠNG 1: GIỚI THIỆU CƠNG TY ... 5 </b>

<b>1. Giới thiệu cơng ty thực tập ... 5 </b>

<b>2. Môi trường làm việc: ... 5 </b>

<b>3. Công nghệ sử dụng: ... 5 </b>

<b>CHƯƠNG 2: TỔNG QUÁT QUÁ TRÌNH THỰC TẬP ... 6 </b>

<b>1. Vị trí thực tập: Frontend Developer ... 6 </b>

<b>2. Thời gian thực tập: ... 6 </b>

<b>3. Cơng việc được gia:... 6 </b>

<b>4. Bảng tóm tắt công việc được giao ... 7 </b>

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

<b>1. Tram Wallet Connect: ... 8 </b>

<b>a. Tổng quan: ... 8 </b>

<b>b. Công nghệ sử dụng ... 9 </b>

<b>c. Những gì đã học được thơng qua dự án ... 10 </b>

<b>2. Esollab Landing Page ... 11 </b>

<b>3. Money Map ... 13 </b>

<b>4. G-club Web3 game platform ... 15 </b>

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>LỜI CẢM ƠN </b>

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 q 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 để hồn thiện bài báo cáo này.

Sinh viên thực hiện

<b>Lê Ngọc Minh</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>CHƯƠNG 1: GIỚI THIỆU CƠNG TY 1. Giới thiệu cơng ty thực tập </b>

● Địa chỉ website của công ty: Địa chỉ cơng ty: 92M Hồ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:

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.

<b>2. Môi trường làm việc: </b>

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.

<b>3. Công nghệ sử dụng: </b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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

<b>1. Vị trí thực tập: Frontend Developer 2. Thời gian thực tập: </b>

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

<b>3. Công việc được gia: </b>

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:

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

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

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

○ 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.

<b>● Atom Website: Đây là website chính của cơng ty Atom Solution </b>

○ 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

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

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

<b>4. Bảng tóm tắt cơng việc được giao </b>

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

<b>TUẦN 1 </b>

- 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ế.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>TUẦN 2 </b>

- 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.

<b>TUẦN 3 </b>

- 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

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

<b>1. Tram Wallet Connect: </b>

<b>a. Tổng quan: </b>

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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>b. Công nghệ sử dụng </b>

Đâ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.

<b>● 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 </b>

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

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à.

<b>c. Những gì đã học được thông qua dự án </b>

● 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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>2. Esollab Landing Page </b>

<b>a. Tổng quan: </b>

Đâ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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>b. Công nghệ sử dụng: </b>

<b>● Nextjs: </b>

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ả.

<b>● ReduxToolkit: </b>

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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.

<b>c. Những gì đã học được thơng qua dự án </b>

● 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ả.

<b>3. Money Map </b>

<b>a. Tổng quan: </b>

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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>b. Công nghệ sử dụng </b>

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

<b>c. Những gì đã học được thơng qua dự án </b>

● Ứ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.

<b>4. G-club Web3 game platform </b>

<b>a. Tổng quan </b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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.

Ngồ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.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>b. Công nghệ sử dụng: </b>

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

<b>c. Những gì đã học được thơng qua dự án </b>

● 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

<b>CHƯƠNG 4: KẾT QUẢ, KHĨ KHĂN VÀ HẠN CHẾ TRONG CƠNG VIỆC </b>

<b>1. Kết quả </b>

- 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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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.

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

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 đỡ.

<b>3. Hạn chế </b>

- 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ể.

<b>4. Định hướng trong tương lai </b>

- 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ể.

</div>