Tech Talk: Corvid API Walk-through With Jeff

Did you catch Corvid's first Tech Talk? It was brimming with everything an aspiring Corvid Developer should know.


Jeff who is the Head of Documentation at Corvid provided us with valuable information & tips on how to kickstart your Corvid journey and also showed us how to perform a simple query on a collection located on our site.


If you’d like to watch the session from beginning to end, click play on the video below. Otherwise, scroll down for all the details.



What is Corvid?


Corvid is an open development platform that accelerates the way you build web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs.


Understanding the goal of this Tech Talk

Starts at 01:12


Jeff explains that the main goal of this tech talk is to allow Wix Users to understand how Corvid works and demystify some basic functionalities in front of their eyes so that they leave with a broader understanding of the Corvid API Documentation, the Code Panel & Working with Corvid as a whole.


For this session we will be going over a travel site which has a Database Collection. For those of you who are unfamiliar with the term, a Collection is almost like a Spreadsheet where you have rows/columns to store data.


In ours, we have stored data about different countries and one of the columns houses the name of the ‘Continent’ on which the country is located. We will be building a function to show you how to query the items in your Collection based on a user’s entry. In a nutshell, we will be showing you how you can build a search function for your database.


Getting Started

Starts at 04:26


To work with Corvid, open up your Wix Editor and find the term ‘Dev Mode’ at the top of the page. Hover over it and click on ‘Turn on Dev Mode’ which will give you access to your site’s code panel and left hand developer panel.


Turning on Dev Mode

First of all we will go over how you can work with your site’s code panel, properties panel and what event handlers are.


To access your code panel click on the bottom right arrow found on your Editor which will expand it (Reference image below)

Code Panel & Collections

Your site's Collections are located on the left hand side panel under 'Databases' as marked in red above.


Working With Code

Starts at 06:00


Jeff explains how to work with code and shows you how you can refer to individual elements found on your page. Each element has a JavaScript element ID which you can use to interact with that element (6:06)


Click on an element to see its ID

For this particular instance we are working with a Text Input Element. After this we select a Button and create an onClick handler for the button using the Properties Panel. If you wish to learn more about Adding Custom Interactivity with Events view this article.


What is $w

Starts at 13:35


The $w namespace contains everything you need in order to work with your site's components. It contains all of the UI elements, nodes, and events that make up your site. Basically if you ever need to interact with elements on your page you should be using $w. For example, if I have an element with a JavaScript ID of searchInput in my Properties Panel then in order to retrieve the value of the element I should write the following code.


$w("#searchInput").value;

At 14:00 in the video Jeff explains the entire code snippet written above.


Variables

Starts at 17:18


A variable is a name given to a particular value. For example, take a look at the code below.


let myVariable = $w("#searchInput").value;

I am setting myVariable to carry the same value as my searchInput element's value. From here on-wards I can use the above declared variable instead of the entire code starting with $w as they both will carry the same value. Jeff explains more about variables as from 17:18 in the video so head over to that point in the video if you want to learn more.


Debugging Your Code

Starts at 19:00


Debugging your code is the term given to the method practiced by Developers to check for errors in their code snippets. Jeff explains how important debugging is and why aspiring developers should take a step-by-step code and debug approach when it comes to starting your developer journey with Corvid.


At the 19:40 mark in the video Jeff demonstrates how you can use your site's Developer Console & the console.log() function to test the code you write.


Jeff also gives a very broad explanation on the Corvid API Documentation as from 22:00 so whoever feels intimidated by opening up this link head over to that mark and listen to what he says.


The Wix Data API

Starts at 25:15


As we mentioned at the beginning of this blog, our goal here is to query a Database Collection on your site or create a search function in much simpler terms. In order to work with your Database Collection you need to use the Wix Data API. You can take your time to go over the documentation for the API but since our goal here is to query the database we are going to look for any function that may hold resemblance to what we are trying to do.


If you look here, you will realize that the Wix Data API has a function called query() how convenient!


Actually all of the functions in the Corvid API Documentation is in plain English and the naming convention of the functions kept in mind what the function is supposed to do. So if you come across a function named find() you can be assured that the function is supposed to find something. If you want to learn what the function finds and where then just read the documentation as every tiny detail is provided there.


As from 25:54 Jeff explains how you can use the example code found in the documentation and alter it to meet your own programming needs.


If you drop in at 29:09 Jeff copies the example code present in the Corvid API Documentation and starts altering it. He explains how you can clean up your code to remove extra lines, fix indentation by a simple click on your code panel.


He follows up on this part by showing the necessity of replacing placeholders in the example code with your site's element ID and database collection IDs. A demonstration is shown for the scenario where you forget to replace the placeholder ID found in the example code with your own element's ID. Jeff breaks down the error message to explain to you what it actually means and how you can fix it.


The Results Object

Starts at 33:01


In the previous part Jeff explained how to construct a query function using the Corvid API Documentation. Now he shows you how to read the results you get from your query. We dive into a little technical terms here such as breaking down what a JavaScript Object means. Again, do not feel intimidated by the strange characters because at the end of the day its plain English what we use. Jump to 33:09 to hear Jeff talk about JavaScript Objects.


The Wix Data Query Functions

Starts at 36:12


The Wix Data Query Function is a set of various functions dedicated to helping you refine your query parameters when using the Wix Data API. Using this suite of comprehensive data query functions you could sort or filter your query parameters instead of just querying and getting the entire database collection items back in your results.


As from the 36:53 mark Jeff explains how you can use .eq() function to narrow your query results based on the value of a certain field in your database.


Jump to 37:49 to see how the .eq() function will fit into the Wix Data Query code which we already wrote a few minutes ago.


(40:26) Jeff shows you how to alter the example code for .eq() and make sure you insert your own Database Collection's Column JavaScript ID. At 40:51 Jeff explains how you can check the actual JavaScript ID for your Database Collection's Column. Remember that the Column name and ID can be different so always double check the ID before writing it in your code.


Dynamic Search Terms For Your Query

Starts at 44:00


Remember the Text Input Element we showed you at the beginning of this video, now Jeff explains how you can use the value entered by the user as a search term for your query. For example if you are running the .eq() function on your query to narrow down query results then you could use the term entered by the user and return only the matching items from your database. If you did this then you would have completed constructing a Search Functionality for your database collection.


Closing Off

Starts at 47:37


Jeff closes off by giving us a recap of what was explained in this session and gives you some very useful tips and advice on how you can navigate the uncharted waters of Corvid and begin your journey as a Corvid Developer.


Bonus Information

What is an API?


Application Programming Interface or an API is the messenger that takes your request and tells an (external) system what you want to do and then returns the response back to you. Imagine going into a restaurant, you step in and look at the menu, decide what you want to eat and then you give your order to the waiter. The waiter plays the role of an API who takes your order and informs the kitchen what you want and then brings your food back to you. If the food your ordered is not available the waiter returns with the message from the kitchen informing you that the food you ordered in unavailable. To learn more about APIs click here.

This website was built with Wix

Wix.com is the leading cloud-based web design and development platform trusted by over 150 million people worldwide. Editor X is an advanced website creation platform made exclusively for designers and agencies. 

Design powerful web experiences for your clients with Wix and Editor X that are SEO-friendly, fast performing and secure.

Learn how you can become a Partner and get professional resources tailored to your needs.

© 2006-2020 Wix.com, Inc