BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG WEB VỚI REACT JS

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 LẬP TRÌNH ỨNG DỤNG WEB VỚI REACT JS Công ty thực tập: CỒNG TY CỔ PHẦN FADO Người phụ trách: NGUYỄN MINH TRÍ Thực tập sinh: NGUYỄN THỊ KHÁNH LY TP HỒ CHÍ MINH, THÁNG NĂM 2022 Nguyễn Thị Khánh Ly MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN Chương 1: GIỚI THIỆU CÔNG TY THỰC TẬP Chương 2: NỘI DUNG THỰC TẬP .9 Tìm hiểu công ty vấn đề buộc phải tuân thủ làm việc (2 ngày) .9 2.Tìm hiểu kỹ thuật a Các công cụ làm việc b Tìm hiểu Javascript (thời gian tuần) c Tìm hiểu reactjs 10 d Tìm hiểu blockchain .11 Lịch làm việc: 12 Chương 3: CHI TIẾT VỀ PROJECT 14 Giới thiệu dự án 14 Chương 4: TÀI LIỆU THAM KHẢO 16 Chương 5: TỔNG KẾT 17 Nguyễn Thị Khánh Ly LỜI MỞ ĐẦU React thư viện UI phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React sử dụng Facebook production, www.instagram.com viết hoàn toàn React Một điểm hấp dẫn React thư viện khơng hoạt động phía client, mà cịn render server kết nối với React so sánh thay đổi giá trị lần render với lần render trước cập nhật thay đổi DOM Sau học tập trường, trải qua nhiều đồ án tập liên quan đến web, mong muốn có thêm kinh nghiệm thực tế, muốn làm việc mơi trường chun nghiệp Vì vậy, em định chọn Fado - nơi giúp em thực dự định Nguyễn Thị Khánh Ly LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty cổ phần Fado Việt Nam tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer em tiếp thu kiến thức quan trọng để hồn thành hai project Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian, cơng sức để hướng dẫn cem hồn thành đợt thực tập Cũng xin cảm ơn thầy khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Nguyễn Thị Khánh Ly TpHCM, ngày 16 tháng 06 năm 2022 Nguyễn Thị Khánh Ly NHẬN XÉT CỦA KHOA Nguyễn Thị Khánh Ly Chương 1: GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu cơng ty Fado Fado - Nền tảng thương mại điện tử xuyên biên giới (Cross-Border ECommerce).Từ 2014 Fado tiên phong tạo giải pháp thực sứ mệnh giúp cá nhân, doanh nghiệp Việt giao thương trực tiếp với giới đơn giản qua thương mại điện tử Giúp người Việt bắt kịp xu hướng để cân với phát triển giới Việc có thiết bị vừa mắt để phục vụ cho hoạt động học tập, nghiên cứu, lao động sản xuất hay đơn giản giúp đời sống người Việt tiện nghi, hạnh phúc nhu cầu đáng kinh tế hội nhập Các sản phẩm Công ty: Trang thương mại điện tử: fado.vn Nguyễn Thị Khánh Ly Trang giao dịch mua bán token: token.fadogo.io/ Build technologies platform data science cho doanh nghiệp khác App mua sắm Fado Nguyễn Thị Khánh Ly FadoGo: fadogo.vn Nguyễn Thị Khánh Ly Chương 2: NỘI DUNG THỰC TẬP Tìm hiểu cơng ty vấn đề buộc phải tuân thủ làm việc (2 ngày) Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu cơng ty q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.Tìm hiểu kỹ thuật a Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho công việc sau Một số phần mềm số Microsoft Teams -sử dụng làm việc nhóm, FreeCommander – trình duyệt file trực quan với nhiều tiện ích, Visual Studio - chương trình soạn thảo văn hữu ích phổ biến với lập trình viên, Source Tree- GUI giúp quản lý source code Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dùng IDE b Tìm hiểu Javascript (thời gian tuần) Nội dung : Nguyễn Thị Khánh Ly 10 Javascript gì? Phân biệt HTML, CSS Javascript JavaScript để làm gì? JavaScript hoạt động nào? Các khóa học Javascript Online từ đến nâng cao: 4.1 Khóa học Javascript JavaScript for Cats: Codecademy’s Intro to JavaScript Track Fullstack Academy’s Intro to Coding 4.2 Khóa học Javascript trung cấp: Fullstack Academy Bootcamp Prep Online CoderByte Eloquent JavaScript tác giả Marijn Haverbeke 4.3 Khóa học Javascript nâng cao: Scotch.io: Egghead.io Douglas Crockford Videos c Tìm hiểu reactjs Nội dung: Giới thiệu Hooks React JS Tìm hiểu React Hook useState, useEffect, useContext React Hooks Xây dựng Hook React JS (React Custom Hook) Redux gì? Tại lại ứng dụng ReactJS Nguyễn Thị Khánh Ly 11 React Router Tích hợp Redux vào ReactJS Cách đẩy ứng dụng ReactJS lên Heroku Deploy d Tìm hiểu blockchain Nội dung: - Kiến Thức Về Blockchain + Transactions + Blocks - Smart Contract + Cách hoạt động Smart Contract + Accounts + Transactions + Gas + Storage, Memory & Stack Nguyễn Thị Khánh Ly 12 Lịch làm việc: Tuần Công Việc Người hướng dẫn Mức độ hồn thành Tìm hiểu công ty, cách tổ chức công ty Làm quen với công cụ làm việc công ty Anh Nguyễn Minh Trí 10/10 Nhận xét người hướng dẫn Nắm rõ quy định công ty Học cách trao đổi, làm việc qua email Tìm hiểu Javascript Thực hành Javascript Tìm hiểu tổng quan reactjs Thực todo list đơn giản reactjs Anh Nguyễn Cơng Danh Anh Nguyễn Minh Trí 10/10 10/10 Tìm hiểu hooks Tìm hiểu redux Tìm hiểu API cách gọi API Deploy web Anh Đồn Trần Minh Qn Anh Nguyễn Cơng Danh Anh Nguyễn Minh Trí 10/10 10/10 10/10 Hiểu rõ javascript Tìm hiểu nhanh cấu trúc tìm hiểu source code dự án Thực todo list áp dụng redux hooks Tìm hiểu nhanh gọi số API hiển thị lên giao diện Có thể tự deploy web todo demo Nguyễn Thị Khánh Ly 13 Học golang 10 Nhận task Anh Nguyễn Văn Trạch 10/10 Anh Nguyễn Minh Trí 10/10 Thực chuyển đổi grpc từ golang sang html để call API Thực xong task giao Nguyễn Thị Khánh Ly 14 Chương 3: CHI TIẾT VỀ PROJECT Giới thiệu dự án Đây dự án xây dựng giải pháp công nghệ số khoa học liệu cho doanh nghiệp phía frontend xây dựng reactjs ant design pro, backend xây dựng rush golang Các chức bao gồm: connect đến social account, tạo app, developer tool tạo API Giao diện số tính năng: - Trang chủ - Connect đến social account - Tạo app Nguyễn Thị Khánh Ly 15 - Developer tool Nguyễn Thị Khánh Ly 16 Chương 4: TÀI LIỆU THAM KHẢO Javascript: https://www.w3schools.com/js/default.ap Reactjs: https://www.w3schools.com/react/default.asp Golang: https://www.w3schools.com/go/index.php Nguyễn Thị Khánh Ly 17 Chương 5: TỔNG KẾT Như vậy, vịng tháng ngắn ngủi, nhóm kịp hoàn thành việc dựng giao diện đăng nhập cho ứng dụng Ứng dụng có đầy đủ giao diện tính (hồn thành 90% dự án) Chân thành cảm ơn giúp đỡ anh chị nhóm trainer giúp em release project đầu tiên, em học nhiều từ project để áp dụng cho project Nguyễn Thị Khánh Ly ... hiểu reactjs Nội dung: Giới thiệu Hooks React JS Tìm hiểu React Hook useState, useEffect, useContext React Hooks Xây dựng Hook React JS (React Custom Hook) Redux gì? Tại lại ứng dụng ReactJS Nguyễn... – trình duyệt file trực quan với nhiều tiện ích, Visual Studio - chương trình soạn thảo văn hữu ích phổ biến với lập trình viên, Source Tree- GUI giúp quản lý source code Thực : Thực hành sử dụng. .. Hook) Redux gì? Tại lại ứng dụng ReactJS Nguyễn Thị Khánh Ly 11 React Router Tích hợp Redux vào ReactJS Cách đẩy ứng dụng ReactJS lên Heroku Deploy d Tìm hiểu blockchain Nội dung: - Kiến Thức