Tài liệu Lập trình web với nodejs và reactjs (báo cáo thực tập)

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 WEB VỚI NODEJS VÀ REACTJS Công ty thực tập : Hitek Group JSC Người phụ trách : Trịnh Minh Tuấn Thực tập sinh : Trần Hậu Đạt TP. Hồ Chí Minh, tháng 12 năm 2021 LỜI MỞ ĐẦU Ngày nay, CNTT đã và đang đóng vai trò quan trọng trong đời sống kinh tế, xã hội của nhiều quốc gia trên thế giới, là một phần không thể thiếu trong một nền kinh tế trí thức năng động, ngày càng hiện đại hoá. Vì vậy, việc số hóa và hiện đại hóa một số lĩnh vực rất cần thiết sự phát triển của ngành Công nghệ thông tin đi theo Ngôn ngữ lập trình JavaScript giúp chúng ta phát triển những ứng dụng đặc thù để giải quyết các vấn đề của xã hội, doanh nghiệp từ đó nâng cao năng suất làm việc hoặc nâng cao chất lượng đời sống xã hội Bên cạnh đó, việc sử dụng ngôn ngữ lập trình JavaScript còn làm tăng hiệu năng của phần mềm, giúp máy chủ xử lý được nhiều tác vụ hơn với cùng một khối tài nguyên đó Sau ba năm học trên trường, em đã có đủ kiến thức lý thuyết và muốn có kinh nghiệm thực tế hơn nên đã vào môi trường Hitek Group chuyên nghiệp để tìm hiểu thêm về cách một môi trường chuyên nghiệp, năng động phát triển phần mềm, cung cấp giải pháp cho các vấn đề xã hội, doanh nghiệp trong và ngoài nước. 1 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Hitek đã tạo điều kiện cho em có cơ hội được thực tập tại công ty. Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh trainer, em đã tiếp thu được những nhiều kiến thức, học hỏi nhiều kỹ năng, góp phần vào việc phát triển sản phẩm cho công ty. Chân thành cảm ơn các anh chị trainer đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này. Đặc biệt cảm ơn anh Trịnh Minh Tuấn, trainer chính đã hướng dẫn, giúp đỡ cho em tận tình tìm hiểu công nghệ Nodejs, ReactJs và giúp em thích nghi với môi trường mới. Cuối cùng, em xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này. Trần Hậu Đạt Tp.HCM, 12/2021 2 NHẬN XÉT CỦA KHOA 3 Mục lục LỜI MỞ ĐẦU 1 LỜI CẢM ƠN 2 Chương 1: Giới thiệu công ty thực tập 5 1. Giới thiệu công ty 5 2. Các dịch vụ của công ty 6 Chương 2: Nội dung thực tập 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 2. Nghiên cứu kỹ thuật 3. 8 8 8 2.1 Quy trình 8 2.2 Tìm hiểu cơ bản về frontend 8 2.3 Tìm hiểu về ReactJs 9 2.4 Tìm hiểu NodeJs và Express framework 9 2.5 Tìm hiểu về Sequelize ORM 9 2.6 Tìm hiểu về Jest 10 2.7 Tìm hiểu sơ lược về Nginx 10 2.8 Thực hiện project 10 Lịch làm việc 11 Chương 3: Chi tiết project 13 1. Thông tin 13 2. Công nghệ sử dụng 13 TỔNG KẾT 14 TÀI LIỆU THAM KHẢO 15 4 Chương 1: Giới thiệu công ty thực tập 1. Giới thiệu công ty Hitek Group thành lập năm 2017. Kể từ khi bắt đầu cuộc hành trình từ năm 2017, giá trị cốt lõi của công ty vẫn được giữ nguyên không bao giờ thay đổi: Đẳng cấp, Định hướng khách hàng, Bảo mật tối đa, Làm việc bằng Tâm huyết và Đam mê. Chúng tôi mang đến cho khách hàng những giải pháp tuyệt vời phù hợp với nhu cầu, ngân sách và thời gian của họ. Năm 2017, Hitek được thành lập chỉ với 5 kỹ sư phần mềm, làm việc tự do, tập trung vào phát triển web và ứng dụng di động cho thị trường Việt Nam. Năm 2018, lần đầu nhận được hợp đồng gia công phần mềm cho thị trường Hàn Quốc, Hitek đã thay đổi chiến lược kinh doanh mở rộng sang thị trường nước ngoài. Năm 2019-2020, chúng tôi tiếp tục phát triển công nghệ tại Hàn Quốc. Gần 90% các dự án đến từ thị trường này. Năm 2021, Hitek cung cấp các dịch vụ gia công phần mềm và cung cấp phần mềm cho các khách hàng đến từ Mỹ, Canada, Đức, Hàn Quốc. 5 2. Các dịch vụ của công ty  Dịch vụ xây dưng offshore center: Được tích lũy kinh nghiệm từ các dự án xây dựng offshore center với các khách hàng từ khắp nơi trên thế giới, Hitek tự tin rằng chúng tôi là một trong số ít những nhà cung cấp dịch vụ xây dựng offshore center phù hợp và hiện đại nhất.  Dịch vụ custom phần mềm: Là một công ty phát triển phần mềm custom hàng đầu Việt Nam, chúng tôi đã hoàn thành xuất sắc hàng trăm dự án cho các khách hàng trên toàn thế giới. Thành lập từ năm 2017, Hitek luôn áp dụng các phương pháp mới một cách thuần thục.  Dịch vụ outsourcing theo dự án: Đã và đang có nhiều cơ hội thực hiện những dự án Outsourcing cho các quốc gia phát triển trên thế giới như Mỹ, Canada, Hàn Quốc,... chúng tôi tự tin rằng Hitek có đủ kinh nghiệm để xử lý những dự án phức tạp nhất.  Dịch vụ phát triển phần mềm dài hạn: Phát triển phần mềm dài hạn là một quá trình xây dựng phức tạp, bởi không phải ai cũng được đào tạo bài bản và có kiến thức chuyên sâu để tự mình xử lý các dự án phát triển phần mềm dài hạn.  Dịch vụ phát triển web: Với hơn 5 năm kinh nghiệm trong nghề, chúng tôi rất thành thạo trong việc phát triển web tùy chỉnh sử dụng .NET, NodeJS, Java, PHP và các công nghệ front-end hiện đại khác (Angular, ReactJS, Jquery, HTML5, CSS3… ), Hitek rất hân hạnh đồng hành cùng bạn trong các dự án phát triển website  Dịch vụ migrate Server: Trong số các dịch vụ, ý tưởng công nghệ hỗ trợ doanh nghiệp, dịch vụ Cloud Migration - từ các nhà cung cấp chính như Amazon Web Service (AWS), Microsoft Azure - có lẽ là yếu tố thúc đẩy khách hàng TIN TƯỞNG và LỰA CHỌN Hitek.  Dịch vụ phát triển mobile app: Luôn đặt chất lượng lên hàng đầu, Hitek sở hữu đội ngũ trẻ, năng động, sáng tạo. Với hơn 30 lập trình viên có kỹ thuật cao, chúng tôi đã hoàn thành xuất sắc hơn 100 dự án trong vòng 5 năm. 6  Dịch vụ kiểm thử phần mềm: Là một trong những công ty phát triển phần mềm tại Việt Nam, Hitek vượt trội trong việc xây dựng trải nghiệm web và thiết bị di động cho khách hàng trên toàn thế giới. 7 Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình Web với Nodejs và ReactJs” nhằm mục đích giúp sinh viên thực tập học tập, làm quen với các công nghệ để làm web application, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp. Tại công ty, sinh viên có cơ hội được học tập công nghệ như NodeJs, ReactJs. Ngoài ra, thực tập sinh được trực tiếp hướng dẫn bởi anh mentor giàu kinh nghiệm. Bên cạnh đó, sinh viên được khám phá và làm việc trong một môi trường phát triển phần mềm chuyên nghiệp, tích lũy những kiến thức giá trị. 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian : 1 buổi Nội dung : Giới thiệu về công ty, cách tổ chức, chính sách của công ty Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty . Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc… Kết quả : Hiểu thêm về công ty Hitek, quá trình thành lập và phát triển. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2. Nghiên cứu kỹ thuật 2.1 Quy trình và công cụ Thời gian : 1 buổi Nội dung : Tìm hiểu về các công cụ và quy trình sẽ được sử dụng trong quá trình làm việc: - Các quy trình phát triển phần mềm - Công cụ sử dụng trong làm việc - Cài đặt môi trường Thực hiện : Tìm hiểu quy trình và sử dụng các phần mềm đã nêu trên. 2.2 Tìm hiểu cơ bản về frontend 8 Thời gian : 7 ngày Nội dung : Tìm hiểu về HTML, CSS, JavaScript và TypeScript - Tìm hiểu về HTML - Tìm hiểu về CSS - Tìm hiểu về JavaScript - Tìm hiểu về TypeScript - Tìm hiểu về Webpack Thực hiện: - Tìm hiều tổng quan về Frontend programming (như trên). - Học và làm các bài tập để kiểm tra lại kiến thức đã học Kết quả: Hiểu và hoàn thành bài kiểm tra đánh giá. 2.3 Tìm hiểu về ReactJs Thời gian : 7 ngày Nội dung : Tìm hiểu về ReactJs - Tìm hiểu JSX - Tìm hiểu props và state - Tìm hiểu React lifecycle - Tìm hiểu React routing - Tìm hiểu React Hooks Thực hiện: - Học và làm các bài tập để kiểm tra lại kiến thức đã học Kết quả: Hiểu và hoàn thành các bài tập. 2.4 Tìm hiểu NodeJs và Express framework Thời gian : 5 ngày Nội dung : Tìm hiểu về framework Express - Tìm hiểu express framework Thực hiện: - Học và làm các bài kiểm tra đánh giá. Kết quả: Hiểu và hoàn thành bài kiểm tra đánh giá. 2.5 Tìm hiểu về Sequelize ORM Thời gian : 7 ngày 9 Nội dung : Tìm hiểu về Sequelize ORM Thực hiện: Tìm hiểu về các vấn đề: - Setup - Sequelize CLI - Association - Migration - Query Kết quả: Sử dụng được thư viện cơ bản và đáp ứng được yêu cầu của anh Mentor 2.6 Tìm hiểu về Jest Thời gian : 2 ngày Nội dung : Tìm hiểu về việc viết Unit Test với Jest - Unit Testing với Jest - Thực hành Thực hiện: Học theo khóa học và hoàn thành bài kiểm tra của người hướng dẫn. Kết quả: Nắm các kiến thức căn bản về Unit test và hoàn thành bài kiểm tra. 2.7 Tìm hiểu sơ lược về Nginx Thời gian : 2 ngày Nội dung : Tìm hiểu về Nginx - Khái niệm - Cơ bản về Nginx - Thực hành 2.8 Thực hiện project Thời gian : 2 tháng Nội dung : Áp dụng các kiến thực đã học vào làm project - Đọc hiểu yêu cầu - Design Database - Frontend ReactJS - Backend API(NodeJs + Sequelize) Database (PostgreSQL) Unit test 10 - AWS + gitlab source control Thực hiện: Làm project và báo cáo kết quả cho anh Tuấn Kết quả: Nắm các kiến thức của module trước và áp dụng vào project 3. Lịch làm việc Tuần 1 1 1, 2 3 Công việc - Tìm hiểu về công ty, cách tổ chức của công ty. - Tìm hiểu quy trình phát triển phần mềm. - Setup môi trường Tìm hiểu về Frontend:  Tìm hiểu về HTML  Tìm hiểu về CSS  Tìm hiểu về Javascript  Tìm hiểu về TypeScript  Tìm hiểu về webpack Tìm hiểu về ReactJs:  Tìm hiểu về JSX  Tìm hiểu props, state  Tìm hiểu về lifecycle  Tìm hiểu về routing  Tìm hiểu về React Hooks Tìm hiểu về NodeJs và Express  Tìm hiểu Express  Tìm hiểu mô hình MVC  Tìm hiểu Json Web Token Người hướng dẫn Hoàn thành Đánh giá Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt 11 3+4 4 4-8 8-13 Tìm hiểu về Sequelize ORM  Sequelize CLI  Model  Association  Migration  Query Thực hiện Unit Test và Nginx  Đọc tài liệu đặc tả yêu cầu.  Unit Testing với Jest  Tìm hiểu về Nginx Thực hiện Project backend  Đọc tài liệu đặc tả yêu cầu.  Thiết kế CSDL  Đọc tài liệu chi tiết thiết kế API  Coding Convention  Code chức năng dùng NodeJs và TypeScript  Viết Unit Test cho chức năng  Dùng postman test API  Deploy server lên AWS server Thực hiện Project frontend  Đọc tài liệu thiết kế  Coding Convention  Code giao diện sử dụng ReactJs  Test  Deploy Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt Anh Trịnh Minh Tuấn 100% Hoàn thành tốt 12 Chương 3: Chi tiết project 1. Thông tin Ứng dụng về xe (Thông tin về bảo dưỡng các thiết bị trên xe + Ghi lại thông đường đi qua GPS và chia sẻ lịch trình, ảnh trên đường đi) 2. Công nghệ sử dụng Mobile: Flutter Backend: NodeJs Frontend: ReactJs Database: PostgreSQL Do chính sách của công ty nên chi tiết thông tin về project không được trình bày. 13 TỔNG KẾT Như vậy, chỉ trong vòng hơn ba tháng ngắn ngủi, em đã được học hỏi và trải nghiệm được nhiều thứ bổ ích. Công ty đã giúp em học được các công nghệ mới và các công cụ trong ngành hiện này như Nodejs, ReactJs, Gitlab,.. biết tổ chức làm việc nhóm, giao tiếp trao đổi và giúp đỡ mọi người trong công việc, có được khả năng làm việc chuyên nghiệp với đồng đội và độc lập. Bên cạnh đó, em còn học được cách giao tiếp chuyên nghiệp với các đối tác, các sếp và kinh nghiệm xử lý tình huống bất ngờ khi gặp lỗi. Những điều này sẽ là kiến thức và kinh nghiệm quý báu đề làm hành trang trên con đường sự nghiệp của em. Chân thành cảm ơn sự giúp đỡ của các anh chị trong dự án và đặc biệt là anh Trịnh Minh Tuấn đã nhiệt tình giúp đỡ em hoàn thành kỳ thực tập này. Đặc biệt, em sâu sắc cảm ơn quý thầy cô khoa Công nghệ Phần mềm đã dạy bảo, cung cấp cho em những kiến thức nền tảng để có thể tham gia khóa thực tập của công ty. 14 TÀI LIỆU THAM KHẢO NodeJS: https://nodejs.org/api/ TypeScript: https://www.typescriptlang.org/ ReactJs: https://reactjs.org/ Sequelize ORM: https://sequelize.org HTML+CSS+JS: https://www.w3schools.com/ 15