Báo cáo thực tập lập trình WEB

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 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 TỐT NGHIỆP LẬP TRÌNH WEB Lớp: SE501.L11.PMCL Công ty thực tập: ITC Group Thực tập sinh: Lê Nguyễn Hồng Vũ MSSV: 17521270 TP Hồ Chí Minh, Tháng 01, Năm 2021 Lời mở đầu Ngày nay, ngành công nghiệp phát triển ứng dụng web phần thiếu ngành công nghệ thông tin nói chung cơng nghệ phần mềm nói riêng Với số lượng người dùng ngày lớn, tốc độ phát triển vô mạnh mẽ, ngành phát triển ứng dụng web nhân tố góp phần đến phát triển ngành công nghệ thông tin giới Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu xây dựng tảng web giới Bên cạnh phát triển web ngành nghề tiếp cận người dùng cách nhanh chóng ta thấy mạng xã hội hay website bán hàng trực tuyến thịnh hành giới lẫn Việt Nam Vì muốn trải nghiệm trình làm việc thực tế nên em tìm cơng ty ITC Group – cơng ty có mơi trường làm việc chuyên nghiệp, đại giúp em bổ sung thêm nhiều kiến thức để phát triển thân Em xin chân thành cảm ơn! Lê Nguyễn Hồng Vũ Lời cảm ơn Lời đầu tiên, nhóm chúng em xin bày tỏ lòng biết ơn sâu sắc đến Ban Giám Hiệu thầy cô trường Đại học Công Nghệ Thông Tin – Đại học Quốc Gia thành phố Hồ Chí Minh nói chung khoa Cơng nghệ phần mềm nói riêng tạo nên môi trường học tập tuyệt vời giúp em trau dồi thêm kiến thức đến nâng cao từ ghế nhà trường, để từ em tự tin bước vào môi trường làm việc thực tế Em xin gửi lời cảm ơn sâu sắc đến công ty ITC Group tạo điều kiện tốt giúp em có hội thực tập cơng ty tích luỹ kiến thức bổ ích Trong trình thực tập thực tế ITC Group, em học hỏi nhiều kinh nghiệm quý báu, biết cách vận dụng kiến thức học vào thực tiễn Em xin cảm ơn người hướng dẫn em anh Trương Quốc Cương anh công ty ITC Group tận tình bảo, anh truyền đạt cho em kinh nghiệm quý báu mà anh tích lũy q trình làm việc Nhờ vào bảo mà em hồn thành tốt chương trình thực tập Nhờ anh mà em hiểu môi trường làm việc thực tế, kiến thức thiếu thân, phát triển kỹ mềm cho phần tiếp cận với số cơng nghệ lĩnh vực Trong trình làm đề tài báo cáo, không tránh khỏi nhiều điều thiếu sót, mong nhận phản hồi từ thầy bạn để góp phần làm cho báo cáo thêm hoàn thiện Em xin chân thành cảm ơn! Lê Nguyễn Hoàng Vũ Nhận xét giảng viên: ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… MỤC LỤC CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1 Giới thiệu công ty TNHH ITC Group: Khách hàng đối tác: 3 Địa doanh nghiệp thông tin liên hệ: CHƯƠNG 2: NỘI DUNG THỰC TẬP Lịch làm việc công ty: Nhiệm vụ giao hướng dẫn: Nội dung khóa thực tập: Cơ sở lý thuyết công nghệ: 4.1 Tìm hiểu HTML, CSS JavaScript: 4.2 Tìm hiểu SASS: 14 4.3 Tìm hiểu Angular Angular Material: 18 4.4 Tìm hiểu RESTful API: 20 4.5: NodeJS: 21 4.6 PostgreSQL: 22 CHƯƠNG 3: CHI TIẾT CÁC CÔNG VIỆC THỰC HIỆN 24 Mini Sportyhub Project: 24 Dự án lifestyleweb cho ngân hàng: 27 2.1 Tìm hiểu ReactJS: 27 2.2 Tìm hiểu Redux Saga: 29 2.3 Quy trình thực công việc: 30 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC SAU ĐỢT THỰC TẬP 39 Kết thu được: 39 Các điểm yếu thân: 40 Cảm nhận công ty: 40 DANH MỤC TÀI LIỆU THAM KHẢO 41 CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu cơng ty TNHH ITC Group: Hình 1.1 Logo cơng ty ITC Group ITC Group, cơng ty phát triển phần mềm, đóng góp nỗ lực tốt vào thành cơng kinh doanh khách hàng Vì thay đổi khơng thể ngăn cản địi hỏi đa dạng khả thích ứng ngành công nghiệp phần mềm, ITC Group cung cấp giải pháp Sáng tạo, Công nghệ đại Tư vấn quy trình trưởng thành mang lại tăng trưởng bền vững thành công liên tiếp cho doanh nghiệp khách hàng công ty Giá trị cốt lõi tạo môi trường văn hóa làm việc hướng tới Đổi Tăng trưởng công nghệ tổ chức tương ứng để đảm bảo hiệu hài lòng khách hàng Sứ mệnh: Bất kể doanh nhân doanh nghiệp khởi nghiệp bạn lớn đến đâu, sứ mệnh ITC Group ln mang lại thành cơng hài lịng cho khách hàng cho dự án Chúng không ngần ngại học hỏi, giao tiếp cộng tác q trình làm việc Lê Nguyễn Hồng Vũ Thực tập tốt nghiệp Hình 1.2 Hình ảnh services cơng ty Hình 1.3 Hình ảnh industries cơng ty Lê Nguyễn Hồng Vũ Thực tập tốt nghiệp 2 Khách hàng đối tác: - Công ty ITC Group cung cấp dịch vụ phát triển, phân tích, tư vấn, bảo trì hỗ trợ Phát triển phần mềm, Phát triển trang web, Phát triển di động, Kiểm thử cho đối tác nước - Một số đối tác dự án ITC Group: ● Updiagram: Công cụ quản lý dự án để trực quan hóa đơn giản hóa quy trình quản lý dự án ● GiveTour: Hỗ trợ cộng đồng quản lý giải đấu thể thao ● Geronimo: Nền tảng hỗ trợ tổ chức phi lợi nhuận gây quỹ ● Loyaty: Phần mềm quản lý giao dịch cho ngân hàng Hình 1.3 Hình ảnh dự án công ty thực Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 3 Địa doanh nghiệp thông tin liên hệ: - Địa chỉ: ● Trụ sở chính:  55/21 Phan Đình Phùng, Tân Thành, Tân Phú, Thành phố Hồ Chí Minh, Việt Nam ● Trụ sở khác:  4323 Infinity Ln, Lorain, Oh 44053, United States  Unit 3/84-86 Albert Road, Strathfield, Sydney, NSW 2135, Australia  28 Rue des Longues Raies, 57070 Metz, France  218 Cresthaven Road Brampton Ontario L7A 1G5, Canada - Thông tin liên hệ:  Website: https://itcgroup.io/  Mail: sales@itcgroup.xyz career@itcgroup.xyz  Facebook: https://www.facebook.com/itcgroupio  Linkedin: https://www.linkedin.com/company/itcgroupio  Twitter: https://twitter.com/itcgroupio Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp CHƯƠNG 2: NỘI DUNG THỰC TẬP Lịch làm việc công ty: - Thời gian thực tập: từ ngày 17/02/2020 đến ngày 30/6/2020, làm việc thứ 2, thứ 4, thứ 5, thứ 7, ngày làm việc theo lịch làm việc công ty  Sáng: 9h30 – 12h  Chiều: 13h – 17h30 Riêng thứ làm việc tiếng, buổi chiều kết thúc lúc 16h - Mỗi ngày gửi báo cáo Daily Report cho anh Trương Quốc Cương công việc làm ngày, khó khăn gặp phải, hướng khắc phục - Mỗi thứ thứ gửi Weekly Report cho anh Trương Quốc Cương cc cho phòng nhân Ban giám đốc kết q trình làm việc tuần, khó khăn, hướng giải - Thông thường vào trưa lúc 11h thứ có buổi chia sẻ kiến thức nhiều lĩnh vực nhân viên công ty thực - Dự án thực tế tham gia: LifestyleWeb Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp  Mô tả chi tiết: - Là project nhỏ củng cố, vận dụng lại kiến thức tìm hiểu giúp cơng ty có đánh giá chung lực thực tập sinh - Frontend xây dựng Angular, backend xây dựng Express server, quản lý sở liệu postgreSQL dùng bookshelf để kết nối backend với sở liệu - Thời gian hoàn thành : ngày - Đánh giá mentor : hoàn thành tốt Dự án lifestyleweb cho ngân hàng: Dự án lifestyle web dành cho khách hàng dùng sử dụng tài khoản để xem ưu đãi quà tặng để đổi điểm sử dụng quà tặng ưu đãi mà ngân hàng dành cho 2.1 Tìm hiểu ReactJS:  Giới thiệu React Native: - ReactJS thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) phát triển Facebook mắt năm 2013 React đời với mục đích hỗ trợ xây dựng giao diện cách đơn giản dễ tái sử dụng Vì thành phần giao diện người dùng tổ chức thành Component reuse component Ngồi cịn Props State hai khái niệm React dùng để truyền liệu quản lý biến Component Nó cho tốc độ phản hồi tuyệt vời user nhập liệu cách sử dụng phương pháp để render trang web  Ưu điểm ReactJS: - Hỗ trợ JSX (Javascript XML) dạng cú pháp mở rộng giúp code nhanh dễ sử dụng Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 27 - Hỗ trợ Component giúp chia nhỏ cấu trúc UI/UX phức tạp thành component đơn giản dễ tái sử dụng DOM ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn, hỗ trợ tốt cho việc - cấu trúc UI phản ứng kịp thời với trước thay đổi nhằm tăng trải nghiệm người dùng Thân thiện với SEO: React cho phép bạn tạo giao diện người dùng - truy cập cơng cụ tìm kiếm khác Tính lợi lớn SEO  Nhược điểm ReactJS: - Các giải pháp hoàn chỉnh yêu cầu thư viện bên thứ ba - Tính khả dụng tùy chọn gây nhầm lẫn - Reactjs phục vụ cho tầng View - Tích hợp ReactJS vào framework MVC truyền thống yêu cầu cần phải cấu hình lại  Kiến thức ReactJS: - Component ReactJS: Component thuật ngữ nên định nghĩa rõ Chúng ta hiểu đoạn code phân chia thành Component không lệ thuộc lẫn tái sử dụng cần thiết - Props ReactJS: Props từ viết tắt properties Props truyền từ component cha cho component giúp component giao tiếp với Cũng có trường hợp component có props mặc định props không truyền từ components cha Giá trị props bất biến vòng đời cua component Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 28 - State ReactJS: Props khơng thể thay đổi giá trị state thay đổi giá trị vịng đời component Vì ta dùng state để theo dõi thay đổi thông tin component Khi giá trị state thay đổi ReactJS re-render tồn component 2.2 Tìm hiểu Redux Saga:  Giới thiệu Redux Saga: - Redux-Saga thư viện redux middleware, giúp quản lý side effect ứng dụng redux trở nên đơn giản Bằng việc sử dụng tối đa tính Generators (function*) ES6, cho phép ta viết async code nhìn giống synchronos  Cách thức hoạt động Redux Saga: Hình ảnh 3.6 Cách thức hoạt động Redux Saga Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 29 - Redux saga cung cấp hàm helper effect, hàm trả effect object chứa đựng thông tin đặc biệt dẫn middeware Redux thực tiếp hành động khác Các hàm helper effect thực thi generator function Quy trình thực cơng việc: 2.3  Quy trình nhận cơng việc, thực hồn thành: - Bước 1: Mỗi đầu tuần có buổi họp (Sprint planning), quản lý dự án nhận xét giao nhiệm vụ cho thành viên, nhiệm vụ quản lý phần mềm Updiagram Hình ảnh 3.7 Cơng cụ quản lý dự án - Bước 2: Sau nhận công việc, thành viên team tự xem xét lại, chỗ không rõ phải hỏi lại quản lý dự án Trong trình thực nhiệm vụ, thành viên trao đổi thơng qua phần mềm Rocket chat Lê Nguyễn Hồng Vũ Thực tập tốt nghiệp 30 Hình ảnh 3.8 Công cụ chat - Bước 3: Sau hồn thành nhiệm vụ, code deploy, lập trình viên phải lên Updiagram cập nhật lại trạng thái ticket Testing để QA test Đến cuối tuần, thành viên phải gửi báo cáo ngắn làm tuần cho quản lý dự án, mentor thơng qua phần mềm Zoho mail Hình ảnh 3.9 Cơng cụ email dùng để liên lạc Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 31  Quy trình thực chi tiết cơng việc: - Bước 1: Lên trang quản lý dự án chuyển trạng thái ticket tử “New” sang “Doing” Hình ảnh 3.10 Danh sách tasks trạng thái task - Bước 2: Bắt đầu code Thực requirement đề deadline - Bước 3: sau code xong, kiểm tra chức chạy đúng, tiến hàng đưa code lên gitlab tạo merge request để có anh lead team review, lên Updiagram chuyển trạng thái từ “Doing” sang “Reviewing” Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 32 Hình ảnh 3.11 Hình ảnh MR gitlab - Bước 4: Sau nhận feedback từ anh mentor review, tiếp tục chỉnh sửa để code chuẩn merge vào, sau kiểm tra code build thành cơng chưa, thành cơng lên Updiagram chuyển trạng thái “Reviewing” sang “Testing” Giao diện mẫu sau hoàn thành Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 33 2.4 - Chi tiết công việc thực dự án thực tế: Các feature thực hiện:  Màn hình “ưu đãi cho bạn”: danh sách ưu đãi cho tài khoản đăng nhập Khách hàng xem ưu đãi theo danh sách theo đồ Tìm kiếm ưu đãi theo sản phẩm, dịch vụ, tỉnh thành Hình ảnh 3.11 Danh sách “ưu đãi cho bạn” chế độ danh sách Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 34 Hình ảnh 3.12 Danh sách “ưu đãi cho bạn” chế độ đồ  Màn hình “chi tiết ưu đãi”: Sau chọn ưu đãi danh sách ưu đãi, khách hàng xem thơng tin chi tiết ưu đãi áp dụng đâu, cho loại thẻ nàovà ưu đãi liên quan Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 35 Hình ảnh 3.13 Chi tiết ưu đãi Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 36  Màn hình “Đăng ký sản phẩm”: Giúp khách hàng biết thêm thơng tin ứng với nhu cầu từ lựa chọn phù hợp để xem chi tiết thơng tin Hình ảnh 3.14 Đăng ký sản phẩm Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 37  Màn hình “Q tặng tơi”: Cho phép xem thông tin quà tặng khách hàng theo loại Hình ảnh 3.15 Q tặng tơi Lê Nguyễn Hồng Vũ Thực tập tốt nghiệp 38 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC SAU ĐỢT THỰC TẬP Kết thu được: Sử dụng thành thạo công cụ Visual Studio Code, PgAdmin, Git - Học ngôn ngữ, framework mới: Angular, ReactJS, NestJS, ExpressJs, Swagger, RxJS, Akita State - Nâng cao kĩ giao tiếp, làm việc nhóm, khả xử lí vấn đề, cách search từ khóa Có trách nhiệm trong công việc giao - Hoàn thành nhiệm vụ giao  Trải nghiệm quy trình làm việc từ đầu đến cuối dự án thực tế theo mơ hình làm việc Agile  Trau dồi nhiều kiến thức Front-end, Back-End, kỹ mềm  Thao tác lập trình, tư duy, ý tưởng xử lý luồng liệu tầng tăng hiệu  Hiểu nguyên tắc xây dựng phần mềm từ ý tưởng đến việc phân tích đưa ý tưởng thành thực  Nâng cao kỹ làm việc nhóm, "teamwork" khơng hồn thành cơng việc mà cịn phải để tâm đến đồng đội mình, nhìn nhận quan điểm chung, mục tiêu chung để hoàn thành dự án cách tối ưu  Kỹ giao tiếp, tư phản biện, giải vấn đề nâng cao Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 39 Các điểm yếu thân: - Nhiều lúc chưa hoàn thành thời hạn cơng việc giao - Suy nghĩ cịn hạn chế, chưa có kinh nghiệm - Vẫn cịn rụt rè giao tiếp - Teamwork chưa tốt Cảm nhận công ty: - Môi trường làm việc chuyên nghiệp, động - Cơ sở vật chất tốt, phòng rộng rãi, thoáng mát, thoải mái, - Mọi người cơng ty hịa đồng nhiệt tình dạy - Đội ngũ phụ trách hướng dẫn cho sinh viên thực tập vơ tận tâm nhiệt tình, trình độ chun mơn cao, hịa đồng, vui vẻ Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp 40 DANH MỤC TÀI LIỆU THAM KHẢO [1] https://stackoverflow.com/ [2] https://vi.wikipedia.org/wiki/ [3] https://luis-goncalves.com/what-is-scrum-methodology/ [4] https://git-scm.com/ [5] https://www.typescriptlang.org/ [6] https://swagger.io/ [7] https://nodejs.org/ [8] https://nestjs.com/ [9] https://reactjs.org/ [10] https://www.postgresql.org/ [11] https://angular.io/ [12] https://material.angular.io/ [13] https://sass-lang.com/ [14] https://rocket.chat/ [15] https://www.updiagram.com/ [16] Tài liệu nội cơng ty ITC Group Lê Nguyễn Hồng Vũ Thực tập tốt nghiệp 41 ... giúp em có hội thực tập cơng ty tích luỹ kiến thức bổ ích Trong q trình thực tập thực tế ITC Group, em học hỏi nhiều kinh nghiệm quý báu, biết cách vận dụng kiến thức học vào thực tiễn Em xin... Twitter: https://twitter.com/itcgroupio Lê Nguyễn Hoàng Vũ Thực tập tốt nghiệp CHƯƠNG 2: NỘI DUNG THỰC TẬP Lịch làm việc công ty: - Thời gian thực tập: từ ngày 17/02/2020 đến ngày 30/6/2020, làm việc... cận với số công nghệ lĩnh vực Trong q trình làm đề tài báo cáo, khơng tránh khỏi nhiều điều thiếu sót, mong nhận phản hồi từ thầy bạn để góp phần làm cho báo cáo thêm hoàn thiện Em xin chân thành