1 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 ỨNG DỤNG WEB CÀO DỮ LIỆU Công ty thực tập : Công ty cổ phần Gcalls Người phụ trách : Chị Võ Thị Mai Linh Thực tập sinh : Nguyễn Lê Hoài Ân TP Hồ Chí Minh, 29 tháng năm 2020 Nguyễn Lê Hoài Ân LỜI MỞ ĐẦU Ngày nay, với tốc độ phát triển vô mạnh mẽ thị trường, start-up đời nhân tố kích thích phát triển công nghệ thông tin giới, phần cứng phần mềm Cùng với xu phát triển giới, Việt Nam ngoại lệ Các start-up non trẻ Việt Nam phát triển mạnh mẽ, để hịa nhập với cơng ty hàng đầu Việt Nam Và start-up mang lại nhiều hội để phát huy khả năng, trải nghiệm nhiều cơng nghệ Vì lý này, em định chọn khởi đầu môi trường start-up làm định hướng cho việc học tập Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm ứng dụng mơi trường chun nghiệp, em có dự định thực tập hè Vì vậy, em định chọn Gcalls - môi trường start-up lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Lê Hoài Ân LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Cổ phần Gcalls 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 nhóm trainer, em tiếp thu kiến thức quan trọng để làm ứng dụng web hoàn chỉnh Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,cơng sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn chị Linh, hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với mơi trường mới; cảm ơn chị Kim, hỗ trợ chúng em nhiều vấn đề Devops trình làm ứng dụng để làm sản phẩm thời gian qua 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 Lê Hồi Ân Thành phố Hồ Chí Minh, 29 tháng năm 2020 Nguyễn Lê Hoài Ân NHẬN XÉT CỦA KHOA Nguyễn Lê Hoài Â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 Gameloft Sản phẩm công ty .2 Chương 2: Nội dung thực tập .3 Tìm hiểu công ty kỹ công ty Nghiên cứu kỹ thuật Thực project .7 Lịch làm việc Chương 3: Chi tiết project .9 Giới thiệu Game Thực 11 Kế hoạch 11 TÀI LIỆU THAM KHẢO 13 TỔNG KẾT 14 Nguyễn Lê Hồi Ân Chương 1: Giới thiêu cơng ty thực tập Giới thiệu công ty Gcalls Gcalls JSC startup công nghệ thông tin hệ tiên phong tập trung vào việc phát triển sản phẩm viễn thông, dịch vụ số, nội dung số ứng dụng số cho doanh nghiệp vừa nhỏ khu vực Đông Nam Á Sản phẩm chủ lực ứng dụng softphone di động tích hợp với nhà cung cấp dịch vụ số tổng đài, CRM, Helpdesk, … giúp doanh nghiệp vừa nhỏ dễ dàng lựa chọn nhà cung cấp để tạo trung tâm giao tiếp với khách hàng quốc gia khu vực Đông Nam Á Sản phẩm công ty Gcalls cung cấp giải pháp phần mềm nghe gọi dịch vụ gia tăng liên quan dành riêng cho doanh nghiệp Trong đó, ứng dụng Gcalls cho phép đội ngũ telesales, chăm sóc khách hàng nhà quản lý làm việc cách hiệu nhờ vào thông tin khách hàng, liệu gọi, đồng bộ, tự động khả tích hợp với tảng khác Nguyễn Lê Hoài Ân Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Xây dựng ứng dụng web cào liệu” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình backend frontend sử dụng ngôn ngữ javaScript, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyế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 làm việc 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, 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 giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty Gcalls, q trình thành lập phát triển 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 2.1 Tìm hiểu ngơn ngữ javascript css/html nâng cao Thời gian : ngày Nội dung : Tìm hiểu ngôn ngữ 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 ngơn ngữ sử dụng cho công việc sau Một số ngôn ngữ javascript, css, html, sử dụng nodejs reactjs Ở phần backend sử dụng nodejs, tạo server chạy port tự tạo, sau sử dụng reactjs kết nối với port server nodejs babel webpack Thực : Được leader team train ngôn ngữ công ty, giới thiệu cách sử dụng thực hành sử dụng ngôn ngữ nêu Kết : Lập trình sử dụng ngôn ngữ thành thạo, biết cách kết hợp chúng lại với - 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 2.2 Tìm hiểu mongodb cách kết nối Thời gian : ngày (1 tuần) Nội dung : Được training database mongodb, câu lệnh kết nối với project sử Nguyễn Lê Hoài Ân dụng để tạo, xố, sửa thơng tin database Thực : - Làm thực hành, kiểm tra kiến thức học Kết : - Nâng cao kỹ lập trình với mongo database Có kiến thức quan trọng cho việc sử dụng database mongo vào project 2.3 Lập trình RestfulAPI với Nodejs, mongodb Thời gian : ngày Nội dung: Các kiến thức Restful API Nodejs để xây dựng server API - Khái niệm Restful API RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web (thiết kế Web services) để tiện cho việc quản lý resource Nó trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, liệu động…), bao gồm trạng thái tài nguyên định dạng truyền tải qua HTTP Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp máy Vì vậy, thay sử dụng URL cho việc xử lý số thông tin người dùng, REST gửi yêu cầu HTTP GET, POST, DELETE, vv đến URL để xử lý liệu REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động nêu sử dụng phương thức HTTP riêng Những phương thức hay hoạt động thường gọi CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa - Ứng dụng: Ứng dụng kiến thức để viết hàm gọi tới Restful API truy suất vào mongodb, thêm xoá sửa truy suất liệu để đọc lên server 2.4 Sử dụng React Router Redux Thời gian : ngày Nội dung : Các kỹ thuật điều hướng tới trang khác react router dùng redux để optimize code, sử dụng lại nhiều lần thay sử dụng phạm vi nhỏ - Định nghĩa React Router: React Router thư viện điều hướng tiêu chuẩn React Nó giúp cho UI đồng với URL Nó có API đơn giản mạnh mẽ, giúp giải nhiều vấn đề - Định nghĩa Redux: Redux công cụ quản lý state cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Nguyễn Lê Hoài Ân - Tại phải sử dụng hai công nghệ trên: Để giúp code trở nên trơn tru hơn, biết quy trình hoạt động ứng dụng lớn sử dụng Nodejs Reactjs, mà có nhiều state hay trang cần quản lý, sử dụng hai công nghệ Router Redux để code trở nên sẽ, nhà phát triển vào sau biết để đọc thay đổi, khơng cịn sản phẩm người phát triển Thực : - Tham gia đầy đủ buổi training Tạo ứng dụng có sử dụng hai cơng nghệ sau áp dụng vào ứng dụng thực tập Kết quả: - 2.5 Áp dụng thành công, code trở nên đọc vào hiểu hướng hoạt động ứng dụng Tìm hiểu docker cách sử dụng Thời gian : ngày (1 tuần) Nội dung : Được training docker, viết dockerfile để tự chạy ứng dụng mà không cần cài ngôn ngữ kèm - Định nghĩa docker: Docker tảng cho developers sysadmin để develop, deploy run application với container Nó cho phép tạo môi trường độc lập tách biệt để khởi chạy phát triển ứng dụng môi trường gọi container Khi cần deploy lên server cần run container Docker application bạn khởi chạy - Tại phải sử dụng docker: Việc setup deploy application lên nhiều server vất vả từ việc phải cài đặt công cụ, môi trường cần cho application đến việc chạy ứng dụng chưa kể việc không đồng môi trường nhiều server khác Chính lý Docker đời để giải vấn đề Thực : - Tham gia đầy đủ buổi training - Làm thực hành, kiểm tra kiến thức học Kết : - Biết thêm docker lợi ích mơi trường làm việc lớn, chuyên nghiệp Thực project Nguyễn Lê Hoài Ân 10 Sau tháng training thực hành, thực tập sinh nắm kiến thực Nodejs, Reactjs, mongodb, … thư viện, công nghệ sử dụng ứng dụng công ty Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực ứng dụng trang web cào liệu trangvangvietnam Chi tiết đồ án nói phần sau 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, cách tổ chức công ty - Làm quen với ngôn ngữ làm việc công ty - Học cách trao đổi, làm việc qua email - Tìm hiểu ngơn ngữ lập trình Nodejs, kết nối mongodb - Thực hành xây dựng ứng dụng - Tìm hiểu Restful API - Xây dựng Restful API nodejs để lấy thêm xố sửa mongodb - Tìm hiểu Reactjs, React Router Redux - Thực hành tạo ứng dụng Reactjs kết hợp Router Redux Giai đoạn Đầu: - Lên kế hoạch - Viết Framework - Bắt đầu cào liệu Anh Nguyễn Xuân Bằng Chị Võ Thị Mai Linh - Mức độ hoàn thành Nhận xét người hướng dẫn Chị Võ Thị Mai Linh Chị Võ Thị Mai Linh Chị Võ Thị Mai Linh Chị Võ Thị Mai Linh Nguyễn Lê Hoài Ân 12 Chương 3: Chi tiết project Giới thiệu ứng dụng web Ứng dụng đề sản phẩm nội dành cho nhân viên công ty Gcalls, dùng vào cung cấp thông tin cho nhân viên để phục vụ 1.1 Sử dụng Postman để gọi Restful API Đây hình Postman, dùng để gọi Restful API với phương thức GET/PUT/POST/DELETE Tiết kiệm thời gian công sức so với việc gọi tay API server 1.2 Màn hình Login Nguyễn Lê Hồi Ân 13 Màn hình hình đăng nhập, sử dụng tài khoản khởi tạo database, sign in vào dùng session để lưu lại, ghi nhớ lần sau khỏi cần phải đăng nhập Tăng tính bảo mật cho ứng dụng, làm quen với session 1.3 Màn hình Màn hình thiết kế hình, đơn giản đầy đủ tính yêu cầu Nhập đường link cần Nguyễn Lê Hoài Ân 14 cào liệu theo mẫu, sau bấm nút “Crawl data” Dữ liệu cào theo lĩnh vực, sau cào lĩnh vực lưu lại để cần chọn phần select box Dữ liệu trả hình: Phần liệu cào gồm Tên cơng ty, Địa chỉ, lĩnh vực, số điện thoại, email, website, Họ tên người liện hệ, email người liên hệ, số điện thoại người liên hệ, số di động người liên hệ Chúng ta tải file csv liệu máy File csv có định dạng tương tự file excel, nên mở excel Ngồi ra, chọn nhiều lĩnh vực lúc để tiện cho việc theo dõi Kế bên cịn có icon thùng rác bút, dùng để xoá sửa tên lĩnh vực chọn selectbox Nguyễn Lê Hồi Ân 15 Chúng ta cịn search filter bảng liệu, cần điền thứ cần tìm vào ô trống bảng tự lọc trả 1.4 Mơ hình Use Case Nguyễn Lê Hoài Ân 16 1.5 Danh sách Use Case STT Tên Use Case Ý nghĩa/Ghi Chức đăng nhập vào hệ thống để thực tác Đăng nhập vụ Crawl data Chức cho phép người dùng crawl data từ categories web trangvangvietnam.com Tìm kiếm thông tin Chức cho phép người dùng lọc thông tin công ty theo key word nhập vào Chọn lĩnh vực Chức cho phép người dùng chọn lĩnh vực database crawl trước Sửa lĩnh vực Chức cho phép người dùng thay đổi tên lĩnh vực Nguyễn Lê Hồi Ân 17 Xóa lĩnh vực Chức cho phép người dùng xóa lĩnh vực khỏi database Export to csv Chức cho phép người dùng xuất file csv Đăng xuất Chức đăng xuát khỏi hệ thống 1.6 Đặc tả Use Case 1.6.1 Đặc tả chức đăng nhập Đăng nhập Tên Use case Đăng nhập Mô tả Chức đăng nhập vào hệ thống để thực tác vụ Người thực User Điều kiện trước xử lý Load thành công trang web Điều kiện sau xử lý Các bước thực Nhập username Nhập password Nhấn nút Sign in Ngoại lệ Dịng kiện Hiển thị trang web User nhập username password Đăng nhập vào hệ thống Dòng kiện khác Kiểm tra username password a Thiếu thông tin trường Nguyễn Lê Hoài Ân 18 b Sai username password a Yêu cầu điền vào trường thiếu b Hiển thị thông báo “Wrong User or Password, please try again!!” 1.6.2 Đặc tả chức crawl data Crawl Data Tên Use case Crawl data Mô tả Chức cho phép người dùng crawl data từ categories web trangvangvietnam.com Người thực User Điều kiện trước xử lý Load thành công trang web Điều kiện sau xử lý Các bước thực User nhập đường link muốn lấy thông tin Click vào nút Crawl Data Thông báo load xong hiển thị thơng tin dạng bảng Ngoại lệ Dịng kiện Hiển thị trang web User nhập link muốn lấy thơng tin Click vào nút Crawl Data Dịng kiện khác Kiểm tra link user nhập vào Nguyễn Lê Hoài Ân 19 a Không phải link categories web trangvangvietnam.com b Link crawl a Hiển thị thơng báo “vui lịng nhập dủ thông tin” b Hiển thị thông báo “thông tin cần lấy lấy từ trước” 1.6.3 Đặc tả chức tìm kiếm thơng tin Tìm kiếm thơng tin Tên Use case Tìm kiếm thơng tin Mơ tả Chức cho phép người dùng lọc thông tin công ty theo key word nhập vào Người thực User Điều kiện trước xử lý Có danh sách thông tin từ web crawl Điều kiện sau xử lý Các bước thực Nhập thông tin vào trường muốn lọc Tìm theo key word ứng với trường Ngoại lệ Dịng kiện Nguyễn Lê Hồi Ân 20 Dịng kiện khác 1.6.4 Đặc tả chức chọn lĩnh vực Chọn lĩnh vực Tên Use case Chọn lĩnh vực Mô tả Chức cho phép người dùng chọn lĩnh vực database crawl trước Người thực User Điều kiện trước xử lý Có danh sách lĩnh vực Điều kiện sau xử lý Các bước thực Chọn lĩnh vực muốn tìm Nhấn tìm Ngoại lệ Dịng kiện Dịng kiện khác 1.6.5 Đặc tả chức sửa lĩnh vực Sửa lĩnh vực Tên Use case Sửa lĩnh vực Mô tả Chức cho phép người dùng thay đổi tên lĩnh vực Người thực User Điều kiện trước xử lý Có lĩnh vực Điều kiện sau xử lý Các bước thực Chọn lĩnh vực Nguyễn Lê Hoài Ân 21 Click vào nút edit Nhập tên muốn thay đổi Click vào nút done Ngoại lệ Dịng kiện Dịng kiện khác 1.6.6 Đặc tả chức xóa lĩnh vực Xóa lĩnh vực Tên Use case Xóa lĩnh vực Mơ tả Chức cho phép người dùng xóa lĩnh vực khỏi database Người thực User Điều kiện trước xử lý Có lĩnh vực Điều kiện sau xử lý Các bước thực Chọn lĩnh vực Click vào nút delete Ngoại lệ Dòng kiện Dịng kiện khác 1.6.7 Đặc tả chức export to csv Export to csv Tên Use case Export to csv Nguyễn Lê Hoài Ân 22 Mô tả Chức cho phép người dùng xuất file csv Người thực User Điều kiện trước xử lý Có thơng tin crawl Điều kiện sau xử lý Các bước thực Chọn lĩnh vực Click vào nút Export to csv Ngoại lệ Dòng kiện Dịng kiện khác 1.6.8 Đặc tả chức đăng xuất Đăng xuất Tên Use case Đăng xuất Mô tả Chức đăng xuất khỏi hệ thống Người thực User Điều kiện trước xử lý Đăng nhập thành công Điều kiện sau xử lý Các bước thực Nhấn nút Đăng xuất Ngoại lệ Dòng kiện Thốt khỏi hệ thống Quay lại trang đăng nhập Dịng kiện khác 1.7 Mơ hình luồng liệu Nguyễn Lê Hoài Ân 23 1.8 Mơ hình liệu Mongodb Nguyễn Lê Hồi Ân 24 1.9 Cài đặt Mơi trường phát triển triển khai Môi trường phát triển - Sử dụng NodeJS - Sử dụng Express - Sử dụng ReactJS, React Router, Redux - Sử dụng Visual Code để lập trình - Quản lý sở liệu Mongodb - Quản lý source code GitLab Môi trường triển khai - Có thể triển khai ứng dụng thơng qua điện thoại đa chức năng, máy tính bàn, laptop, máy tính bảng,… - Điều kiện để triển khai phần mềm bao gồm: Nguyễn Lê Hoài Ân 25 + Là thiết bị truy cập mạng + Có liệu mạng sẵn có + Sẵn có phần mềm trình duyệt web (FireFox, Cốc Cốc, Google Chrome, Internet Explorer, Opera,…) 1.10 Kết Được đưa vào sử dụng nội công ty, cấp cho domain để đẩy lên Domain : https://crawler.gcall.vn TÀI LIỆU THAM KHẢO https://viblo.asia/p/tu-setup-reactjs-project-co-ban-voi-webpack-4-va-babel-7-phan-2djeZ197gZWz https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/ https://medium.com/make-school/how-to-deploy-your-node-js-mongodb-app-to-theweb-using-heroku-63d4bccf2675 https://www.freecodecamp.org/news/how-to-deploy-a-node-application-and-databaseto-heroku/ https://kipalog.com/posts/Docker-with-NodeJS -Phan-1 Docker-voi-Express-JS https://dev.to/cpclark360/how-to-host-a-restful-node-js-server-with-mongodb-atlasdatabase-on-heroku-1opl? fbclid=IwAR247sZsyMunI7AVIokWG9e9MSM0qijCTOH89bqLWkKblA6sY_A7D5LFe8 Nguyễn Lê Hoài Ân 26 TỔNG KẾT Như vậy, vòng tháng ngắn ngủi, thực tập sinh kịp hoàn thành ứng dụng web hệ điều hành Ubuntu Ứng dụng có đầy đủ tính đề ban đầu theo trainer Do thời gian có hạn nên tính ứng dụng cịn đơn giản, hình ảnh chưa đẹp mong đợi Nhưng ứng dụng phát triển theo framework có tính kế thừa nên sau có thời gian phát triển lên mức cao Chân thành cảm ơn giúp đỡ anh chị nhóm trainer cơng ty Gcalls, nỗ lực thân thực tập sinh để hồn thành ứng dụng Nguyễn Lê Hoài Ân ... Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Xây dựng ứng dụng web cào liệu? ?? 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 backend frontend sử dụng ngơn ngữ javaScript,... triển Thực : - Tham gia đầy đủ buổi training Tạo ứng dụng có sử dụng hai cơng nghệ sau áp dụng vào ứng dụng thực tập Kết quả: - 2.5 Áp dụng thành công, code trở nên đọc vào hiểu hướng hoạt động ứng. .. quản lý thông tin - Tìm hiểu docker viết Dockerfile cho ứng dụng, chạy docker cho ứng dụng - Báo cáo ứng dụng lần cuối, kết thúc thực tập Chị Võ Thị Mai Linh Chị Võ Thị Mai