Lập trình website với mern stack

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 WEBSITE VỚI MERN STACK Công ty thực tập : TAPTAP Người phụ trách : Lý Cẩm Hào Thực tập sinh : Nguyễn Cơng Phi TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Ngày nay, ứng dụng web hay webapp phần thiếu việc xây dựng ứng dụng, ứng dụng quản lý Với tính tiện dụng, truy cập tất thiết bị thơng thường việc sử dụng web để xây dựng phần mềm dần trở nên phổ biến Đối với em, chưa có điều kiện sở hữu thiết bị có cấu hình cao nên việc sử dụng web để học tập, giải trí việc làm thường ngày Có em sử dụng web để xem phim, lướt web, có sử dụng web để thực số công việc phức tạp photoshop, sử dụng web để dựng video Sử dụng nhiều, em tò mò cấu trúc trang web, hệ thống trang web, cách website hoạt động Những trang web gặp cố hay lỗi ảnh hưởng đến trải nghiệm, em có tìm hiểu ngun nhân ngày có niềm đam mê tìm hiểu trang web Trong mơn học kỳ trước em học môn học web, biết cách xây dựng trang web với HTML, CSS JavaScript, sau làm quen với MERN stack Do mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm web môi trường chuyên nghiệp Em có dự định tham gia thực tập cơng ty có nhu cầu Ứng tuyển vào chương trình TAPTAP TechFresher, em có hội làm việc môi trường chuyên nghiệp, nơi có anh chị ln nhiệt tình hỗ trợ, giải đáp thắc mắc, đưa lời khuyên, nhận xét, đánh giá để giúp em phát triển ngày LỜI CẢM ƠN Em xin gửi lời cảm ơn đến cơng ty TAPTAP, chương trình Tech Freshser tạo điều kiện cho em có hội thực tập cơng ty, tham gia chương trình đào tạo đầy bổ ích Trải qua tháng, nhờ dẫn nhiệt tình anh chị team Loyalty Discovery, em tiếp thu kiến thức quan trọng để tạo nên trang web, khơng chạy mà cịn phải tối ưu, bảo mật, dễ bào trì Rất cảm ơn tất người bỏ nhiều thời gian, cơng sức hướng dẫn chúng em hồn thành chương trình thực tập Đặc biệt cảm ơn anh An, đưa thử thách, từ hướng dẫn chúng em sâu, hiểu chất công nghệ Cảm ơn anh Hùng hướng dẫn em nhiều quy trình, đưa cải thiện cho em kỹ mềm Cảm ơn anh Hào giúp em giải đáp thắc mắc, xử lý nhiều lỗi code convention Cảm ơn anh Tú, Phúc giúp em review, chỉnh sửa code Cảm ơn chị Hồng hỗ trợ em giải thắc mắc frontend Cũng xin cảm ơn thầy cô 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 Công Phi TpHCM, ngày 21/12/2022 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 TAPTAP Sản phẩm công ty Chương 2: Nội dung thực tập 10 Tìm hiểu công ty kỹ công ty 10 Nghiên cứu kỹ thuật 10 2.1 HTML, CSS, Các nguyên tắc design 10 2.2 JavaScript 11 2.3 MERN Stack 12 2.4 Docker, K8S 13 Thực project 14 Lịch làm việc 14 Chương 3: Chi tiết project 16 TÀI LIỆU THAM KHẢO 23 Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty TAPTAP - TAPTAP công ty công nghệ với sản phẩm ứng dụng di động TAPTAP, có trụ sở quận 1, thành phố Hồ Chí Minh Là cơng ty product, cơng ty đổi đem đến trải nghiệm, ưu đãi ngày tốt cho người sử dụng app với việc ngày có nhiều liên kết với nhãn hàng tiếng Pepsi, Long Châu, The Pizza Company,… - TAPTAP thành lập vào năm 2020 VIG(đơn vị quản lý quỹ đầu tư doanh nghiệp hàng đầu Việt Nam) UOB(một ngân hàng lớn Đông Nam Á với giá trị tài sản 300 tỷ USD, có trụ sở Singapore) - Là công ty công nghệ Việt Nam, TAPTAP dần phát triển mạnh với số người dùng ngày khổng lồ, tính đến thời điểm có khoảng triệu người dùng với 50 nhãn hàng liên kết Sản phẩm TAPTAP ngày người biết đến rộng rãi đem lại giá trị lớn cho người sử dụng Sản phẩm công ty - Sản phẩm cơng ty ứng dụng di động TAPTAP, khả dụng Appstore Google play - TAPTAP ứng dụng di động hỗ trợ người dùng tích điểm VUI từ đổi lấy ưu đãi ăn uống, giáo dục hay giải trí qua Voucher Điểm VUI tích mua hàng cửa hàng, quét hóa đơn cửa hàng liên kết điểm tương ứng với giá trị hóa đơn - Ngồi điểm VUI cơng ty có điểm khác PEPSI coin để đổi lấy sản phẩm pepsi hay Pepsibravo coin để đổi vật phẩm kiện Pepsibravo - TAPTAP ứng dụng đại diện cho kiện lớn gần như: Pepsi Ravolution Music Festival (Sự kiện âm nhạc có trình diễn rapper hàng đầu ca sĩ tiếng), HOZO (Sự kiện bật với khinh khí cầu Thủ Thiêm trung tâm quận 1), có kiện siêu khuyến cuối năm Vạn Hạnh Mall(kéo dài đến hết năm 2022) - Nếu muốn sưu tập hay đổi vật phẩm đặc trưng TAPTAP(gối kê cổm vali, áo thun,…) đổi điểm VUI - Ngồi cơng ty cịn cung cấp web CMS để quản lý phần lõi ứng dụng phần quản lý cho bên liên quan Chương 2: Nội dung thực tập - Đợt thực tập với chủ đề “Lập trình website với MERN Stack” nhằm mục đích giúp thực tập sinh đào tạo tồn diện, hiểu sâu, hiểu kỹ cơng nghệ web Bắt đầu từ việc tìm hiểu đến nâng cao HTML, CSS JavaScript, sau tìm hiểu Web với stack công nghệ web phổ biến MERN Stack Song song với việc review hàng tuần kỹ công nghệ nghiên cứu, thực tập sinh có hội tự nghiên cứu kiến thức liên quan cải thiện kỹ mềm: kỹ giao tiếp với phận khác, kỹ demo, giải vấn đề,… để làm quen với mơi trường phát triển web chun nghiệp Tìm hiểu cơng ty kỹ công ty - Thời gian : ngày - Nội dung : o Giới thiệu công ty, cách tổ chức công ty o Được nghe trưởng phận: anh Hùng nhân sự: chị Linh giới thiệu cơng ty, q trình thành lập phát triển (như nhắc đến trên), cách tổ chức công ty, quy định công ty, cách sử dụng template slide, brand, màu liên quan văn để có đồng công ty- - Kết : Hiểu thêm cơng ty TAPTAP, q trình thành lập phát triển Có hiểu biết hình dung cách thức làm việc công ty Nghiên cứu kỹ thuật 2.1 HTML, CSS, Các nguyên tắc design - Thời gian : Tuần - Nội dung : o Tìm hiểu HTML, CSS nguyên tắc design o Tìm hiểu HTML, CSS, ngơn ngữ mà trình duyệt trực tiếp hiểu tạo thành giao diện browser 10 o Trong thời gian này, anh An đưa thử thách tìm hiểu TOTP: tìm hiểu time OTP, OTP sinh dựa theo thời gian, không cần kết nối internet tạo mã - Thực hiện: o Thực hành nghiên cứu HTML, CSS, nguyên tắc design web o Nghiên cứu TOTP o Nghiên cứu thêm vấn đề liên quan đến HTML, CSS: ▪ A11y(accessibility) ▪ Semantic HTML ▪ SEO với HTML ▪ Reset CSS, tương thích CSS trình duyệt ▪ Design rule người lập trình cần tránh ▪ … - Kết quả: Hiểu rõ cách sử dụng ngôn ngữ để tạo nên trang web, kết hợp với nguyên tắc design để tránh lỗi với lập trình web Thực hiểu cách trang web hoạt động o Code phần nghiên cứu: https://github.com/CongPhiNguyen/udemy-basic o Web demo: https://demo-udemy-phi.netlify.app/ 2.2 JavaScript - Thời gian: Tuần 2, - Nội dung: o Tìm hiểu kỹ chun sâu ngơn ngữ JavaScript o Tìm hiểu Clean Code JavaScript với tiêu chuẩn AirnB o Nghiên cứu yêu cầu để xây dựng project Album dựa MERN Stack: - ▪ Hỗ trợ việc upload ảnh, phân quyền người dùng ▪ Xem ảnh với độ phân giải cao Thực hiện: 11 o Tìm hiểu clean code JavaScript hoisting, hàm closure, type conersion, type conversion, DOM, Array hàm built-in, functional programming, OOP o Tìm hiểu advanced topic như: - ▪ Memory leak ▪ Độ phức tạp BigO hàm ▪ Tối ưu hóa web với Google V8 Engine Kết o Hiểu rõ scope, cách JavaScript quản lý nhớ o Các nội dung thêm vào từ ES7 trở o Học cách mơ hình hóa cách trực quan, xác hơn, cách giải vấn đề thông qua project album o Code nghiên cứu: https://github.com/CongPhiNguyen/udemy-basic o Webdemo: https://demo-udemy-phi.netlify.app/ 2.3 MERN Stack - Thời gian: Tuần 4, 5, - Nội dung: o Tìm hiểu stack công nghệ MERN để nên trang web o Tiếp tục nghiên cứu Project Album o Ngoài anh An có giới thiệu thêm số stack cơng nghệ: Redis, Redux Saga(Để thực Rollback), mơn hình producer – consumer(piprline, worker, queue, rabbit mq), Kafka, middleware cache, process quản lý, Docker, K8S,… - Thực hiện: o Tìm hiểu stack cơng nghệ MERN để nên trang web o MERN bao gồm ▪ M: MongoDB dạng sở liệu NoSQL đời vào năm 2007, có tính flexible với kiểu hướng tài liệu, lưu trữ liệu dạng JSON, mạnh mẽ việc lưu trữ liệu, phù hợp với ứng dụng realtime giống mạng xã hội thương mại điện thử 12 ▪ E: ExpressJS web framework xây dựng JS chạy NodeJS Nó hỗ trợ thêm nhiều tính cần có framework như: routing, middlewares, template engines, ▪ R: ReactJS thư viện JS(không phải thư viện Node) tạo Facebook Instagram Đặc trưng cho phép việc Render liệu khơng thực Server mà cịn thực Client(SSR) ▪ N: NodeJS JavaScript runtime dùng để tạo ứng dụng mạng nhanh chóng, theo hướng event-driven non-blocking IO, sử dụng built in HTTP Server framework sử dụng hosting - Kết quả: o Hiểu rõ MERN Stack, anh chị chỉnh sửa lại phần kiến thức bị hiểu sai giải thắc mắc o Qua project Album hiểu thêm vấn đề công nghệ, từ ý tưởng đến giải vấn đề từ output sản phẩm 2.4 Docker, K8S - Thời gian : Tuần 8, - Nội dung: o Được tự nghiên cứu, học hỏi công nghệ mà thân hứng thú, em chọn Docker K8S o Các anh chị hỗ trợ review kết nghiên cứu - Thực hiện: o Nghiên cứu Docker với phần chính: image, container, dockerfile, dockerhub o Build image từ ứng dụng web có sẵn o Sử dụng Docker để chạy local số ứng dụng web cần cấu hình phức tạp - Kết quả: o Những kiến thức nghiên cứu em có note lại sử dụng docusaurus để tạo document truy cập nhanh cần thiết: ▪ https://further-research.vercel.app/ 13 o Hiểu cách docker hoạt động, cách build images, run container sử dụng mục đích sau Thực project - Sau hai tháng học tập, nghiên cứu, thực tập sinh nắm kiến thức HTML, CSS, JavaScript MERN Stack Trong tháng thứ ba, bạn thực tập sinh chia làm nhóm, nhóm người thực project khác Em Lương Thiện Phước làm project tool nội tông ty - Chi tiết dự án nói phẩn sau Lịch làm việc Mức Tuần Cơng việc Người hướng dẫn độ hồn thành - Tìm hiểu cơng ty - Nghiên cứu HTML, chị Linh Nhận xét người hướng dẫn Anh Hùng, anh An CSS, nguyên tắc design 2, 4,5,6,7 - Nghiên cứu TOTP - Tìm hiểu JavaScript, Anh An, anh Hùng, Thiết kế project Album anh Hào, chị Hồng - Tìm hiểu MERN Stack Anh An, anh Hào - Xây dựng project album tham khảo 8.9 10,11,12 - Nghiên cứu tự - Docker K8S Anh An - Thực project service Anh An, anh Hào, registeration anh Hoàng 14 13,14 - Thực project Anh An, anh Hào, dashboard monitoring anh Nhựt 15 Chương 3: Chi tiết project 3.1 Project 1: Service registration - Nội dung project: o Trong công ty có nhiều service, với cấu trúc cũ, tạo service với, người tạo service phải tạo trang confluence, sau viết mơ tả service Việc đặt vấn đề tạo service tốn thời gian, khó quản lý khơng biết service có tương tác với o Từ đặt vấn đề phải có phần mềm quản lý service này, hỗ trợ việc nhập service người dùng o Dưới gợi ý anh An, nhóm em gồm em Phước thực tạo trang: form nhập service, sửa, xóa service, visualise tương tác service biểu đồ - Các tính chính: o Đăng nhập, đăng xuất, authentication o Quản lý service: - ▪ Thêm, sửa service dạng JSON dạng form ▪ Xóa service ▪ Kiểm tra phụ thuộc service ▪ Xem tất service để tiện cho việc quản lý Các hình chính: o Xem service: 16 - Thêm service 17 - Tổng kết project: o Giá trị project: ▪ Giúp việc thêm service đơn giản hơn, tiện dụng cho việc quản lý, kiểm tra phụ thuộc service o Ưu điểm: ▪ Đã thực tính cho việc nhập ▪ Kiểm tra phụ thuộc, thông báo cho người dùng người dùng thêm xóa service ▪ Tiện cho DevOps có nhìn tổng quát dự án o Nhược điểm ▪ Giao diện cịn chưa tiện dụng, cách bố trí ô nhập, nút chưa hợp lý o Những kiến thức học được: 18 ▪ Trong trình làm, em có tham gia vào q trình deploy, biết thêm kiến thức sử dụng biến môi trường bước đầu sử dụng CI CD ▪ Học cách cấu hình project hồn chỉnh để deploy với MERN Stack 3.2 Project 2: VUI Monitoring - Nội dung project: o Mỗi anh chị Product muốn xem chi tiết số điểm VUI cho hay số điểm VUI sử dụng ngày phải sử dụng BigQuery hay MongoDB để truy vấn tốn thời gian khơng xem realtime để kiểm sốt hay nắm tình hình điểm VUI cho hay sử dụng vượt ngưỡng an toàn o Do đó, em Phước gợi ý hướng dẫn anh An xây dựng nên ứng dụng giúp xem chi tiết chuyển đổi dòng tiền VUI - Các tính chính: o Xem dịng tiền VUI chuyển đổi theo ngày, tuần, tháng o Xem dòng tiền VUI chuyển đổi realtime o Lọc theo nhãn hàng, service có chuyển đổi dịng tiền o Xem chi tiết giao dịch chuyển đổi dòng tiền VUI - Các hình: o Màn hình xem chuyển đổi dịng tiền VUI: 19 o Màn hình Realtime xem trực tiếp chuyển đổi dòng tiền VUI - Xem chi tiết giao dịch - Tổng kết project: o Giá trị project: ▪ Giúp bên Product Dev nắm thơng tin dịng tiền VUI có vấn đề ▪ Trực quan kết giúp cho việc đưa vào báo cáo tiện lợi ▪ Rà soát, kiểm tra giao dịch thời điểm cụ thể 20 o Ưu điểm ▪ Xây dựng biểu đồ trực quan, tiện dụng cho việc theo dõi o Nhược điểm ▪ Phần phân chia session chưa hợp lý ▪ Có phần UI gây khó khăn cho người sử dụng o Những kiến thức học được: ▪ Sử dụng database time series ▪ Học cách cấu hình hồn chỉnh trang web có socket, chỉnh sửa base path 21 Chương 4: Tổng kết 4.1 Đánh giá chung - Như vòng tháng ngắn ngủi, nhóm hồn thành hai dự án đưa vào sử dụng nội công ty Hai project có đầy đủ tính gợi ý đề ban đầu Do chưa trải qua cơng đoạn test từ phía QC nên dự án đơi lúc có bug giao diện, tính chưa với mong muốn Em pass chương trình Tech Fresher nên thời gian tới, sản phẩm cải thiện để đem lại thêm lợi ích cho cơng ty 4.2 Ưu điểm - Trong trình tham gia thực tập với chương trình Tech Fresher, em làm quen với cách làm việc công ty, cải thiện tuần điểm hạn chế trước o Khi demo hay trình bày, em nói nhanh, anh Hùng lại cho em cách hít thở để từ phần demo hay trình bày ổn - Chăm chỉ, hồn thành cơng việc giao có nghiên cứu thêm, kỹ công nghệ - Biết cách vấn đề, đề giải pháp giải - Tốc độ code khả tiếp thu học, research tốt qua chương trình 4.3 Những điểm cần khắc phục - Độ hoàn thiện code minh họa chưa cao - Còn chưa ý đến convention, tính đắn, bảo mật testing 22 TÀI LIỆU THAM KHẢO Trang document ReactJS: https://reactjs.org/docs/getting-started.html Trang document ExpressJS: https://expressjs.com/ Trang document MongoDB: https://www.mongodb.com/docs/manual/core/document/ Clean code JavaScript: https://github.com/ryanmcdermott/clean-code-javascript Tiêu chuẩn AirnB JavaScript: https://github.com/airbnb/javascript Tiêu chuẩn AirnB ReactJS: https://github.com/airbnb/javascript/tree/master/react 23 ... dụng phần quản lý cho bên liên quan Chương 2: Nội dung thực tập - Đợt thực tập với chủ đề ? ?Lập trình website với MERN Stack? ?? nhằm mục đích giúp thực tập sinh đào tạo tồn diện, hiểu sâu, hiểu kỹ... từ việc tìm hiểu đến nâng cao HTML, CSS JavaScript, sau tìm hiểu Web với stack công nghệ web phổ biến MERN Stack Song song với việc review hàng tuần kỹ công nghệ nghiên cứu, thực tập sinh có hội... Semantic HTML ▪ SEO với HTML ▪ Reset CSS, tương thích CSS trình duyệt ▪ Design rule người lập trình cần tránh ▪ … - Kết quả: Hiểu rõ cách sử dụng ngôn ngữ để tạo nên trang web, kết hợp với nguyên tắc