Lập trình ứng dụng web với nextjs, nestjs

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 LẬP TRÌNH ỨNG DỤNG WEB VỚI NEXTJS, NESTJS Công ty thực tập Zodinet Technology Người phụ trách Phạm Minh Tiến Thực tập sinh V[.]

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH ỨNG DỤNG WEB VỚI

NEXTJS, NESTJS

Công ty thực tập : Zodinet Technology Người phụ trách : Phạm Minh Tiến Thực tập sinh : Võ Minh Tuấn

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

LỜI MỞ ĐẦU

Ứng dụng web ngày nay có sức lan tỏa mạnh mẽ trong cuộc sống của mọi người Nó đã trở thành một phần tất yếu của họ Mọi người sử dụng nó để giải trí, mua sắm, chia sẻ ảnh, v.v Ngoài ra, các công ty, doanh nghiệp sử dụng nó

để quảng cáo thương hiệu, sản phẩm, dịch vụ, hỗ trợ hoạt động kinh doanh và thúc đẩy bán hàng

Do nhu cầu tương đối cao đối với các ứng dụng web, nhiều framework đã được phát triển để hỗ trợ phát triển web nhanh hơn và dễ dàng hơn, chẳng hạn như Nextjs và Nestjs

Nextjs là một framework front-end React được phát triển dưới dạng open-source bổ sung các khả năng tối ưu hóa như render phía máy chủ (SSR) và tạo trang web static

NestJS là một NodeJS framework dùng để phát triển server-side

applications hiệu quả và có thể mở rộng NestJS sử dụng TypeScript để phát triển, nhưng cũng hỗ trợ cả Javascript Nest được lấy cảm hứng từ kiến trúc Agular nên với các bạn đã làm việc với Agular, vì vậy nó không còn xa lạ gì và

có thể dễ dàng tiếp cận đối với bất kỳ ai đã sử dụng Agular

Với niềm đam mê về lập trình web và muốn có thêm kinh nghiệm thực tế,

em đã quyết định nộp đơn xin thực tập tại các công ty khác nhau May mắn, em

đã được chọn làm thực tập sinh tại công ty Zodinet

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn công ty Zodinet đã tạo điều kiện cho em có cơ hội được thực tập tại công ty

Chỉ trong thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tinh của nhóm

trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng

để có thể làm được một ứng dụng web Chân thành cảm ơn anh chị trong nhóm trainer đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thanh đợt thực tập này

Đặc biệt cảm ơn anh Phạm Minh Tiến và tất cả mọi người trong team đã hướng dẫn, giúp đỡ tận tình những khó khăn trong công việc, đã chỉ dẫn cho em cách lên kế hoạch và những kỹ năng cần có đới với web developer

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ều kiện cho em làm báo cáo này

Võ Minh Tuấn

Tp, Hồ Chí Minh, ngày … tháng … năm 2022

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC

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

1 Giới thiệu về công ty Zodinet 6

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

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

1 Tìm hiểu công ty và các kỹ năng cơ bản của công ty 7

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

3 Thực hiện Project 11

4 Lịch làm việc 11

Chương 3: Chi tiết Project 13

1 Giới thiệu ứng dụng 13

2 Thực hiện 18

TỔNG KẾT 19

DANH MỤC HÌNH ẢNH Hình 1 Logo Zodinet 6

Hình 2 Sản phẩm Skin365 6

Hình 3 Sản phẩm Vietnam Healthy Application 7

Hình 4 Sản phẩm Goohyeah 7

Hình 5 Lướt tìm bạn bè 14

Hình 6 Xem thông tin bạn bè 15

Hình 7 Tìm bạn trên bản đồ 16

Hình 8 Trò chuyện với bạn bè 17

Hình 9 Trang cá nhân 18

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

Hình 1 Logo Zodinet

1 Giới thiệu về công ty Zodinet

- Tên công ty: Công ty TNHH Công nghệ Zodinet

- Địa chỉ: 43 Số 3, P Hiệp Bình Chánh, Q Thủ Đức, TP Hồ Chí Minh

- Website: https://zodinet.com/

- Email: info@zodinet.com

- Số điện thoại: 0866090209

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

