Báo cáo thực tập lập trình ứng dụng WEB với REACT và NODE

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 VÀ NODE Công ty thực tập : Công ty cổ phần SaveMoney Người phụ trách : Lê Xuân Hải Thực tập sinh : Nguyễn Duy Cương TP Hồ Chí Minh, tháng 07 năm 2020 LỜI MỞ ĐẦU Chúng ta biết trang web mắt vào tháng năm 1991 Tim Berners-Lee Số lượng trang web tăng lên kể từ đó, trước phát triển lên hàng triệu trang thêm trước năm 2000 Ngày nay, có 1,7 tỷ trang web toàn giới đếm (Internet Live Stats, 2020) Ngày với phát triển mạnh mẽ internet sở hạ tầng viễn thông, ngành công nghiệp “khơng khói” web khẳng định vai trị vị to lớn Nhu cầu phát triển web phục vụ cho kinh tế, thương mại, giáo dục, văn hoá, lớn, thị trường “béo bở” cho công ty, tổ chức, cá nhân ngành lập trình web.Cũng xin cảm ơn thầy khoa Bản thân người đam mê công nghệ mong muốn áp dụng công nghệ để làm cho sống tốt hơn, em luôn học hỏi, trau dồi thêm kiến thức, kỹ sống vốn công nghệ cần thiết để phục vụ nhu cầu thân Web số công nghệ em theo đuổi Em bắt đầu học lập trình web từ năm thứ ba đại học tiếp tục ngày hôm năm thứ tư Thời điểm học kỳ hai năm tư đại học, nhận thấy thời điểm thích hợp để thân học hỏi kỹ năng, kinh nghiệm làm dự án thực tế em bắt đầu lên kế hoạch thực tập doanh nghiệp Bản thân em sau nhiều ngày suy nghĩ, đắn đo định lựa chọn công ty cổ phần Save Money nơi thực tập thức thân Đây cơng ty có mơi trường trẻ, nhiệt huyết, phù hợp cho em học tập phát triển Lê Xuân Hải Nguyễn Duy Cương 22 LỜI CẢM ƠN Em xin trân trọng gửi lời cảm ơn sâu sắc đến quý Công ty cổ phần SaveMoney, anh Trần Quang Ninh - CEO công ty tạo điều kiện cho em có hội học tập trải nghiệm môi trường chuyên nghiệp công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm website 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 chúng em hồn thành đợt thực tập Đặc biệt em xin gửi lời cảm ơn đặc biệt đến anh Lê Xuân Hải - Technical Lead công ty chân thành chia sẻ cho kiến thức, kinh nghiệm công việc sống, lời khuyên bổ ích để em tiến bộ, phát triển Cuối em xin gửi lòng biết ơn đến thầy cô khoa Công nghệ Phần mềm, trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh nhiệt tình hỗ trợ, tạo điều kiện để em hồn thành tốt mơn thực tập doanh nghiệp Sinh viên thực Nguyễn Duy Cương TP Hồ Chí Minh, ngày 01/07/2020 Lê Xuân Hải Nguyễn Duy Cương 33 NHẬN XÉT CỦA KHOA ……………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… ……………………………………………….……………………………………………… Lê Xuân Hải Nguyễn Duy Cương 44 …………………………………………………………………………………………………… …………………………………………………… MỤC LỤC Lê Xuân Hải Nguyễn Duy Cương 55 Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty cổ phần SaveMoney SaveMoney công ty công nghệ bảo hiểm chuyên xây dựng tảng bảo hiểm kỹ thuật số cho ngân hàng, bệnh viện nhà mạng viễn thông dựa hợp tác chiến lược để chia sẻ lợi ích kinh tế bền vững Mục tiêu công ty phục vụ hàng triệu người Việt Nam chưa có bảo hiểm Mơ hình kinh doanh SaveMoney phát triển xây dựng dịch vụ tài tiêu dùng cá nhân cho công ty sở hữu tập liệu khách hàng lớn SaveMoney trung gian kết nối công ty sở hữu liệu với nhà cung cấp dịch vụ tài bán lẻ Ra đời vào tháng năm 2013, Savemoney mong muốn đóng góp cho tảng cơng nghệ Việt Nam, tập trung vào công nghệ AI cho phép hệ thống máy tính thực nhiệm vụ đặc biệt địi hỏi hành vi thơng minh người SaveMoney cung cấp giải pháp tảng bảo hiểm kỹ thuật số cho ứng dụng liệu lớn từ viễn thông, ngân hàng, công ty, mạng xã hội công ty siêu ứng dụng Hiện tại, triển khai thành công cho 35 triệu thuê bao vinaphone mua bảo hiểm dễ dàng cách nhắn tin điện thoại, cách bạn mua bảo hiểm giống mua dịch vụ gói 3G 4G Lê Xuân Hải Nguyễn Duy Cương 66 toán hàng tháng Sản phẩm công ty Bwinwin Agent ("BWW"): ứng dụng di động hỗ trợ kết nối thương mại Đây tảng để nhà cung cấp quảng bá sản phẩm dịch vụ họ Các nhà cung cấp sau đăng ký BWW đăng sản phẩm, dịch vụ ưu đãi họ ứng dụng BWW cung cấp sản phẩm nhiều lĩnh vực khác nhau: du lịch, tiêu dùng, sức khỏe sắc đẹp, dịch vụ tài VinaCare: mua bảo hiểm dễ dàng thông qua nhà mạng Vinaphone Lê Xuân Hải Nguyễn Duy Cương 77 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình ứng dụng web với React Node” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình web sử dụng cơng nghệ React Node, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển phần mềm chun nghiệp Tìm hiểu cơng ty quy định nhân viên Thời gian: ngày Nội dung: Giới thiệu công ty, nhân quy định nhân viên - Được người phụ trách giới thiệu công ty, trình thành lập phát triển, sản phẩm, thành đạt hướng công ty tương lai - Ngoài giới thiệu phận nhân công ty, nắm quy định nhân viên, hiểu văn hoá tham gia vào hoạt động, phong trào hàng ngày, hàng tuần công ty Kết quả: Hiểu cơng ty cổ phần SaveMoney, đồng nghiệp, văn hố mơi trường làm việc Từ dễ dàng thích nghi với môi trường để đạt suất cao công việc 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 - Lê Xuân Hải Công cụ trao đổi, giao tiếp: Slack, Telegram, Skype Nguyễn Duy Cương 88 - Công cụ quản lý dự án: Jira - Công cụ quản lý phiên phần mềm: Git, GitLab - Cơng cụ liên quan lập trình: WebStorm, DockStation, DataGrip Thực hiện: Thực hành sử dụng phần mềm nêu Kết quả: Làm quen, biết công dụng cách sử dụng công cụ phục vụ cơng việc 2.2 Tìm hiểu ngơn ngữ JavaScript Thời gian: ngày (1 tuần) Nội dung: Tìm hiểu kiến thức nâng cao JavaScript - Lập trình hướng chức (Functional Programming) - Các kiến thức DOM, Strings, Arrays, Objects, Variables, Functions, Scopes, Browser Storage, HTTP - ES6, ES7, ESNext vấn đề hạn chế JavaScript - Tìm hiểu TypeScript, npm publish package lên npm Thực hiện: - 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 quả: - Nâng cao kỹ lập trình với ngơn ngữ JavaScript - Có kiến thức quan trọng TypeScript, npm - 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 Lập trình web front-end với React Thời gian: ngày (2 tuần) Nội dung: Các kiến thức kinh nghiệm lập trình front-end với React - Lê Xuân Hải Khái niệm React, JSX, State, Props, Lifecycle Hooks, Styles Nguyễn Duy Cương 99 - Sử dụng thư viện Axios để tương tác với API - Lập trình React với TypeScript, Hooks - Sử dụng scss, less styled-components - Tìm hiểu kiến trúc Flux áp dụng Redux, Redux-Saga - Viết unit testing với Jest, Enzyme - Triển khai ứng dụng React lên server sử dụng Heroku Thực hiện: - Tham gia đầy đủ buổi training - Làm thực hành, kiểm tra kiến thức học - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết quả: 2.4 - Hiểu khái niệm lập trình front-end với React - Biết cách sử dụng Redux, Redux Saga, Jest thư viện hỗ trợ React - Nắm cách triển khai ứng dụng React với Heroku Lập trình web back-end với Node Thời gian: ngày (2 tuần) Nội dung: Sử dụng Node lập trình web back-end - Kiến thức Server, giao thức HTTP, kiến trúc backend - Sử dụng File System, Error, Hash - Tìm hiểu Express thực web theo mơ hình MVC - Sử dụng Sequelize Mongoose cho database - Viết web api sử dụng MERN stack PERN stack - Viết API testing unit testing cho ứng dụng Node Lê Xuân Hải Nguyễn Duy Cương 1010 - nhân quy định Xuân với môi trường nhân viên Hải công ty, tích Tìm hiểu cơng cụ cực việc hỏi sử dụng đáp vấn đề cịn q trình làm việc trở ngại, vướng Tìm hiểu kiến thức Anh Lê nâng cao JavaScript Xuân JavaScript Hải TypeScript Hỗ trợ 10 / 10 mắc Có kiến thức tốt tốt thành viên học tập, phát Các kiến thức kinh nghiệm Anh Lê lập trình front-end với React Xuân kỹ tốt Hải React, Redux, 3, 10 / 10 triển Có kinh nghiệm Redux-Saga Hỗ Sử dụng Node lập trình Anh Lê web back-end Xuân GraphQL Hỗ Hải trợ team 5, 10 / 10 trợ tốt người Thành thạo Node trình nghiên cứu, tìm giải pháp cơng 7, 8, Giai đoạn alpha: 10 / 10 - Lên kế hoạch Xuân vụ dự án Chủ - Tìm hiểu nghiệp vụ Hải động nêu ý kiến, - Lê Xuân Hải Anh Lê nghệ Nắm bắt tốt nghiệp chung quan điểm, giải Viết codebase cho pháp để cải thiện front-end sử dụng kết công việc, Nguyễn Duy Cương 1212 - - React, Ant Design, sản phẩm Có kiến GraphQL client thức tốt Docker, Viết codebase cho Kubernetes, hỗ trợ back-end sử dụng tốt team DevOps Node, GraphQL q trình triển server khai ứng dụng lên Tích hợp Docker cloud Kubernetes cho trường development production - Triển khai ứng dụng lên Azure - Triển khai API cho back-end 10, 11, Giai đoạn beta: 12 - - - Anh Lê 09 / 10 Làm việc hiệu Viết api unit testing cho Xuân với team Design API bên back-end QC Hỗ trợ tốt Hải Triển khai giao diện trang Product Owner web từ thiết kế Figma việc hoàn theo hình, thành tài liệu cho component dự án Viết xử lý logic cho hình, component - Kết nối API từ backend cho hình, component Lê Xuân Hải Nguyễn Duy Cương 1313 - Kết nối logic hình - Viết unit testing cho frontend - Tối ưu css image cho trang web - Build source code triển khai lên server - Fix bug bị test thất bại từ phận QC - Hoàn thành tài liệu dự án Lê Xuân Hải Nguyễn Duy Cương 1414 Chương 3: Chi tiết project Giới thiệu dự án: Tên dự án: Tích hợp kênh bán bảo hiểm ứng dụng banking ngân hàng Nam Á 1.1 Ý tưởng SaveMoney platform lớn chuyên mảng bảo hiểm kỹ thuật số, SaveMoney gateway trung gian công ty kinh doanh bảo hiểm đối tác có chiến lược phân phối bảo hiểm đến người dùng cuối Ngân hàng Nam Á mắt xích quan trọng quan việc phân phối bảo hiểm đến tay người dùng Xuất phát từ nhu cầu mua bảo hiểm cho xe máy, ô tô lớn từ người dùng, công ty cổ phần SaveMoney ngân hàng Nam Á tiến hành hợp tác để tích hợp kênh bán bảo hiểm ứng dụng banking ngân hàng nhằm đáp ứng nhu cầu mua bảo hiểm lớn người dùng 1.2 Các hình tính Vì lý liên quan đến bảo mật, bí mật kinh doanh công ty cổ phần SaveMoney ngân hàng Nam Á, sinh viên trình bày số tính cho phép từ cơng ty cổ phần SaveMoney 1.2.1 Màn hình Trang chủ Màn hình Trang chủ chứa thơng tin gói bảo hiểm, sản phẩm bảo hiểm, đối tác cung cấp sản phẩm bảo hiểm, viết quảng cáo Lê Xuân Hải Nguyễn Duy Cương 1515 1.2.2 Màn hình nhập thơng tin xe Màn hình yêu cầu khách hàng nhập thơng tin tơ như: mục đích sử dụng, thương hiệu, dòng xe, năm sản xuất, biển số, Lê Xuân Hải Nguyễn Duy Cương 1616 1.2.3 Màn hình Trả lời câu hỏi chống trục lợi Màn hình hỏi người dùng số câu hỏi nhằm chống trục lợi từ người dùng Lê Xuân Hải Nguyễn Duy Cương 1717 1.2.4 Màn hình danh sách sản phẩm so sánh Màn hình chứa thơng tin sản phẩm bảo hiểm phù hợp với người dùng kèm theo chức so sánh sản phẩm Lê Xuân Hải Nguyễn Duy Cương 1818 1.2.5 Màn hình so sánh bảo hiểm xe Màn so sánh gói sản phẩm bảo hiểm xe dựa tiêu chí giá cả, thời hạn sử dụng, lợi ích kèm theo, Lê Xuân Hải Nguyễn Duy Cương 1919 1.2.6 Màn hình đăng ký gói bảo hiểm Màn hình yêu cầu khách hàng nhập thông tin liên quan đến việc đăng ký mua sản phẩm bảo hiểm Lê Xuân Hải Nguyễn Duy Cương 2020 1.2.7 Màn hình đăng ký chủ sở hữu Màn hình yêu cầu nhập thông tin liên quan đến chủ sở hữu như: họ tên, ngày sinh, địa chỉ, CMND, Lê Xuân Hải Nguyễn Duy Cương 2121 1.2.8 Màn hình xác nhận tốn u cầu người dùng xác nhận thơng tin trước tiến hành tốn mua sản phẩm bảo hiểm Lê Xuân Hải Nguyễn Duy Cương 2222 Thực thành viên team internship: - Nguyễn Duy Cương - Nguyễn Lê Ngọc Thanh - Trịnh Xuân Đức thành viên mentor: - Anh Lê Xuân Hải Lê Xuân Hải Nguyễn Duy Cương 2323 Kế hoạch Giai đoạn alpha: - Lên kế hoạch - Tìm hiểu nghiệp vụ chung - Viết codebase cho front-end sử dụng React, Ant Design, GraphQL client - Viết codebase cho back-end sử dụng Node, GraphQL server - Tích hợp Docker Kubernetes cho trường development production - Triển khai ứng dụng lên Azure - Triển khai API cho back-end Kết quả: Hoàn thành 100% yêu cầu giao Giai đoạn beta: - Viết api unit testing cho API bên back-end - Triển khai giao diện trang web từ thiết kế Figma theo hình, component - Viết xử lý logic cho hình, component - Kết nối API từ back-end cho hình, component - Kết nối logic hình - Viết unit testing cho front-end - Tối ưu css image cho trang web - Build source code triển khai lên server - Fix bug bị test thất bại từ phận QC Kết quả: Hoàn thành 100% yêu cầu giao TÀI LIỆU THAM KHẢO https://developer.mozilla.org/en-US/docs/Web/JavaScript Lê Xuân Hải Nguyễn Duy Cương 2424 https://es6.io/ https://reactjs.org/ https://nodejs.org/en/ https://www.npmjs.com/ http://expressjs.com/ https://sequelize.org/ https://mongoosejs.com/ https://www.postgresql.org/ https://www.mongodb.com/ https://www.docker.com/ https://kubernetes.io/ https://github.com/103cuong TỔNG KẾT Như vậy, vòng khoảng thời gian ngắn 12 tuần, em trải nghiệm học hỏi nhiều kỹ năng, kiến thức quan trọng để thích ứng nhanh với cơng việc lập trình viên web tương lai Lê Xuân Hải Nguyễn Duy Cương 2525 Em xin chân thành cảm ơn anh Lê Xuân Hải bạn team internship, xin cảm ơn người giúp đỡ em hoàn thành tập Lê Xuân Hải Nguyễn Duy Cương 2626 ... 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Lập trình ứng dụng web với React Node? ?? nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình web sử dụng công nghệ React Node, đồng thời... khái niệm lập trình front-end với React - Biết cách sử dụng Redux, Redux Saga, Jest thư viện hỗ trợ React - Nắm cách triển khai ứng dụng React với Heroku Lập trình web back-end với Node Thời... thử - Biết cách áp dụng mơ hình MVC, MERN stack PERN stack vào ứng dụng web back-end Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thức JavaScript, React, Node Trong tháng thứ