báo cáo thực tập ứng dụng WEB cào dữ liệu

Đặc biệt cảm ơn chị Linh, đã hướng dẫn, giúp đỡ cho em tận tình cả những khó khăntrong công việc, đến những 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

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

Thực tập sinh : Nguyễn Lê Hoài Ân

TP Hồ Chí Minh, 29 tháng 6 năm 2020

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng nhưmuốn được tham gia làm ứng dụng trong một môi trường chuyên nghiệp, em có dự định là sẽthực tập trong hè Vì vậy, em quyết định chọn Gcalls - một môi trường start-up lý tưởng, hiệnđại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này.

Đặc biệt cảm ơn chị Linh, đã hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn

trong công việc, đến những 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 rất nhiều về các vấn đề Devops trong quá trình làm ứng dụng để có thể làm ra mộtsản phẩm trong thời gian qua

Cũng 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ềukiện em làm bài báo cáo này

Nguyễn Lê Hoài ÂnThành phố Hồ Chí Minh, 29 tháng 6 năm 2020

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 1

Chương 1: Giới thiệu công ty thực tập 2

Giới thiệu về công ty Gameloft 2

Sản phẩm của công ty 2

Chương 2: Nội dung thực tập 3

Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 3

Nghiên cứu kỹ thuật 3

Thực hiện project 7

Lịch làm việc 7

Chương 3: Chi tiết về project 9

Giới thiệu về Game 9

Thực hiện 11

Kế hoạch 11

TÀI LIỆU THAM KHẢO 13

TỔNG KẾT 14

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Gcalls

Gcalls JSC là startup công nghệ thông tin thế hệ mới tiên phong và tập trung vàoviệc phát triển các sản phẩm mới như viễn thông, dịch vụ số, nội dung số và ứngdụng số cho doanh nghiệp vừa và nhỏ trong khu vực Đông Nam Á Sản phẩm chủlực hiện tại của ứng dụng softphone trên nền di động được tích hợp với các nhà cungcấp dịch vụ số tổng đài, CRM, Helpdesk, … giúp doanh nghiệp vừa và nhỏ có thể dễdàng lựa chọn nhà cung cấp để tạo một trung tâm giao tiếp với khách hàng của mình

ở bất kỳ quốc gia nào trong khu vực Đông Nam Á

2 Sản phẩm của công ty

Gcalls cung cấp giải pháp phần mềm nghe gọi và các dịch vụ gia tăng liên quandành riêng cho doanh nghiệp Trong đó, ứng dụng của Gcalls cho phép đội ngũtelesales, chăm sóc khách hàng và nhà quản lý làm việc một cách hiệu quả nhất nhờvào thông tin khách hàng, dữ liệu cuộc gọi, sự đồng bộ, tự động và khả năng tíchhợp với các nền tảng khác

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 dữ liệu” nhằm mục đích giúp sinhviên thực tập được đào tạo toàn diện về lập trình backend và frontend sử dụng ngôn ngữjavaScript, đồ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, khám phá và làm việc trong một môi trường làmviệc chuyên nghiệp

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 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức 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ủacô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 tynhư 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ôngviệc…

Kết quả : Hiểu thêm về công ty Gcalls, 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áchnhiệm hơn

2 Nghiên cứu kỹ thuật

2.1 Tìm hiểu ngôn ngữ javascript và css/html nâng cao

Thời gian : 4 ngày

Nội dung : Tìm hiểu về các ngôn ngữ sẽ được sử dụng trong quá 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 về các ngônngữ sẽ sử dụng cho trong công việc sau này Một số ngôn ngữ như javascript, css,html, sử dụng nodejs và reactjs

Ở phần backend sử dụng nodejs, tạo server chạy trên port tự tạo, sau đó sử dụngreactjs và kết nối với port server của nodejs bằng babel và webpack

Thực hiện : Được leader của team train về các ngôn ngữ của công ty, giới thiệu cách

