Báo cáo thực tập lập trình ứng dụng web với nextjs và nestjs

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ì

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

LỜI MỞ ĐẦU

Trong bối cảnh ngành công nghệ thông tin đang phát

triển mạnh mẽ như hiện nay, việc ứng dụng các công nghệ vàokinh doanh, hỗ trợ doanh nghiệp, hay chỉ đơn giản là học tập hoặc thao tác một số công việc cá nhân đã gần như trở thành thói quen, thậm chí là công cụ tương tác cơ bản mỗi ngày Hầuhết các nhu cầu của người dùng chúng ta đã trở nên đơn giản hoá, nhanh hơn, và tiện lợi hơn nhờ các nền tảng công nghệ, điển hình là ứng dụng web

Việc phát triển một ứng dụng web có thể sử dụng các

công cụ và framework khác nhau Ở front-end có thể kể tên đến như ReactJS, VueJS, NextJS, Còn back-end thì có

ExpressJS, Django, NestJS, Spring,…

NextJS là một framework nhỏ gọn được xây dựng dựa trênReactJS, Webpack và Babel giúp chúng ta xây dựng ứng dụng Server Side Rendering kết hợp với ReactJS một cách dễ dàng

và nhanh chóng

NestJS là một framework Node.JS cho phép xây dựng ứng dụng phía server Nest mở rộng các framework Node.js như Express hay 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 các hệ thống backend

Bên cạnh thời gian học tập trên trường, em muốn tích lũy thêm kinh nghiệm thực tế, cũng như mong muốn được tham gia làm việc trong một môi trường chuyên nghiệp Vì vậy, em

đã đăng ký môn thực tập và bắt đầu tìm kiếm công việc May mắn thay, em đã vượt qua kì tuyển thực tập sinh của công ty Zodinet và được thực tập tại công ty

Những kiến thức và kinh nghiệm đó giúp em có thể hoàn thiện bản thân hơn và có thêm kinh nghiệm trong quá trình phát triển phần mềm.

Cũng như 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ài báo cáo này

Võ Xuân Tú

Tp Hồ Chí Minh, …/…/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 công ty Zodinet: 6

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

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

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 8 2 Nghiên cứu kĩ thuật: 8

3 Thực hiện Project: 12

4 Lịch làm việc: 13

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

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

2 Thực hiện: 18

DANH MỤC HÌNH ẢNH Hình 1 Logo công ty Zodinet 6

Hình 2 Website công ty Zodinet 6

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

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

Hình 5 Sản phẩm Camly Academy 8

Hình 6 Thiết bị không hỗ trợ 14

Hình 7 Màn hình lướt tìm bạn 15

Hình 8.Xem chi tiết thông tin người dùng khác 16

Hình 9 Màn hình tìm bạn trên map 16

Hình 10 Màn hình trang cá nhân 17

Hình 11 Màn hình chat 18

DANH MỤC BẢNG Bảng 1 Lịch làm việc 13

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

Hình 1 Logo công ty Zodinet

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

 Tên công ty: Công ty TNHH Công Nghệ Zodinet

 Website công ty: Zodinet.com

Hình 2 Website công ty Zodinet

 Địa chỉ: 43 Đường số 3, Phường Hiệp Bình Chánh, Quận Thủ Đức, Thành phố Hồ Chí Minh, Việt Nam

 Điện thoại: 0866090209

 Email: info@zodinet.com

 Năm thành lập: 2016Zodinet được thành lập vào năm 2016 và có trụ sởchính tại thành phố Hồ Chí Minh Lĩnh vực của công

ty là phát triển phần mềm, trang web cho các dự án thương mại điện tử, chuyển đổi kỹ thuật số, ngân

hàng, blockchain, giáo dục, y tế và các dự án nước ngoài khác.

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

- Vietnam Healthy Application

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

- Skin365

Hình 4 Sản phẩm Skin365

- Camly Academy

Hình 5 Sản phẩm Camly Academy

Chương 2: Nội dung thực tậ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ủ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, giới thiệu các thành viên trong nhóm thực tập,

chương trình thực tập,…

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 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

2 Nghiên cứu kĩ thuật:

2.1 Các công cụ làm việc:

Thời gian: 1 ngày

Nội dung: Tìm hiểu các công cụ sẽ được sử dụng

trong quá trình làm việc Trong thời gian này, cài đặtcác công cụ phục vụ công việc như: Visual studio code, Git, Clickup – phân công công việc, PostgreSQL– cơ sở dữ liệu, Clockify – công cụ ghi thời gian làm công việc, Figma,…

Thực hiện: thực hành sử dụng các công cụ nêu trên.Kết quả: làm quen được với các công cụ

2.2 Tìm hiểu HTML và CSS:

