Velo first steps

Introduction

We expose our Velo first steps tutorial, Velo by Wix is a full-stack development platform that empowers you to rapidly build, manage, and deploy web applications. This tutorial will guide you through the basics of Velo, including setting up your environment, creating backend and frontend code, and integrating data operations.

Prerequisites

Before you start, make sure you have:

1. A Wix account.

2. A new or existing Wix site to work with.

3. Programming experience, at least 2 years programming with an object oriented language, preferable JavaScript

   
   

Setting Up Your Environment

1. Access the Velo Editor:

• Go to your Wix site and open the Editor.

• Enable Velo by clicking on Dev Mode in the top menu.

1. Create a Database Collection:
   

• In the Velo sidebar, click Content Manager and then Create New Collection.

• Name your collection PhoneBookContacts.

• Add the following fields:

• name (Text)

• lastName (Text)

• image (Image)

• birthday (Date)

• email (Text)

• phone (Text)

1. Set Up User Data Collection:

• Create another collection named UserData.

• Add the necessary fields to store user information and references to PhoneBookContacts.

Creating Backend Code

1. Add Backend Files:

• In the Velo sidebar, go to Backend and click + Add New File.

• Create a new file named contactOperations.js.

1. Define Backend Functions:
   

import wixData from 'wix-data';
import { getCurrentUserData } from "backend/Crud-Operations/userOperations";

// Add contact to user's phone book table
export async function addContact(contactData){
    try {
        const {_id} = await getCurrentUserData();
        const phoneBookContact = await wixData.insert("PhoneBookContacts", contactData, {suppressAuth: true});
        const addedContactId = phoneBookContact._id;
        await wixData.insertReference("UserData", "contacts", _id, addedContactId, {suppressAuth: true});
        return "inserted 200";
    } catch (err) {
        console.error("backend error: userOperations/addContact", err);
    }
}

// Read current user's referenced data
export async function getUserContacts(){
    const {_id} = await getCurrentUserData();
    const {items} = await wixData.queryReferenced("UserData", _id, "contacts", {suppressAuth: true});
    return items.reverse();
}

Create a File for User Operations:

• Add another file named userOperations.js
  

import wixUsers from 'wix-users';
import wixData from 'wix-data';

export async function getCurrentUserData() {
    const user = wixUsers.currentUser;
    const {items} = await wixData.query("UserData").eq("_id", user.id).find({suppressAuth: true});
    return items[0];
}

Creating Frontend Code

1. Add Frontend Elements:

• Add input fields for name, last name, birthday, email, and phone.

• Add an upload button for the image.

• Add a button to save the contact.

1. Add Frontend Code:

import { addContact } from "backend/contactOperations";
import { to } from "wix-location";

$w.onReady(function () {

    let image;

    // Set up image upload
    $w("#uploadButton").onChange(async () => {
        if ($w("#uploadButton").value.length > 0) {
            const [{fileUrl}] = await $w("#uploadButton").uploadFiles();
            image = fileUrl;
            $w("#contactImage").src = image;
        }
    });

    // Set up add button click event
    $w("#addBtn").onClick(() => {
        addNewContact();
    });

    async function addNewContact() {
        if (validateFields()) {
            disableAllFields();
            const dataToInsert = {
                name: $w("#inputName").value,
                lastName: $w("#inputLastname").value,
                image: image,
                birthday: $w("#inputBirthday").value,
                email: $w("#inputEmail").value,
                phone: $w("#inputPhone").value
            };
            const response = await addContact(dataToInsert);
            if (response === "inserted 200") {
                to("/");
            }
        }
    }

    function validateFields() {
        const n = $w("#inputName").valid;
        const l = $w("#inputLastname").valid;
        const b = $w("#inputBirthday").value;
        const e = $w("#inputEmail").valid;
        const p = $w("#inputPhone").valid;
        return n && l && b && e && p && image != undefined;
    }

    function disableAllFields() {
        const fields = [
            $w("#addBtn").disable(),
            $w("#inputName").disable(),
            $w("#inputLastname").disable(),
            $w("#inputBirthday").disable(),
            $w("#inputEmail").disable(),
            $w("#inputPhone").disable(),
            $w("#uploadButton").disable()
        ];
        Promise.all(fields);
    }
});

Conclusion

Congratulations! You've successfully set up a basic web application using Velo by Wix. You learned how to create a database collection, write backend functions for data operations, and connect these functions with your frontend code. Keep exploring Velo's powerful features to build more complex and dynamic web applications.