BÁO CÁO THỰC TẬP GATSBY TRONG LẬP TRÌNH WEB

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 GATSBY TRONG LẬP TRÌNH WEB Công ty thực tập : Công ty TNHH DESIGNVELOPER Người phụ trách : Đồng Tấn Huy–Ngu

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

GATSBY TRONG LẬP TRÌNH WEB

Công ty thực tập : Công ty TNHH DESIGNVELOPER Người phụ trách : Đồng Tấn Huy–Nguyễn Thành Công Thực tập sinh : Huỳnh Long Pháp - 18521226

TP Hồ Chí Minh, tháng 06 năm 2022

LỜI MỞ ĐẦU

Lời đầu tiên em xin chân thành cảm ơn đến Công ty TNHH Designveloper đã tạo điều kiện cho em được thực tập tại công ty để có thể tìm hiểu và thực hành trực tiếp trên các công cụ và phần mềm của công ty cũng như là quá trình tham gia học hỏi tìm hiểu sâu về cách hoạt động phần mềm

Designveloper là công ty phát triển phần mềm và ứng dụng hàng đầu tại Thành phố Hồ Chí Minh, Việt Nam, được thành lập vào năm 2013 từ một tập thể trẻ và đầy nhiệt huyết các lập trình viên web, mobile; chuyên viên thiết kế UI/UX và các chuyên gia VOIP Sau 1 tháng thực tập tại công ty, em đã được huấn luyện, trải nghiệm với các phương pháp làm việc mới mẻ cùng với những kiến thức đã học trên ghế nhà trường, từ đó biết được cách thức hoạt động của công ty, có thêm nhiều kinh nghiệm trong công việc

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn công ty TNHH Designveloper (DSV) đã 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ủa các anh chị, em

đã tiếp thu được những kiến thức quan trọng để có thể làm được một sản phẩm phần mềm mang lại giá trị cho công ty Chân thành cảm ơn các anh chị đã bỏ ra nhiều thời gian,công sức để hướng dẫn chúng em hoàn thành đợt thực tập này

Em xin chân thành cảm ơn anh Đồng Tấn Huy – Team Leader, anh Nguyễn Thành Công – lập trình viên FullStack cùng toàn thể các anh chị tại công ty đã giúp đỡ, hỗ trợ em trong suốt 4 tuần thực tập vừa qua

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1 Giới thiệu về công ty thực tập 6

1.1 Giới thiệu công ty Designveloper 6

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

1.2.1 LuminPDF 6

1.2.2 Swell & Switchboard 6

1.2.3 Walrus Education 6

1.2.4 Joyn’it 7

1.2.5 Bonux 7

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

2.1 Tìm hiểu NodeJS 8

2.2 Khi nào nên sử dụng NodeJS 8

2.3 Tìm hiểu Gatsby 8

2.3 Thời gian thực tập 10

Chương 3 Chi tiết về Project 11

3.1 Nội dung chi tiết project 11

3.2 Kết quả đạt được 13

3.2.1 Kiến thức tích luỹ 13

3.2.2 Sản phẩm thực tế 14

Tài liệu tham khảo 16

Tổng kết 17

CHƯƠNG 1 GIỚI THIỆU VỀ CÔNG TY THỰC TẬP

1.1 Giới thiệu công ty Designveloper

Designveloper là công ty phát triển phần mềm và ứng dụng hàng đầu tại Thành phố Hồ Chí Minh, Việt Nam, được thành lập vào năm 2013 từ một tập thể trẻ và đầy nhiệt huyết các lập trình viên web, mobile; chuyên viên thiết kế UI/UX và các chuyên gia VOIP

Hiện tại Desigveloper có 2 cơ sở với quy mô hơn 100 nhân viên Văn phòng thứ nhất toạ lạc tại 14, Đường số 39, Phường Bình An, Quận 2, TP.Thủ Đức Văn phòng thứ 2 tại 50/4 Quang Trung, Phường 10, Quận Gò Vấp, TP Hồ Chí Minh

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

1.2.1 LuminPDF

Lumin là một dịch vụ lưu trữ và tích hợp tệp PDF được phát triển bởi Designveloper Lumin cho phép người dùng chỉnh sửa và lưu trữ tệp PDF trên cả ứng dụng di động và website, đồng bộ hóa tệp PDF trên các thiết bị, và chia sẻ tệp PDF với mọi người Hiện Lumin đã đạt được 22 triệu người dùng

