Bài tập lớn 2

Xây dựng website

dựa trên công cụ có
sẵn
XAMPP – Bitnami – Bubble.io

Powerpoint: Vũ Đức Minh Hiếu

Thuyết trình: Trịnh Võ Tấn Phát
Tìm kiểm nội dung + thực hành tạo web: Nguyễn Tuấn Long, Phạm
Trường Thịnh
Chủ đề thảo luận trong bài thuyết trình

• Xây dựng trang web bất kì dựa trên 3 công cụ

• So sánh về chức năng, ứng dụng…
• Nhận định về code, low-code, no-code
 01
Xây dựng
trang web
Cách tạo một trang web bằng Bubble IO

1 2 3 4
STEP STEP STEP STEP
Thêm nội dung trang
Tạo tài khoản Chỉnh sửa, tạo Tạo slidebar
web
trang web menu

Note:Các bước ở trên là những bước để tạo trang web của nhóm, không phải quy chuẩn nào!!!!
 STEP
1 Tạo tài khoản

Nhập email và password để đăng kí tài

khoản bubble.io

Sau khi đăng kí xong bấm vào Start

building
 STEP
2 Chỉnh sửa, tạo trang web

Tạo 1 ứng dụng mới và đặt tên cho nó:

 STEP
2 Chỉnh sửa, tạo trang web

Tạo 1 ứng dụng mới và đặt tên cho nó:

Chỉnh sửa 1 vài thông số cơ bản cho trang web
như màu nền, chiều dài, chiều rộng bằng cách
chuột phải vào web và chọn edit:
1 là bố cục
2 là màu
 STEP
2 Chỉnh sửa, tạo trang web

Tạo 1 ứng dụng mới và đặt tên cho nó:

Chỉnh sửa 1 vài thông số cơ bản cho trang web
như màu nền, chiều dài, chiều rộng bằng cách
chuột phải vào web và chọn edit:
Thêm chữ để làm nổi bật tên web(có thể chỉnh
sửa màu chữ cỡ chữ kiểu chữ bằng edit trong
hộp )
 STEP
3 Tạo slidebar menu

Để cho tiện sử dụng ta vào phần plugin và

tải về slidebar menu
 STEP
3 Tạo slidebar menu

Để cho tiện sử dụng ta vào phần plugin và

tải về slidebar menu

Lúc này trên thanh công cụ Ui builder sẽ

xuất hiện slidebar menu

Ta chỉ việc kéo thả vào màn hình và sử

dụng mục edit để chỉnh sửa cho đẹp mắt
 STEP
3 Tạo slidebar menu

Để slidebar hoạt hoạt động ta làm như sau:

Tại mục data chọn option sets  new

option set đặt tênnew option  nhập
các phần tử muốn them vào thanh slidebar
create
Quay trở lại mục thiết kế chọn edit slidebar
 STEP
3 Tạo slidebar menu

Để slidebar hoạt hoạt động ta làm như sau:

Tại mục data chọn option sets  new

option set đặt tênnew option  nhập
các phần tử muốn thêm vào thanh slidebar
create
Quay trở lại mục thiết kế chọn edit slidebar
Tại mục options chọn insert dynamic
dataget an optionall optionitem
displayjoin withlinebreak
 STEP
4 Thêm nội dung trang web

Do nhóm là web làm phim nên tôi sẽ thêm 1 vài bộ phim vào:
Tại thanh công cụ UI tạo 1 group ( có thể đặt tên,chỉnh màu, kích thước…)
Tải ảnh của những phim mà muốn up lên, đặt tên và sắp xếp gọn gang vào group vừa tạo
Để khi ấn vào poster phim mà xem được phim ta cần tạo 1 web khác mang nội dung của phim và 1 web chưa video
phim( làm tương tự các bước trên)
Để chuyển 2 trang web ta làm như sau:
Tại bức ảnh ta bấm vào start/edit workflow
Sau đó thêm 1 hành động
Bấm vào đường dẫn
Bấm vào mở 1 trang web khác và copy đường dẫn của web chưa nội dung phim vừa tạo:
 STEP
4 Thêm nội dung trang web
 STEP
4 Thêm nội dung trang web

Lúc này khi ta nhấp vào phim ta muốn xem sẽ hiện ra trang web khác ta vừa tạo:
 STEP