Thời gian: 2 ngày

Nội dung: được training các kỹ thuật về html, css, scss

- html: cấu trúc và các thành phần của trang web, phân chia các đoạn văn bảng, header, footer, …

- css: tạo style cho trang web như màu sắc, khoảngcách, phông chữ,…

- scss: là tiền sử lý css, giúp việc code css giống như ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code

Thực hiện:

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành

Kết quả:

- Nắm được kiến thức html-css-scss cơ bản

- Nắm được kĩ thuật đặt tên BEM

- Có thể tạo ra được layout cho trang web, style theo design và responsive

2.3 Tìm hiểu về Javascript, ES6 và RESTful API

Thời gian: 1 ngày

Nội dung : tìm hiểu các kiến thức cơ bản về

Javascript, ES6 và RESTful API

- Tìm hiểu JS DOM

- Tìm hiểu JQuery

- Tìm hiểu object, function, class, async

- Tìm hiểu về các HTTP method của endpoint

- Các quy ước về resource và endpoint

Thời gian: 1 ngày

Nội dung: tìm hiểu về HTTP request, Storage và Source control

Session-Cookie HTTP request: là thông tin được gửi tử Client lên Server, để yêu cầu Server tìm hoặc sử lý một số thông tin, dữ liệu mà Client muốn Tìm hiểu các phương thức của HTTP request như GET, POST, PUT, DELETE,

- Session: là một phiên làm việc được dùng trong lập trình web và có thể kết nối tới database

- Cookie: là một file tạm được tự động tạo trong máy tính mỗi khi người dùng truy cập vào một trang web nào đó, nó sẽ lưu những thông tin liên quan đến cá nhân như tài khoản để sử dụng cho lần đăng nhập sau

- Local storage: là một loại lưu trữ web cho phép các trang web và ứng dụng javascript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không

có ngày hết hạn

- Session storage: cũng giống như local storage thì session storage cũng được dùng để lưu trữ dữ liệu trên trình duyệt của khách truy cập, nhưng dữ liệu

đó sẽ biến mất khi người dùng đóng tab trình

duyệt

- Source control: tìm hiểu về git và cách sử dụng gitvới các câu lệnh

Thực hiện:

- Tham gia đầu đủ các buổi training của công ty

- Tìm hiểu về HTTP request, Session, Cookie,

- Nắm được kiến thức cơ bản về HTTP request

- Biết cách sử dụng Session, Cookie, Storage

- Biết cách tạo ra một git repository và thao tác với repository thông qua các câu lệnh

2.5 Tìm hiểu về ReactJS và NextJS

Thời gian: 3 ngày

Nội dung: tìm hiểu về ReactJS kết hợp với Typescript

và NextJS

- ReactJS:

 ReactJS là một thư viện Javascript dùng để xây dựng giao diện người dùng, nó không phải là một framework js nào hết

 React hỗ trợ việc xây dựng các thành phần

(components) UI có tính tương tác cao, có trạngthái và có thể sử dụng lại được

- Typescript: là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một

phiên bản nâng cấp của Javascript bởi việc bổ

xung tùy chọn kiểu tĩnh và lớp hướng đối tượng

mà Javascript không có

- NextJS: là một open-source React front-end

framework được xây dựng các tính năng như

Server Side Rendering (SSR) NextJS được xây

dựng dựa trên React có nghĩa NextJS lấy những lợithế của React và bổ xung thêm các tính năng

Thực hiện:

- Tìm hiểu về ReactJS và cách sử dụng ReactJS

- Tìm hiểu Typescript là gì và kết hợp nó với ReactJS

- Tìm hiểu NextJS và cách sử dụng NextJS với

2.6 Tìm hiểu về NodeJS và NestJS

Thời gian: 3 ngày

Nội dung: tìm hiểu về NodeJS và NestJS và cách tạo Project với NodeJS và NestJS

- NodeJS: là một môi trường runtime chạy Javascript

đa nền tảng và có mã nguồn mở, được sử dụng chạy các ứng dụng web bên ngoài trình duyệt của client

- 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 là sự kết hợp bởi OOP (Object Oriented Programming), FP (Functional

Programming), FRP (Functional Reactive

Programming)

Thực hiện:

- Tìm hiểu về NodeJS, cách cài đặt và sử dụng

- Tìm hiều về NestJS, cách cài đặt và sử dụng

Kết quả:

- Nắm được các kiến thức cơ bản về NodeJS và có thể tạo được một project đơn giản sử dụng NodeJS

- Nắm được các kiến thức cơ bản về NestJS và có thể tạo được một project đơn giản sử dụng NestJS

2.7 Tìm hiểu về SQL và NoSQL Database

Thời gian: 1 ngày

