Panduan Pemula untuk Menggunakan Velo oleh Wix

Velo adalah produk Wix dengan twist. Wix adalah salah satu platform pengembangan yang lebih populer di web. Ini memungkinkan desainer (dan rata-rata pemilik situs web) untuk membangun situs web yang luar biasa tanpa menulis satu baris kode pun.

Dengan Velo, Wix memperluas basis penggunanya untuk memasukkan pengembang. Velo adalah platform pengembangan full-stack yang memungkinkan pengguna membuat situs web hebat menggunakan kode. Satu-satunya bahasa pemrograman yang perlu Anda ketahui untuk menggunakan Velo adalah JavaScript. Platform ini mendukung fitur JavaScript modern dan menggunakan sistem sisi server berbasis NodeJS.

Dalam artikel ini, Anda akan mempelajari tentang fitur unik Velo dan cara menggunakannya.

Fitur Pengembang Velo

Platform pengembangan Velo memiliki IDE bawaan, memungkinkan pengembang untuk menulis kode JavaScript dan melihat perubahan secara real-time. Velo berjalan di server NodeJS, yang berarti bahwa pengembang memiliki akses ke paket npm dan alat pengembang lainnya. Fitur pengembang ini meliputi:

• Kemampuan untuk membuat tata letak dan interaksi khusus pada halaman web.
• Kemampuan untuk membuat koleksi dalam database.
• Kemampuan untuk membuat API khusus untuk situs web Anda.

Membuat Situs Web Menggunakan Velo

Untuk menggunakan Velo, Anda harus menavigasi ke situs web utamanya. Sesampai di sana, pilih opsi untuk memulai proyek baru. Ini akan membawa Anda melalui kebiasaan Proses pembuatan situs Wix, di mana Anda harus memilih jenis situs web yang ingin Anda buat. Anda dapat memilih template sendiri atau dengan bantuan Wix ADI.

Setelah Anda memilih opsi untuk mengedit template Anda, Anda akan melihat sesuatu seperti UI berikut:

Di sebelah kiri gambar di atas adalah bilah sisi struktur situs web, yang memberi Anda akses ke berbagai file JavaScript yang terhubung ke semua halaman di situs web Anda. Halaman yang saat ini dipilih adalah halaman beranda, dan jika Anda melihat bagian bawah gambar di atas, Anda melihat editor kode yang menampilkan konten file HOME.js.

Membuat Struktur dan Interaksi Tata Letak Kustom

Template yang dipilih untuk artikel ini adalah toko kesehatan online. Halaman beranda situs web ini memiliki "paling populer", yang dapat Anda lihat pada gambar berikut:

Namun, jika Anda ingin menggunakan judul yang berbeda untuk bagian ini, Anda dapat melakukannya di editor Velo dengan memasukkan kode berikut ke dalam file HOME.js.

File HOME.js

$w.onSiap(fungsi () {
 $w('#text20').text = 'ITEM TREN'
});

Kode di atas akan memperbarui judul "paling populer" menjadi "item yang sedang tren, dan Anda dapat melihat pembaruan ini dengan mengklik tombol pratinjau di kanan atas antarmuka Velo. Pada halaman beranda di bagian yang sesuai, Anda akan melihat sesuatu seperti output berikut:

Bekerja Dengan Database Velo

Sebagian besar situs web dinamis memiliki database yang menyimpan data secara berbeda, tergantung pada jenisnya. Velo menyimpan datanya dalam koleksi di database pusatnya. Untuk mendapatkan akses ke database ini, Anda harus menavigasi ke tabel baris dan kolom di sebelah kiri antarmuka pengembang Velo.

Seperti yang Anda lihat dari gambar di atas, setiap template Wix dilengkapi dengan beberapa koleksi default, tergantung pada jenis situs webnya. Templat situs web yang dipilih untuk artikel ini adalah toko kesehatan. Oleh karena itu, ia memiliki koleksi produk bawaan yang dapat Anda ganti dengan mudah dengan barang-barang Anda.

