Lập trình website với mern stack

Là một công ty product, công ty luônđổi mới và đem đến trải nghiệm, ưu đãi ngày càng tốt cho người sử dụng app với việcngày càng có nhiều liên kết với các nhãn hàng nổi tiếng như Pepsi,

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Trong các môn học ở kỳ trước thì em đã được học các môn học về web, cũng đã biếtcách xây dựng một trang web cơ bản với HTML, CSS và JavaScript, sau đó dần dà làm quenvới MERN stack Do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gialàm web trong một môi trường chuyên nghiệp Em có dự định tham gia thực tập tại một công ty

có nhu cầu Ứng tuyển vào trong chương trình TAPTAP TechFresher, em đã có cơ hội đượclàm việc tại một môi trường chuyên nghiệp, nơi có các anh chị luôn nhiệt tình hỗ trợ, giải đápthắc mắc, luôn đưa ra những lời khuyên, nhận xét, đánh giá để giúp em phát triển hơn từng ngày

bỏ ra nhiều thời gian, công sức hướng dẫn chúng em hoàn thành chương trình thực tập này

Đặc biệt cảm ơn anh An, đã đưa ra các thử thách, từ đó hướng dẫn chúng em đi sâu, hiểubản chất của các công nghệ Cảm ơn anh Hùng đã hướng dẫn em rất nhiều về quy trình, đưa racác cải thiện cho em về kỹ năng mềm Cảm ơn anh Hào đã giúp em giải đáp các thắc mắc, xử lýnhiều lỗi về code và convention Cảm ơn anh Tú, Phúc đã giúp em review, chỉnh sửa code Cảm

ơn chị Hồng đã hỗ trợ em giải quyết các thắc mắc về frontend

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 Công PhiTpHCM, ngày 21/12/2022

3

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

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

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

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

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

2.1 HTML, CSS, Các nguyên tắc design 10

2.2 JavaScript 11

2.3 MERN Stack 12

2.4 Docker, K8S 13

3 Thực hiện project 14

4 Lịch làm việc 14

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

TÀI LIỆU THAM KHẢO 23

5

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

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

- TAPTAP là một công ty công nghệ với sản phẩm chính là ứng dụng di động TAPTAP,

có trụ sở chính ở quận 1, thành phố Hồ Chí Minh Là một công ty product, công ty luônđổi mới và đem đến trải nghiệm, ưu đãi ngày càng tốt cho người sử dụng app với việcngày càng có nhiều liên kết với các nhãn hàng nổi tiếng như Pepsi, Long Châu, ThePizza Company,…

- TAPTAP được thành lập vào năm 2020 bởi VIG(đơn vị quản lý quỹ đầu tư doanh nghiệphàng đầu tại Việt Nam) và UOB(một trong 3 ngân hàng lớn nhất Đông Nam Á với giá trịtài sản hơn 300 tỷ USD, có trụ sở tại Singapore)

- Là một công ty công nghệ của Việt Nam, TAPTAP đang dần phát triển mạnh với sốngười dùng ngày càng khổng lồ, tính đến thời điểm hiện tại có khoảng 3 triệu người dùng

và với hơn 50 nhãn hàng liên kết Sản phẩm của TAPTAP ngày càng được mọi ngườibiết đến rộng rãi và đem lại giá trị lớn cho người sử dụng

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

- Sản phẩm chính công ty là ứng dụng di động TAPTAP, hiện đang khả dụng trên

Appstore và Google play

7

- TAPTAP là ứng dụng di động hỗ trợ người dùng tích điểm VUI từ đó đổi lấy những ưuđãi về ăn uống, giáo dục hay giải trí qua các Voucher Điểm VUI có thể tích được khimua hàng tại các cửa hàng, khi quét các hóa đơn tại các cửa hàng liên kết thì sẽ đượcđiểm tương ứng với giá trị của hóa đơn.

- Ngoài điểm VUI thì hiện tại công ty cũng có những điểm khác như PEPSI coin để đổilấy những sản phẩm pepsi hay Pepsibravo coin để đổi các vật phẩm trong sự kiệnPepsibravo

- TAPTAP là ứng dụng đại diện cho các sự kiện lớn gần đây như: Pepsi Ravolution MusicFestival (Sự kiện âm nhạc có sự trình diễn của các rapper hàng đầu và các ca sĩ nổitiếng), HOZO (Sự kiện nổi bật với các khinh khí cầu ở Thủ Thiêm và trung tâm quận 1),

