báo cáo bài tập nhóm đề tài thiết kế website ghi chú

Với sự tập trung chủ yếu vào tính năng và giao diện người dùng thân thiện, MiniPad không chỉ là một công cụ ghi chú thông thường mà còn là người bạn đồng hành trong việc tổ chức cu c sộ

HỌC VIỆN NGÂN HÀNG KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO BÀI TẬP NHÓM

Học Phần: Thiết kế Web

Hà Nội, 12/2023

HỌC VIỆN NGÂN HÀNG KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO BÀI TẬP NHÓM

Học Phần: Thiết kế Web

Đề tài: THIẾT KẾ WEBSITE GHI CHÚ

Nhóm sinh viên thực hiện : 9

Hà Nội, 12/2023

Ụ Ụ

LỜI CẢM ƠN iii

LỜI CAM ĐOAN iv

MỞ ĐẦU 1

1 Tính cấp thiết của đề tài 1

2 Kết cấu đề tài 1

CHƯƠNG I TỔNG QUAN VỀ ĐỀ TÀI 2

1 Giới thiệu về đề tài 2

2 Lĩnh vực hoạt động 2

3 Đối tượng hướng tới 2

4 Mục tiêu đề tài 3

5 Các website ghi chú khác 3

5.1 aNotePad 3

5.2 Notion 4

5.3 Google Keep 5

CHƯƠNG II GIỚI THIỆU CÔNG NGHỆ 7

1 Cơ sở lý thuyết 7

1.1 Giới thiệu HTML 7

1.2 Giới thiệu CSS 7

1.3 Giới thiệu ngôn ngữ JS 8

2 Công nghệ sử dụng 9

2.1 Tiptap 9

2.2 React (ReactJS hay React.js) 9

2.3 Firebase 10

2.4 Formik 11

2.5 React Router DOM 12

2.6 Remix Icon 13

2.7 Yup 13

2.8 Tailwind CSS 13

2.9 Typescript 14

CHƯƠNG III PHÂN TÍCH THIẾT KẾ WEBSITE 16

1 Domain 16

2 Các chức năng chính 16

3 Cấu trúc thư mục 18

4 Sơ đồ sitemap 19

4.1 Định nghĩa sitemap 19

4.2 Phân loại sitemap 19

4.3 Ưu điểm của sitemap 20

4.4 Triển khai sitemap 21

4.5 Triển khai chiến lược SEO 22

5 Responsive 22

5.1 Desktop 23

5.2 Tablet 26

5.3 Mobile 31

6 Triển khai 39

6.1 Triển khai website trên vercel 39

6.1.1 Định nghĩa 39

6.1.2 Triển khai 39

6.1.3 Kết nối vercel tới domain cá nhân 40

6.2 Triển khai website trên firebase 41

CHƯƠNG IV GIAO DIỆN WEBSITE 46

1 Đặc tả giao diện 46

1.1 Giao diện trang chủ 46

1.2 Giao diện khám phá Source Code 46

1.3 Giao diện nhóm tác giả 47

1.4 Giao diện donate 50

1.5 Giao diện đăng nhập 50

1.6 Giao diện quên mật khẩu 52

1.7 Giao diện đăng ký 54

1.8 Giao diện thông tin người dùng 55

1.9 Giao diện đăng xuất 58

1.10 Giao diện ghi chú 58

CHƯƠNG V TỔNG KẾT 66

TÀI LIỆU THAM KHẢO v

DANH MỤC HÌNH ẢNH

Hình 6 Thư viện Firebase 11

Hình 8 Thư viện React Router 13Hình 9 Thư viện tailwindcss 14Hình 10 Thư viện TypeScipt 15

Hình 12 Triển khai sitemap 21

Hình 14 Chia sẻ trang web trên facebook 22Hình 15 Giao diện trang chủ trên desktop 23Hình 16 Giao diện liên hệ trên desktop 24Hình 17 Giao diện trang ghi chú trên desktop 24Hình 18 Giao diện trang 404 trên desktop 25Hình 19 Giao diện trang chia sẻ ghi chú trên desktop 25Hình 20 Giao diện trang tài khoản trên desktop 26Hình 21 Giao diện trang chủ trên tablet 27Hình 22 Giao diện trang liên hệ trên tablet 28Hình 23 Giao diện trang ghi chú trên tablet 29Hình 24 Giao diện trang chia sẻ ghi chú trên tablet 30Hình 25 Giao diện trang tài khoản trên desktop 31Hình 26 Giao diện trang chủ trên mobile 33Hình 27 Giao diện ghi chú trên mobile 34Hình 28 Giao diện trang cá nhân trên điện thoại 35Hình 29 Giao diện liên hệ trên mobile 36Hình 30 Giao diện trang 404 trên mobile 37Hình 31 Giao diện ghi chú trên điện thoại 38Hình 32 Triển khai web trên vercel 40Hình 33 Kết nối domain cá nhân tới vercel 41Hình 34 Project overview của firebase 41Hình 35 Các phương thức đăng nhập với firebase 42Hình 36 Xác thực tên miền 43Hình 37 Cài đặt quyền cho Firestore Database 44Hình 38 Cài đặt quyền cho Storage 45