4 Thêm nội dung trang web

Tại web này ta chỉnh sửa workflow của nút xem phim dẫn đến đường dẫn của web chứa video xem phim(
làm tương tự trên):
 STEP
4 Thêm nội dung trang web

Tại web này ta chỉnh sửa workflow của nút xem phim dẫn đến đường dẫn của web chứa video xem phim(
làm tương tự trên):

Rồi làm tương tự với những bộ phim khác

Về cơ bản là ta đã hoàn thành 1 web xem phim
 STEP
4 Thêm nội dung trang web

Đây là web của nhóm chúng tôi:

So sánh về chức năng, ứng
dụng và khi nào sử dụng

XAMPP,, Bitnami và Bubble.io là ba công cụ phổ biến được

sử dụng để phát triển và triển khai ứng dụng web. Mỗi công cụ
có ưu và nhược điểm riêng, phù hợp với các nhu cầu khác
nhau của người dùng
XAMPP
 XAMPP
• Là viết tắt của 5 module được tích hợp bên trong nó bao gồm cross-platform (X), Apache (A),
MariaDB (M), PHP (P) và Perl(P)
• Là một phần mềm nguồn mở và miễn phí để tạo web server trên máy tính cá nhân, tương thích
với các hệ điều hành hiện nay như windows, linux, mac os
 XAMPP
Ưu Nhược
• Miễn phí và mã nguồn mở • Có thể phức tạp để thiết lập và quản lý

• Đơn giản để cài đặt và sử dụng • Không phù hợp với các dự án quy mô lớn

• Hỗ trợ nhiều ngôn ngữ lập trình và cơ sở dữ liệu

• Thích hợp cho việc phát triển ứng dụng web từ đầu
Bitnami
Giới thiệu về Bitnami
Bitnami là một nền tảng phát triển web cho phép bạn nhanh
chóng và dễ dàng tạo môi trường phát triển web cho các ngôn
ngữ và công nghệ khác nhau

Hỗ trợ nhiều ngôn ngữ lập trình và Thích hợp cho các dự án web quy
Đơn giản để cài đặt và sử dụng công nghệ mô vừa và nhỏ

Bạn chỉ cần chọn ứng dụng bạn muốn Bitnami hỗ trợ nhiều nền tảng đám mây Bitnami cung cấp các ứng dụng được
cài đặt, cung cấp thông tin cơ bản và và máy tính cục bộ. Bạn có thể dùng đóng gói sẵn cho nhiều ứng dụng doanh
bitnami sẽ giúp bạn thực hiện việc còn bitnami để chạy các ứng dụng trên AWS, nghiệp phổ biến. Bạn có thể sử dụng để
lại Azure, GG cloud platform.. triển khai trên AWS
Bitnami Kích thuớc ứng dụng

Khá lớn, vì chúng bao gồm tất cả các thành phần cần thiết để chạy ứng
dụng, làm tăng thời gian tải ứng dụng và sử dụng tài nguyên máy chủ

Nhược điểm
Tùy chỉnh

Không có nhiều tùy chỉnh khi cài đặt và cấu hình ứng dụng. Nếu bạn cần
tùy chỉnh sâu vào thì cần sử dụng một nền tảng khác

Chi phí

Bitnami cung cấp một phiên bản miễn phí nhưng bị giới hạn nhiều. Nếu
bạn muốn truy cập vào tất cả ứng dụng trong thư viện bitnami thì bạn cần
đăng kí phiên bản trả phí
Bubble IO
Bubble IO là gì?
• Là một nền tảng phát triển ứng dụng web không
cần mã ( no-code) cho phép bạn tạo các ứng dụng
web trực quan bằng cách kéo thả các thành phần
• Là lựa chọn tốt cho những người muốn phát triển
ứng dụng web mà không cần biết đến kỹ năng lập
trình
Ưu và nhược điểm
-Ưu điểm
• Không cần biết viết mã

• Dễ sử dụng, sửa đổi, dao diện kéo thả

• Nhiều plugin có sẵn

• Cộng đông lớn, hỗ trợ tuyệt vời

• Thích hợp các dự án quy mô nhỏ và vừa

