WORKING WITH DATA in your Composer apps (04:55)

Define a new resource in your app’s cloud database. Integrate existing data from a REST API, then connect the two resources together via a Relation field.

Video Transcript

Hi, this is Harri from AppGyver, and I'm going to show you how to create a resource which brings in customer data from a RESTful API, and then create another resource in AppGyver cloud database for your app that then references those customers.

So, we will be creating a very simple orders and fulfillment – and kind of management app. So, we have an empty app that hasn’t yet been published.

We head to the data tab and start by creating our first resource. So, we click on the "Add New Resource" button, and then we select "Use Integrations", since we're bringing in data from an API. There’s all sorts of other options available, but let's focus on this one.

We have an example API that contains the customer data. You can see here that it has some nice JSON data, and also brings up the individual records.

Now we click "Set up the REST API", and Composer fetches the API schema, basically, and configures it for us. So, here we see what it found, and we don’t want to show the ID field for the user. We’d like to utilize the company as the default field – and then one more thing we can do is change the data type of the field data type to a phone number, since it wasn’t already recognized by Composer.

Now we have our customer data, and then it's not yet added to any page, but it's available in our app. Next step is to create an AppGyver Cloud resource, which is a new table in the app cloud database that we provision for each app.

We name it orders and then we get to construct our schema by drag-and-drop. We will have a product field – this could be of course coming in from another API – and then we'll have a "Money" type of field.

These are basically rich fields that just contain text with some enhancements, and mostly for how they are displayed.

But for example the one-to-one relationship – we can select a related resource, and then we choose the company will be used as the title field. So this lets us reference data from multiple sources, so it’s quite useful.

Then this will be just "Status", and we'll add a few ones... "Waiting for payment", "In fulfillment". So we click save, and now we have Orders, and all that’s left is to add the page.

This is a shortcut – you could also go through the Interface Builder. So, then we create a CRUD page group for our orders... Select the nice icon, click create page.

Now we can build and scan our app, and it will be available. We can already login to the web app here. No entries found yet, but let's create one. So, "Great big truck", entered as the record name... "Money" is three hundred thousand dollars.

And now we get to choose the related customer. These are all the company's coming in through our API. So, now when we select this one and set status for awaiting payment... And we can see the related customer.

And then I just scan the QR code with my Scanner app, streaming from my iPhone 6 here, and we'll see what it looks like on mobile.

It's this easy to bring in data and create new tables in your app’s database. Thank you for watching.