báo cáo thực tập xây dựng ứng dụng WEB FULL STACK với JAVASCRIPT

ĐẠI HỌC QUỐC QIA TP 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 XÂY DỰNG ỨNG DỤNG WEB FULL STACK VỚI JAVASCRIPT Công ty thực tập: Cơng ty Cổ phần giải trí 100 độ (100DO JSC) Người phụ trách: Hồ Văn Trọng Thực tập sinh: Nguyễn Tiến Dũng MSSV: 16520259 Tp Hồ Chí Minh, ngày 05 tháng 10 năm 2019 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Cơng ty Cổ phần giải trí 100 độ tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh chị nhóm training cơng ty, em tiếp thu kiến thức quan trọng để tự tin tham gia vào q trình phát triển ứng dụng web full stack với JavaScript Em xin chân thành cảm ơn anh chị nhóm training dành nhiều thời gian, công sức để hướng dẫn em cách tận tình đợt thực tập vừa qua Đặc biệt, em xin chân thành cảm ơn anh Hồ Văn Trọng luôn đồng hành trực tiếp cung cấp cho em kiến thức quan trọng trình phát triển sản phẩm thực tế, hướng dẫn, giúp đỡ tận tình lúc em gặp khó khăn q trình thực tập cơng ty Em xin gửi lời cảm ơn chân thành đến quý 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 tận tình dạy, trang bị cho em kiến thức kỹ cần thiết suốt trình tham gia học tập trường Vì lần em tiếp xúc với môi trường làm việc thực tế doanh nghiệp nên báo cáo thực tập doanh nghiệp em chắn tránh khỏi thiếu sót Em mong nhận ý kiến góp ý q thầy (cơ) để báo cáo em hoàn thiện Một lần em xin chân thành cảm ơn! Thành phố Hồ Chí Minh, ngày 05 tháng 10 năm 2019 Sinh viên thực Nguyễn Tiến Dũng Trang NHẬN XÉT CỦA KHOA ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Trang MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC CHƯƠNG GIỚI THIỆU VỀ CÔNG TY 1.1 Đôi nét công ty 1.2 Đội ngũ lãnh đạo, sở vật chất, nguồn nhân lực .5 1.3 Môi trường làm việc 1.4 Quy trình tuyển tuyển dụng .6 1.5 Các vị trí tuyển dụng hội nghề nghiệp công ty CHƯƠNG QUÁ TRÌNH THỰC TẬP 3.1 Tìm hiểu cơng ty, cách thức tổ chức quy định công ty .7 3.2 Nghiên cứu kỹ thuật 3.2.1 Giai đoạn 1: Làm quen với công cụ làm việc, framework công ty 3.2.2 Giai đoạn 2: Tham gia phát triển ứng dụng web iNews .9 3.3 Lịch làm việc 12 CHƯƠNG CHI TIẾT DỰ ÁN 15 3.1 Giới thiệu ứng dụng web iNews 15 3.1.1 Giới thiệu chung 15 3.1.2 Một số hình ảnh ứng dụng 15 3.2 Thực 21 3.3 Nội dung công việc 22 3.4 Kết đạt 22 CHƯƠNG TỔNG KẾT 23 4.1 Đối với thân 23 4.1.1 Những thuận lợi trình thực tập 23 4.1.2 Những khó khăn q trình thực tập 23 4.1.3 Một số kinh nghiệm đúc kết 23 4.2 Đối với công ty 24 4.3 Định hướng tương lai 24 CHƯƠNG TÀI LIỆU THAM KHẢO 25 Trang CHƯƠNG GIỚI THIỆU VỀ CƠNG TY 1.1 Đơi nét công ty - Tên công ty: Công ty Cổ phần Giải trí 100 độ (100DO JSC) - Địa chỉ: Tầng 12 - Tòa nhà The Galleria 258 Nam Kỳ Khởi Nghĩa, Phường 08, Quận 3, Thành phố Hồ Chí Minh - Điện thoại: 02862739012 - Email: info@100do.com.vn - Website: https://100do.com.vn - Giới thiệu: Cơng ty Cổ phần giải trí 100 độ thành lập cuối năm 2015 đội ngũ vận hành game kỳ cựu sôi sục niềm đam mê lòng nhiệt huyết với lĩnh vực game giải trí tất tảng Cơng ty Cổ phần giải trí 100 độ ln khát khao mang đến cho cộng đồng người tiêu dùng Việt Nam sản phẩm giải trí trực tuyến đột phá, với chất lượng kèm trải nghiệm dịch vụ hoàn hảo 1.2 - Đội ngũ lãnh đạo, sở vật chất, nguồn nhân lực Ban lãnh đạo nhiều năm kinh nghiệm với lòng nhiệt huyết, kiến thức sâu rộng tầm nhìn dài hạn lĩnh vực giải trí trực tuyến - Cơng ty cổ phần Giải trí 100 độ có hệ thống sở vật chất với đầy đủ trang thiết bị cần thiết phục vụ cho công việc hoạt động vui chơi, giải trí - Đội ngũ nhân viên trẻ trung, tràn đầy nhiệt huyết đam mê với việc phát triển sản phẩm giải trí trực tuyến đột phá cho cộng đồng 1.3 - Môi trường làm việc Công ty không bắt buộc nhân viên phải mặc đồng phục đến công sở Đến với Cơng ty Cổ phần giải trí 100 độ, nhân viên tự chọn trang phục đến công ty Cơng ty tơn trọng sở thích phong cách ăn mặc người - Tôn trọng ý kiến cá nhân: Tích cực, mạnh dạn tranh luận, phát biểu ý kiến cơng việc điều khuyến khích cơng ty - Hoạt động ngồi trời đầy thú vị: Hàng năm, Cơng ty Cổ phần Giải trí 100 độ tổ chức chuyến tham quan, du lịch nước kết hợp với chương trình Team Trang Building nhằm phá vỡ rào cản thành viên phận với nhau, thúc đẩy chủ động công việc, tạo mối quan hệ gắn kết - Sẵn sàng tạo điều kiện cho nhân viên phát huy sở trường mạnh: Công ty cổ phần Giải trí 100 độ ln sẵn sàng tạo điều kiện để nhân viên phát huy sở trường mạnh cơng việc - Có hội học hỏi thêm kinh nghiệm từ đồng nghiệp: Tại Công ty cổ phần Giải trí 100 độ, thành viên học hỏi thêm 1.4 Quy trình tuyển tuyển dụng - Tiếp nhận hồ sơ (CV) sàng lọc - Phỏng vấn trực tiếp - Ra định tuyển dụng 1.5 Các vị trí tuyển dụng hội nghề nghiệp cơng ty - Full Stack JavaScript Developer (NodeJS, ReactJS) - PHP Developer - System Engineer - Graphic Designer - Mobile Developer (Android/ iOS) Trang CHƯƠNG QUÁ TRÌNH THỰC TẬP 3.1 Tìm hiểu cơng ty, cách thức tổ chức quy định 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 o Đượ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, quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty o 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, cách thức check in/ check out, 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 Cổ phần Giải trí 100 độ, 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 3.2 Nghiên cứu kỹ thuật 3.2.1 Giai đoạn 1: Làm quen với công cụ làm việc, framework công ty 3.2.1.1 Cài đặt, làm quen với công cụ làm việc - Thời gian: tuần - Nội dung: Được hướng dẫn cài đặt sử dụng công cụ mà công ty dùng để trao đổi thông tin, quản lý mã nguồn, quản lý design,… o Công cụ trao đổi thông tin làm việc: Slack o Công cụ quản lý mã nguồn: Gitlab o Công cụ quản lý dự án: Trello o Công cụ quản lý design: Zeplin o Trình soạn thảo code: Visual Studio Code, Sublime Text o Cài đặt NodeJS, thư viện ReactJS - Thực hiện: Tiến hành cài đặt, tìm hiểu sử dụng phần mềm, công cụ nêu Trang - Kết quả: Hiểu thêm phần mềm công ty sử dụng công việc 3.2.1.2 Nghiên cứu tài liệu kỹ thuật, đọc hiểu framework công ty - Thời gian: tuần - Nội dung: Được giao tìm hiểu tài liệu kỹ thuật có liên quan đến dự án, đọc hiểu framework công ty o Các tài liệu kỹ thuật giao bao gồm:  Tìm hiểu JavaScript: https://javascript.info  Tìm hiểu NodeJS: https://nodejs.org/en/docs  Tìm hiểu ReactJS: https://reactjs.org/docs/getting-started.html  Tìm hiểu MongoDB: https://docs.mongodb.com/manual  Tìm hiểu Postman: https://learning.postman.com/getting-started  Quy chuẩn code công ty: https://standardjs.com/rules.html  Cách sử dụng git: https://backlog.com/git-tutorial/vn  Cách sử dụng Gitlab: https://docs.gitlab.com/ee/gitlab-basics o Tìm hiểu framework phát triển nội công ty - Thực hiện: o Tiến hành nghiên cứu, tìm hiểu nội dung giao o Tham gia đầy đủ buổi training công ty - Kết quả: o Củng cố nâng cao thêm kiến thức biết JavaScript, NodeJS, ReactJS, MongoDB git o Biết cách sử dụng Gitlab o Biết thêm quy chuẩn code áp dụng công ty để viết code cho chuẩn, dễ đọc, dễ hiểu 3.2.1.3 Sử dụng framework công ty để phát triển ứng dụng TodoApp - Thời gian: tuần - Nội dung: Phát triển ứng dụng TodoApp sử dụng framework công ty để kiểm tra nội dung kiến thức nghiên cứu tìm hiểu trước - Thực hiện: Trang o Lên ý tưởng phát triển ứng dụng o Xây dựng API phía back-end ứng dụng o Xây dựng phần front-end ứng dụng - Kết quả: o Củng cố lại kiến thức giao tìm hiểu trước o Biết cách sử dụng thục framework công ty để phát triển dự án thực tế o Hiểu quy trình phát triển ứng dụng web full stack với JavaScript o Ứng dụng người hướng dẫn đánh giá cao o Nâng cao kỹ lập trình thân, phục vụ cho trình sau 3.2.2 Giai đoạn 2: Tham gia phát triển ứng dụng web iNews 3.2.2.1 Tìm hiểu yêu cầu chung dự án - Thời gian: ngày - Nội dung: Tham gia họp với nhóm phát triển dự án, nghe triển khai yêu cầu chung dự án iNews - Kết quả: o Biết thêm nội dung buổi họp dự án công ty o Biết thêm yêu cầu chung dự án iNews 3.2.2.2 Xây dựng phần crawler ứng dụng web iNews - Thời gian: tuần - Nội dung: Tham gia xây dựng phần crawler tin tức từ đầu báo tiếng Việt uy tín - Thực hiện: o Xây dựng core crawler cho phép trích xuất thơng tin từ đầu báo o Xây dựng crawler ứng với đầu báo cụ thể o Góp ý, khắc phục lỗi phát sinh trình vận hành crawler - Kết quả: Trang o Hoàn thành số lượng crawler thời hạn giao o Nâng cao khả sử dụng Chrome Developer Tools để tìm kiếm trích xuất thơng tin cần thiết từ trang web o Biết thêm cách xây dựng crawler để thu thập thông tin từ Internet o Nâng cao kỹ lập trình thân, phục vụ cho trình sau 3.2.2.3 Xây dựng phần front-end tĩnh ứng dụng web iNews - Thời gian: tuần - Nội dung: Xây dựng phần front-end tĩnh (chưa đổ liệu thật) cho ứng dụng dựa design designer thiết kế sẵn - Thực hiện: o Tiến hành đọc hiểu phân tích design designer thiết kế sẵn để hình dung component cần xây dựng o Phối hợp với designer để đảm bảo trang dựng lên đáp ứng với yêu cầu đề - Kết quả: o Hoàn thành xây dựng phần front-end ứng dụng thời hạn giao o Có thêm kinh nghiệm việc đọc hiểu design áp dụng vào code o Có thêm kinh nghiệm việc phối hợp với designer để xây dựng phần front-end theo yêu cầu o Có thêm kinh nghiệm việc xây dựng phần front-end cho ứng dụng web với ReactJS o Nâng cao kỹ lập trình thân, phục vụ cho trình sau 3.2.2.4 Đổ liệu từ API phía back-end cho phần front-end ứng dụng web iNews - Thời gian: tuần - Nội dung: Lấy liệu từ API phía back-end để đổ vào phần front-end ứng dụng Trang 10 - Thực hiện: o Tiến hành kết nối với API phía back-end để truy vấn liệu o Thay nội dung tĩnh trước nội dung trả từ API - Kết quả: o Hoàn thành đổ liệu cho phần front-end ứng dụng thời hạn giao o Có thêm kinh nghiệm việc kết nối liệu phía back-end cho phía front-end ứng dụng web full stack với JavaScript o Nâng cao kỹ lập trình thân, phục vụ cho trình sau 3.2.2.5 Sử dụng, rà soát sửa chữa, khắc phục lỗi trình vận hành ứng dụng web iNews - Thời gian: tuần - Nội dung: Sử dụng, rà soát sửa chữa, khắc phục lỗi giao diện, lỗi chức trình vận hành ứng dụng - Thực hiện: o Sử dụng rà soát tất chức ứng dụng để phát lỗi phát sinh o Kịp thời sửa chữa, khắc phục lỗi phát sinh phạm vi xử lý thân o Thông báo tới phận có liên quan với lỗi khơng nằm phạm vi xử lý - Kết quả: o Phát khắc phục triệt để lỗi phát sinh q trình vận hành ứng dụng o Có thêm kinh nghiệm trình vận hành ứng dụng web thực tế Trang 11 3.3 Lịch làm việc Tuần Cơng việc - Người hướng dẫn Tìm hiểu công ty, Anh Hồ Văn cách thức tổ chức Trọng Mức độ hoàn thành Nhận xét người hướng dẫn 100% quy định công ty - Tiến hành cài đặt, tìm hiểu sử dụng phần mềm, công cụ làm việc công ty - Nghiên cứu tài liệu kỹ thuật, đọc hiểu framework công ty 2–4 - Phát triển ứng dụng TodoApp sử dụng Anh Hồ Văn 100% Trọng framework công ty để kiểm tra nội dung kiến thức nghiên cứu tìm hiểu trước 5–7 - Tham gia họp với Anh Hồ Văn nhóm phát triển dự án, trọng nghe triển khai Anh Lê Võ yêu cầu chung dự 100% Hữu Tài án iNews Trang 12 - Xây dựng core crawler cho phép trích xuất thơng tin từ đầu báo - Xây dựng crawler ứng với đầu báo cụ thể - Góp ý, khắc phục lỗi phát sinh trình vận hành crawler - 11 - Tiến hành đọc hiểu Anh Hồ Văn phân tích design Trọng designer thiết kế Chị Vĩnh sẵn để hình dung Thụy Bảo component cần xây Anh dựng cho phần frontend ứng dụng - Phối hợp với designer để đảm bảo trang dựng lên đáp ứng với yêu cầu đề 12 - Sử dụng rà soát tất Anh Hồ Văn chức Trọng 100% ứng dụng để phát lỗi phát sinh giao diện, lỗi chức Trang 13 trình vận hành ứng dụng - Kịp thời sửa chữa, khắc phục lỗi phát sinh phạm vi xử lý thân - Thông báo tới phận có liên quan với lỗi không nằm phạm vi xử lý Trang 14 CHƯƠNG CHI TIẾT DỰ ÁN 3.1 Giới thiệu ứng dụng web iNews 3.1.1 Giới thiệu chung iNews (https://beta.inew.vn) ứng dụng web tin tức tổng hợp phát triển dựa yêu cầu từ phía khách hàng Cách thức hoạt động ứng dụng tương tự trang https://baomoi.com, tổng hợp nguồn tin tức tự đồng từ đầu báo tiếng Việt Nam 3.1.2 Một số hình ảnh ứng dụng Hình 3.1 Giao diện trang chủ Nổi bật Trang 15 Hình 3.2 Giao diện trang Mới Hình 3.3 Giao diện trang Video Trang 16 Hình 3.4 Giao diện trang Chủ đề Hình 3.5 Giao diện trang Xu hướng Trang 17 Hình 3.6 Giao diện trang tìm kiếm viết Hình 3.7 Giao diện hộp thoại đăng nhập tài khoản Trang 18 Hình 3.8 Giao diện hộp thoại đăng ký tài khoản Hình 3.9 Giao diện trang Cá nhân – Chỉnh sửa thơng tin Trang 19 Hình 3.10 Giao diện trang Cá nhân – Nguồn báo theo dõi Hình 3.11 Giao diện trang Cá nhân – Nguồn báo theo dõi Trang 20 Hình 3.12 Giao diện trang Cá nhân – Chủ đề theo dõi Hình 3.13 Giao diện trang Cá nhân – Chủ đề theo dõi 3.2 - Thực Leader: o Anh Hồ Văn Trọng - Thành viên: o Anh Lê Võ Hữu Tài o Chị Vĩnh Thụy Bảo Anh o Anh Nguyễn Phạm Bảo Long Trang 21 o Anh Bùi Quang Minh o Nguyễn Tiến Dũng 3.3 - Nội dung công việc Xây dựng phần crawler ứng dụng o Xây dựng core crawler cho phép trích xuất thơng tin từ đầu báo o Xây dựng crawler ứng với đầu báo cụ thể o Góp ý, khắc phục lỗi phát sinh trình vận hành crawler - Xây dựng phần front-end tĩnh ứng dụng o Tiến hành đọc hiểu phân tích design designer thiết kế sẵn để hình dung component cần xây dựng o Phối hợp với designer để đảm bảo trang dựng lên đáp ứng với yêu cầu đề - Đổ liệu từ API phía back-end cho phần front-end ứng dụng o Tiến hành kết nối với API phía back-end để truy vấn liệu o Thay nội dung tĩnh trước nội dung trả từ API - Sử dụng, rà soát sửa chữa, khắc phục lỗi trình vận hành ứng dụng o Sử dụng rà soát tất chức ứng dụng để phát lỗi phát sinh o Kịp thời sửa chữa, khắc phục lỗi phát sinh phạm vi xử lý thân o Thơng báo tới phận có liên quan với lỗi không nằm phạm vi xử lý 3.4 - Kết đạt Phối hợp ăn ý với nhóm dự án, hồn thành hạn cơng việc giao, đáp ứng yêu cầu đề - Sản phẩm bàn giao lại cho phía khách hàng vận hành sử dụng Trang 22 CHƯƠNG TỔNG KẾT 4.1 Đối với thân 4.1.1 Những thuận lợi trình thực tập - Nhận hướng dẫn tận tình người hướng dẫn anh chị đồng nghiệp công ty - Được công ty tạo điều kiện tốt suốt q trình thực tập - Mơi trường làm việc động, thân thiện, sở vật chất đầy đủ - Các ý kiến đóng góp cơng việc anh chị đồng nghiệp ghi nhận tuyên dương - Có hội học hỏi thêm kinh nghiệm từ anh chị đồng nghiệp công ty 4.1.2 Những khó khăn q trình thực tập - Các kiến thức sử dụng môi trường làm việc thực tế khoảng cách lớn so với kiến thức dạy trường - Áp lực thời gian: Tại số thời điểm, deadline phải hoàn thành khoảng thời gian ngắn - Áp lực công việc: Tuy khối lượng công việc giao khơng q lớn song số cơng việc địi hỏi cẩn thận chu cao 4.1.3 Một số kinh nghiệm đúc kết Tham gia vào môi trường làm việc thực tế - Công ty Cổ phần Giải trí 100 độ cơng ty nhỏ phát triển Trong trình thực tập cơng ty, em nắm quy trình phát triển ứng dụng web từ ý tưởng đến lúc bàn giao sản phẩm hoàn chỉnh cho khách hàng - Trong trình thực tập, em học cách khắc phục điểm yếu thân, cải thiện kỹ mềm rèn luyện tự tin trước trường Nâng cao nhận thức vai trò trách nhiệm nghề - Biết cách điều tiết thời gian phân bố lịch trình rõ ràng, hợp lý; giải công việc thời hạn giao; biết cách quản lý, xếp liệu cách rõ ràng cẩn thận Trang 23 - Nghiêm chỉnh chấp hành nội quy, quy định chung công ty - Nâng cao kỹ làm việc độc lập làm việc nhóm 4.2 - Đối với công ty Trong suốt quãng thời gian tháng thực tập công ty, với nỗ lực tìm tịi học hỏi, em hồn thành tính ứng dụng mà cơng ty đề - Với nỗ lực thành mà em cống hiến, em mong sản phẩm làm mang lại lợi ích cho công ty khách hàng tương lai không xa 4.3 - Định hướng tương lai Sau trình thực tập, em nhận thấy phát triển ứng dụng web full stack với JavaScript thật mạnh thân - Trong tương lai, em tiếp tục bổ sung, trau dồi thêm cơng nghệ, kiến thức cần thiết có liên quan đến việc phát triển ứng dụng web full stack với JavaScript để tự tin tham gia vào môi trường làm việc chuyên nghiệp sau Trang 24 CHƯƠNG TÀI LIỆU THAM KHẢO The Modern JavaScript Tutorial https://javascript.info NodeJS Documentation https://nodejs.org/en/docs ReactJS Documentation https://reactjs.org/docs/getting-started.html MongoDB Manual https://docs.mongodb.com/manual Get Started with Postman https://learning.postman.com/getting-started JavaScript Standard Style https://standardjs.com/rules.html Hướng dẫn git cho người bắt đầu https://backlog.com/git-tutorial/vn Gitlab Documentation https://docs.gitlab.com/ee/gitlab-basics Trang 25 ... Tiến Dũng 3.3 - Nội dung công việc Xây dựng phần crawler ứng dụng o Xây dựng core crawler cho phép trích xuất thông tin từ đầu báo o Xây dựng crawler ứng với đầu báo cụ thể o Góp ý, khắc phục lỗi... component cần xây Anh dựng cho phần frontend ứng dụng - Phối hợp với designer để đảm bảo trang dựng lên đáp ứng với yêu cầu đề 12 - Sử dụng rà soát tất Anh Hồ Văn chức Trọng 100% ứng dụng để phát... ý tưởng phát triển ứng dụng o Xây dựng API phía back-end ứng dụng o Xây dựng phần front-end ứng dụng - Kết quả: o Củng cố lại kiến thức giao tìm hiểu trước o Biết cách sử dụng thục framework