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

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị trong nhóm training tại công ty, em đã tiếp thu được những kiến thức quan trọng để có thể tự tin tham gia và

ĐẠ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ó cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị trong nhóm training tại công ty, em đã tiếp thu được những kiến thức quan trọng để có thể tự tin tham gia vào quá trình phát triển các ứng dụng web full stack với JavaScript Em xin chân thành cảm ơn các anh chị trong nhóm training đã dành nhiều thời gian, công sức để hướng dẫn em một cách tận tình trong đợ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 luôn đồng hành và trực tiếp cung cấp cho em những kiến thức quan trọng trong quá trình phát triển sản phẩm thực tế, hướng dẫn, giúp đỡ tận tình những lúc em gặp khó khăn trong quá trình thực tập tại công ty

Em cũng 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 chỉ dạy, trang bị cho em những kiến thức và kỹ năng cần thiết trong suốt quá trình tham gia học tập tại trường

Vì là lần đầu tiên em được tiếp xúc với môi trường làm việc thực tế của doanh nghiệp nên báo cáo thực tập doanh nghiệp này của em không thể chắc chắn không thể tránh khỏi những thiếu sót Em rất mong nhận được những ý kiến góp ý của quý thầy (cô) để báo cáo này của em được hoàn thiện hơn

Một lần nữa 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 hiện

Nguyễn Tiến Dũng

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

CHƯƠNG 1 GIỚI THIỆU VỀ CÔNG TY 5

1.1 Đôi nét về công ty 5

1.2 Đội ngũ lãnh đạo, cơ sở vật chất, nguồn nhân lực 5

1.3 Môi trường làm việc 5

1.4 Quy trình tuyển tuyển dụng 6

1.5 Các vị trí tuyển dụng và cơ hội nghề nghiệp tại công ty 6

CHƯƠNG 2 QUÁ TRÌNH THỰC TẬP 7

3.1 Tìm hiểu công ty, cách thức tổ chức và các quy định cơ bản của công ty 7

3.2 Nghiên cứu kỹ thuật 7

3.2.1 Giai đoạn 1: Làm quen với các công cụ làm việc, framework của công ty 7

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 3 CHI TIẾT DỰ ÁN 15

3.1 Giới thiệu về ứng dụng web iNews 15

3.1.1 Giới thiệu chung 15

3.1.2 Một số hình ảnh về ứng dụng 15

3.2 Thực hiện 21

3.3 Nội dung công việc 22

3.4 Kết quả đạt được 22

CHƯƠNG 4 TỔNG KẾT 23

4.1 Đối với bản thân 23

4.1.1 Những thuận lợi trong quá trình thực tập 23

4.1.2 Những khó khăn trong quá trình thực tập 23

4.1.3 Một số kinh nghiệm đúc kết được 23

4.2 Đối với công ty 24

4.3 Định hướng trong tương lai 24

CHƯƠNG 5 TÀI LIỆU THAM KHẢO 25

CHƯƠNG 1 GIỚI THIỆU VỀ CÔNG TY

1.1 Đôi nét về 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 độ được thành lập cuối năm 2015 bởi đội

ngũ vận hành game kỳ cựu luôn sôi sục niềm đam mê và lòng nhiệt huyết với lĩnh vực game giải trí trên tất cả nền tảng Công ty Cổ phần giải trí 100 độ luôn khát khao mang đến cho cộng đồng người tiêu dùng Việt Nam các sản phẩm giải trí trực tuyến đột phá, với chất lượng đi kèm sự trải nghiệm dịch vụ hoàn hảo nhất

1.2 Đội ngũ lãnh đạo, cơ 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 và tầm nhìn dài hạn trong 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 cơ sở vật chất với đầy đủ các trang thiết bị cần thiết phục vụ cho công việc cũng như cá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 và đam mê với việc phát triển các 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 được tự do chọn trang phục đến công

ty Công ty tôn trọng sở thích và phong cách ăn mặc của mỗi 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 trong

công việc là một điều được khuyến khích tại công ty

- Hoạt động ngoài trời đầy thú vị: Hàng năm, Công ty Cổ phần Giải trí 100 độ luôn

tổ chức các chuyến tham quan, du lịch trong nước kết hợp với chương trình Team

