Academy > FullStack with Cloud Backend > Episode 1

1. Create your first database and API function in the cloud. 
Call a cloud function from a form to store the form data in a table of the database

Transcript

Hi and welcome to the AppDrag Academy, I'm Mike and I'll be walking you through these upcoming episodes.  In this episode, we will create a registration form that takes in our user's information, and upon the clicking of the submit button, the data will be stored in a table of our database.

Account Registration
I'm going to go create a new account on AppDrag real quick, and you can do the same if you haven't already.  Go ahead and pause at any moment if you need to get up to speed.  We just landed on the theme selection of the project.  We're going to select this one right here, and type in the project name.  Once the project is ready I'm directed to the page builder, where I can start designing my frontend.  We're going to start off by setting up our backend first, so let's just go back to the dashboard.  The "Edit" drop down menu gives me a whole lot of options, but we're going to choose Cloud Backend.

Backend Development
As you can see, the database is currently empty, there are no tables or APIs.  So we're going to go ahead and create ourselves a "users" table that will be populated using the form we will soon design on our frontend.

The first column I'm going to add will be for our users' full name, which is of type text.
The next one will be email, which is also of type text.
The following column will give us the user's date of birth, so that's of type date.
Last but not least, we'll add a column called "Last Updated" which will be of type "dateTime".
And now, our table is ready to go.

API Creation
Which now brings us to the API creation.  For today, we're going to create an insert query using the visual creator.  Down here is our input parameters.  This is where we determine the ones we'll need for our function.  So let's begin with name, hit Enter, type an example, then email, Enter, an example, DOB for date of birth, and this one is going to be YYYY-MM-DD.

Once these are done, we move on to the next step, which will be the mapping of our tables columns with the parameters of our inputs.  So let's do that real quick, full name goes with name, email with email, DOB with DOB, and the last column we had was last updated, which we are going to map with an SQL formula of NOW.  We hit save, and we try it out to make sure the API works fine. All looks good, hit try, and we get a response of Okay.

Let's take a look at the table; and as we can see, the API worked just great.  

Frontend Development
Now, it's time to move to the frontend and create our form.
So this button is linked to the anchor of the registration form down here.  However, this form is a static form that just sends the information to a destination email.  But what we want is to populate our database.

So what we're going to do is first add a row below this one by clicking this plus.  Let's make that a 3 column row, so our form could be nicely centered.  And now, we remove this form by just clicking this delete button.
For our new form's column, which is the middle one, let's make it a bit larger by stretching it a bit here and there.
And now we add input fields.  So let's click the "Add Component" control at the left.  The components are categorized by sections and elements, and we want inputs, which are simple elements.  

Down here are the subcategories, and we're going to choose "Cloud Backend Inputs".  All the way at the bottom are the text inputs, we'll select a First Name input. 
So this is how the drag&drop tool works.  Click and hold the element, drag it over and locate the position you want it to be in.  Once you find it, drop it in, et voila.

Double clicking into the field will give us the options such as the name attribute, the placeholder, validation options, and styles.  Let's change the name and placeholder.  And we'll do the same for email, except this time we'll choose the email input, which includes a standard email regular expression.
For the Date of Birth, we're going to pick a date input.  Let's change the placeholder, the name, and the date format as well, as it needs to match the backend's formatting.

All that's left now is a button.  Let's go to the buttons subcategory, find a button, and drag it into our form.  There we go.  Double click into this button, and once again, we have some options.  So first off we'll change the content.  And let's give it also a full width.  So to do that, we go to position, and check off the full width.  Now we assign it an action. 

API Integration
We've got a few options, and since we're looking to assign it a backend API, we choose Cloud Backend.  We'll enable the trigger and select the API we want from this dropdown menu.  If you haven't yet created your API and wish to do so, there's a link right beside it that'll open your backend on a new tab.  As you can see, I'm automatically given the input parameters of my API to map with my frontend sources. 

Right below are choices of what to do before and after the function call, so I can, for example, show a spinner before the call, and display a message afterwards.  We hit save, and we're done!

And now, the moment of truth.  We save, and hit preview.  Let's fill out the form.  Click Register.  And we get our success message.  Now, let's check out the table to make sure that all went well.

And indeed, the data was properly entered into our table.  And once your table is nice and full, if you want to export it, all you do is click this caret, hit export, and there's your CSV. 

That concludes this episode.  I hope you found this intuitive and I very much look forward to our next AppDrag tutorial.

► 1. Create your first database and API function.

► 2. Create an authentication system

► 3. Create an account form.

► 4. Add a Forgot Password function and an updatable account details page

► 5. List dynamic data from the db and display a detail page for a particular item of the list.

► 6. Event Reservation function, email template with variables, send.