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
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.
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.
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)
Your site's Collections are located on the left hand side panel under 'Databases' as marked in red above.
Working With Code
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
At 14:00 in the video Jeff explains the entire code snippet written above.
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
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
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
The Wix Data Query Functions
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.
Dynamic Search Terms For Your Query
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.
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.
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.