sử dụng và thực hành sử dụng các ngôn ngữ đã nêu trên

Kết quả : Lập trình sử dụng các ngôn ngữ trên thành thạo, biết cách kết hợp chúng lại

với nhau

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúngchuẩn, dễ đọc, dễ hiểu

2.2 Tìm hiểu mongodb và cách kết nối

Thời gian : 4 ngày (1 tuần)

Nội dung : Được training về database mongodb, các câu lệnh kết nối với project và sử

dụng để tạo, xoá, sửa thông tin trong database.

Thực hiện :

- Làm các bài thực hành, kiểm tra về kiến thức đã học

Kết quả :

- Nâng cao kỹ năng lập trình với mongo database

- Có được những kiến thức quan trọng cho việc sử dụng database mongo vào trongproject

2.3 Lập trình RestfulAPI với Nodejs, mongodb

Thời gian : 6 ngày

Nội dung: Các kiến thức cơ bản về Restful API và Nodejs để xây dựng server API.

- Khái niệm cơ bản về Restful API.

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng

web (thiết kế Web services) để tiện cho việc quản lý các resource Nó chú trọngvào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…),bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP

Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vìvậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, RESTgửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữliệu

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên

sẽ sử dụng những phương thức HTTP riêng Những phương thức hay hoạt động

này thường được gọi là 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 các hàm gọi tới Restful API và truy suất vàomongodb, thêm xoá sửa truy suất các dữ liệu để đọc lên server

2.4 Sử dụng React Router và Redux

Thời gian : 6 ngày

Nội dung : Các kỹ thuật điều hướng tới trang khác bằng react router và dùng redux để

optimize code, sử dụng lại nhiều lần thay vì sử dụng trong phạm vi nhỏ

- Định nghĩa về React Router:

React Router là một thư viện điều hướng tiêu chuẩn trong React Nó giúp

cho UI được đồng bộ với URL Nó có API đơn giản nhưng mạnh mẽ, có thể giúp

giải quyết được rất nhiều vấn đề

- Định nghĩa về Redux:

Redux là một công cụ quản lý các state cho các ứng dụng Javascript Nó giúp bạn

viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khácnhau (client, server, and native) và dễ dàng để test

- Tại sao 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 của một ứng dụng lớnkhi sử dụng Nodejs và Reactjs, khi mà có quá nhiều state hay trang cần quản lý,chúng ta sử dụng hai công nghệ Router và Redux để code trở nên sạch sẽ, khi ấycác nhà phát triển vào sau sẽ biết để đọc và thay đổi, chứ không còn là sản phẩmmột người phát triển

Thực hiện :

- Tham gia đầy đủ các buổi training

- Tạo ra những ứng dụng cơ bản có sử dụng hai công nghệ trên sau đó áp dụng vàoứng dụng thực tập

Kết quả:

- Áp dụng thành công, code trở nên sạch sẽ hơn và ai đọc vào cũng hiểu các hướnghoạt động của ứng dụng

2.5 Tìm hiểu docker và cách sử dụng

Thời gian : 4 ngày (1 tuần)

Nội dung : Được training về docker, viết dockerfile để tự chạy ứng dụng mà không

cần cài các ngôn ngữ đi kèm

- Định nghĩa về docker:

Docker là một nền tảng cho developers và sysadmin để develop, deploy và runapplication với container Nó cho phép tạo các môi trường độc lập và tách biệt đểkhởi chạy và phát triển ứng dụng và môi trường này được gọi là container Khi cầndeploy lên bất kỳ server nào chỉ cần run container của Docker thì application củabạn sẽ được khởi chạy ngay lập tức

- Tại sao phải sử dụng docker:

Việc setup và deploy application lên một hoặc nhiều server rất vất vả từ việc phảicài đặt các công cụ, môi trường cần cho application đến việc chạy được ứng dụngchưa kể việc không đồng nhất giữa các môi trường trên nhiều server khác nhau.Chính vì lý do đó Docker được ra đời để giải quyết vấn đề này