Hình 40 Khám phá Source Code 47

Hình 42 Nhóm tác giả 48Hình 43 Liên hệ với chúng tôi 48Hình 44 Người dùng nhập sai thông tin 49Hình 45 Người dùng gửi tin nhắn thành công 49Hình 46 Email phản hồ ừ khách hàngi t 50

Hình 65 Người dùng tạo ghi chú mới 59

Hình 67 Xác nhận xóa ghi chú 60Hình 68 Thông báo xóa ghi chú thành công 61Hình 69 Highlight văn bản 61Hình 70 Chèn ảnh trong ghi chú 62Hình 71 Thông báo người dùng nhập đường dẫn 62Hình 72 Giao diện sau khi chèn đường dẫn 63Hình 73 Liên kết chia sẻ với mọi người 63Hình 74 Sao chép liên kết thành công 64Hình 75 Người dùng nhập sai đường dẫn cấu hình 64

DANH MỤC VIẾT TẮT

LỜI CẢM ƠN

Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành nhất đến ThS Vũ Trọng Sinh – giảng viên của chúng em trong học phần Thiế ế Web Chúng em cảm ơn thầy đã luôn tật k n tình trong công việc và giúp đỡ chúng em hoàn thành bài làm của nhóm

Đồng thời, chúng em xin cảm ơn khoa Hệ thống thông tin quản lý đã đưa môn học Thiết

kế Web vào chương trình đào tạo Đây là môn học rất bổ ích với nhiều kiến thức và rất gần gũi với thực tiễn Thông qua môn học này, chúng em đã nắm được các kiến thức tổng quát

về website Việc được tiếp cận những nội dung này trong chương trình đào tạo sẽ là nền tảng

để sinh viên chúng em làm quen được với những công việc sau này

Trong quá trình thực hiện bài làm, với sự hướng dẫn của giảng viên, chúng em đã cố gắng vận dụng những kiến thức đã học kết hợp những sự tìm hiểu riêng với mong muốn hoàn thành bài làm một cách tốt nhất Do còn hạn chế về kinh nghiệm thực tế nên bài làm của nhóm có thể còn có những thiếu sót Chúng em rất mong sẽ nhận được ý kiến đóng góp của thầy để bài làm được hoàn thiện hơn!

Chúng em xin chân thành cảm ơn!

Nhóm sinh viên thực hiện

LỜI CAM ĐOAN

Nhóm xin cam đoan báo cáo bài tập nhóm “Thiết kế Web” là sản phẩm nghiên cứu và

thực hành của nhóm Bài báo cáo đảm bảo tính liêm chính trong học thuật, không đạo văn, gian lận hay bịa đặt Các thông tin tham khảo được trích dẫn nguồn đầy đủ và minh bạch Nhóm xin chịu toàn bộ trách nhiệm nếu bài báo cáo vi phạm các điều nêu trên

Hà Nội, ngày 27 tháng 12 năm 2023

Đại diện nhóm

Lương Ngọc Tuấn

MỞ ĐẦU

1 Tính cấp thiết của đề tài

ện nay, việc ghi chép bằng các thiết bị hiện đại ngày càng trở nên phổ biến vớHi i hầu hết mọi người Đây cũng là xu hướng trong xã hội hiện nay khi mọi người chỉ cần

sử dụng một chiếc thiết bị thông minh có thể mang theo mọi nơi, giúp ghi chép mọi ý tưởng hoặc thông tin quan trọng ngay lập tức, không cần mang theo tập giấy và bút Dữ liệu được ghi chép trên website sẽ được tự động lưu trữ và đồng bộ hóa để giảm rủi ro mất mát thông tin so với ghi chép bằng sách, vở có thể bị mất hoặc hỏng và thuận tiện theo dõi, quản lý thông tin một cách hiệu quả Người dùng có thể dễ dàng tìm thấy thông tin cần thiết, sắp xếp, đặt tên, hoặc chia sẻ ghi chú với bạn bè một cách thuận lợi qua các ứng dụng như email, tin nhắn, hoặc các nền tảng truyền thông xã hội Bên cạnh đó website cũng hỗ trợ tính năng tương tác như vẽ, chụp ảnh, giúp người dùng ghi lại thông tin một cách đa dạng và phong phú hơn Đặc biệt, sử dụng website để ghi chép giúp giảm lượng giấy tiêu thụ và có ích trong việc bảo vệ môi trường

Vì vậy, sau khi tiến hành khảo sát, nhóm đã quyết định thiết kế một trang web ghi

chú với các chức năng cơ bản cần thiết cho một trang web ghi chú cần có nhằm giúp cho việc ghi chép ngày càng tiện lợi, dễ dàng hơn với người dùng đặc biệt là học sinh, sinh viên

2 Kế ấ t c u đề tài

Đề tài được chia làm 5 chương như sau:

Chương I: Tổng quan về đề tài

Chương II: Phân tích thiế ế hệ t k thống

Chương III: Xây dựng website

Chương IV: Triển khai website

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

CHƯƠNG I TỔNG QUAN VỀ ĐỀ TÀI

1 Giới thiệu về đề tài

MiniPad là mộ ự án thiết kế web ghi chú độc đáo, nhằm mang tới cho người dùng t dmột trải nghiệm quản lý thông tin cá nhân và công việc đơn giản, linh hoạt và hiệu quả Với sự tập trung chủ yếu vào tính năng và giao diện người dùng thân thiện, MiniPad không chỉ là một công cụ ghi chú thông thường mà còn là người bạn đồng hành trong việc tổ chức cu c sộ ống hàng ngày

MiniPad cung cấp một loạt các chức năng quan trọng bao gồm khả năng tạo, sắp xếp, và quản lý ghi chú một cách linh hoạt Giao diện người dùng được thiết kế một cách đơn giản, với những nét thiết kế hiện đại, giúp người dùng dễ dàng tương tác và thực hiện công việc của mình một cách nhanh chóng

Đặc biệt, MiniPad hỗ ợ đồng bộ hóa và lưu trữ ực tuyến, cho phép người dùng tr trtruy cập ghi chú từ mọi thiết bị có kết nối internet Điều này tăng cường tính di động và

sự ện lợti i Đồng thời, MiniPad giữ thông tin cá nhân và công việc của người dùng được

an toàn và bảo mật

2 Lĩnh vực hoạt động

MiniPad được xây dựng với mục tiêu đem lại trải nghiệm người dùng tối ưu, thuận lợi trong học tập và công việc Website cung cấp đa dạng các tính năng để đáp ứng nhu cầu cụ ể củth a người dùng trong các lĩnh vực khác có nhu cầu ghi chú

Nhu cầu ghi chép lại những kiến thức, công việc của mọi người luôn là yếu tố được quan tâm hàng đầu Thay vì ghi chép thủ công bằng tay, ra giấy gây lên nhiều bất cập trong việc tìm kiếm cũng như lưu trữ thông tin thì hiện nay người dùng ưu chuộng ghi chép thông tin, h c tọ ập trên các app, website ghi chú Bởi lẽ chúng không chỉ giải quyết những bất cập trên mà còn tiện lợi cho việc cầm tay, truy cập mọi lúc, đặc biệt là dễ sử dụng, mọi người có thể dễ dàng sử dụng trong lớp để ghi chú những kiến thức hay đơn giản là ghi chú những lờ ẹn, lịch hẹn hàng ngày.i h

3 Đối tượng hướng tới

MiniPad được thiết kế để hướng đến một đối tượng người dùng rộng lớn và đa dạng, nhằm đáp ứng nhu cầu quản lý công việc cá nhân Đối tượng chính bao gồm những người làm việc tự do, những cá nhân cần duy trì sự tổ ức và hiệu quả trong công việc hàng chngày Cho những người học sinh và sinh viên, MiniPad trở thành một công cụ hữu ích trong việc ghi chú, lập kế hoạch học tập và theo dõi deadline Các chuyên gia quản lý dự

án cũng có thể tận dụng MiniPad để tổ ức công việc, theo dõi tiến độ và tương tách c với

4 Mục tiêu đề tài

Website ghi chú được thiết kế để tạo ra một trải nghiệm người dùng thân thiện và hiệu quả Giao diện của trang web được thiết kế đơn giản, với màu sắc và font chữ dễ nhìn, giúp người dùng dễ dàng tập trung vào ghi chú Các biểu tượng và icon được sử dụng một cách trực quan và rõ ràng, giúp người dùng hiểu ngay chức năng

Để tối ưu hóa trải nghiệm người dùng, giao diện được phân chia rõ ràng thành các khu vực chức năng, giúp người dùng dễ dàng tìm kiếm và sử dụng các tính năng Đồng thời, website cung cấp các công cụ trợ giúp và hướng dẫn sử dụng, giúp người dùng mới nhanh chóng làm quen với các chức năng

Chức năng ghi chép được thiết kế linh hoạt, cho phép người dùng ghi chép thông tin theo nhiều định dạng như văn bản, hình ảnh, âm thanh, và video Chức năng chỉnh sửa đồng thời giúp người dùng thêm, xóa, và cập nhật thông tin một cách thuận tiện Việc lưu trữ thông tin trên máy chủ của website đảm bảo an toàn và tiện lợi cho người dùng Đối với chức năng tìm kiếm và lọc thông tin, website ghi chú mang đến trải nghiệm hiệu quả Người dùng có thể tìm kiếm thông tin theo từ khóa, ngày tháng, chủ đề, giúp

họ dễ dàng định dạng thông tin cần thiết trong số ợng ghi chép lớn Tất cả những tính lưnăng trên đều được tích hợp một cách hài hòa, đảm bảo người dùng có trải nghiệm thuận lợi và hiệu quả khi sử dụng website ghi chú này Ngoài ra, MiniPad có tính năng chia sẻ ghi chú và tương tác xã hội được tích hợp để tạo cơ hội cho người dùng chia sẻ thông tin