1.2.2 Swell & Switchboard

Swell & Switchboard là một nền tảng quản lý doanh nghiệp trong ngành công nghiệp năng lượng mặt trời Đến nay, nền tảng này đang được áp dụng và đánh giá rất cao trong việc quản lý quy trình làm việc hàng ngày của khách hàng Với thành tựu này,

Designveloper đang phát triển nâng cao mô hình của sản phẩm để đạt độ phủ sóng ra toàn thế giới

1.2.3 Walrus Education

Walrus là một nền tảng để kết nối sinh viên, giáo viên và trường học Công nghệ React,

React Native và Nodejs đã được sử dụng để phát triển các ứng dụng web và mobile cho nền tảng này

1.2.4 Joyn’it

Nền tảng Joyn’it cung cấp các dịch vụ dành riêng cho cộng đồng để tạo sự kiện dễ dàng

và thông báo cho thành viên các sự kiện sắp diễn ra

1.2.5 Bonux

Bonux là một dự án xây dựng ví tiền điện tử với các tính năng lưu trữ, quản lý và thực hiện giao dịch cho người sử dụng Thiết kế giao diện UI-UX và một số kỹ thuật khác đã được áp dụng vào quá trình phát triển dự án

CHƯƠNG 2 NỘI DUNG THỰC TẬP

2.1 Tìm hiểu NodeJS

• Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên

Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng

• Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ

sở tại California, Hoa Kỳ

• Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý

và hiệu năng khá cao

• Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực

• Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể

2.2 Khi nào nên sử dụng NodeJS

Là một nền tảng phát triển ứng dụng mạnh mẽ, Nodejs có thể thỏa mãn mọi nhu cầu lập trình, phát triển ứng dụng Các chuyên gia trong lĩnh vực lập trình, công nghệ khuyên dùng Nodejs khi phát triển các ứng dụng như Websocket server, Fast File Upload Client,

Ad Server, Cloud Services, RESTful API, Any Real-time Data Application,

• Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

• Fast File Upload Client: là các chương trình upload file tốc độ cao

• RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác

thông qua API

• Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc

độ thời gian thực Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau Nodejs có thể làm tốt điều này

2.3 Tìm hiểu Gatsby

Gatsby là một static site generator cho React đã phát hành phiên bản chính đầu tiên vào tháng trước Đó là một công cụ không chỉ giúp bạn xây dựng các dự án (hoặc trang web)

mà còn tuyên bố rằng các trang web đó nhanh chóng hoạt động

• Tốc độ và Hiệu suất: Gatsby là một framework được xây dựng từ core React JS

Và đặc biệt hơn là một framework để làm web tĩnh, từ những lý do đó tốc độ load web sẽ nhanh hơn những trang khác Việc chuyển qua lại giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript sẽ được load trong lần tải đầu tiên Khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên Không cần load lại toàn bộ trang, việc cấu hình các plugin cho phép tối ưu việc tải ảnh Và preload (tải trước nội dung của các link người dùng có thể ghé qua) sẽ cho trang web của bạn một tốc độ cực cao

• Nền tảng hỗ trợ tốt: Cũng giống như WordPress thì Gatsby có hệ thống plugin

cực kỳ đa dạng hỗ trợ tối đa cho developer như plugin-image, gatsby-transformer-sharp

• SEO Optimizer: Gatsby có hệ thống plugin đa dạng, nên Gatsby có các plugin

hỗ trợ chọ việc SEO rất tốt

• PWA(Progressive Web Apps): Gatsby cung cấp plugin để chuyển trang web

của bạn thành từ SPA sang PWA Giúp trang web có thể tải về thành ứng dụng trên desktop lẫn trên mobile

Đa phần các CMS đều có thể hoạt động với Gatsby thông qua API (Restful hoặc

Graphql), do vậy việc sử dụng CMS nào phụ thuộc vào việc bạn sử dụng quen CMS nào nhất Hoặc CMS nào tiện lợi nhất, hoặc là CMS bất kỳ tự phát triển Miễn sao có API lấy nội dung là được

Tuy nhiên, các CMS sau thì khá nổi tiếng và có plugin để lấy nội dung (từ API chuyển

về dữ liệu graphql trong Gatsby)

• Netlify CMS

• Buttercms

• Ghost

• Contentful

