báo cáo thực tập FULLSTACK NESTJS REACTJS

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 FULLSTACK NESTJS & REACTJS Công ty thực tập: Công ty cổ phần Acexis Người phụ trách: Trần Tùng Dương Thực tập sinh: Đặng Minh Tiến MSSV: 16521215 TP Hồ Chí Minh, tháng 07 năm 2020 LỜI MỞ ĐẦU Trong thời đại công nghệ số ngơn ngữ lập trình Web tảng chìa khóa hoạt động Một số ngơn ngữ lập trình web đời từ lâu, lúc đầu xây dựng website thông tin dạng văn cho cá nhân doanh nghiệp Với phát triển khoa học kỹ thuật nhu cầu ngày tăng trang web hình thành với tương tác cao Theo thời gian nhiều công nghệ xây dựng website đời gần hoàn hảo Javascript dần trở nên phổ biến, kèm với nhiều thay đởi, khiến cho mặt ngành phát triển web trở nên lung linh Javascript xuất server-side mobile app, với sức mạnh client-side vốn dĩ mạnh mẽ, tạo nên xu hướng mới, trào lưu lập trình Việc phát triển Web có bước thay đởi đáng kể vài năm qua ReactJs NestJs mã nguồn mở mạnh mẽ giúp lập trình viên tiếp cận nắm bắt ý tưởng dễ dàng phát triển website hoàn chỉnh Công ty cổ phần Acexis công ty chuyên giải pháp công nghệ thông tin ứng dụng cho lĩnh vực Tự động hóa Y tế Với mong muốn đóng góp sức mình, sử dụng kiến thức học để phục vụ sống, đóng góp cho lĩnh vực y tế Việt Nam nên em quyết định thử sức gắn bó cơng ty cở phần Acexis Đặng Minh Tiến LỜI CẢM ƠN Để hoàn thành đồ án này, trước tiên, em xin gửi lời cảm ơn chân thành đến toàn thể giảng viên Trường Đại học Cơng nghệ Thơng tin nói chung, thầy Khoa Cơng nghệ Phần mềm nói riêng tận tâm truyền đạt kiến thức, kinh nghiệm, dạy tận tình cho chúng em từ ngày đầu bước chân vào trường Đặc biệt, lời cảm ơn sâu sắc em xin gửi tới công ty cổ phần Acexis, công ty tạo điều kiện cho em thực tập tham gia vào hoạt động cơng ty để có thêm kiến thức hồn thành tốt chương trình thực tập em xin cảm ơn tới anh Trần Tùng Dương, người đồng hành em suốt tập qua Được hướng dẫn trực tiếp anh với tận tâm bảo, theo sát hỗ trợ hết lịng, gắn bó chặng đường nhỏ khoảng thời gian để giúp cho em hoàn thành tốt đồ án lần Cuối cùng, em gửi lời cảm ơn tới thầy cô, anh chị, bạn bè Khoa Cơng nghệ Phần mềm nhiệt tình hướng dẫn, góp ý thiếu sót chia sẻ kinh nghiệm, tài liệu trình làm đồ án suốt thời gian em học tập trường Đặng Minh Tiến TP HCM, ngày 25 tháng năm 2020 Đặng Minh Tiến NHẬN XÉT CỦA KHOA Đặng Minh Tiến MỤC LỤC 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 Sản phẩm công ty Chương 2: Nội dung thực tập .8 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật i Các công cụ làm việc ii Tìm hiểu javascript, html, css iii Rèn luyện tư giải thuật .9 iv Phát triển backend nestjs .10 v Sử dụng API graphql kết hợp nestjs để xây dựng ứng dụng backend với sở liệu MongoDB 11 vi Phát triển frontend reactjs thư viện hỗ trợ 11 Thực project 11 Lịch làm việc 13 Chương 3: Chi tiết project 15 Giới thiệu project 15 Thực .15 2.1 Quản lý chi nhánh 16 vii Chức quản lý đơn vị cung cấp phần cơm .17 viii Chức quản lý ăn 18 ix Chức quản lý thực đơn 18 x Chức đặt cơm 21 Kế hoạch 21 TÀI LIỆU THAM KHẢO .23 TỔNG KẾT 24 Đặng Minh Tiến Đặng Minh Tiến Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Acexis công ty tư vấn chuyển đổi phần mềm, phần cứng chuyển đổi kỹ thuật số có trụ sở thành phố Hồ Chí Minh, Đà Nẵng Nha Trang Cơng ty cở phần Acexis thành lập vào năm 2018 với tư cách nhóm chun gia, nhà tích hợp hệ thống nhà phát triển ứng dụng đa ngành, Acexis nhóm chuyên gia di động, web, liệu hệ thống nhúng với kinh nghiệm sâu rộng thị trường phát triển phần mềm kinh doanh Là đối tác đáng tin cậy cho công ty SME MNC Việt Nam Acexis công ty chuyên giải pháp công nghệ thông tin ứng dụng cho lĩnh vực Tự động hóa Y tế Sản phẩm cơng ty • Phần mềm quản lý nhà thuốc INRX: Giải pháp quản lý phân phối bán hàng cho cơng ty dược phẩm • Phần mềm MD Conference: Giải pháp họp, tổ chức hội nghị trực tuyến • Phần mềm HRM: Quản lý nhân sự, KPI, tính lương doanh nghiệp • Giải pháp nhà thơng minh • SPIROMETER & ACESPIRO APP: Giải pháp theo dõi sức khỏe, phổi bạn quản lý thông qua ứng dụng di động • Máy đo huyết áp • Máy đo độ ẩm nhiệt độ kỹ thuật số Cùng sản phẩm giải pháp khác công ty phát triển … Đặng Minh Tiến Chương 2: Nội dung thực tập Đợt thực tập nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình web fullstack dựa nestjs reactjs, đồng thời rèn luyện kỹ mềm làm việc nhóm, thú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 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 cịn giới thiệu cách thức làm việc công ty thời gian làm từ 8h30 sáng đến 18h từ thứ đến thứ 6, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết quả: Hiểu thêm cơng ty Acexis, tầm nhìn nhìn sứ mệnh phát triển cơng ty 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 i 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ẽ 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ụ sẽ giúp ích cho cơng việc sau Một số phần mềm số VSCode – IDE phở biến với lập trình viên Gitlab - công cụ Đặng Minh Tiến quản lý code Hệ điều hành ubuntu – giúp xác thực nhanh ssh key hỗ trợ tốt cho công việc Thực hiện: Thực hành sử dụng công cụ Kết quả: 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, sử dụng thành thạo gitlab hệ điều hành ubuntu ii Tìm hiểu javascript, html, css Thời gian: 10 ngày (2 tuần) Nội dung: Được training javascript, html, css bản, kiến thức quan trọng cho việc phát triển giao diện website đồng thời rèn luyện ngôn ngữ JS - Học thẻ, cấu trúc trang HTML - Biết cách sử dụng CSS để làm đẹp giao diện - Học cú pháp JS - Các kiến thức cú pháp, chức lệnh javascript Nắm cách sử dụng map, foreach, filter, sort, reduce… - Học khóa training freecodecamp - Hồn thành project 30 day vanilla js coding challenge 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 - Thực test tuần với kết 19/20đ (Sử dụng js, html, css để giải quyết toán, game ngày) 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 để bắt đầu học nestjs reactjs 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 iii Rèn luyện tư giải thuật Thời gian: 10 ngày (2 tuần) Nội dung: Sử dụng javascript để rèn luyện giải thuật kỹ code - Thực tập sinh rèn luyện giải thuật kỹ code codesignal - Sử dụng thành thạo map, foreach, filter, sort, reduce… - Áp dụng giải thuật: đồ thị, xử lý bit, regex, quay lui, cây… Đặng Minh Tiến 10 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 - Được hệ thống chấm điểm trực tuyến review người hướng dẫn trực tiếp ngày Kết quả: - Nâng cao kỹ lập trình với ngơn ngữ javascript Rèn luyện nâng cao tư giải thuật Rèn luyện kỹ vấn đáp giải thuật với người hướng dẫn iv Phát triển backend nestjs Thời gian: ngày Nội dung: Tìm hiểu sử dụng nestjs Thực hiện: - Tham gia đầy đủ buổi training công ty - Làm thực hành nestjs đơn giản để biết cách ứng dụng Kết quả: - Hiểu biết nestjs gì, triển khai đơn giản ví dụ nestjs Đặng Minh Tiến 11 v Sử dụng API graphql kết hợp nestjs để xây dựng ứng dụng backend với sở liệu MongoDB Thời gian: ngày Nội dung: - Tìm hiểu graphql biết cách triển khai graphql nestjs - Nắm ý tưởng cách sử dụng jsonwebtoken để authenticate - Hiểu tiêu chí ứng dụng sử dụng NoSQL - Biết cách sử dụng MongoDB TypeORM để hỗ trợ tốt Thực hiện: - Tham gia đầy đủ buổi training công ty - Làm thực hành CRUD theo tài liệu training công ty GraphQL Kết quả: - Hiểu graphql, so sánh mức độ tiện lợi graphql so với API restful - Biết cách biết backend nestjs sử dụng GraphQL vi Phát triển frontend reactjs thư viện hỗ trợ Thời gian: ngày (1 tuần) Nội dung: Tìm hiểu reactjs, thực hành xây dựng app CRUD đơn giản ứng dụng graphql thư viện hỗ trợ nestjs - Biết cách cài đặt dự án ReactJs - Sử dụng thư viện Ant Design - Hiểu nắm rõ vòng đời component ReactJs - Hiểu router ReactJs - Tích hợp Apolo Client, HOC reactjs để sử dụng API GraphQL - Biết sử dụng i18n để triển khai app đa ngôn ngữ - Biết cách sử dụng công cụ react tools để quản lý hiệu suất ứng dụng tốt Thực hiện: - Tham gia đầy đủ buổi training công ty Kết quả: - Đạt mục tiêu đặt - Có đủ kiến thức để tự phát triển website hoàn chỉnh Thực project Sau tháng rưỡi training từ HTML, CSS, Javascript thuần, trải qua test đánh giá khả năng, cho đến rèn luyện tư giải thuật training cơng nghệ để phục vụ công việc ReactJS, NestJs kết hợp GraphQL Đặng Minh Tiến 12 Trong khoảng thời gian lại tuần, khóa training, thực tập Sinh sẽ thực project phần mềm đặt cơm cho doanh nghiệp sử dụng cơng nghệ nói để thực Đây project cuối khóa training sát với cơng việc thực tế, thực tập sinh sẽ cung cấp tài liệu phân tích, Leader Project LunchApp (đang sử dụng thực tế công ty) theo dõi đánh giá kết thực tập sinh Toàn kết làm thực tập sinh sẽ chạy qua cypress test để kiểm tra tính đắn Chi tiết Project sẽ nói phần sau Đặng Minh Tiến 13 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, Chị Lê Hà Hồn thành cách tở chức cơng ty (Trưởng phòng tốt nhân sự) - Làm quen với công cụ làm việc công ty Anh Trần Tùng Dương - Học cách trao đởi, làm (Trưởng phịng việc qua email công nghệ) Nhận xét người hướng dẫn Nắm vững yêu cầu giao Biết cách sử dụng JS, HTML, CSS - Tìm hiểu javascript, html, css - Tiếp tục tìm hiểu Anh Trần javascript, html, css Tùng Dương Hoàn thành Hoàn thành tốt tốt project training - Hoàn thành project training - Hoàn thành test tuần 3, - Rèn luyện tư giải Anh Trần thuật codesignal Tùng Dương - Báo cáo kết ngày review sếp - Tìm hiểu nestjs Anh Trịnh graphql Chin Chin - Viết backend đơn giản sử dụng nestjs graphql Hoàn thành Hoàn thành tốt tốt problem code signal Hồn thành Học cơng nghệ tốt nhanh Nắm yêu cầu Đặng Minh Tiến 14 - Phát triển frontend Anh Trịnh reactjs thư viện hỗ Chin Chin trợ Hoàn thành Tiếp thu nhanh nắm tốt vòng đời, triển khai component Sử dụng tốt thư viện - Thực project thực Anh Trịnh tập sau kết thúc training Chin Chin Anh Trần Tùng Dương - Học Cypress Test - Phan Tuấn - Tham gia test tuyển - Mai Tiến chọn vào project Phát thức (Các nhân viên thức trước có tham gia) Hồn thành Hồn thành project tốt nhanh, kỹ đạt điểm đánh giá tốt Hoàn thành Đạt kết test tốt 15/20 (frontend +backend) xếp hạng 2/17 người tham gia Đặng Minh Tiến 15 Chương 3: Chi tiết project Giới thiệu project Phần mềm chọn project thực tập lần “Phần mềm đặt cơm LunchApp” Tại doanh nghiệp, nhu cầu phục vụ cơm trưa ngày cho nhân viên mà công ty cần biết số lượng phần cơm ăn gì, để tiến hành đặt hàng đơn vị phục vụ cơm Công ty cổ phần Acexis doanh nghiệp Với chi nhánh làm việc Đà Nẵng, Nha Trang, TP Hồ Chí Minh, phận quản lý có nhu cầu xây dựng phần mềm đặt cơm cho toàn cơng ty, dễ tính tốn, thống kê, thuận tiện làm việc với đơn vị cung cấp phần cơm Tuy nhiên mức độ phần mềm dành cho việc kiểm tra kỹ thực tập sinh Nên thực yêu cầu chức như: Quản lý chi nhánh, quản lý ăn, quản lý thực đơn, quản lý đơn vị cung cấp thức ăn, quản lý đặt cơm dành cho nhân viên (có sử dụng cơng nghệ pubsub realtime data) Thực Mỗi thực tập sinh sẽ thực đề tài gồm đầy đủ chức để dễ dàng có đánh giá phản ánh kỹ thực tập sinh tích lũy Sau hoàn thành project, sản phẩm thực tập sinh sẽ review, chấm test cypress so sánh với LunchApp thức sử dụng cơng ty Dưới kết đạt em hoàn thiện sản phẩm: Đặng Minh Tiến 16 2.1 Quản lý chi nhánh - Mô tả: Đây chức cho phép thêm, xóa, sửa xem thơng tin chi nhánh doanh nghiệp Đặng Minh Tiến 17 vii Chức quản lý đơn vị cung cấp phần cơm - Mô tả: Đây chức cho phép thêm, xóa, sửa xem thơng tin nhà cung cấp thực phẩm Ở TP Hồ Chí Minh doanh nghiệp có nhiều chi nhánh khu vực này, Chính thế chức cho phép gán nhà cung cấp với hoặc nhiều chi nhánh - Đây nội dung kiểm tra thực tập sinh xây dựng chức sử dụng mối quan hệ 1-N hay không Đặng Minh Tiến 18 viii Chức quản lý ăn - Mơ tả: Chức quản lý ăn nhà cung cấp thực phẩm ix Chức quản lý thực đơn - Mô tả: Đây chức quản lý thực đơn cho chi nhánh doanh nghiệp Đặng Minh Tiến 19 - Người quản lý chọn shop cơm cho site giới hạn khả đáp ứng số lượng tối đa ăn - Ở Cùng thời điểm, chi nhánh công khai menu - Khi người quản lý cơng khai menu, nhân viên tiến hành đặt cơm người quản lý muốn chốt số lượng phần cơm sẽ khóa menu (những người dùng khác sẽ cập nhật nữa) tiến hành xuất báo cáo để gửi sang đơn vị cung cấp (Hình ảnh: Menu cơng khai kí hiệu dấu tick) Đặng Minh Tiến 20 (Hình ảnh: Menu chưa cơng khai, điều chỉnh số lượng tối đa ăn) Đặng Minh Tiến 21 (Hình ảnh: Menu cơng khai khơng thể điều chỉnh nữa) x Chức đặt cơm - Mô tả: Đây chức đặt cơm có sử dụng kỹ thật realtime data để liệu truyền tải thời gian thực, người dùng theo dõi số lượng ăn cịn lại dễ dàng để chọn - Đây task kiểm tra kỹ thực tập sinh có nắm kỹ làm ứng dụng realtime data hay khơng Và chức có mối quan hệ N-N entity Kế hoạch Theo kế hoạch project làm khoảng tuần rưỡi, nhiên với tốc độ trung bình, em hồn thành chức vịng tuần bao gồm việc fix bug vượt qua test cypress lần chấm Dưới kết review người phụ trách project sau đánh giá tổng quan bạn thực tập sinh Đặng Minh Tiến 22 Sau hoàn thành tốt project thực tập cuối hạn đạt yêu cầu, em học thêm cypress test tham gia test tuyển chọn vào project thức cơng ty Đặng Minh Tiến 23 TÀI LIỆU THAM KHẢO ReactJS https://reactjs.org/ https://viblo.asia/p/vong-doi-cua-mot-component-trong-reactjs-3Q75wqMMZWb GraphQL https://graphql.org/learn/ https://www.howtographql.com/ NestJS https://docs.nestjs.com/graphql/quick-start https://docs.nestjs.com/fundamentals/custom-providers https://docs.nestjs.com/graphql/resolvers-map GIT https://learngitbranching.js.org/ JSON Web Token (JWT) https://codeburst.io/jwt-to-authenticate-servers-apis-c6e179aa8c4e TypeORM & MongoDB https://typeorm.io/ https://docs.mongodb.com/manual/tutorial/getting-started/ https://drive.google.com/file/d/1dVN0UnIYD3VpZ6HGfSwZM5NLeEWLdKpM/view Cypress https://docs.cypress.io/guides Đặng Minh Tiến 24 TỔNG KẾT Như vậy, vòng hai tháng, em nắm phần lớn kiến thức đủ để phát triển website hoàn thành project thực tập Đề tài project thực tập nội dung đơn giản bao phủ, kiểm tra kỹ cần thiết để đánh giá lực thực tập sinh có phù hợp với việc phát triển theo công nghệ hay không Hơn em nhận thấy, kỹ thuật realtime data hay ứng dụng nhiều sau Sau thử việc em tham gia vào team phát triển phần mềm họp trực tuyến, hội nghị, nên việc ứng dụng kiến thức realtime data tảng tốt giúp em hồn thành cơng việc giao có độ khó cao Trong q trình thực tập doanh nghiệp, anh, sếp thường xuyên review, tổ chức retro code nên em dần có đủ tự tin, để phát biểu ý kiến mà sau việc trình bày ý kiến, nêu lên vấn đề sẽ kỹ quan trọng Em nhận thấy để nhân viên xuất sắc cần có nhiều yếu tố điều mà cần tính cẩn thận, suy nghĩ sâu sắc, dám phát biểu ý kiến trung thực sẽ giúp phát triển môi trường doanh nghiệp ngày khắc nghiệt yêu cầu cao Em chân thành cảm ơn giúp anh chị, đồng nghiệp Công ty cổ phần Acexis giúp đỡ thầy cô, bạn bè trường Đại học Công nghệ Thơng tin tận tình giúp đỡ, góp ý cho em suốt thời gian thực tập doanh nghiệp Đặng Minh Tiến ... triển … Đặng Minh Tiến Chương 2: Nội dung thực tập Đợt thực tập nhằm mục đích giúp sinh viên thực tập đào tạo toàn diện lập trình web fullstack dựa nestjs reactjs, đồng thời rèn luyện kỹ mềm làm... pubsub realtime data) Thực Mỗi thực tập sinh sẽ thực đề tài gồm đầy đủ chức để dễ dàng có đánh giá phản ánh kỹ thực tập sinh tích lũy Sau hồn thành project, sản phẩm thực tập sinh sẽ review,... thực Đây project cuối khóa training sát với công việc thực tế, thực tập sinh sẽ cung cấp tài liệu phân tích, Leader Project LunchApp (đang sử dụng thực tế công ty) theo dõi đánh giá kết thực