Dùng NoCode Bubble để tạo ứng dụng học ngoại ngữ cho trẻ em
Nguồn: Lachlan Kirkwood, Dịch: Huy Hoàng
Duolingo là một ứng dụng học ngôn ngữ rất thành công nhờ áp dụng gamification (trò chơi hóa) vào quá trình học. Người dùng học trực tiếp trên iOS hoặc Android, tham gia các thử thách, leo bảng xếp hạng và duy trì streak – chuỗi ngày học liên tục. Kết hợp với mức giá hợp lý và linh vật cú xanh “nhắc học” quen thuộc, Duolingo đã trở thành lựa chọn hàng đầu của rất nhiều người khi muốn học một ngôn ngữ mới.
Với Bubble, việc xây dựng những ứng dụng mạnh mẽ như vậy giờ đây trở nên đơn giản hơn rất nhiều. Bubble cho phép bạn thiết kế giao diện và xây dựng logic ứng dụng thông qua lập trình trực quan, không cần viết code, nhưng vẫn tạo ra được những sản phẩm hoạt động thực sự. Trên thực tế, rất nhiều maker trên thế giới đang dùng Bubble để xây marketplace, directory, thậm chí cả mạng xã hội.
Trong bài viết này, mình sẽ chia sẻ lại quy trình xây dựng một ứng dụng học ngôn ngữ kiểu Duolingo bằng Bubble. Bạn có thể áp dụng toàn bộ để tạo một bản clone hoàn chỉnh, hoặc chỉ chọn lọc những tính năng cốt lõi và workflow quan trọng để dùng cho dự án của riêng mình.
Cách tiếp cận tổng thể
Trước tiên, bạn cần đăng ký một tài khoản Bubble miễn phí để bắt đầu làm quen và thực hành trực tiếp trong quá trình xây dựng.
Khi bắt tay vào dự án, thường sẽ có hai hướng đi:
Phác thảo giao diện (wireframe) trước
Hoặc thiết kế cấu trúc database trước
Trong hướng dẫn này, mình sẽ bắt đầu từ thiết kế giao diện bằng công cụ trực quan của Bubble, sau đó kết nối dần với dữ liệu và workflow phía sau.
Các trang cốt lõi của ứng dụng
Với một ứng dụng học ngôn ngữ kiểu Duolingo, bạn nên có các trang chính sau:
Trang quản trị (backend):
Dùng để tạo bài học mới, bao gồm chọn ngôn ngữ, chọn danh mục và thêm từ vựng.Trang chọn ngôn ngữ:
Nơi người dùng chọn ngôn ngữ mà họ muốn học.Trang chọn danh mục bài học:
Hiển thị danh sách các chủ đề (category) trong từng ngôn ngữ.Trang bài học:
Nơi hiển thị nội dung học chính, câu hỏi và các lựa chọn trả lời.
Một điểm rất mạnh của Bubble là khả năng truyền dữ liệu giữa các trang. Nhờ đó, bạn không cần tạo nhiều trang giống nhau, mà chỉ cần một trang dùng chung, sau đó hiển thị nội dung động theo dữ liệu trong database.
Với Duolingo clone, mình chỉ tạo một trang bài học duy nhất, rồi dùng workflow để quyết định bài học nào sẽ được hiển thị ở từng thời điểm.
Cấu hình cơ sở dữ liệu
Sau khi đã định hình xong giao diện, bước tiếp theo là thiết kế database để ứng dụng có thể vận hành. Toàn bộ logic và workflow phía sau sẽ dựa trên các field dữ liệu này.
Bubble cung cấp sẵn hệ thống database, cho phép bạn tạo nhiều data type và field một cách rất nhanh. Với phiên bản MVP của Duolingo, mình bắt đầu từ data type cơ bản nhất:
Data type: User
Các field gồm:
Name – Tên người dùng
Languages learning – Danh sách các ngôn ngữ đang học
Ở đây, Languages learning không phải là text, mà là một List liên kết tới data type Language. Cách làm này giúp mỗi user có thể học nhiều ngôn ngữ, đồng thời vẫn giữ đầy đủ thông tin của từng ngôn ngữ (tên, icon, cấp độ…).
Đây là tư duy rất quan trọng khi thiết kế database trong Bubble và các nền tảng no-code.
Data type: Language
Các field gồm:
Name – Tên ngôn ngữ
National flag – Hình ảnh quốc kỳ đại diện
Categories – Danh sách các danh mục thuộc ngôn ngữ đó
Trong đó, Categories nên được thiết kế là một List liên kết tới data type Category.
Cách này giúp mỗi Language có thể chứa nhiều Category, và mỗi Category sẽ tiếp tục chứa các bài học tương ứng.
Data type: Category
Các field gồm:
Category title – Tên danh mục
Language – Ngôn ngữ mà danh mục này thuộc về
Image – Hình ảnh đại diện cho danh mục
Words – Danh sách các từ vựng trong danh mục
Trong đó:
Language là field dạng Single, dùng để xác định category này thuộc ngôn ngữ nào
Words là field dạng List, liên kết tới data type Word
Cấu trúc này giúp bạn:
Lọc category theo ngôn ngữ một cách rõ ràng
Load đúng danh sách từ vựng cho từng bài học khi hiển thị
Data type: Word
Các field gồm:
English spelling – Cách viết bằng tiếng Anh
Foreign spelling – Cách viết bằng ngôn ngữ đang học
Is correct – Đánh dấu đáp án đúng/sai (mặc định: No)
Category – Danh mục mà từ vựng thuộc về
Picture – Hình ảnh minh họa cho từ vựng
Trong đó:
Is correct được dùng để xác định đáp án đúng, từ đó phục vụ việc chấm điểm, tính streak và theo dõi tiến độ học
Category giúp liên kết từ vựng với bài học, đảm bảo mỗi lesson chỉ load đúng tập từ của nó
Khi đã hoàn thiện giao diện và cơ sở dữ liệu, bước tiếp theo là kết nối mọi thứ để ứng dụng có thể hoạt động thực sự.
Trong Bubble, việc này được thực hiện thông qua workflow. Workflow sẽ được kích hoạt bởi một sự kiện (như người dùng bấm nút) và sau đó chạy một chuỗi hành động tương ứng, ví dụ như tạo dữ liệu mới, cập nhật database hoặc xử lý logic ứng dụng.
Tạo từ vựng mới cho bài học
Một trong những tính năng đầu tiên chúng ta cần xây dựng là khu vực quản trị (back-end), nơi admin có thể thêm từ vựng mới để tạo bài học cho hệ thống.
Lưu ý: Trước khi làm bước này, bạn nên nhập sẵn danh sách ngôn ngữ và danh mục trực tiếp trong database của Bubble. Các danh mục có thể là Cơ bản, Du lịch, Con người,… và mỗi danh mục sẽ được gắn với một ngôn ngữ cụ thể.
Khi hệ thống đã có dữ liệu cơ bản, bước tiếp theo là tạo trang chọn ngôn ngữ để bắt đầu xây dựng bài học.
Trang upload-language sẽ dùng để hiển thị danh sách các ngôn ngữ mà admin có thể đóng góp nội dung.
Tại đây, chúng ta thêm một repeating group để liệt kê toàn bộ ngôn ngữ trong database. Repeating group này cần được cấu hình:
Data type: Language
Data source: Tìm danh sách tất cả Language trong hệ thống
Lúc này, bạn chỉ cần thiết kế nội dung cho một ô đầu tiên trong repeating group (grid). Sau đó, Bubble sẽ tự động nhân bản bố cục này và hiển thị dữ liệu tương ứng cho các ô còn lại dựa trên dữ liệu trong ứng dụng.
💡 Hiểu đơn giản:
Bạn chỉ cần thiết kế một ô mẫu
Bubble sẽ tự động nhân bản ô đó cho từng bản ghi trong database
Nội dung trong mỗi ô sẽ thay đổi động theo dữ liệu tương ứng
Đây là cơ chế cốt lõi giúp Bubble hiển thị các danh sách như ngôn ngữ, danh mục bài học, hay từ vựng trong mỗi lesson.
Gửi dữ liệu giữa các trang
Trong repeating group, bạn có thể gắn event cho từng dòng riêng lẻ. Điều này rất quan trọng khi xây dựng các luồng điều hướng trong ứng dụng.
Khi quản trị viên chọn một ngôn ngữ, chúng ta sẽ điều hướng sang bước tiếp theo và hiển thị các danh mục (category) thuộc ngôn ngữ đó để họ tiếp tục thêm bài học.
Workflow này được tạo bằng cách bắt sự kiện click vào tiêu đề của ngôn ngữ, từ đó xử lý điều hướng và truyền dữ liệu sang trang kế tiếp.
Trong workflow này, chúng ta sẽ dùng navigation event để chuyển người dùng sang trang tiếp theo, nơi dữ liệu được hiển thị dựa trên lựa chọn trước đó.
Tại bước này, hãy chọn trang đích là upload-category page.
Tiếp theo, chúng ta cần truyền dữ liệu sang trang này để Bubble biết cần hiển thị những category nào. Dữ liệu được gửi đi chính là Language của cell hiện tại trong repeating group mà người dùng vừa chọn.
Để Bubble hiểu và xử lý đúng dữ liệu, page type của upload-category phải trùng với kiểu dữ liệu được truyền từ workflow — ở đây chính là Language.
Tiếp theo, chúng ta cần cấu hình repeating group trên trang này để hiển thị danh sách các category mà ngôn ngữ của chúng bằng với ngôn ngữ của trang hiện tại.
Khi người dùng đã chọn một category để đóng góp nội dung, chúng ta sẽ xây dựng một workflow điều hướng khác, đưa họ đến cổng nơi có thể tải lên bài học mới (trang upload-word).
Trên trang upload-word, chúng ta cần cấu hình page type là Category, sau đó thêm tổ hợp các phần tử nhập liệu, bao gồm: trình tải ảnh (image uploader) và ô chọn (checkbox).
Sau khi chúng ta đã nhập nội dung của một từ mới vào các ô nhập liệu trên trang, chúng ta sẽ kích hoạt một workflow mới khi nút tạo (create button) được nhấn.
Bên trong workflow này, bước đầu tiên là tạo một “thing” mới — tức là tạo một bản ghi Word mới trong database.
Tiếp theo, chúng ta cần bắt đầu thêm các field phù hợp trong database. Hãy liên kết từng ô nhập liệu trên trang với field tương ứng trong cơ sở dữ liệu của bạn.
Khi tạo một từ vựng mới, hãy thêm đáp án đúng trước và nhớ tick vào checkbox is correct.
Trong workflow, chúng ta sẽ cập nhật field is correct của word để ghi nhận đây là đáp án đúng.
Lưu ý quan trọng là action này cần có điều kiện (conditional), chỉ chạy khi checkbox đã được tick.
Khi điều kiện thỏa mãn, trạng thái is correct sẽ được cập nhật thành Yes.
Sau khi từ vựng được tạo thành công, bước tiếp theo là gắn từ này vào category tương ứng.
Trong workflow, chúng ta sẽ chỉnh sửa category của trang hiện tại, và thêm word vừa tạo vào danh sách words của category đó.
Bước cuối cùng mà chúng ta sẽ thêm vào quy trình này là một chức năng để đặt lại tất cả các phần tử hiện tại trên trang, cho phép bạn dễ dàng thêm một từ thay thế không chính xác vào bài học này.
Hiển thị bài học cho người dùng
Sau khi đã tạo xong bài học ở cổng quản trị, chúng ta sẽ chuyển sang xây dựng trải nghiệm cho người dùng cuối.
Luồng thao tác của người dùng về cơ bản sẽ tương tự các bước trước, bắt đầu từ việc cho phép người dùng chọn ngôn ngữ muốn học từ danh sách.
Để tiết kiệm thời gian, bạn có thể sao chép lại trang upload-language đã tạo trước đó và điều chỉnh lại cho phù hợp với giao diện người dùng.
Trên trang này, chúng ta sẽ tạo một workflow mới khi người dùng nhấp vào biểu tượng ngôn ngữ.
Workflow này sẽ điều hướng người dùng sang trang chọn category, đồng thời truyền theo ngôn ngữ của cell hiện tại để hiển thị đúng danh sách bài học.
Bên cạnh việc điều hướng, chúng ta cần ghi nhận ngôn ngữ này vào hồ sơ người dùng.
Trong workflow, hãy chỉnh sửa User hiện tại, cụ thể là thêm ngôn ngữ của cell đang chọn vào danh sách Languages learning.
Trên trang chọn danh mục, chúng ta sẽ cấu hình loại trang là ngôn ngữ , cho phép chúng ta tham chiếu đến các danh mục riêng biệt mà chúng ta đã tạo.
Trong nhóm lặp lại của chúng ta, chúng ta sẽ tìm kiếm danh sách các danh mục có sẵn mà ngôn ngữ trùng với ngôn ngữ của trang hiện tại .
Bây giờ, khi một danh mục được chọn, chúng ta sẽ tạo một sự kiện điều hướng cuối cùng, đưa người dùng đến trang từ vựng bài học .
Trong quy trình này, chúng ta cũng sẽ chuyển tiếp các từ được lưu trữ trong danh mục của ô hiện tại .
Bây giờ, trên trang từ vựng bài học , chúng ta sẽ bắt đầu bằng cách cấu hình loại trang là một danh mục.
Tiếp theo, chúng ta sẽ bắt đầu thêm các yếu tố động vào trang để hiển thị từ nổi bật của bài học hiện tại.
Sau khi thêm từ khóa nổi bật của bài học thông qua trang tải lên, chúng tôi sẽ chọn hiển thị mục đầu tiên từ danh mục các trang hiện tại .
Tiếp theo, chúng ta sẽ thêm một nhóm lặp lại khác vào trang, nhưng lần này, chúng ta sẽ đặt kiểu nội dung là một từ .
Khi cấu hình nguồn dữ liệu cho nhóm lặp lại này, chúng ta sẽ tìm kiếm một danh sách các từ có danh mục trùng khớp với giá trị danh mục của trang hiện tại.
Vì nội dung trong nhóm lặp lại sẽ hiển thị danh sách các câu trả lời tiềm năng cho bài học của chúng ta, nên chúng ta cũng sẽ chọn cách xáo trộn ngẫu nhiên từng mục trong nhóm lặp lại đó.
Trong ô nhóm lặp lại của chúng ta, chúng ta sẽ thêm cách viết tiếng nước ngoài của từ đó và một hình ảnh để liên kết với chính từ đó
Đánh dấu câu trả lời đúng / sai
Khi người dùng làm bài học, chúng ta cần hiển thị kết quả câu trả lời là đúng hay sai.
Bằng cách sử dụng các icon (biểu tượng), bạn có thể dễ dàng hiển thị nhãn đúng hoặc sai tương ứng với lựa chọn của người dùng.
Các biểu tượng này chỉ nên xuất hiện sau khi người dùng chọn đáp án, vì vậy hãy cấu hình để chúng không hiển thị khi trang vừa được tải.
Tiếp theo, chúng ta cần tạo một quy trình làm việc mới khi người dùng nhấp chuột vào văn bản trong ô của nhóm lặp lại.
Trong workflow này, chúng ta sẽ thiết lập điều kiện (condition) cho trigger của văn bản.
Cụ thể, điều kiện sẽ kiểm tra xem từ ở cell hiện tại có field is correct = “yes” hay không.
Sau khi trình kích hoạt này được kích hoạt, chúng ta sẽ chọn hiển thị một phần tử — biểu tượng màu xanh lá cây của chúng ta.
Sau đó, chúng ta sẽ lặp lại quy trình tương tự, nhưng lần này chúng ta sẽ cập nhật điều kiện để xác định khi nào từ đúng = ‘không’ , dẫn đến việc hiển thị biểu tượng sai.
Kết luận
Vậy là chúng ta đã hoàn tất các bước xây dựng một bản sao Duolingo bằng Bubble: từ thiết kế giao diện, cấu hình cơ sở dữ liệu, đến tạo workflow cho cả admin và người học.
Với Bubble, bạn có thể tạo ứng dụng học ngôn ngữ đầy đủ chức năng mà không cần viết code, đồng thời dễ dàng mở rộng các tính năng như điểm số, streak, hay các bài học nâng cao.
Mình khuyến nghị bạn thử thực hành từng bước, tái sử dụng các page và workflow đã tạo, và đừng quên tận dụng cơ chế data type – field – repeating group để quản lý nội dung một cách linh hoạt.
Bắt tay vào làm ngay, và bạn sẽ thấy việc xây dựng ứng dụng phức tạp trở nên đơn giản và trực quan hơn nhiều với Bubble!