Building nhằm phá vỡ rào cản giữa các thành viên trong các bộ phận với nhau, thúc đẩy sự chủ động trong công việc, tạo mối quan hệ gắn kết hơn

- Sẵn sàng tạo điều kiện cho nhân viên phát huy sở trường và thế mạnh: Công ty cổ

phần Giải trí 100 độ luôn sẵn sàng tạo điều kiện để nhân viên có thể phát huy được đúng sở trường cũng như thế mạnh của mình trong công việc

- Có cơ hội học hỏi thêm kinh nghiệm từ các đồng nghiệp: Tại Công ty cổ phần Giải

trí 100 độ, mỗi thành viên sẽ được học hỏi thêm

1.4 Quy trình tuyển tuyển dụng

- Tiếp nhận hồ sơ (CV) và sàng lọc

- Phỏng vấn trực tiếp

- Ra quyết định tuyển dụng

1.5 Các vị trí tuyển dụng và cơ hội nghề nghiệp tại công ty

- Full Stack JavaScript Developer (NodeJS, ReactJS)

CHƯƠNG 2 QUÁ TRÌNH THỰC TẬP

3.1 Tìm hiểu công ty, cách thức tổ chức và các quy định cơ bản của 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

o Đượ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, quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công

ty

o 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 ty như thời gian đi làm, cách thức check in/ check out, các quy định cần phải tuân thủ, cách sử dụng email trong công việc,…

- Kết quả: Hiểu thêm về công ty Cổ phần Giải trí 100 độ, 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ách nhiệm hơn

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

3.2.1 Giai đoạn 1: Làm quen với các công cụ làm việc, framework của công ty 3.2.1.1 Cài đặt, làm quen với các công cụ làm việc

- Thời gian: 1 tuần

- Nội dung: Được hướng dẫn cài đặt và sử dụng các 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 khi 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 và sử dụng các phần mềm, công cụ nêu trên

- Kết quả: Hiểu thêm về các phần mềm được công ty sử dụng trong công việc 3.2.1.2 Nghiên cứu tài liệu kỹ thuật, đọc hiểu framework của công ty

- Thời gian: 1 tuần

- Nội dung: Được giao tìm hiểu về các tài liệu kỹ thuật có liên quan đến dự án, đọc hiểu framework của công ty

o Các tài liệu kỹ thuật được giao bao gồm:

 Tìm hiểu về JavaScript: https://javascript.info

 Tìm hiểu về NodeJS: https://nodejs.org/en/docs

 Tìm hiểu về ReactJS: https://reactjs.org/docs/getting-started.html

 Tìm hiểu về MongoDB: https://docs.mongodb.com/manual

 Tìm hiểu về Postman: https://learning.postman.com/getting-started

 Quy chuẩn code của 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 về framework được phát triển nội bộ tại công ty

- Thực hiện:

o Tiến hành nghiên cứu, tìm hiểu các nội dung đã được giao

o Tham gia đầy đủ các buổi training tại công ty

- Kết quả:

o Củng cố và nâng cao thêm các kiến thức đã biết về JavaScript, NodeJS,

ReactJS, MongoDB và git

o Biết cách sử dụng Gitlab

o Biết thêm về quy chuẩn code được áp dụng tại công ty để viết code sao cho

đúng chuẩn, dễ đọc, dễ hiểu

3.2.1.3 Sử dụng framework của công ty để phát triển ứng dụng TodoApp

- Thời gian: 2 tuần

- Nội dung: Phát triển ứng dụng TodoApp sử dụng framework của công ty để kiểm tra các nội dung kiến thức đã nghiên cứu và tìm hiểu được trước đó

- Thực hiện:

o Lên ý tưởng phát triển ứng dụng

o Xây dựng API phía back-end của ứng dụng

o Xây dựng phần front-end của ứng dụng

- Kết quả:

o Củng cố lại các kiến thức đã được giao tìm hiểu trước đó

o Biết cách sử dụng thuần thục framework của công ty để phát triển một dự

án thực tế

o Hiểu về quy trình phát triển của một ứng dụng web full stack với

JavaScript

o Ứng dụng được người hướng dẫn đánh giá cao

o Nâng cao kỹ năng lập trình của bản thân, phục vụ cho quá trình sau này 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 về yêu cầu chung của dự án