Thực hiện :

- Tham gia đầy đủ các buổi training

- Làm các bài thực hành, kiểm tra về kiến thức đã học

Kết quả :

- Biết thêm về docker và lợi ích của nó trong môi trường làm việc lớn, chuyênnghiệp

3 Thực hiện project

Sau một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực

cơ bản về Nodejs, Reactjs, mongodb, … và các thư viện, công nghệ sử dụng trong ứngdụng của công ty Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng nhữngkiến thức đã học để thực hiện một ứng dụng trang web cào dữ liệu củatrangvangvietnam

Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

Mức độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công ty,cách tổ chức củacông ty

- Làm quen với cácngôn ngữ làm việctrong công ty

- Học cách trao đổi,làm việc qua email

Anh Nguyễn XuânBằng

Chị Võ Thị MaiLinh

2

- Tìm hiểu ngôn ngữlập trình Nodejs, kếtnối mongodb

- Thực hành xâydựng ứng dụng cơbản

Chị Võ Thị MaiLinh

3

- Tìm hiểu vềRestful API

- Xây dựng RestfulAPI trên nodejs đểlấy thêm xoá sửamongodb

Chị Võ Thị MaiLinh

4

- Tìm hiểu Reactjs,React Router vàRedux

- Thực hành tạo mộtứng dụng cơ bảnReactjs kết hợpRouter và Redux

Chị Võ Thị MaiLinh

5 Giai đoạn Đầu:

- Lên kế hoạch

- Viết Framework

- Bắt đầu cào dữ liệu

Chị Võ Thị MaiLinh

với thư viện cheerio.

- Lấy dữ liệu lên trênfrontend

6

Giai đoạn hai:

- Thiết kế giao diệnđơn giản, dễ dùnghơn cho ứng dụng

và đáp ứng đủ cáctính năng

- Sử dụng các thưviện được gợi ý đểhiển thị thông tin lênmàn hình

Chị Võ Thị MaiLinh

7

Giai đoạn ba:

- Truy suất các APIdưới server lênfrontend

- Hiển thị nội dung,tính năng đầy đủyêu cầu của trainer

Chị Võ Thị MaiLinh

8

Giai đoạn bốn:

- Báo cáo về ứngdụng cho trainer

- Tiếp thu các nhậnxét của trainer vàsửa đổi ứng dụng lạicho phù hợp

Chị Võ Thị MaiLinh

9

- Ráp React Router vàRedux vào ứngdụng

- Sử dụng session đểquản lý thông tin

Chị Võ Thị MaiLinh

10

- Tìm hiểu docker vàviết Dockerfile choứng dụng, chạydocker cho ứngdụng

- Báo cáo ứng dụnglần cuối, kết thúcthực tập

Chị Vũ Thị ThuKim

Chương 3: Chi tiết về project

1 Giới thiệu về ứng dụng web

Ứng dụng được đề ra như một sản phẩm nội bộ dành cho nhân viên của công ty Gcalls,được dùng vào cung cấp thông tin cho nhân viên để có thể phục vụ

1.1 Sử dụng Postman để gọi các Restful API

Đây là màn hình của Postman, dùng để gọi Restful API với các phương thứcGET/PUT/POST/DELETE Tiết kiệm thời gian và công sức so với việc gọi tay các API trongserver

1.2 Màn hình Login

- Màn hình đầu tiên là màn hình đăng nhập, sử dụng tài khoản được khởi tạo trongdatabase, khi đã sign in vào thì dùng session để lưu lại, ghi nhớ những lần sau khỏi cần phảiđăng nhập nữa.

- Tăng tính bảo mật cho ứng dụng, làm quen với session

1.3 Màn hình chính

Màn hình chính được thiết kế như hình, đơn giản và đầy đủ các tính năng yêu cầu Nhập đường link cần