• WordPress

• Strapi

• Prismic

2.3 Thời gian thực tập

Thời gian thực tập ở công ty

• Từ thứ 2 đến thứ 6 trừ thời gian học trên trường

• Sáng từ 9h – 12h

• Chiều từ 13h – 18h

CHƯƠNG 3 CHI TIẾT VỀ PROJECT

3.1 Nội dung chi tiết project

Xây dựng Website tĩnh giới thiệu công ty, kết nối số lượng lớn người dùng truy

cập vào trang LuminPDF

STT Tuần Nội dung thực tập

• Giới thiệu công ty, tham gia buổi chào hỏi, làm quen với anh chị trong công ty

• Cài đặt một số phần mềm sử dụng trong công ty, cũng như trong công việc

• Tìm hiểu NodeJS, Gatsby trong lập trình web

2 Tuần 2 • Tìm hiểu CMC Prismic, giải quyết yêu cầu của

khách hàng

• Tìm hiểu Optimize Image sử dụng Gatsby Image

• Tìm hiểu Icomoon

3 Tuần 3 • Tìm hiểu CRM Hubspot, Hubspot Form

• Xây dựng ISTE Landing Page cho khách hàng tham dự hội nghị ISTE Free For Schools

• Xây dựng Landing Page cảm ơn người dùng tham

dự hội nghị ISTE Free For Schools

4 Tuần 4 • UAT – ISTE Free For Schools, chờ feedback từ khách hàng, thay đổi theo yêu cầu

• Xây dựng trang merge file PDF – cho phép người dùng gộp các file PDF lại với nhau

3.2 Kết quả đạt được

• Kỹ năng công nghệ

o Tìm hiểu được các công nghệ mới, công việc ở môi trường thực tế

o Quen được với nghiệp vụ công ty và dần dần đã tham gia vào các dự án mang tính ưu tiên của team Được tham gia giúp sức của mình để đóng góp cho team Va chạm nhiều hơn các vấn đề thực tế và hoàn thành nó Được tìm hiểu nhiều thông tin và kiến thức cho mình

• Kỹ năng mềm:

o Kỹ năng tìm kiếm thông tin

o Kỹ năng lên kế hoạch làm việc

o Kỹ năng giải quyết vấn đề

o Kỹ năng giao tiếp tương tác với leader và sếp

o Kỹ năng làm việc theo nhóm và làm việc độc lập

o Kỹ năng biết lắng nghe và học tập những lời phê bình

o Kỹ năng tổ chức công việc và quản lý thời gian

o Kỹ năng làm việc theo deadline

o Kỹ năng viết báo cáo công việc hàng ngày

o Tự tin và năng động trong công việc

• Các kết quả khác:

o Rèn luyện tinh thần tự giác, đúng giờ, đúng quy định nơi công sở

o Rèn luyện tính cẩn thận, tỉ mỉ trong từng nhiệm vụ được giao

o Hiểu rõ được quy trình làm việc và các quy tắc bảo mật khi làm việc

3.2.2 Sản phẩm thực tế

Trang web khách hang yêu cầu xây dựng để tham dự hội nghị ISTE Free for schools Tại đây người dùng – người tham dự hội nghị có thể để lại thông tin, từ đó mà khách hang

có thể liên lạc, kết nối học sinh sinh viên, cũng như giáo viên quay lại sử dụng ứng dụng của mình

Trang cảm ơn người dùng tham dự hội nghị sau khi điền form để lại thông tin người dùng

TÀI LIỆU THAM KHẢO

1 Thông tin công ty: https://www.designveloper.com/vi/

2 NodeJS: https://nodejs.org/en/about/

3 Gatsby: https://www.gatsbyjs.com/docs/

4 Hubspot: https://developers.hubspot.com/docs/api/overview

5 Prismic: https://prismic.io/docs/technologies/nextjs

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp tìm hiểu và hoàn thành nhiệm vụ, bàn giao cho khách hang trang web hoàn chỉnh để tham dự hội nghị Cũng trong 1 tháng qua, bản than em cũng đã tiếp thu được một số kiến thức quan trọng trong quá trình làm việc với nhứng người anh chị dày dặn kinh nghiệm

Chân thành cảm ơn sự giúp đỡ của các anh chị team Lumin, sự nỗ lực của nhóm Lumin Static đã giúp đỡ em hoàn thành công việc này