và hiện tại đang có sự kiện siêu khuyến mãi cuối năm ở Vạn Hạnh Mall(kéo dài đến hếtnăm 2022)

- Nếu muốn sưu tập hay đổi các vật phẩm đặc trưng của TAPTAP(gối kê cổm vali, áothun,…) thì có thể đổi bằng các điểm VUI

- Ngoài ra công ty còn cung cấp các web CMS để quản lý phần lõi của ứng dụng và

các phần quản lý cho các bên liên quan.

9

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

- Đợt thực tập với chủ đề “Lập trình website với MERN Stack” nhằm mục đích giúp thực tập sinh được đào tạo toàn diện, hiểu sâu, hiểu kỹ về công nghệ web Bắt đầu từ việc tìm hiểu cơ bản đến nâng cao về HTML, CSS và JavaScript, sau đó tìm hiểu Web với stack công nghệ về web rất phổ biến đó là MERN Stack Song song với việc review hàng tuần các kỹ năng về công nghệ đã nghiên cứu, thực tập sinh có cơ hội được tự do nghiên cứu những kiến thức liên quan và cải thiện những kỹ năng mềm: kỹ năng giao tiếp với các bộphận khác, kỹ năng demo, giải quyết vấn đề,… để có thể làm quen với môi trường phát triển web 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 :

o Giới thiệu về công ty, cách tổ chức của công ty

o Được nghe trưởng bộ phận: anh Hùng và nhân sự: chị Linh 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), cách tổ chức công ty,các quy định của công ty, cách sử dụng template slide, các brand, màu liên quantrong các văn bản để có sự đồng bộ trong công ty-

- Kết quả : Hiểu thêm về công ty TAPTAP, quá trình thành lập và phát triển Có được

hiểu biết và hình dung cơ bản về cách thức làm việc trong công ty

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

o Tìm hiểu về HTML, CSS, các ngôn ngữ mà trình duyệt có thể trực tiếp hiểu được

và tạo thành giao diện trên browser

o Trong thời gian này, anh An cũng đưa ra các thử thách tìm hiểu về TOTP: tìmhiểu về time OTP, OTP được sinh ra dựa theo thời gian, không cần kết nốiinternet cũng có thể tạo được mã

- Thực hiện:

o Thực hành nghiên cứu về HTML, CSS, các nguyên tắc trong design web

o Nghiên cứu về TOTP

o Nghiên cứu thêm về các vấn đề liên quan đến HTML, CSS:

 A11y(accessibility)

 Semantic HTML

 SEO với HTML

 Reset CSS, tương thích CSS giữa các trình duyệt

 Design và các rule người lập trình cần tránh

 …

- Kết quả: Hiểu rõ hơn về cách sử dụng của 2 ngôn ngữ cơ bản để tạo nên một trang web,

kết hợp với các nguyên tắc design để tránh các lỗi cơ bản với lập trình web Thực sự hiểu

cách trang web hoạt động.

o Code phần nghiên cứu: https://github.com/CongPhiNguyen/udemy-basic

o Web demo: https://demo-udemy-phi.netlify.app/

2.2 JavaScript

- Thời gian: Tuần 2, 3

- Nội dung:

o Tìm hiểu kỹ và chuyên sâu về ngôn ngữ JavaScript

o Tìm hiểu về Clean Code trong JavaScript với các tiêu chuẩn như AirnB

o Nghiên cứu yêu cầu để xây dựng project Album dựa trên MERN Stack:

 Hỗ trợ việc upload ảnh, phân quyền người dùng

 Xem ảnh với độ phân giải cao

11

- Thực hiện:

o Tìm hiểu về clean code trong JavaScript như hoisting, hàm closure, type conersion, type

conversion, DOM, Array và các hàm built-in, functional programming, OOP

o Tìm hiểu về các advanced topic như:

 Memory leak

 Độ phức tạp BigO của các hàm

 Tối ưu hóa web với Google V8 Engine

- Kết quả

o Hiểu rõ về scope, cách JavaScript quản lý bộ nhớ

o Các nội dung mới được thêm vào từ ES7 trở đi

o Học được cách mô hình hóa một cách trực quan, chính xác hơn, cách giải quyết vấn đề

thông qua project album

o Code và nghiên cứu: https://github.com/CongPhiNguyen/udemy-basic

o Webdemo: https://demo-udemy-phi.netlify.app/

2.3 MERN Stack

- Thời gian: Tuần 4, 5, 6

- Nội dung:

o Tìm hiểu về stack công nghệ MERN để nên một trang web