và ý tưởng với người khác làm việc hiệu quả hơn

Chức năng đa dạng của aNotepad cho phép người dùng tạo danh sách công việc,

sử dụng nó như một cuốn nhật ký hàng ngày để ghi lại sự kiện trong ngày, lưu trữ danh sách mua sắm và thậm chí ghi chú trong lớp Quan trọng hơn, người dùng có khả năng chia sẻ và cộng tác với những người khác một cách dễ dàng

aNotepad không chỉ giúp người dùng lưu trữ thông tin một cách thuận tiện mà còn cung cấp quyền kiểm soát với các tùy chọn bảo vệ ghi chú bằng mật khẩu và quyền ghi chú riêng tư Người dùng cũng có thể tận hưởng khả năng tải xuống ghi chú dưới nhiều định dạng khác nhau và chia sẻ chúng qua nhiều phương tiện khác nhau như email hay mạng xã hội

ệc tổ Vi chức ghi chú trong các thư mục giúp người dùng duy trì sự sắp xếp và dễ dàng tìm kiếm thông tin khi cần thiết Tấ ả ững tính năng này cùng nhau tạo nên t c nhmột không gian làm việc trực tuyến linh hoạt và hiệu quả cho việc quản lý thông tin

và công việc cá nhân

Hình 1 Web aNotepad

5.2 Notion

Notion mang đến nhiều ưu điểm cho người dùng, làm cho việc sử dụng ứng dụng này trở nên hợp lý và thuận tiện Đầu tiên, ưu điểm lớn nhất là Notion là một dịch vụ hoàn toàn miễn phí cho người dùng cá nhân, với những tính năng vượt trội Điều này tạo điều kiện thuận lợi cho người dùng tận hưởng những tính năng mạnh mẽ mà không tốn kém

Giao diện của Notion được thiết kế đẹp mắt và đơn giản, với tông màu đen trắng mang lại cảm giác thoải mái cho người dùng Sự đơn giản này không chỉ giúp trải nghiệm ngư i dùng trờ ở nên trực quan mà còn tối ưu cho việc tương tác và làm việc

Tính đồng bộ nhanh chóng là một ưu điểm quan trọng, giúp dữ ệu được đồng li

bộ ngay lập tức trên mọi nền tảng, từ Android, iOS đến Windows Điều này tạo thuận

lợi lớn cho người dùng di động và đa nhiệm trên nhiều thiết bị

Khả năng tùy biến đa dạng của Notion là một điểm mạnh, cho phép người dùng tạo không gian ghi chú theo phong cách cá nhân với icon, màu sắc, và cách sắp xếp

dữ ệu theo ý muốn.li

Ngoài ra, chức năng tìm kiếm nhanh chóng và cấu trúc thông tin giúp người dùng

dễ dàng tìm kiếm và quản lý thông tin

Tuy nhiên, Notion cũng mang đến một số nhược điểm, đặc biệt là trên điện thoại nơi việc soạn thảo có thể ở nên chậm chạp Hơn nữa, trên máy tính, việc Notion tắtr t khi tắt trình duyệt cũng là mộ ạn chế mà ngườt h i dùng cần lưu ý

Hình 2 Web Notion

5.3 Google Keep

Google Keep là một lựa chọn hiệu quả cho bất kỳ ai có nhu cầu quản lý công việc và ghi chú cá nhân Google Keep là một dịch vụ ễn phí, giúp người dùng tiếmi t kiệm chi phí trong quá trình quản lý thông tin cá nhân

Khả năng đồng bộ giữa nhiều thiết bị là một trong những ưu điểm nổi bật của Google Keep Việc có thể ghi chú và theo dõi công việ ở bất cứ đâu và bất kỳ lúc c nào mang lại sự thuận tiện và linh hoạt Đặc biệt, tính năng này giúp cả nhóm làm việc có thể cùng nhau làm việc trên các ghi chú và mục tiêu chung

Google Keep cũng là sự lựa chọn phù hợp cho những người muốn quản lý công việc theo mục tiêu (OKRs) một cách linh hoạt và sáng tạo Hệ ống này giúp ngườth i

Hình 3 Web Google Keep

cụ ể trên trang web đượth c biểu diễn.

HTML cung cấp cấu trúc cơ bản cho mọi trang web, bao gồm các thành phần

như tiêu đề, đoạn văn bản, liên kết, hình ảnh, biểu mẫu, danh sách, và nhiều tính năng khác Nó là ngôn ngữ ủ yếu để tạo ra nền tảng cho trải nghiệm web và chđóng vai trò quan trọng trong việc định hình giao diện và nội dung trên các trình duyệt web

HTML thường được kết hợp với CSS (Cascading Style Sheets) để tạo ra giao