cào dữ liệu theo như mẫu, sau đó bấm nút “Crawl data” Dữ liệu ở đây được cào theo lĩnh vực, sau khicào lĩnh vực sẽ được lưu lại để mỗi khi cần sẽ chọn trong phần select box

Dữ liệu được trả về như hình:

Phần dữ 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 có thể tải file csv của dữ liệu về máy

File csv có định dạng tương tự như file excel, nên chúng ta có thể mở bằng excel

Ngoài ra, chúng ta có thể chọn nhiều lĩnh vực cùng một lúc để tiện cho việc theo dõi Kế bên còn có 2icon thùng rác và cây bút, dùng để xoá và sửa tên của lĩnh vực được chọn trong ô selectbox

Chúng ta còn có thể search hoặc filter bảng dữ liệu, chỉ cần điền thứ cần tìm vào ô trống là bảng sẽ tựlọc và trả về

1.4 Mô hình Use Case

1.5. Danh sách các Use Case

STT Tên Use Case Ý nghĩa/Ghi chú

1 Đăng nhập Chức năng đăng nhập vào hệ thống để thực hiện các tác

vụ

2 Crawl data Chức năng cho phép người dùng crawl data từ

categories của web trangvangvietnam.com

3 Tìm kiếm thông tin Chức năng cho phép người dùng lọc ra thông tin của

công ty theo key word nhập vào

4 Chọn lĩnh vực Chức năng cho phép người dùng chọn ra các lĩnh vực

trong database đã crawl trước đó

5 Sửa lĩnh vực Chức năng cho phép người dùng thay đổi tên lĩnh vực

6 Xóa lĩnh vực Chức năng cho phép người dùng xóa 1 lĩnh vực khỏi

database

7 Export to csv Chức năng cho phép người dùng xuất file csv

8 Đăng xuất Chức năng đăng xuát khỏi hệ thống

1.6. Đặc tả Use Case

1.6.1 Đặc tả chức năng đăng nhập

Đăng nhập

Mô tả Chức năng đăng nhập vào hệ thống để thực hiện các tác vụ

Người thực hiện 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 hiện 1 Nhập username

2 Nhập password

3 Nhấn nút Sign in

Ngoại lệ

Dòng sự kiện chính 1 Hiển thị trang web

2 User nhập username và password

b Sai username hoặc password.

3

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 năng crawl data

Crawl Data

Tên Use case Crawl data

Mô tả Chức năng cho phép người dùng crawl data từ categories

của web trangvangvietnam.com

Người thực hiện 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 hiện 1 User nhập đường link muốn lấy thông tin

2 Click vào nút Crawl Data

3 Thông báo load xong và hiển thị thông tin dạng bảng

Ngoại lệ

Dòng sự kiện chính 1 Hiển thị trang web

2 User nhập link muốn lấy thông tin

3 Click vào nút Crawl Data

Dòng sự kiện khác 1 Kiểm tra link user nhập vào

2

a Không phải link categories của web trangvangvietnam.com.

b Link đã được crawl

3

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 đã được lấy từ trước”

1.6.3 Đặc tả chức năng 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 năng cho phép người dùng lọc ra thông tin của công ty

theo key word nhập vào

Người thực hiện 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 hiện 1 Nhập thông tin vào trường muốn lọc

2 Tìm theo key word ứng với trường đó

Ngoại lệ

Dòng sự kiện chính

Dòng sự kiện khác

1.6.4 Đặc tả chức năng 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 năng cho phép người dùng chọn ra các lĩnh vực trong

database đã crawl trước đó

Người thực hiện User

Điều kiện trước xử lý Có danh sách các lĩnh vực

Điều kiện sau xử lý

Các bước thực hiện 1 Chọn lĩnh vực muốn tìm

Tên Use case Sửa lĩnh vực

Mô tả Chức năng cho phép người dùng thay đổi tên lĩnh vực

Người thực hiện User

Điều kiện trước xử lý Có ít nhất 1 lĩnh vực

Điều kiện sau xử lý

Các bước thực hiện 1 Chọn lĩnh vực