Lĩnh vực của Zodinet là phát triển phần mềm, website cho các dự

án thương mại điện tử, chuyển đổi kỹ thuật số, ngân hàng, blockchain, giao dục, y tế và các dự án nước ngoài khác

Một số sản phẩm của công ty:

- Skin365: ứng dụng mua sắm mỹ phẩm trực tuyến cho chuỗi mỹ phẩm Shin365

Hình 2 Sản phẩm Skin365

- Vietnam Healthy Application: Ứng dụng được thiết kế và phát triển để

hỗ trợ và bảo vệ người Việt khỏi Covid19

Hình 3 Sản phẩm Vietnam Healthy Application

- Goohyeah: Goohyeah Business là ứng dụng tất cả trong một, giúp bạn

có thể quản lý doanh nghiệp mọi lúc, mọi nơi

Hình 4 Sản phẩm Goohyeah

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

Đợt thực tập này giúp cho các sinh viên thực tập nắm rõ được các kiến thức về lập trinh ứng dụng web Đồng thời rèn luyện các kỹ năng mềm như làm việc nhóm, giao tiếp, trao đổi với các thành viên khác trong công ty 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 phát triển ứng dụng web chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng 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

Được nghe giám đốc công ty 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

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á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 Zodinet, quá trình thành lập và phát triển

Có thêm hiểu biết về cách thức làm việc trong một công ty công nghệ thống tin đồng thời thực tập sinh có ý thức hơn trong việc làm việc có kế hoạch, trao đổi, giải thích với những thành viên khác trong công ty

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

2.1 Tìm hiểu về các công cụ làm việc

Thời gian: 1 ngày Nội dung: Tìm hiểu về các công cụ được sử dụng trong quá trình làm việc

Trong thời gian này, mentor hướng dẫn các thực tập sinh tìm hiểu

về các công cụ giúp ích cho quá trình làm việc sau này Một số phần mềm trong đó như Microsoft Teams – sử dụng trong làm việc nhóm Clockify – theo dõi thời gian làm việc, Visual Studio Code – text editor được sử dụng chinh trong quá trình phát triển sản phầm, Figma, Git, ClickUP – phân chia công việc

Thực hiện: Học lý thuyết và ứng dụng các công cụ trên

Kết quả: Có thể sử dụng và kết hợp các công cụ kể trên

2.2 Tìm hiểu về HTTP Request/ Sessions – Cookie – Storage/ Source

Control

Thời gian: 1 ngày Nội dung: Được trang bị kiến thức về http request, sessions, cookie, storage và source control

- Http request: là thông tin gửi từ client lên server, để yêu cầu server tìm hoặc xử lý một số thông tin, dữ liệu mà client muốn Các phương thức của http request: get, post, put, delete, …

- Local storage: là nơi lưu trữ dữ liệu trên máy client dưới dạng key/value trong trình duyệt web

- Session storage: tương tự như local storage, nó cũng được dùng

để lưu trữ dữ liệu ở máy client Nhưng dữ liệu trong session storage sẽ biến mất khi tab trình duyệt bị đóng

- Cookie: là các tệp được trang web người dùng truy cập tạo ra

Nó giúp trải nghiệm trực tuyến trở nên dễ dàng hơn bằng cách

lưu thông tin duyệt web Với cookie, các website có thể duy trì trạng thái đăng nhập của bạn, ghi nhớ tùy chọn trang web

Thực hiện:

- Tìm hiểu về http request, các phương thức phổ biến của http request, làm bài tập thực hành

- Tìm hiểu về session, cookie, local storage và cách sử dụng chúng

- Tìm hiểu về git, các câu lệnh thao tác với git, làm bài tập thực hanh

Kết quả:

- Nắm được kiến thức về http request, session, cookie, local storage, git

2.3 Tìm hiều về HTML và CSS, SCSS

Thời gian: 2 ngày Nội dụng: Được training về kỹ thuật html, css, scss cơ bản và nâng cao, các kiến thức giúp tạo nên giao diện responsesive

- HTML: ngôn ngữ đánh dấu siêu văn bản, dùng trong việc phân chia các đoạn văn, heading, links, blockquotes,…

- CSS: ngôn ngữ tạo phong cách cho trang web, giúp trang web trở nên sinh động hơn