diện thẩm mỹ và định dạng trang web, cũng như với JavaScript để thêm các tính năng tương tác động Tất cả cùng nhau, HTML, CSS, và JavaScript tạo nên một triển khai web đa dạng và linh hoạt, đáp ứng nhu cầu ngày càng cao của người sử dụng internet trên toàn thế giới

HTML là một ngôn ngữ được sử dụng rộng rãi trong phát triển web, hưởng

lợi từ một cộng đồng lớn và nhiều nguồn tài nguyên hỗ trợ Với sự đơn giản trong quá trình học và triển khai, HTML được đánh giá cao vì nhiều ưu điểm

Các ưu điểm của HTML bao gồm khả năng hoạt động mượt mà trên hầu hết

các trình duyệt hiện nay, tính đơn giản trong quá trình học, mã nguồn mở và hoàn toàn miễn phí, sự ngắn gọn và đồng nhất trong việc sử dụng các Markup, cũng như việc được chuẩn hóa bởi World Wide Web Consortium (W3C) HTML dễ dàng tích hợp với các ngôn ngữ backend như PHP, Node.js,

Tuy nhiên, HTML cũng mang theo một số nhược điểm Nó chủ yếu áp dụng

cho trang web tĩnh, và để tạo ra các tính năng động, người phát triển cần phải k t ếhợp với JavaScript hoặc các ngôn ngữ backend như PHP Người dùng cũng phải tạo các trang web riêng lẻ cho HTML, ngay cả khi chúng có các phần tử giống nhau Một số trình duyệt cũ hơn có thể ấp nhận các tính năng mới một cách chchậm chạp, gây ra khả năng hiển thị không đồng đều trên các nền tảng khác nhau

1.2 Giới thiệu CSS

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ ết kế được sử thidụng nhằm mục đích đơn giản hóa quá trình tạo nên một website CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C)

CSS là một ngôn ngữ lập trình mà bạn có thể sử dụng để điều chỉnh và tùy

chỉnh một phần quan trọng của giao diện trang web Thông qua CSS, bạn có khả năng kiểm soát màu sắc của văn bản, định dạng kiểu phông chữ, điều chỉnh khoảng cách giữa các đoạn văn, quyết định cách các cột và phần tử khác được đặt kích thước và bố trí, cũng như thay đổi hình ảnh hoặc màu nền

Quá trình hoạt động của CSS bắt đầu bằng việc xác định các vùng cụ ể thtrong HTML mà bạn muốn tùy chỉnh, thông qua việc chọn thẻ HTML, ID, hoặc class Sau đó, CSS áp dụng các quy tắc và thuộc tính tương ứng vào các vùng đã chọn, thay đổi cách chúng hiển thị trên trình duyệt Điều này giúp tạo ra một trải nghiệm người dùng đa dạng và tương thích với nhiều loại thiết bị và kích thước màn hình khác nhau CSS không chỉ là công cụ quan trọng trong việc thiết kế giao diện trang web mà còn mang lại hàng loạt các hiệu ứng và tùy chỉnh khác nhau

để làm cho trang web của bạn trở nên độc đáo và thú vị

CSS cũng nổi bật với khả năng tải nhanh chóng, nhờ vào cách nó sử dụng ít

mã và có khả năng tương thích tốt với nhiều trình duyệt khác nhau Điều này đảm bảo rằng trang web xây dựng bằng CSS sẽ hiển thị một cách đồng đều trên mọi nền tảng, tạo ra trải nghiệm nhất quán cho người dùng

Một ưu điểm khác là khả năng dễ bảo trì của CSS Khi cần thay đổi kiểu dáng hoặc cập nhật giao diện, việc chỉnh sửa trong mã CSS giúp áp dụng thay đổi một cách nhanh chóng trên toàn bộ trang web Điều này giúp người phát triển duy trì

và quản lý dự án một cách hiệu quả

Tuy nhiên, CSS cũng đối mặt với một số nhược điểm Một trong những thách thức chính là sự khác biệt trong cách CSS hoạt động trên từng trình duyệt, đòi hỏi

sự kiểm thử kỹ ỡng để đảlư m bảo tính nhất quán trên mọi nền tảng

1.3 Giới thiệu ngôn ngữ JS

JavaScript (viế ắt là JS) là một t t ngôn ngữ lập trình chủ yếu đượ ử dụng để c slàm cho trang web trở nên tương tác và động đáng hơn Ban đầu, JavaScript được phát triển để ạy trên trình duyệt web, nhưng sau đó, nhờ vào sự phổ cập và mở chrộng, nó đã mở rộng khả năng sử dụng của mình đến nhiều môi trường khác nhau như máy chủ (Node.js), ứng dụng di động, và nhiều nền tảng khác

JavaScript là một ngôn ngữ lập trình dựa trên sự kiện (event-driven) và không đồng bộ (asynchronous), điều này có nghĩa là nó có thể phả ứng với sự kiện và n

thay đổi trạng thái của trang web mà không cần phải tải lại trang Nó giúp thêm các tính năng tương tác như biểu đồ động, kiểm soát form, thay đổi nội dung của trang, và nhiều hơn nữa

