0 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 REACTJS Công ty thực tập : TNHH Công Nghệ SumViet Người phụ trách : Nguyễn Vĩnh Khiêm Thực tập sinh : Võ Phi Nhật Duy Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy TP Hồ Chí Minh, tháng 01 năm 2021 Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy LỜI MỞ ĐẦU Hàng triệu doanh nghiệp sử dụng Internet kênh truyền thông giúp tiết kiệm chi phí Nó cho phép doanh nghiệp trao đổi thơng tin với thị trường mục tiêu thực giao dịch cách nhanh chóng, an tồn Tuy nhiên, hoạt động trở nên hiệu doanh nghiệp nắm bắt lưu trữ tất liệu cần thiết có phương tiện xử lý tồn thơng tin này, sau tiến hành trình bày kết cho người dùng Từ xuất Web app ứng dụng chạy web Thông qua web app, người dùng thực số cơng việc: tính tốn, chia sẻ hình ảnh, mua sắm … Tính tương tác web app cao website nhiều Bên cạnh đó, tập đồn lớn Google, Facebook mắt framework hỗ trợ lập trình viên xây dựng ứng dụng web ReactJS, Angular với nhiều phiên khác Cùng với xu đó, Cơng ty Cổ phần Codosa Holing , cụ thể mảng Codosa Tech chọn tập trung nghiên cứu xây dựng ứng dụng theo Framework ReactJS Và thực tập sinh trực tiếp tham gia vào trình hướng dẫn, định hướng công ty Sau ba năm học tập trường, với mong muốn có thêm kinh nghiệm thực tế, tham gia phát triển ứng dụng di động môi trường chuyên nghiệp, nên em định chọn Codosa nơi giúp em thực dự định Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy LỜI CẢM ƠN Em xin gửi lời cảm ơn đến Trường đại học Công Nghệ Thông Tin, q thầy trường tận tình dạy để bổ sung kiến thức cho em suốt thời gian theo học trường Và em xin gửi lời cảm ơn đến anh Nguyễn Vĩnh Khiêm, anh Dương Vọng, anh Trần Quốc Khánh tạo điều kiện cho em có hội thực tập công ty, tất anh giúp đỡ, bảo trình thực tập Q trình thực tập cơng ty giúp em học hỏi nhiều, từ tác phong, thái độ làm việc đến vấn đề kỹ thuật, bước hoàn thiện sản phẩm… Xin cảm ơn tất người động viên, giúp đỡ chia sẻ kinh nghiệm quý báu, giúp em có trải nghiệm tuyệt vời thời gian công ty Võ Phi Nhật Duy TP HCM, ngày 14 tháng 01 năm 2021 Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy NHẬN XÉT CỦA KHOA Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy MỤC LỤC LỜI MỞ ĐẦU .2 LỜI CẢM ƠN .3 NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty CodosaHolding Sản phẩm công ty .7 Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project 11 Lịch làm việc 11 Chương 3: Chi tiết trình thực tập .14 Giới thiệu PawnVn 14 Thực 19 TÀI LIỆU THAM KHẢO 20 TỔNG KẾT 21 Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty CodosaHolding Tên công ty: Codosa Holding Địa chỉ: 74/43/8 Đường số 20, Khu phố 1, Phường Long Thạnh Mỹ, Quận 9, TP Hồ Chí Minh Email: codosaholding@gmail.com Điện thoại: 0931 78 00 31 - 0936 04 72 39 Codosa Holding công ty cổ phần kinh doanh lĩnh vực: Codosa Tech - Cung cấp giải pháp công nghệ 4.0 phục vụ cộng đồng : Blockchain, Smart Contract, Web ( Sàn thương mại điện tử, toán điện tử, Fintech, … ), Ứng dụng di động, Sàn giao dịch Forex & Crypto, … Codosa Tech tảng chủ đạo để phát triển hệ sinh thái Codosa Holding Codosa Land - Hoạt động kinh doanh bất động sản TP Hồ Chí Minh tỉnh miền Đông Nam Bộ Codosa Auto - Dự án cổng thông tin giao dịch loại ô tô thị trường Việt Nam, bao gồm mua bán ô tô, xe máy cũ, cho thuê xe ô tô tảng công nghệ 4.0 Đội ngũ công nghệ phát triển sản phẩm ứng dụng để khai thác thị trường lớn tiềm Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy Codosa Mart - Dự án xây dựng chuỗi liên kết nhà nông cung cấp trực tiếp đến tay người tiêu dùng theo quy trình khép kín SUMVIET cơng ty startup trực thuộc công ty CODOSA HOLDING thành lâp từ năm 2017, công ty phát triển sản phẩm công nghệ: Blockchain, Smart Contract, sàn thương mại điện tử, ví điện tử, … tảng Web, Android, IOS Sản phẩm công ty Codosa Tech cung cấp sản phẩm công nghệ từ website (Thương mại điện tử, Fintech, … ), ứng dụng di động (Ví điện tử, … ) đến game, sàn trade dựa tảng Binary Option, MT4 & MT6 Platform, trade Forex, Crypto, … Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy Chương 2: Nội dung thực tập Trong tập này, em phối hợp bạn khác ( bạn back-end, bạn em làm phát triển ứng dụng web ) phát triển giai đoạn cho dự án ứng dụng web siêu thị cầm đồ hỗ trợ doanh nghiệp nhỏ siêu nhỏ có bước phát triển đột phá lĩnh vực cầm đồ ứng dụng công nghệ tìm khách hàng mục tiêu để nhanh chóng đạt hiệu kinh doanh Nhóm bắt đầu dự án với giới thiệu mơ tả sản phẩm từ phía công ty, với dẫn giúp đỡ anh chị hướng dẫn, đến thời điểm em viết báo cáo này, nhóm hồn thành module chức giai đoạn xúc tiến giai đoạn đồng thời tiếp tục hoàn thiện giai đoạn ( Chi tiết dự án mô tả phần sau giới hạn theo quy định cơng ty ) Tìm hiểu cơng ty kỹ công ty Thời gian : 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, q 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 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 thêm công ty, 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 Nghiên cứu kỹ thuật 2.1 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ố Gitlab - sử dụng làm việc nhóm, VScode - editor để xây dựng ứng dụng Thực : Thực hành sử dụng phần mềm nêu Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 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ụ 2.2 với nhau, so với việc dung IDE Tìm hiểu ngơn ngữ Typescript Thời gian : ngày (1 tuần) Nội dung : Ôn tập kiến thức javascript bản, javascript ES6 ( arrow functions, async, await, promise, … ) training kỹ thuật js nâng cao Sự khác typescript javascript, sử dụng typescript với framework Express để xây dựng phát triển server Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết : - Nâng cao kỹ lập trình với ngơn ngữ javascript Có kiến thức quan trọng cho việc lập trình game mobile sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu 2.3 Tìm hiểu RESTful API Framework ReactJs Thời gian: ngày (2 tuần) Nội dung: Các kiến thức RESTfulAPI React JS - Cơ RESTful API RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web (thiết kế Web services) để tiện cho việc quản lý resource Nó trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, liệu động…), bao gồm trạng thái tài nguyên định dạng truyền tải - qua HTTP Framework React JS React JS framework Javascript công ty công nghệ tiếng Facebook phát triển nhằm mục đích xây dựng giao diện người dùng có tính tương Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 10 tác cao, có trạng thái tái sử dụng Thư viện không hoạt động phía client mà cịn render server kết nối với Thực tập sinh lập trình di động training framework, khái niệm component lifecycle, props, state, react redux, redux-thunk, redux-saga, axios, … Thực : - Tham gia đầy đủ buổi trainning Tự đọc thêm tài liệu, nghiên cứu thêm library, luyện tập thêm cách cài đặt, sử dụng library Kết : 2.4 - Làm quen, hiểu kiến trúc thành phần React JS - Thành thạo việc cài đặt, config sử dụng thư viện cần dùng cho project Tìm hiểu Redux, redux-saga Thời gian: ngày (1 tuần) Nội dung: Các kiến thức Redux Redux-saga - Cơ Redux Redux thư viện quản lý state cho ứng dụng Javascript Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm Flux Facebook Lý để tìm hiểu redux vì: ứng Javascript ngày trở nên phức tạp việc quản lý state trở nên khó khăn nên việc áp dụng Redux state nằm “store” có lấy dễ dàng state muốn - Redux-saga Redux-saga thư viện sử dụng để xử lý side effects redux Khi bạn gọi action mà làm thay đổi state ứng dựng bạn muốn làm điều với thay đổi state Thực : Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 11 - Tham gia đầy đủ buổi trainning Tự đọc thêm tài liệu, nghiên cứu thêm library, luyện tập thêm cách cài đặt, sử dụng library Kết : - Đã cấu hình project với ReactJS, Redux, Redux-saga, Antdesign Thực project Sau tháng training, thực hành tự nghiên cứu tìm hiểu thêm React JS thực tập sinh trang bị kiến thức lập trình web, sử dụng cơng cụ hỗ trợ debug, quy tắc code dễ đọc, dễ hiểu bảo trì, cách tổ chức cấu trúc thư mục, tận dụng tái sử dụng code Thực tập sinh xếp tham gia vào 01 team để xây dựng ứng dụng công ty bắt đầu phát triển áp dụng kiến thức học để thực Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc -Tìm hiểu cơng ty, cách tổ chức cơng ty Mức độ Người hướng dẫn hoàn thành Anh Nguyễn Vĩnh 100% Khiêm Nhận xét người hướng dẫn -Tìm hiểu nội quy công ty, quy chế Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 12 thực tập sinh -Làm quen với công cụ làm việc công ty -Học cách trao đổi làm việc qua Email Zalo Slack -Học tập ôn lại kiến Anh Nguyễn Vĩnh 100% thức cũ, nắm Khiêm học -Tìm hiểu, ôn tập Javascript -Tìm hiểu RESTful Anh Trần API Khánh Quốc 100% -Cơ thiết kế sử dụng -Tìm hiểu React JS Anh Nguyễn Vĩnh 100% Khiêm -Tìm hiểu nắm bắt thơng tin dự án -Cài đặt, nghiên cứu sử dụng framework library khác reactredux, redux-thunk, redux-saga, ant-design, react-native-vector-icon, Tiến hành dự án Anh Nguyễn Vĩnh PawnVn, giai đoạn Khiêm 100% -Lên kế hoạch 6&7 -Lên ý tưởng thiết kế giao diện hình đăng ký, đăng nhập, xác thực người dùng qua sms - Thiết kế giao diện Anh Trần Khánh -Xây dựng giao diện Quốc 100% Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 13 -Xử lý kiện từ control & 10 -Gắn API vào chức -Fix bug, cải thiện performance -Tìm hiểu CI/CD, docker giúp triển khai ứng dụng liên tục Anh Trần Quốc 100% Khánh Anh Nguyễn Vĩnh 100% Khiêm - Xây dựng giao diện thông tin người dùng - Xây dựng giao diện theo cho chức mô tả Anh Nguyễn Vĩnh 100% Khiêm - Găn API vào chức 11 – trở - Phân công cơng việc cho thành viên nhóm - Tham gia vào hoạt động nghiên cứu, thi team building công ty Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 14 Chương 3: Chi tiết trình thực tập Theo quy chế thực tập sinh, trích dẫn: Điều 5: Bảo mật thơng tin Phần a.Thơng tin khách hàng: … Bảo mật thông tin khách hàng ( họ tên, địa chỉ, điện thoại, sản phẩm, doanh thu, liệu, …) Phần b.Thông tin công ty: … Đảm bảo an tồn thơng tin sản phẩm, dự án giai đoạn kế hoạch, phát triển sản phẩm chưa phép công bố Nên phần mơ tả giới hạn q trình thực tập Giới thiệu PawnVn 1.1 Giới thiệu Ứng dụng PawnVn giới thiệu ứng dụng theo mô hình P2P xem nơi trung gian khách hàng có nhu cầu cầm đồ, cho vay muốn lý sản phẩm, ý tưởng dựa sàn thương mại điện tử có Định hướng hỗ trợ doanh nghiệp đồng thời đem lại lợi ích không nhỏ cho người sử dụng 1.2 Chi tiết ứng dụng Ứng dụng xây dựng React JS, với mục đích tiết kiệm chi phí phát triển ứng dụng Các thư viện sử dụng để phát triển ứng dụng: • Redux: Thư viện giải vấn đề liên quan đến quản lý state React • Redux-saga: Thư viện sử dụng để xử lý side effects redux • React Native Vector Icon: Thư viện với hàng chục ngàn vector icons dùng cho giao diện, dễ dàng sử dụng tùy chỉnh, đặc biệt hỗ trợ tạo custom icon từ file svg, png • Ant Design: Thư viện UI với nhiều components thiết yếu Header, Button, Avatar, Image, … • React-leaflet: Cung cấp Component API làm việc với đồ Ngồi thư viện trên, q trình phát triển sử dụng gần 30 thử viện khác để thực nhiều công việc khác Tới thời điểm viết báo cáo này, ứng dụng bao gồm tính Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 15 1.3 Giao diện Một số giao diện Tính đăng nhập Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 16 Tính đăng ký Tính xác thực OTP Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 17 Tính quản lý loại phí Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 18 Tính quản lý quyền Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 19 Thực thành viên team fresher PawnVn: - Trương Viết Huy Phong - Võ Phi Nhật Duy - Chung Nguyễn Trường Duy - Trần Quốc An Và giúp đỡ tận tình team trainer Codosa Holding Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 20 TÀI LIỆU THAM KHẢO Ant Design https://ant.design/components/overview/ Typescript https://www.typescriptlang.org/ https://topdev.vn/blog/hoc-typescript-trong-30-phut/ https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-PmeRQpnyGoB Redux https://redux.js.org/recipes/configuring-your-store https://medium.com/@martin_hotell/redux-typescript-typed-actions-with-less-keystrokesd984063901d Redux-saga https://viblo.asia/p/gioi-thieu-ve-saga-trong-redux-p1-GrLZDXA2Zk0 https://redux-saga.js.org/ https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 21 TỔNG KẾT Sau tháng thực tập công ty, em học nhiều đều, không kiến thức riêng lập trình mà cịn quy chuẩn làm việc cơng ty, để biết doanh nghiệp làm việc nào, phối hợp nhân lực Hơn nữa, em tiếp thu kinh nghiệp quý báu từ anh chị đồng nghiệp, góp phần giúp em hồn thiện kiến thức, kỹ đạt số thành cơng định q trình thực tập cơng ty Về tư tưởng thân, em biết để trở thành lập trình viên, lập trình viên khác giải vấn đề, nghề nghiệp làm tương lai, định hướng nghề nghiệp Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy ... khơng nhỏ cho người sử dụng 1.2 Chi tiết ứng dụng Ứng dụng xây dựng React JS, với mục đích tiết kiệm chi phí phát triển ứng dụng Các thư viện sử dụng để phát triển ứng dụng: • Redux: Thư viện... để xây dựng ứng dụng Thực : Thực hành sử dụng phần mềm nêu Nguyễn Vĩnh Khiêm Võ Phi Nhật Duy 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ụ 2.2 với nhau, so với việc dung... Codosa Tech chọn tập trung nghiên cứu xây dựng ứng dụng theo Framework ReactJS Và thực tập sinh trực tiếp tham gia vào q trình hướng dẫn, định hướng cơng ty Sau ba năm học tập trường, với mong muốn