Dễ dàng tạo Web App với Wix Code

Đây là bài viết được tài trợ bởi Wix. Nội dung và quan điểm là của tác giả, duy trì độc lập biên tập dù bài viết được tài trợ.

Khi tạo website, nếu bạn là developer, bạn có thể dùng cách DIY: code và host mọi thứ tự mình. Nếu bạn là end-user/người tiêu dùng như đa số chúng ta, bạn dùng web builder để tạo website đẹp chỉ với vài cú nhấp chuột.

Wix thuộc nhóm sau: web builder cho phép tạo website đẹp miễn phí với vài chuột. Nhưng với Wix Code, ranh giới giữa tự làm và dùng web builder bị mờ nhạt. Bây giờ bạn có thể làm cả hai.

Nếu xây dựng web app hoặc website động, bạn phải dùng thuật ngữ kỹ thuật phức tạp: database, form, javascript để xây dựng website tương tác. Hầu hết web builder không cung cấp tools đó vì thêm phức tạp lớn cho app của họ.

Wix Code thêm những thứ đó vào công cụ web-building hiện có mà không thêm phức tạp. Nó cung cấp template để xây dựng và quản lý database, form, và cho phép thêm javascript code vào site. Tốt nhất: dùng tính năng dynamic pages để nhanh chóng điền nội dung từ database, làm cho nó giống CMS hơn là website builder.

Trong ví dụ dưới, chúng ta sẽ tạo blog Make Tech Easier đơn giản và thêm tính năng động từ Wix Code.

Thiết lập site mới với Wix

Giả sử bạn mới với Wix, bắt đầu bằng đăng ký tài khoản. Sau khi tạo xong, bạn sẽ được nhắc tạo website.

Tiếp theo, chọn loại website muốn tạo. Vì tôi clone blog Make Tech Easier, chọn "Blog".

Màn hình tiếp theo hỏi bạn muốn tạo website như thế nào.

Wix ADI dùng AI tạo site tự động. Nếu thích thủ công, chọn Wix Editor. (Để dùng Wix Code phải dùng Editor. Nếu chọn ADI, vẫn có thể chuyển sang Editor sau.)

Ví dụ này tôi dùng Wix Editor vì muốn kiểm soát hoàn toàn look and feel. Từ đó bạn bắt đầu với template (có hàng nghìn).

Để đơn giản, tôi bắt đầu với template trống layout classic. Hình sau là giao diện.

Truy cập Wix Code

Vào "Tools" → tích "Developer Tools".

Bây giờ bạn thấy cột "Site Structure" mới. Đây là nơi truy cập tất cả tính năng Wix Code.

Tạo database lưu bài viết

Tính năng hay của Wix Code: Database (Collection) cho phép tạo database và lưu data. Cho blog cần database lưu bài viết. Trong Database click "Add new collection". Đặt tên collection và chỉ định mục đích. Có vài loại database: user generated content, member submission, private data...

Sau khi tạo collection, bạn bắt đầu thêm field và data.

Đã tạo database Posts chứa title, content, published date và các khía cạnh bài viết. Tiếp theo, cần đưa nội dung database ra trang chủ.

Dynamic Pages (Trang động)

Dynamic pages giống template page: tạo một design, connect đến database, nó tự populate tất cả item trong database ra front page dưới URL riêng. Ví dụ: 6 bài trong database. Với một dynamic page, hiển thị tất cả bài trên site chính. Tiết kiệm công tạo trang thủ công cho mỗi bài. Có 2 loại dynamic page chính: Item Page (hiển thị 1 item) và Category (danh sách item tương tự).

Sau đây cách tạo dynamic pages và link đến site:

1. Trên toolbar nổi, nhấp biểu tượng đầu tiên → "Dynamic Pages" → "Add to site".
2. Chọn "Item Page" từ popup.
3. Trong URL, chọn field (trong database) dùng làm URL. Tôi set "title" làm URL.
4. Thiết kế page, thêm field từ database. Với mỗi element kéo thả, nhấp "Connect to Data" để link với field database. Ví dụ: kéo "Header 1" → link field "Title" trong Posts database.
5. Làm tương tự cho featured image, post content...
6. Xong design, preview xem front-end.
7. Bước tiếp: link dynamic page từ Home page. Load Home page → thêm Repeater widget từ "Lists and Grids". Connect widget đến Posts database, link mỗi element trong widget với field database. Dưới "Link connects to", kéo xuống chọn "Posts" trong Dynamic Pages.

Kết quả: chỉ tạo 1 dynamic page, nó tự generate tất cả page cho mỗi item trong database. Làm tương tự để thêm Category dynamic page.

Thêm javascript vào page

Nếu bạn rành javascript, có thể thêm JS cho từng tính năng trên mỗi page. Ví dụ: thêm user form, dùng JS validate field trước khi submit.

Lưu ý: để thêm JS vào page, vào page bất kỳ (hoặc page muốn code xuất hiện), nhấp nút "Page Code" dưới cùng. Cửa sổ hiện ra, thêm code ở đó.

1. Tạo form đơn giản thu thập First Name, Last Name, Email. Muốn validate email và đảm bảo "Confirm email" trùng "Email".
2. Thêm code sau vào "Page Code":

$w.onReady(function () {
    const validateEmail = (otherEmailElementId) => (value, reject) => {
        let otherEmailElement = $(otherEmailElementId);
        if (value === otherEmailElement.value) {
            otherEmailElement.validity.valid = true;
            otherEmailElement.resetValidityIndication();
            return;
        }
        console.log("Email and Confirm Your Email fields do not match");
        otherEmailElement.validity.valid = false;
        otherEmailElement.updateValidityIndication();
        reject("Email and Confirm Email fields do not match");
    };
    $("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
    $("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
    $('#dataset1').onBeforeSave(() => {
        let validationMessage = '';
        if (!$("#emailInput").valid()) {
            if (!$("#emailInput").value()) validationMessage += 'Please enter an email address\n';
            else if ($("#emailInput").value() !== $("#emailConfirmInput").value()) {
                validationMessage += 'Email and Confirm Email fields do not match\n';
            }
            $("#validationMessages").text(validationMessage);
            $("#validationMessages").expand();
        } else $("#validationMessages").collapse();
    });
});

Code này validate email và hiện thông báo lỗi nếu email không hợp lệ.

Có nhiều điều bạn làm được với Javascript. Xem ví dụ tại đây để biết thêm.

External APIs

Đây là bước duy nhất có thể phức tạp hơn. Wix Code tích hợp external API, nên bạn dễ dàng kết nối dịch vụ thứ 3: Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier... Tôi không đi sâu, nhưng nếu quan tâm, check tài liệu API của họ.

Kết luận

Nếu bạn không rành kỹ thuật hoặc developer, tự xây website có thể nhàm chán. Wix làm tốt việc tạo website thành dễ dàng. Với Wix Code, tiến xa hơn: kiểm soát nhiều hơn site. Bây giờ bạn có công cụ web developer phức tạp và kiểm soát hoàn toàn site hoạt động như thế nào, tất cả chỉ bằng click, drag drop, không cần kinh nghiệm code.

Khen Wix vì tạo công cụ dễ dùng giải quyết nhiều vấn đề.

Thử Wix Code và cho chúng tôi biết suy nghĩ.

Wix Code