JavaScript thường được tích hợp trực tiếp vào mã HTML của trang web hoặc được sử dụng thông qua các tệp mã nguồn bên ngoài Một số thư viện và framework nổi tiếng như React, Angular và Vue.js cũng được xây dựng trên nền tảng JavaScript để giúp phát triển ứng dụng web hiện đại và dễ bảo trì

2 Công nghệ sử dụng.

2.1 Tiptap

Tiptap là một thư viện JavaScript được thiết kế đặc biệt để xây dựng trình soạn thảo văn bản WYSIWYG (What You See Is What You Get) trong các ứng dụng web, đặc biệt là khi tích hợp với các framework JavaScript như Vue.js Thư viện này cung cấp một giải pháp linh hoạt và mạnh mẽ để tạo và quản lý nội dung văn bản có định dạng, mang lại trải nghiệm soạn thảo tiện lợi và chất lượng cho người dùng

Với Tiptap, việ ạo ra một trình soạn thảo văn bản có định dạng trở nên đơn c tgiản và linh hoạt Thư viện này hỗ ợ nhiều tính năng như định dạng văn bản, trchèn hình ảnh, thêm liên kết, và nhiều tính năng soạn thảo khác, giúp người phát triển tùy chỉnh và tích hợp theo nhu cầu cụ ể củ ứng dụng.th a

Đặc biệt, với khả năng làm việc tốt với Vue.js, Tiptap cho phép tích hợp dễ dàng vào các ứng dụng Vue.js mà không gặp nhiều khó khăn Thư viện này cũng được thiết kế với sự mở rộng và tùy chỉnh cao, giúp đáp ứng nhanh chóng với các yêu cầu và thay đổi trong quá trình phát triển ứng dụng

Hình 4 Thư viện tiptap

2.2 React (ReactJS hay React.js)

React là một thư viện JavaScript mã nguồn mở được phát triển bởi đội ngũ

kỹ sư tại Facebook, và đã được giới thiệu vào năm 2011 Nguyên lý xây dựng cơ

bản của React dựa trên hướng thành phần (component-based approach), cho phép tái sử dụng dễ dàng và phù hợp với việc phát triển ứng dụng một trang (Single Page Application - SPA)

React đặt trọng tâm lớn vào việc xây dựng giao diện người dùng thông qua việc sử dụng JSX, một cú pháp mở rộng của JavaScript JSX giúp lập trình viên

mô tả giao diện người dùng một cách rõ ràng và có cấu trúc, tạo thuận lợi cho việc quản lý và duy trì mã nguồn

Đặc điểm quan trọng của React là việc sử dụng DOM ảo (virtual DOM), một

cơ chế tối ưu hóa quá trình render của trang web Thay vì cập nhật trực tiếp DOM khi có sự thay đổi, React sử dụng virtual DOM để đánh giá thay đổi và chỉ cập nhật những phần cần thiết của trang, giúp tăng hiệu suất và trải nghiệm người dùng

Hình 5 Thư viện React

2.3 Firebase

Firebase, là một nền tảng dịch vụ đám mây độc đáo của Google, đã trở thành một công cụ quan trọng trong việc phát triển ứng dụng web và di động hiện đại Với Firebase, các nhà phát triển có thể tận dụng một loạt các dịch vụ đa dạng để

giảm bớt gánh nặng liên quan đến cơ sở hạ tầng và tập trung vào việc xây dựng chức năng và trải nghi m người dùng.ệ

Firebase Realtime Database cung cấp một giải pháp cơ sở dữ ệu thời gian li

thực, cho phép đồng bộ dữ ệu trên nhiều thiết bị một cách linh hoạt Firebase liAuthentication giúp xây dựng môi trường xác thực người dùng mạnh mẽ, hỗ ợ trnhiều phương thức xác thực khác nhau Firebase Cloud Functions cho phép triển khai mã nguồn chạy trên server mà không cần quản lý hạ tầng

Firebase Hosting mang đến giải pháp lưu trữ dễ dàng tích hợp, giúp phục vụ trang web hoặ ứng dụng web một cách hiệu quả Firebase Cloud Messaging hỗ c trợ gửi thông báo đẩy, trong khi Firebase Analytics cung cấp các công cụ phân tích để theo dõi hiệu suất và tương tác người dùng Firebase Storage quản lý lưu trữ các tệp tin như hình ảnh và video một cách thuận tiện

Hình 6 Thư viện Firebase

2.4 Formik

Formik là một thư viện JavaScript mã nguồn mở được thiết kế để quản lý và

xử lý mẫu (forms) trong ứng dụng React một cách hiệu quả Với Formik, quá trình quản lý trạng thái, xác thực, và xử lý sự kiện của mẫu trở nên đơn giản và có tổ chức hơn, giúp giảm bớt độ phức tạp và mã nguồn không cần thiết trong việc xây dựng và duy trì các biểu mẫu

