Corvid is an open development platform that accelerates the way to build web applications. It empowers the Wix visual builder with tools, customs functionality, and interactions using Corvid APIs. It is an open extendable platform for both front-end and back-end. Corvid adds built-in IDE to Wix sites and you can code directly in the Wix Editor. Enable the Corvid on your website by clicking the Dev Mode in the site's top bar. To build the application, you need to familiarize yourself with all the features and decide all the functionalities that work for you. So, follow these steps to get familiar with the basic structure and syntax of Corvid.
Step 1: Create a new Wix Website:
Sign in to your Wix account and open a blank template in the editor.
Step 2: Enable Corvid:
Enable the Corvid in the Wix editor to work with code on your site.
Step 3: Add Elements to the Page:
On the left side of the editor, click add, then add the page elements, and set its ID in the properties panel that appears on the right side of the Editor.
Step 4: Add code:
1. Open the code panel at the bottom of the editor
2. you can use this link for the API and code examples, "https://www.wix.com/corvid/reference/"
3. add the code to define the variables, OnReady() and define the functions etc.,
Step 5: To See it in Action:
Finally, Click Preview at the top right of the editor. Then, check the result and publish your site live and production-ready.
The following principles are applied when developing the application on Corvid.
1. Coding:
Corvid supports the Javascript code. So, add the Javascript code to the Wix site and work with APIs for custom functionality and interactions with the site. Corvid is a server-side run time system based on Node.js. you can export functions from the back end to the front end by ES2016 and Corvid web modules. It will work with Wix apps front-end and back-end events and their elements.
Page Rendering Process:
Corvid API empowers you to take full control of the site's functionality. The API's will be used to interact with page elements, site database content, and external services. To use the APIs, you need the working knowledge of javascript and ES2017 features.
Page section of the site lists all the regular, dynamic, and router pages on your website. Regular pages appear immediately beneath the page section title. You can change the page setting when you hover over the page name. The dynamic pages with the same prefix grouped together in the same section. You can add a dynamic page to a group by clicking the settings icon that appears when you hover over the section name. Dynamic Pages change their content from one-page design to many live site pages. There are two types of dynamic pages. Item pages display one item from your content collection. The other type of dynamic pages is a category page like menu to link to your item pages. When you add the dynamic page to your site, both the item and category dynamic pages are added. The pages are added with dataset connectors automatically. The dataset connectors connect the pages to your collections. Router allows complete control when handling certain incoming requests to your site. Enter the URL prefix for the router and click add and edit code. All the incoming request from the URL prefix will be sent to the router for handling.
The page needs to set up before rendering it to the visitor. Setting up a page includes adding and positioning the elements and running the code that retrieves the page data or performs other setup operations. This is called rendering. So, the onReady() function runs in both the server and the browser. While a page request is running in the server, the browser downloads and executes the same code. After the server returns the response and the page is visible, the browser renders the page and makes it interactive. So, the onReady() function will run twice. Once in the backend and once in the browser. You need to explicitly add code to prevent the side effect like inserting an item twice into the collection. The Rendering API makes sure the parts of code runs only once. The wix-window property used to track where your code is running. The variable "env" gets the current environment that returns "backend" when rendering on the server and returns "browser" when rendering on the client. So, you need env property, when you use insert() function of the wix-data API to add an item of your collection only once.
2. Databases:
If you enable the Corvid, it will automatically add the Wix data to your site that lets you work with built-in databases. Wix apps have amazing features that can enhance and grow your business. As you add as many Wix apps to your site, their data automatically added as a new collection on your site. Once you enabled the databases on your site, you can use Wix visual builder to connect your data to elements on your site like capture user input and create dynamic pages. Also, you can create dynamic pages using custom router. Corvid supports connecting the external database using the External Database SPI and work with the database in your site with our built-in collections.
3. Importing Data into the Content Manager:
You can create and store content in collections using the content manager. Connect your collections to various elements in the editor to display the content or form submission. You can store the site's content in content collections. This could be the content you create, content you capture, or both. The content is stored in a grid layout made up of items(rows) and fields(columns). When you create a new collection, you can choose preset collection or scratch. Once, you added the content manager, certain editor elements like text, images connect to your new content collections.
If you have stored your information in a spreadsheet, you can import data into database collections from CSV file. You can export data by making changes in the spreadsheet application and import it again to the database collection. Also, you can import to Sandbox database in the Editor and Live database in your dashboard. When importing to the sandbox database, you can add new fields to the database structure at the same time. But, when you are importing to the live database, you can import fields that are part of the database structure.
Forms:
Members area lets your visitor register and become the members of your site. There are 3 types of membership forms. Those are,
1. Default Signup form
2. Custom Signup form
3. Corvid Form
In the editor, just click on the Menus & Pages, then click the member signup form and choose the type of form. In the Corvid form, you can select your form the "what does it link to" drop-down menu. The custom forms are site-specific needs by adding the user input elements and content manager to your site. Follow these steps when creating the custom form with user input,
Step 1:
Start create the collection to store the form's submission information
Step2:
Add the user input elements to create a form on the page
Step3:
Setting each element using its setting panel
Step4:
Add and Setup a dataset to connect your page elements to your collection
Step5:
After setting up a dataset, connect your elements to it
Step6:
Add a submit button and connect to your dataset that allows the user to submit the information to your collection.When the visitor submits the form, you can see the information in your inbox,
* email account you set in your form settings
* the submission table in the dashboard
4. Open Platform:
Corvid extends the website functionality to other services like installing NPM packages, use our fetch to call external APIs, and expose the site's functionality as an API with our HTTP functions. You can bring the complex functionality to your site with the packages from the software registry. In npm, each reusable library of code is known as a package. Once, you installed in site structure, you can import the package and use it in your code.
5. Secret Manager:
Corvide allows you to integrate third-party services like API key to your site's code. The 3rd party services require an API key for authentication. This service provides the key which you can add to the code that calls the service. It lets you store secrets such as API keys. It is safely stored and encrypted in the Secret Manager in the Site's Dashboard. The procedure to work with API keys are,
1. First, get the private information as an API key from the 3rd party service.
2. Store the private information with a new name in the secret manager
3. In the backend code, the value of the secrets extracted using the getSecret() function instead of the API key.
6. Web modules:
Web modules enable you to write functions that run server-side in the back end and call them in client-side code. With web modules, you can import functions from the backend into files. You would need web modules functions code to run client-side or want to access other web services. You can only export the functions from web modules. For ex, if you want to enable a site visitor to send an email, you need to write the function that sends an email server-side. Because the code may have security issues if it runs client-side or web services. You can import the web module function into another module in the backend or front end file.
Comments
Post a Comment
Thanks for your comments and we are moderating your comments for publishing in our blog post.