- SCSS: chương trình tiền xử lý CSS Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trinh, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn

Thực hiện: Tham gia đầy đủ các buổi training, làm bài tập thực hành về html, css, scss

Kết quả:

- Nắm được kiến thức về html, css, scss

- Có thể dựng nên layout cho trang web, style theo thiết kế, tạo ra giao diện responsive

2.4 ReactJs Fundamental & NextJs

Thời gian: 3 ngày Nội dung: Tìm hiểu về reactjs và nextjs, sử dụng với typescript

- ReactJs:

▪ Là một thư viện JavaScript mã nguồn mở do Facebook xây dựng và phát triển Thư viện này được sử dụng để tạo

ra ứng dụng web với hiệu suất cao, tốc độ load nhanh

▪ Khái niệm chính:

• JSX: là 1 cú pháp mở rộng cho JavaScript, là kết hợp của JavaScript với XML Nó chuyển đổi cú pháp dạng gần như XML về thành JavaScript, giúp chúng ta có thể code ReactJs bằng cú pháp của XML thay vì phải dùng JavaScript

• Component: nơi render ra các mã html thuần, cho phép chia nhỏ các đoạn code UI thành các phần độc lập với nhau, tiện cho việc quản lý và tái sử dụng

• Props: là nhữn thuộc tính của một component

• State: dùng để biểu diễn trạng thái của component

- NextJs: là một framework được xây dựng dựa trên nền của React Chính vì dựa trên nền của React nên Nextjs mang những cốt lõi tương tự React Nextjs cung cấp những ưu thế mới và vượt trội mà React không có như Server side rendering Nextjs giúp các nhà phát triển tạo ra các ứng dụng web có hiệu xuất tốt

và web tĩnh siêu nhanh

- Typescritp: là dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là phiên bản nâng cao của javascript bởi việc bổ sung kiểu tĩnh và lớp hướng đối tượng mà không có ở javascript

Thực hiện:

- Tìm hiểu về ReactJs, các thành phần của ReactJs

- Cách sử dụng Nextjs kết hợp với typescript

- Làm bài tập thực hành liên quan đến Nextjs Kết quả:

- Biết cách tạo component, sử dụng props, state, redux trong ReactJs

- Biết cách sử dụng ReactJs, Nextjs kết hợp với typescript

2.5 Nodejs & NestJs

Thời gian: 3 ngày

Nội dung: Tìm hiểu về Nodejs, Nestjs và tạo dự án mẫu với Nestjs

- 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

- Nestjs: là một framework Nodejs cho phép xây dựng ứng dụng phía server Nestjs mở rộng các framework Nodejs như Express

và Fastify để bổ sung thêm nhiều module hay thư viện hỗ trợ việc xử lý tác vụ Đây là một framework mã nguồn mở, sử dụng Typescript và rất linh hoạt để xây dựng hệ thống backend

Thực hiện:

- Tìm hiểu về Nodejs và cài đặt, tạo project mẫu

- Tìm hiểu về Nestjs, cách sử dụng và cách cài đặt, tạo project mẫu

Kết quả: Biêt thêm về Nodejs, Nestjs và cách cài đặt cũng như sử dụng chúng

2.6 SQL & NoSQL database

Thời gian: 1 ngày Nội dụng: Tìm hiểu về SQL và NoSQL và cách sử dụng chúng

- SQL: là ngôn ngữ truy vấn có cấu trúc Nó là một ngôn ngữ, là tập hợp các lệnh để tương tác với cơ sở dữ liệu Dùng để lưu trữ, thao tác và truy xuất dữ liệu được lưu trữ trong một cơ sở

dữ liệu quan hệ

- NoSQL: cung cấp một cơ chế lưu trữ và truy xuất dữ liệu được

mô hình hóa khác với quan hệ bảng được sử dụng trong các cơ

sở dữ liệu kiểu quan hệ

Thực hiện: Tìm hiểu về SQL và NoSQL Kết quả: Biết về SQL và NoSQL

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 kiến thức cơ bản về lập trình ứng dụng web Sau đó sinh viên bắt đầu thực hiện kết hợp các kiến thức đã học vào việc lập trinh tạo ra một sản phẩm hoàn chỉnh