Thư viện này tập trung vào việc cung cấp các công cụ linh hoạt để xử lý nhiều khía cạnh của mẫu, bao gồm cả quản lý giá trị trường, xác thực đầu vào, và xử lý

sự kiện mẫu Formik hỗ ợ cả việc xây dựng các mẫu đơn (single form) và các trmẫu phứ ạp vớc t i nhiều trường và các tương tác phức tạp

Formik tích hợp chặt chẽ với React và hỗ ợ các tính năng như xác thựtr c realtime, xử lý sự kiện tương tác, và tương thích tốt với các thư viện khác trong cộng đồng React như Yup để xác thực dữ liệu Với Formik, việc tạo và duy trì các biểu mẫu trong ứng dụng React trở nên dễ dàng và có tổ ức hơn, giúp tăng hiệu chsuất phát triển và bảo trì mã nguồn

Hình 7 Thư viện Formik

2.5 React Router DOM

React Router DOM là một thư viện quan trọng trong cộng đồng phát triển React, được sử dụng để quản lý định tuyến (routing) trong ứng dụng web React Với React Router DOM, nhà phát triển có thể thêm và quản lý các đường dẫn URL trong ứng dụng một cách linh hoạt, giúp tạo ra các trang web đa trang (multi-page) với trải nghiệm người dùng mư t mà và tương tác.ợ

Thư viện này tích hợp chặt chẽ với React, cung cấp một cách dễ dàng để định tuyến giữa các thành phần React mà không cần phải tải lại toàn bộ trang Điều này giúp tối ưu hóa hiệu suất và tăng trải nghiệm người dùng

React Router DOM hỗ ợ nhiều tính năng mạnh mẽ như định tuyến nhúng tr(nested routing), chuyển hướng điều hướng (programmatic navigation), và quản

lý trạng thái định tuyến Nó cũng cho phép tùy chỉnh các thành phần UI khi chúng được kích hoạt bởi các đường dẫn cụ thể

Hình 8 Thư viện React Router

2.6 Remix Icon

Remix Icon là một bộ biểu tượng (icon set) mã nguồn mở linh hoạt và chất

lượng cao, được tạo ra để hỗ ợ các nhà phát triển và thiết kế trong việc tạo ra trgiao diện người dùng hiện đại và đẹp mắt Bộ biểu tượng này đặc biệt nổi bật với

sự đa dạng, bao gồm nhiều chủ đề và phong cách khác nhau, từ biểu tượng đơn giản cho ứng dụng web cho đến các biểu tượng đặc trưng cho ứng dụng di động Remix Icon có định dạng vector SVG, cho phép dễ dàng tùy chỉnh kích thước và màu sắc mà không làm mất chất lượng hình ảnh Sự linh hoạt này giúp nhà phát triển và thiết kế có thể tích hợp biểu tượng vào dự án của mình một cách thuận lợi

và không làm giảm chất lượng thiết kế

2.7 Yup

Yup là một thư viện xác thực dữ liệu JavaScript mã nguồn mở, được sử dụng rộng rãi trong cộng đồng phát triển web để kiểm tra và đảm bảo tính chính xác của dữ ệu nhập từ người dùng Thư viện này sử dụng cú pháp mô tả đơn giản và li

dễ đọc, cho phép người phát triển định nghĩa các quy tắc xác thực như kiểu dữ liệu, giới hạn giá trị, độ dài, và nhiều quy tắc khác một cách thuận tiện Yup tích hợp tốt với các thư viện quản lý trạng thái như Formik và React Hook Form, tạo

ra một quy trình xác thực d liữ ệu mượt mà trong ứng dụng React

2.8 Tailwind CSS

Tailwind CSS là một framework CSS utility-first mã nguồn mở, được thiết kế

để giúp xây dựng giao diện người dùng linh hoạt, hiệu quả, và dễ bảo trì Với

Tailwind, nhà phát triển có thể áp dụng các lớp CSS một cách trực tiếp vào các phần tử HTML mà không cần phải viết mã CSS riêng biệt Các class này được thiết kế để ực hiện các chức năng cụ ể như định dạng văn bản, kích thước, th thmàu sắc, đ chênh lộ ệch và nhiều tính năng khác

Thư viện này giúp tăng tốc quá trình phát triển bằng cách loạ ỏ sự cần thiếi b t phải viết mã CSS tùy chỉnh lớn, thay vào đó tập trung vào việc sử dụng các lớp utility để nhanh chóng đạt được thiết kế mong muốn Tailwind cũng hỗ ợ tr tùy chỉnh thông qua tệp cấu hình, cho phép nhà phát triển điều chỉnh các giá trị mặc định và thêm các class tùy chỉnh

Hình 9 Thư viện tailwindcss

2.9 Typescript

TypeScript là một ngôn ngữ lập trình mã nguồn mở, được thiết kế để giúp nhà phát triển xây dựng ứng dụng web lớn và dễ bảo trì hơn TypeScript mở rộng JavaScript bằng cách thêm vào nó các tính năng của ngôn ngữ lập trình hướng đối tượng, kiểu dữ liệu tĩnh, và nhiều tính năng khác để hỗ trợ quá trình phát triển ứng dụng lớn và phức tạp

