Hướng dẫn cho người mới bắt đầu sử dụng Velo của Wix
Velo là một sản phẩm của Wix. Wix là một trong những nền tảng phát triển phổ biến hơn trên web. Nó cho phép các nhà thiết kế (và chủ sở hữu trang web trung bình) xây dựng các trang web tuyệt vời mà không cần viết một dòng mã nào.
Với Velo, Wix đang mở rộng cơ sở người dùng của mình để bao gồm các nhà phát triển. Velo là một nền tảng phát triển full-stack cho phép người dùng tạo các trang web tuyệt vời bằng cách sử dụng mã. Ngôn ngữ lập trình duy nhất bạn cần biết để sử dụng Velo là JavaScript. Nền tảng hỗ trợ các tính năng JavaScript hiện đại và sử dụng hệ thống phía máy chủ dựa trên NodeJS.
Trong bài viết này, bạn sẽ tìm hiểu về các tính năng độc đáo của Velo và cách sử dụng chúng.
Mục Lục
Các tính năng dành cho nhà phát triển của Velo
Nền tảng phát triển Velo có IDE tích hợp sẵn, cho phép các nhà phát triển viết mã JavaScript và xem các thay đổi trong thời gian thực. Velo chạy trên máy chủ NodeJS, có nghĩa là nhà phát triển có quyền truy cập vào các gói npm và các công cụ dành cho nhà phát triển khác. Các tính năng dành cho nhà phát triển này bao gồm:
-
Khả năng tạo bố cục và tương tác tùy chỉnh trên trang web.
-
Khả năng tạo bộ sưu tập trong cơ sở dữ liệu.
-
Khả năng tạo các API tùy chỉnh cho trang web của bạn.
Tạo trang web bằng Velo
Để sử dụng Velo, bạn cần điều hướng đến trang web chính của nó. Khi đó, hãy chọn tùy chọn để bắt đầu một dự án mới. Điều này sẽ đưa bạn qua quá trình tạo trang Wix thông thường, nơi bạn sẽ phải chọn loại trang web bạn muốn xây dựng. Bạn có thể tự mình chọn một mẫu hoặc nhờ sự hỗ trợ của Wix ADI.
Sau khi bạn đã chọn tùy chọn để chỉnh sửa mẫu của mình, bạn sẽ thấy giao diện người dùng giống như sau:
Ở bên trái của hình ảnh trên là thanh bên cấu trúc trang web, cho phép bạn truy cập vào các tệp JavaScript khác nhau được kết nối với tất cả các trang trên trang web của bạn. Trang hiện đang được chọn là trang chủ và nếu bạn nhìn vào cuối hình trên, bạn sẽ thấy một trình chỉnh sửa mã hiển thị nội dung của tệp HOME.js.
Tạo cấu trúc bố cục tùy chỉnh và tương tác
Mẫu được chọn cho bài viết này là cửa hàng chăm sóc sức khỏe trực tuyến. Trang chủ của trang web này có “phổ biến nhất”, bạn có thể thấy trong hình ảnh sau:
Tuy nhiên, nếu bạn muốn sử dụng một tiêu đề khác cho phần này, bạn có thể đạt được điều này trong trình soạn thảo Velo bằng cách chèn đoạn mã sau vào tệp HOME.js.
Tệp HOME.js
$w.onReady(function () {
$w('#text20').text = 'TRENDING ITEMS'
});
Đoạn mã trên sẽ cập nhật tiêu đề “phổ biến nhất” thành “các mặt hàng thịnh hành và bạn có thể xem bản cập nhật này bằng cách nhấp vào nút xem trước ở trên cùng bên phải của giao diện Velo. Trên trang chủ trong phần thích hợp, bạn sẽ thấy một cái gì đó giống như kết quả sau:
Làm việc với cơ sở dữ liệu của Velo
Hầu hết các trang web động đều có cơ sở dữ liệu lưu trữ dữ liệu khác nhau, tùy thuộc vào loại. Velo lưu trữ dữ liệu của mình trong các bộ sưu tập trong cơ sở dữ liệu trung tâm của nó. Để có quyền truy cập vào cơ sở dữ liệu này, bạn sẽ cần điều hướng đến bảng các hàng và cột ở bên trái giao diện nhà phát triển của Velo.
Như bạn có thể thấy từ hình trên, mỗi mẫu Wix đi kèm với một số bộ sưu tập mặc định, tùy thuộc vào loại trang web. Mẫu trang web được chọn cho bài viết này là một cửa hàng chăm sóc sức khỏe. Do đó, nó có một bộ sưu tập các sản phẩm mặc định mà bạn có thể dễ dàng thay thế bằng các mặt hàng của mình.
Tuy nhiên, nếu bạn muốn tạo bộ sưu tập của mình từ đầu, họ cũng có tùy chọn đó.
Để tạo một bộ sưu tập mới trong cơ sở dữ liệu Velo của bạn, chỉ cần di chuột qua phần “bộ sưu tập nội dung” và một biểu tượng dấu cộng sẽ xuất hiện ở bên phải của văn bản.
Nhấp vào tùy chọn bộ sưu tập mới trong hình trên sẽ tạo ra biểu mẫu tạo bộ sưu tập sau:
Cung cấp tên bộ sưu tập và nhấp vào nút tạo sẽ đưa bạn đến trang trình quản lý nội dung sau:
Từ trang trình quản lý nội dung ở trên, bạn có thể bắt đầu điền bộ sưu tập sản phẩm của mình bằng các biểu tượng dấu cộng có liên quan. Nhưng trước khi bắt đầu thêm sản phẩm vào bộ sưu tập của mình, bạn cần tạo các trường thích hợp.
Nhìn vào trang quản lý nội dung ở trên; nó hiện có một trường — tiêu đề. Bạn không thể xóa trường này vì nó là trường chính (hoặc số nhận dạng duy nhất) mà mọi bộ sưu tập phải có. Tuy nhiên, bạn có thể đặt cho nó một tiêu đề phù hợp hơn, chẳng hạn như tên sản phẩm hoặc ID.
Để thay đổi tên của trường hiện có trong bộ sưu tập của bạn, chỉ cần nhấp vào trường được đề cập và bạn sẽ thấy một số tùy chọn.
Chọn tùy chọn thuộc tính mà bạn có thể thấy trong hình trên sẽ tạo ra biểu mẫu bật lên sau:
Biểu mẫu bật lên ở trên cho phép bạn thay đổi tên trường bằng cách nhập tiêu đề mà bạn muốn vào trường văn bản có nhãn “tên trường” và nhấp vào lưu.
Thêm một trường mới
Có hai cách để thêm một trường mới vào bộ sưu tập của bạn. Tùy chọn đầu tiên là nhấp vào biểu tượng dấu cộng ở bên phải của tiêu đề hiện có trong bộ sưu tập. Phương thức này sẽ tạo ra biểu mẫu sau:
Biểu mẫu trường mới cho phép bạn cung cấp tên trường, khóa trường (để tích hợp vào mã của bạn) và loại trường. Loại trường có thể là bất kỳ loại nào sau đây:
-
Chữ
-
Hình ảnh
-
Boolean
-
Số
-
Ngày và giờ
-
Thời gian
-
Văn bản đa dạng thức
-
Tài liệu tham khảo
-
Đa tham chiếu
-
URL
Cách thứ hai để thêm trường mới vào bộ sưu tập của bạn là nhấp vào phần “trường ẩn” và chọn tùy chọn “Thêm trường” từ danh sách trường bật lên. Bạn sẽ thấy một cái gì đó giống như hình ảnh dưới đây:
Thêm Mục vào Bộ sưu tập Để thêm một mục mới vào bộ sưu tập của bạn, bạn có thể nhấp vào nút “Thêm Mục” ở bên phải của trang Trình quản lý nội dung hoặc nhấp vào dấu cộng bên dưới tiêu đề trường. Sau khi bạn thêm mục đầu tiên vào bộ sưu tập của mình, nó sẽ trông như thế này:
Bây giờ bạn có thể thêm nhiều mục nhất có thể vào bộ sưu tập của mình bằng cách sử dụng một trong các phương pháp trên. Tuy nhiên, để cập nhật trang web của bạn với bất kỳ bộ sưu tập nào, trước tiên bạn cần phải xuất bản trang web.
Điều gì làm cho Velo thích thú
Bây giờ bạn đã biết cách tùy chỉnh trang web của mình bằng cách sử dụng mã JavaScript trong Velo IDE. Bạn cũng có thể tạo các bộ sưu tập tùy chỉnh với bao nhiêu mục tùy thích trong cơ sở dữ liệu Velo. Nhưng điều hoàn toàn có thể là điều tốt nhất về Velo là khả năng nhập và sử dụng các gói npm.
Đọc tiếp
Giới thiệu về tác giả