o Tiếp tục nghiên cứu về Project Album

o Ngoài ra anh An có giới thiệu thêm về một số stack công nghệ: Redis, Redux Saga(Để thực hiện Rollback), môn hình producer – consumer(piprline, worker, queue, rabbit mq), Kafka, middleware và cache, process và quản lý, Docker, K8S,…

trong việc lưu trữ dữ liệu, phù hợp với các ứng dụng realtime giống như mạng xã hội hoặc thương mại điện thử

 E: ExpressJS là một web framework được xây dựng bằng JS chạy trên nền

NodeJS Nó hỗ trợ thêm nhiều tính năng cần có của 1 framework như: routing, middlewares, template engines,

 R: ReactJS là một thư viện JS(không phải thư viện của Node) được tạo bởi

Facebook và Instagram Đặc trưng của nó là cho phép việc Render dữ liệu không chỉ có thể thực hiện ở Server mà còn có thể thực hiện ở Client(SSR)

 N: NodeJS là một JavaScript runtime dùng để tạo ứng dụng mạng nhanh chóng,

theo hướng event-driven và non-blocking IO, sử dụng các built in của HTTP Server framework để mà sử dụng hosting

- Kết quả:

o Hiểu rõ hơn về MERN Stack, được các anh chị chỉnh sửa lại các phần kiến thức bị hiểu

sai và giải quyết các thắc mắc

o Qua project Album hiểu thêm được các vấn đề về công nghệ, đi từ ý tưởng đến giải

o Nghiên cứu về Docker với các phần chính: image, container, dockerfile, dockerhub

o Build một image từ một ứng dụng web có sẵn

o Sử dụng Docker để chạy local một số ứng dụng web cần cấu hình phức tạp

- Kết quả:

13

o Những kiến thức nghiên cứu em có note lại sử dụng docusaurus để tạo document có thể

truy cập nhanh khi cần thiết:

 https://further-research.vercel.app/

o Hiểu hơn về cách docker hoạt động, cách build images, run container và có thể sử dụng

trong các mục đích sau này

3 Thực hiện project

- Sau hai tháng được học tập, nghiên cứu, thực tập sinh đã nắm được các kiến thức cơ bản về HTML, CSS, JavaScript và MERN Stack Trong tháng thứ ba, 6 bạn thực tập sinh được chia ra làm 3 nhóm, mỗi nhóm 2 người thực hiện các project khác nhau Em và Lương Thiện Phước cùng nhau làm 2 project là các tool nội bộ của tông ty

- Chi tiết dự án sẽ được nói ở phẩn sau

4 Lịch làm việc

Tuần Công việc Người 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

- Nghiên cứu về HTML,CSS, các nguyên tắcdesign

- Nghiên cứu về TOTP

Anh Hùng, anh An

và chị Linh

2, 3 - Tìm hiểu về JavaScript,

Thiết kế project Album

Anh An, anh Hùng,anh Hào, chị Hồng4,5,6,7

- Tìm hiểu MERN Stack

- Xây dựng project albumtham khảo

Anh An, anh Hào

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

3.1 Project 1: Service registration

- Nội dung project:

o Trong công ty có rất nhiều service, hiện tại với cấu trúc cũ, khi tạo một service với, người tạo service phải tạo một trang confluence, sau đó viết mô tả các service Việc này đặt ra vấn đề là khi tạo một service sẽ tốn thời gian, khó quản lý và không biết được các service này có tương tác với nhau như thế nào

o Từ đó đặt ra vấn đề phải có một phần mềm quản lý các service này, hỗ trợ việc nhập các service của người dùng

o Dưới sự gợi ý của anh An, nhóm em gồm em và Phước thực hiện tạo các trang: form nhập các service, sửa, xóa service, visualise sự tương tác giữa các service bằng các biểu đồ

 Kiểm tra sự phụ thuộc của các service

 Xem tất cả service để tiện cho việc quản lý

- Các màn hình chính:

o Xem service:

- Thêm service

17

- Tổng kết project:

o Giá trị của project:

 Giúp việc thêm service được đơn giản hơn, tiện dụng cho việc quản lý, kiểm tra

sự phụ thuộc của các service

o Ưu điểm:

 Đã thực hiện được tính năng cơ bản cho việc nhập

 Kiểm tra được sự phụ thuộc, thông báo cho người dùng khi người dùng thêm hoặc xóa service

 Tiện cho DevOps có cái nhìn tổng quát hơn về dự án