- Thời gian: 1 ngày

- Nội dung: Tham gia họp với nhóm phát triển dự án, được nghe triển khai về yêu cầu chung của dự án iNews

- Kết quả:

o Biết thêm về nội dung của một buổi họp dự án tại công ty

o Biết thêm về các yêu cầu chung của dự án iNews

3.2.2.2 Xây dựng phần crawler của ứng dụng web iNews

- Thời gian: 2 tuần

- Nội dung: Tham gia xây dựng phần crawler tin tức từ các đầu báo tiếng Việt uy

tín

- Thực hiện:

o Xây dựng bộ core crawler cho phép trích xuất thông tin từ một đầu báo bất

kỳ

o Xây dựng bộ crawler ứng với từng đầu báo cụ thể

o Góp ý, khắc phục các lỗi phát sinh trong quá trình vận hành crawler

- Kết quả:

o Hoàn thành đúng số lượng crawler trong thời hạn được giao

o Nâng cao khả năng sử dụng Chrome Developer Tools để tìm kiếm và trích xuất các thông tin cần thiết từ trang web

o Biết thêm về cách xây dựng crawler để thu thập thông tin từ Internet

o Nâng cao kỹ năng lập trình của bản thân, phục vụ cho quá trình sau này

3.2.2.3 Xây dựng phần front-end tĩnh của ứng dụng web iNews

- Thời gian: 3 tuần

- Nội dung: Xây dựng phần front-end tĩnh (chưa đổ dữ liệu thật) cho ứng dụng dựa trên bản design đã được designer thiết kế sẵn

- Thực hiện:

o Tiến hành đọc hiểu và phân tích bản design đã được designer thiết kế sẵn

để hình dung ra các component cần xây dựng

o Phối hợp với designer để đảm bảo rằng các trang đã được dựng lên đã đáp ứng đúng với yêu cầu đề ra

o Nâng cao kỹ năng lập trình của bản thân, phục vụ cho quá trình sau này

3.2.2.4 Đổ dữ liệu từ API phía back-end cho phần front-end của ứng dụng web iNews

- Thời gian: 2 tuần

- Nội dung: Lấy dữ liệu từ API phía back-end để đổ vào phần front-end của ứng dụng

- Thực hiện:

o Tiến hành kết nối với API phía back-end để truy vấn dữ liệu

o Thay thế các nội dung tĩnh trước đó bằng nội dung được trả về từ API

o Nâng cao kỹ năng lập trình của bản thân, phục vụ cho quá trình sau này

3.2.2.5 Sử dụng, rà soát và sửa chữa, khắc phục các lỗi trong quá trình vận hành ứng dụng web iNews

- Thời gian: 1 tuần

- Nội dung: Sử dụng, rà soát và sửa chữa, khắc phục các lỗi về giao diện, các lỗi về chức năng trong quá trình vận hành ứng dụng

3.3 Lịch làm việc

hướng dẫn

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 thức tổ chức và các quy định cơ bản

của công ty

- Tiến hành cài đặt, tìm

hiểu và sử dụng các phần mềm, công cụ

làm việc tại công ty

- Nghiên cứu tài liệu kỹ

thuật, đọc hiểu framework của công ty

Anh Hồ Văn Trọng

100%

2 – 4 - Phát triển ứng dụng

TodoApp sử dụng framework của công ty

để kiểm tra các nội dung kiến thức đã nghiên cứu và tìm hiểu

được trước đó

Anh Hồ Văn Trọng

100%

5 – 7 - Tham gia họp với

nhóm phát triển dự án, được nghe triển khai về yêu cầu chung của dự

án iNews

Anh Hồ Văn trọng Anh Lê Võ Hữu Tài

100%

12 - Sử dụng và rà soát tất

cả các chức năng của

ứng dụng để phát hiện

các lỗi phát sinh về

giao diện, các lỗi về

chức năng trong quá

Anh Hồ Văn Trọng

100%

trình vận hành ứng dụng

- Kịp thời sửa chữa, khắc

phục các lỗi phát sinh trong phạm vi xử lý của bản thân

- Thông báo tới bộ phận

có liên quan với các lỗi không nằm trong phạm

vi xử lý