4 Lịch làm việc

Tuần Công việc Người hướng

dẫn

Mức độ hoàn thanh

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

– Cookie – Storage/

Source control

Anh Đạt Đới/

Anh Tuấn Lê/

Chị Ngân HTML – Fundamental

& CSS

Anh Long

Coding Standards and Conventions &

Developer tool

Anh Đạt Vũ

2 Javascript & ES6 &

Restfull API

Anh Tâm Nguyễn

Sql database & NoSql Anh Tuấn

Diệp Kick off final project Tất cả các anh

chị mentor Web Security &

Hacking

Anh Cường Quách

Performance optimize – Client side

Anh Tiến Phạm System Architecture &

Design

Anh Long/

Anh Đạt Vũ/

Anh Đạt Đới

Anh Đạt Vũ/

Anh Đạt Đới

Anh Đạt Vũ/

Anh Đạt Đới

Final project Tất cả anh chị

mentor

mentor

mentor Demo final project

Chương 3: Chi tiết Project

1 Giới thiệu ứng dụng

Ứng dụng Tinai là một ứng dụng giúp mọi người tìm được bạn bè xung quanh vị trí hiện tại của mình, giúp họ có thể trò chuyện với nhau, tạo nên mối quan hệ bạn bè hay tinh duyên mới Nó bao gồm các chức năng chính: lướt tìm bạn, tìm bạn trên bản đồ, trò chuyện nhắn tin, thay đổi thông tin người dùng

1.1 Tính năng lướt tìm bạn

Mô tả: Tại trang chủ của Tinai, người dùng có thể lướt tìm bạn xung quanh vị trí hiện tại của bản thân Đồng thời có thể xem được thông tin về người bạn đó như ảnh đại diện, họ tên, tuổi, mô tả về bản thân, sở thích và hình ảnh yêu thích của họ Nếu người dùng cảm thấy thích người bạn đó thì có thể nhấn nút trai tim trên màn hình hoặc nếu muốn block người đó thì sẽ nhấn nút thùng rác trên màn hình

Hình 5 Lướt tìm bạn bè

Hình 6 Xem thông tin bạn bè

1.2 Tìm bạn bạn trên bản đồ

Mô tả: Với chức năng này, người dùng sẽ thấy được các người dùng khác xung quan minh với vị trí của họ là các hình trai tim, và

vị trí hiện tại của bản thân là dấu chấm màu tím Khi nhấn vào hình trái tim nào thì thông tin của người đó sẽ được hiển thị tại tab nhỏ

ở phía dưới màn hình Và khi người dùng nhấn vào nút chữ i thì ứng dụng sẽ hiển thị thông tin của người bạn đó giống như ở phần trang chủ

Hình 7 Tìm bạn trên bản đồ

1.3 Trò chuyện với bạn bè

Mô tả: Sau khi 2 người đã nhấn nút thích nhau thì 2 người đó sẽ trở thành bạn bè của nhau và lúc này họ có thể trò chuyện với nhau

Hình 8 Trò chuyện với bạn bè

1.4 Thay đổi thông tin

Mô tả: Người dùng sẽ chỉnh sửa các thông tin các nhân của mình tại trang cá nhân, chọn các hình yêu thích Các thông tin này sẽ được xem bởi các người dùng khác

Hình 9 Trang cá nhân

2 Thực hiện

Sau hai tháng thực tập, được các anh chị mentor training các kiến thức cơ bản và tự nghiên cứu tài liệu, công thêm sự giúp đỡ của các anh chị trong quá trình thực hiện đồ án, sinh viên đã hoan thành xong dự án

TỔNG KẾT

Như vậy, chỉ trong hai tháng ngắn ngủi, em đã trau dồi được nhiều kiến thức cũng như trải nghiệm thực tế về lập trình ứng dụng web Ứng dụng demo cũng đạt được các tính năng cơ bản ban đầu Do thời gian có hạn và kinh nghiệm chưa nhiều nên các tính năng còn đơn giản, hình ảnh chưa thực sự đẹp như mong đợi

Chân thành cảm ơn các anh chị mentor đã giúp em hoàn thành thời gian thực tập tại Zodinet