o Nhược điểm

 Giao diện còn chưa tiện dụng, cách bố trí các ô nhập, các nút chưa hợp lý

o Những kiến thức học được:

 Trong quá trình làm, em có tham gia vào quá trình deploy, biết thêm các kiến thức sử dụng biến môi trường và bước đầu sử dụng CI CD

 Học được cách cấu hình một project hoàn chỉnh để deploy với MERN Stack

3.2 Project 2: VUI Monitoring

- Nội dung project:

o Mỗi khi các anh chị Product muốn xem chi tiết số điểm VUI được cho đi hay số điểmVUI được sử dụng trong ngày thì phải sử dụng BigQuery hay MongoDB để truy vấn thì

sẽ rất tốn thời gian và không xem được realtime để kiểm soát hay nắm được tình hình khiđiểm VUI được cho đi hay sử dụng vượt quá ngưỡng an toàn

o Do đó, em và Phước dưới sự gợi ý và hướng dẫn của anh An đã xây dựng nên một ứngdụng giúp xem chi tiết sự chuyển đổi của dòng tiền VUI

- Các tính năng chính:

o Xem dòng tiền VUI chuyển đổi theo ngày, tuần, tháng

o Xem dòng tiền VUI chuyển đổi realtime

o Lọc theo các nhãn hàng, service có chuyển đổi dòng tiền

o Xem chi tiết các giao dịch chuyển đổi dòng tiền VUI

- Các màn hình:

o Màn hình chính xem chuyển đổi dòng tiền VUI:

19

o Màn hình Realtime xem trực tiếp chuyển đổi của dòng tiền VUI

- Xem chi tiết các giao dịch

- Tổng kết project:

o Giá trị project:

 Giúp bên Product và Dev nắm được thông tin khi dòng tiền VUI có vấn đề

 Trực quan các kết quả giúp cho việc đưa vào các báo cáo tiện lợi hơn

 Rà soát, kiểm tra các giao dịch ở các thời điểm cụ thể

o Ưu điểm

 Xây dựng được các biểu đồ trực quan, tiện dụng cho việc theo dõi

o Nhược điểm

 Phần phân chia các session chưa hợp lý

 Có các phần UI gây khó khăn cho người sử dụng

o Những kiến thức học được:

 Sử dụng database time series

 Học được cách cấu hình hoàn chỉnh một trang web có socket, chỉnh sửa base path

21

Chương 4: Tổng kết

4.1 Đánh giá chung

- Như vậy là trong vòng một tháng ngắn ngủi, nhóm đã hoàn thành hai dự án được đưa vào

sử dụng nội bộ trong công ty Hai project đã có khá đầy đủ các tính năng được gợi ý và đề raban đầu Do chưa trải qua các công đoạn test từ phía QC nên dự án đôi lúc cũng có những bug

về giao diện, về tính năng chưa đúng với mong muốn Em đã được pass chương trình TechFresher nên trong thời gian tới, những sản phẩm này sẽ còn cải thiện để đem lại thêm các lợi íchcho công ty

4.2 Ưu điểm

- Trong quá trình tham gia thực tập với chương trình Tech Fresher, em đã được làm quen với cáchlàm việc tại công ty, cải thiện từng tuần những điểm còn hạn chế trước đây

o Khi demo hay trình bày, em nói hơi nhanh, anh Hùng đã chỉ lại cho em cách hít thở để từ

đó phần demo hay trình bày được ổn hơn

- Chăm chỉ, hoàn thành công việc được giao và có nghiên cứu thêm, kỹ hơn về các công nghệ

- Biết cách chỉ ra vấn đề, đề ra giải pháp giải quyết

- Tốc độ code và khả năng tiếp thu bài học, research tốt hơn qua chương trình

4.3 Những điểm cần khắc phục

- Độ hoàn thiện của các code minh họa chưa cao

- Còn chưa chú ý đến convention, tính đúng đắn, bảo mật và testing

TÀI LIỆU THAM KHẢO

1 Trang document của ReactJS: https://reactjs.org/docs/getting-started.html

2 Trang document của ExpressJS: https://expressjs.com/

3 Trang document của MongoDB: https://www.mongodb.com/docs/manual/core/document/

4 Clean code trong JavaScript: https://github.com/ryanmcdermott/clean-code-javascript

5 Tiêu chuẩn AirnB trong JavaScript: https://github.com/airbnb/javascript

6 Tiêu chuẩn AirnB trong ReactJS: https://github.com/airbnb/javascript/tree/master/react

23