Nội dung: tìm hiểu về SQL và NoSQL Database

- 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ệ Trong thực tế, SQL là ngôn ngữ chuẩn được sử dụng hầu hết cho hệ cơ sở dữ liệu quan hệ Tất cả các hệ thống quản lý cơ sở dữ liệu quan hệ

(RDMS) như MySQL, MS Access, Oracle, Postgres

và SQL Server… đều sử dụng SQL làm ngôn ngữ

cơ sở dữ liệu chuẩn

- NoSQL: tên gốc là Non SQL cung cấp một cơ chế lưu trữ và truy xuất dữ liệu được mô hình hóa khácvới các quan hệ bảng được sử dụng trong các cơ

sở dữ liệu quan hệ

Thực hiện:

- Tìm hiểu về SQL và NoSQL Database, cách cài đặt phần mềm để tương tác với các cơ sở dữ liệu trên.Kết quả:

- Nắm được cách sử dụng các cơ sở dữ liệu 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 những kiến thức cơ bản về lập trình ứngdụng web Sau đó sinh viên bắt đầu kết hợp các kiến thức

đã học vào việc lập trình một ứng dụng web hoàn chỉnh

Nhận xét

hoà n thàn h

của người hướn

LêNodeJS Fundamental Anh Đạt Đới

3 NodeJS Fundamental Anh Đạt Đới

SQL Database &

NoSQL

Anh Tuấn Diệp

Kickoff final Project Tất cả anh

chị mentorsWeb Security &

Hacking

Anh Cường Quách

4 Mobile development Anh Tuấn

LêPerformance

Optimize – Client side

– FESTACKs

Anh Tiến Phạm

System Architecture

& Design

Anh Long Đào/ Anh Đạt Đới/

Anh Đạt VũDesign Database Anh Long

Đào

5 Design Database Anh Đạt

Đới/ Anh Đạt VũFinal Project Tất cả anh

chị mentors6-7-

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

Framework sử dung:

- Front-end: NextJS

- Back-end: NestJS

1.1 Tính năng chỉ hỗ trợ cho thiết bị di động

Mô tả: tính năng này chỉ cho phép người dùng

sử dụng trang web khi truy cập bằng thiết bị di động

Hình 6 Thiết bị không hỗ trợ

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

Mô tả: tính năng này cho phép người dùng có thể lướt (trái và phải) để có thể xem được một số thông tin cơ bản như hình ảnh mặc định, tên, tuổi và khoảng cách so với bản thân mình của những người chưa kết bạn với minh mà đang gần với mình

(khoảng 200 m) Khi này nếu người dùng muốn xem thông tin của người đang hiện trên màn hình thì

nhấn vào nút có hình chữ i ở trên màn hình là sẽ

xem được các thông tin chi tiết về người đó Và

người dùng có thể nhấn nút hình trái tim để gửi yêu cầu kết bạn hoặc nhấn nút có hình chữ X để block người đó luôn

Hình 7 Màn hình lướt tìm bạn

1.3 Tính năng xem thông tin chi tiết của người

dùng

Mô tả: Tính năng này cho phép người dùng có thể xem thêm được thông tin chi tiết của một người dùng nào đó đang gần mình, mà người dùng này

không phải là bạn bè hoặc không bị block Ở trang này hiển thị các thông tin như một số hình ảnh, tên ,tuổi, sở thích,…

Hình 8.Xem chi tiết thông tin người dùng khác

1.4 Tính năng tìm bạn xung quanh bằng map

Mô tả: tính năng này cho phép người dùng có thể thấy được trực quan hơn các người dùng mà

mình chưa kết bạn hay block đang ở gần mình thôngqua map Và ở đây cũng có thể xem được thông tin của người dùng khác bằng cách nhấn nút i trên màn hình

Hình 9 Màn hình tìm bạn trên map

1.5 Tính năng trang cá nhân

Mô tả: ở trang cá nhân người dùng có thể thay đổi được một số thông tin như avatar, ảnh mặc định, ảnh yêu thích để hiển thị cho người khác xem khi họ lướt, thông tin cá nhân như sở thích, chiều cao, …

Hình 10 Màn hình trang cá nhân

1.6 Tính năng chat với bạn

Mô tả: tính năng này cho phép người dùng có thể nhắn tin với những người họ đã kết bạn

Hình 11 Màn hình chat

2 Thực hiện:

Sau thời gian trau dồi kiến thức từ các buổi training

và tự nghiên cứu tài liệu Cùng với sự giúp đỡ của các anhchị mentor thì các thành viên trong nhóm thực tập đã

hoàn thành xong dự án

Chân thành cảm ơn các anh chị mentor trong công

ty Zodinet đã giúp em hoàn thành kì thực tập tại Zodinet