Ưu và nhược điểm
-Nhược điểm
• Không linh hoạt như XAMPP hoặc Bitnami

• Không giúp nhiều cho việc học tập với coder

• Có thể không phù hợp với các dự án web phức tạp

So sánh XAMPP, Bitnami và Bubble IO

Đối tượng Loại nền tảng Tương thích Độ khó Tùy chỉnh Chi phí Ứng dụng

XAMPP Mã nguồn mở Máy tính cục bộ Trung bình Cao Miễn phí
Apache, MySQL,
PHP, Perl

Các ứng dụng web

Bitnami Mã nguồn mở
Đám mây, máy tính
cục bộ
Dễ sử dụng Hạn chế Miễn phí, trả phí
và ứng dụng máy
chủ đã được đóng
gói sẵn

Bubble IO Mã nguồn mở Máy tính cục bộ Trung bình Cao Miễn phí 7 ngày
Các ứng dụng web
và ứng dụng di động
Công cụ phù hợp nhất cho bạn sẽ phụ thuộc vào nhu
cầu và kinh nghiệm của bạn. Nếu bạn là một nhà phát
triển web có kinh nghiệm, bạn có thể muốn sử dụng
XAMPP để có được sự kiểm soát tối đa đối với môi
trường phát triển của mình. Nếu bạn là một nhà phát
triển web mới bắt đầu, bạn có thể muốn sử dụng
Bitnami để tạo môi trường phát triển web nhanh chóng
và dễ dàng. Và nếu bạn muốn phát triển ứng dụng web
mà không cần biết đến lập trình, bạn có thể muốn sử
dụng Bubble IO.
Nhận định về code,
low-code, no-code
Khái niêm về code, low-code và no-code

Nhận định về code, low-code, no-code

 Khái niệm

Code là quá trình viết các chương trình máy tính bằng ngôn ngữ lập
trình. Đây là một kỹ năng quan trọng đối với các nhà phát triển phần
mềm, nhưng nó cũng có thể là một thách thức để học hỏi và thành
thạo.

Low code là một phương pháp phát triển phần mềm sử dụng các công cụ
và khuôn mẫu để tự động hóa các tác vụ lập trình thường xuyên. Điều này
giúp giảm thời gian và chi phí phát triển ứng dụng, đồng thời mở rộng khả
năng tiếp cận phát triển phần mềm cho những người không có chuyên
môn kỹ thuật sâu.

No code là một phương pháp phát triển phần mềm mà không cần viết
mã. Thay vào đó, người dùng có thể sử dụng các công cụ kéo và thả để
tạo các ứng dụng. No code là cách tiếp cận đơn giản nhất để phát triển
phần mềm, nhưng nó cũng có những hạn chế về khả năng tùy chỉnh và
tính linh hoạt.
Nhận định về code, low-code và no-code
•Code vẫn là cách tiếp cận mạnh mẽ nhất cho các
ứng dụng phức tạp và đòi hỏi nhiều tùy chỉnh. Các
nhà phát triển code có thể tạo ra các ứng dụng đáp
ứng các yêu cầu cụ thể của doanh nghiệp hoặc tổ
chức.
•Low code là một giải pháp thay thế hiệu quả cho
code truyền thống cho các ứng dụng trung bình và
đơn giản. Low code có thể giúp các doanh nghiệp và
tổ chức phát triển các ứng dụng nhanh hơn và dễ
dàng hơn mà không cần phải thuê các nhà phát
triển code chuyên nghiệp.
•No code là một cách tiếp cận phù hợp cho những
người không có kiến thức kỹ thuật hoặc những
người cần tạo ra các ứng dụng đơn giản. No code có
thể giúp các cá nhân và doanh nghiệp nhỏ tạo ra các
ứng dụng mà không cần phải thuê các nhà phát
triển code.
Nhìn chung, code, low code và no
code là những cách tiếp cận phát triển
phần mềm có thể mang lại lợi ích cho
các doanh nghiệp và tổ chức ở các
quy mô khác nhau. Sự lựa chọn cách
tiếp cận nào phù hợp nhất phụ thuộc
vào các yếu tố như yêu cầu của ứng
dụng, trình độ kỹ năng của đội ngũ và
ngân sách của doanh nghiệp
Do you have any
questions?
Send it to us! We hope you
learned something new.