Terkait: Cara Membangun Kehadiran Online Profesional Dengan Wix

Namun, jika Anda ingin membuat koleksi Anda dari awal, mereka juga memiliki opsi itu.

Untuk membuat koleksi baru di database Velo Anda, cukup arahkan mouse Anda ke bagian "koleksi konten", dan ikon plus akan muncul di sebelah kanan teks.

Mengklik opsi koleksi baru pada gambar di atas akan menghasilkan formulir pembuatan koleksi berikut:

Memberikan nama koleksi dan mengklik tombol buat akan membawa Anda ke halaman pengelola konten berikut:

Dari halaman pengelola konten di atas, Anda dapat mulai mengisi koleksi produk Anda menggunakan ikon plus yang relevan. Tetapi sebelum Anda mulai menambahkan produk ke koleksi Anda, Anda harus membuat bidang yang sesuai.

Lihat halaman pengelola konten di atas; saat ini memiliki satu bidang—judul. Anda tidak dapat menghapus bidang ini karena ini adalah bidang utama (atau pengenal unik), yang harus dimiliki setiap koleksi. Namun, Anda dapat memberikan judul yang lebih sesuai, seperti nama produk atau ID.

Untuk mengubah nama bidang yang ada di koleksi Anda, cukup klik bidang yang dimaksud, dan Anda akan melihat beberapa opsi.

Memilih opsi properti yang dapat Anda lihat pada gambar di atas akan menghasilkan formulir pop-up berikut:

Formulir pop-up di atas memungkinkan Anda untuk mengubah nama bidang dengan memasukkan judul yang Anda inginkan ke dalam bidang teks berlabel "nama bidang" dan mengklik simpan.

Menambahkan Bidang Baru

Ada dua cara untuk menambahkan bidang baru ke koleksi Anda. Opsi pertama adalah mengklik ikon plus di sebelah kanan judul yang ada di koleksi. Metode ini akan menghasilkan formulir berikut:

Formulir bidang baru memungkinkan Anda untuk memberikan nama bidang, kunci bidang (untuk diintegrasikan ke dalam kode Anda), dan jenis bidang. Jenis bidang dapat berupa salah satu dari berikut ini:

• Teks
• Gambar
• Boolean
• Nomor
• Tanggal dan waktu
• Waktu
• Teks yang kaya
• Referensi
• Multi-Referensi
• URL

Cara kedua untuk menambahkan bidang baru ke koleksi Anda adalah dengan mengeklik bagian "bidang tersembunyi" dan memilih opsi "Tambah Bidang" dari daftar bidang pop-up. Anda akan melihat sesuatu seperti gambar di bawah ini:

Menambahkan Item ke Koleksi Untuk menambahkan item baru ke koleksi Anda, Anda dapat mengklik tombol “Tambah Item” di sebelah kanan halaman Pengelola konten atau klik tanda plus di bawah judul bidang. Setelah Anda menambahkan item pertama ke koleksi Anda, seharusnya terlihat seperti ini:

Sekarang Anda dapat menambahkan item sebanyak mungkin ke koleksi Anda menggunakan salah satu metode di atas. Namun, untuk memperbarui situs web Anda dengan koleksi apa pun, Anda harus terlebih dahulu memublikasikan situs tersebut.

Apa yang Membuat Velo Menyenangkan?

Sekarang Anda tahu cara menyesuaikan situs web Anda menggunakan kode JavaScript di Velo IDE. Anda juga dapat membuat koleksi khusus dengan item sebanyak yang Anda inginkan di database Velo. Tapi apa yang mungkin menjadi hal terbaik tentang Velo adalah kemampuan untuk mengimpor dan menggunakan paket npm.

Apa itu npm? Manajer Paket JavaScript Dijelaskan

Tingkatkan proyek Anda dengan paket npm.

Baca Selanjutnya

Tentang Penulis