CHƯƠNG 3 CHI TIẾT DỰ ÁN

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

3.1.1 Giới thiệu chung

iNews (https://beta.inew.vn) là ứng dụng web tin tức tổng hợp được phát triển dựa trên yêu cầu từ phía khách hàng Cách thức hoạt động của ứng dụng tương

tự như trang https://baomoi.com, tổng hợp nguồn tin tức tự đồng từ các đầu báo nổi tiếng tại Việt Nam

3.1.2 Một số hình ảnh về ứng dụng

Hình 3.1 Giao diện trang chủ Nổi bật

Hình 3.2 Giao diện trang Mới

Hình 3.3 Giao diện trang Video

Hình 3.4 Giao diện trang Chủ đề

Hình 3.5 Giao diện trang Xu hướng

Hình 3.6 Giao diện trang tìm kiếm bài viết

Hình 3.7 Giao diện hộp thoại đăng nhập tài khoản

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

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

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 hiện

- 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

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 của ứng dụng

o Xây dựng bộ core crawler cho phép trích xuất thông tin từ một đầu báo bất

kỳ

o Xây dựng bộ crawler ứng với từng đầu báo cụ thể

o Góp ý, khắc phục các lỗi phát sinh trong quá trình vận hành crawler

- Xây dựng phần front-end tĩnh của ứng dụng

o Tiến hành đọc hiểu và phân tích bản design đã được designer thiết kế sẵn

để hình dung ra các component cần xây dựng

o Phối hợp với designer để đảm bảo rằng các trang đã được dựng lên đã đáp ứng đúng với yêu cầu đề ra

- Đổ dữ liệu từ API phía back-end cho phần front-end của ứng dụng

o Tiến hành kết nối với API phía back-end để truy vấn dữ liệu

o Thay thế các nội dung tĩnh trước đó bằng nội dung được trả về từ API

- Sử dụng, rà soát và sửa chữa, khắc phục các lỗi trong quá trình vận hành ứng dụng

o Sử dụng và rà soát tất cả các chức năng của ứng dụng để phát hiện các lỗi phát sinh

o Kịp thời sửa chữa, khắc phục các lỗi phát sinh trong phạm vi xử lý của bản thân

o Thông báo tới bộ phận có liên quan với các lỗi không nằm trong phạm vi

CHƯƠNG 4 TỔNG KẾT

4.1 Đối với bản thân

4.1.1 Những thuận lợi trong quá trình thực tập

- Nhận được sự hướng dẫn tận tình của người hướng dẫn và các anh chị đồng nghiệp

tại công ty

- Được công ty tạo điều kiện tốt nhất trong suốt quá trình thực tập

- Môi trường làm việc năng động, thân thiện, cơ sở vật chất đầy đủ

- Các ý kiến đóng góp trong công việc được các anh chị đồng nghiệp ghi nhận và

tuyên dương

- Có cơ hội học hỏi thêm kinh nghiệm từ các anh chị đồng nghiệp tại công ty

4.1.2 Những khó khăn trong quá trình thực tập

- Các kiến thức được sử dụng trong môi trường làm việc thực tế vẫn còn khoảng cách

lớn so với các kiến thức đã được dạy tại trường

- Áp lực về thời gian: Tại một số thời điểm, deadline phải được hoàn thành trong một

khoảng thời gian ngắn

- Áp lực về công việc: Tuy khối lượng công việc được giao không quá lớn song một

số công việc đòi hỏi sự cẩn thận và chỉn chu cao

4.1.3 Một số kinh nghiệm đúc kết được

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 độ tuy là một công ty nhỏ nhưng khá phát triển Trong

quá trình thực tập tại công ty, em đã nắm được quy trình phát triển của một ứ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 quá trình thực tập, em cũng đã học được cách khắc phục các điểm yếu của

bản thân, cải thiện các kỹ năng mềm và rèn luyện sự tự tin trước khi ra trường

Nâng cao nhận thức về vai trò và trách nhiệm đối với nghề

- Biết cách điều tiết thời gian và phân bố lịch trình rõ ràng, hợp lý; giải quyết công

việc đúng thời hạn được giao; biết cách quản lý, sắp xếp các dữ liệu một cách rõ

ràng và cẩn thận