Một trong những điểm mạnh quan trọng của TypeScript là hỗ ợ kiểu dữ ệu tr litĩnh, giúp phát hiện lỗi trong quá trình phát triển và cải thiện tính chất tự đồng nhất của mã nguồn Điều này giúp giảm thiểu rủi ro và tăng tính dễ bảo trì của ứng dụng TypeScript cũng cung cấp các tính năng như generics, decorators, và module, giúp nhà phát triển tổ chức mã nguồn một cách hiệu quả và linh hoạt hóa quá trình xây dựng ứng dụng

37Hình 30 Giao diện trang 404 trên mobile

là khả năng phát triển đơn giản, giúp những người làm web tập trung hoàn toàn vào việc xây dựng ứng dụng mà không cần lo lắng về cấu hình hệ thống máy chủ phức tạp Quá trình cài đặt trên Vercel cũng được tối ưu hóa để trở nên đơn giản và thân thiện với người dùng Việc triển khai ứng dụng chỉ là một quy trình

dễ dàng thông qua một lệnh duy nhất "vercel", giúp tiết kiệm thời gian và công sức cho những bước phức tạp Một điểm đáng chú ý là Vercel cung cấp dịch vụ miễn phí hoàn toàn cho người dùng cá nhân, điều này không chỉ giúp tối ưu hóa chi phí mà còn khuyến khích sự sáng tạo và phát triển cá nhân trong cộng đồng phát triển web Bên cạnh đó, SSL cũng được cung cấp miễn phí, đảm bảo tính

an toàn và bảo mật của ứng dụng web Vercel còn nổi bật với khả năng dễ dàng cài đặt domain, giúp người dùng linh hoạt quản lý và tùy chỉnh địa chỉ trang web của họ theo ý muốn Quá trình xây dựng và đẩy sản phẩm trở nên vô cùng thuận tiện, chỉ cần sử dụng một lệnh duy nhất, giúp giảm bớt rắc rối và tăng tốc độ phát triển Thêm vào đó, Vercel còn có Edge Network, cho phép người dùng chọn địa điểm triển khai để tối ưu hóa hiệu suất và đảm bảo trải nghiệm người dùng tốt nhất Điều này làm cho Vercel trở thành một lựa chọn mạnh mẽ cho những dự án web đòi hỏi sự linh hoạt, hiệu suất và tiện ích trong q

triển và triển khai

6.1.2 Triển khai

Để tối ưu hóa quá trình quản lý mã nguồn và triển khai ứng dụng web của nhóm, chúng ta có thể liên kết kho lưu trữ mã nguồn trên GitHub với nền tảng triển khai tự động Vercel Điều này giúp tự động hóa quy trình triển khai mỗi khi

có sự thay đổi trong mã nguồn

Bằng cách kết nối GitHub với Vercel, mỗi khi có một commit mới được thực hiện trong kho lưu trữ, Vercel sẽ tự động kích hoạt quy trình kiểm tra và triển khai Điều này đồng nghĩa với việ ứng dụng web sẽ luôn được cập nhật với phiên bảc n mới nh t cấ ủa mã nguồn

Với tính năng này, không cần phải can thiệp thủ công vào quá trình triển khai mỗi khi có sự thay đổi trong dự án Vercel sẽ tự động quét và triển khai từng nhánh của dự án trên GitHub, giúp đảm bảo rằng mọi cập nhật đều được áp dụng một cách nhanh chóng và đồng nhất

ậm chí, Vercel còn hỗ Th trợ tìm kiếm các nhánh cụ ể của dự án trên GitHub th

và triển khai chúng mỗi khi có sự thay đổi Điều này tăng cường khả năng linh hoạt và hiệu suấ ủa quy trình triển khai tự động, giúp nhóm phát triển tập trung t cvào việc viết mã và đ m bả ảo rằng ứng dụng luôn ổn định và hiệu quả

Hình 32 Triển khai web trên vercel

6.1.3 Kết nối vercel tới domain cá nhân

Sau khi triển khai thành công trên nền tảng Vercel, hệ ống sẽ tự động thựth c hiện quá trình triển khai của dự án mỗi khi có commit mới được thêm vào nhánh mặc định trên GitHub Đối với trường hợp khi đã liên kết Domain cá nhân với Vercel, hệ ống cũng sẽ tự động thựth c hiện việc triển khai trang web của bạn trên Domain đó Quá trình triển khai này tương tự như quá trình triển khai trên domain mặc định của dự án trên Vercel

Kết quả của quá trình này là có thể truy cập trang web của nhóm thông qua địa chỉ minipad software hoặc www.minipad.software Điều này mang lại sự thuận tiện và linh hoạt cho việc quản lý và truy cập dự án, đồng thời giúp đảm bảo rằng trang web luôn được cập nhật với những thay đổi mới nhất mỗi khi có commit được thêm vào