Supersonic from start to finish.
In the First and Second miles, we've covered how to:
Next up, we want to tackle the last missing piece: data. Nearly all apps use data in some form, so we've ensured that it's a super smooth experience to add data to your app – regardless of the source.
Before we can actually add data, we need to initialise it. Open the Steroids Connect screen (if you've closed it, run
qr in the Steroids Development Server console to open it again), and head to the Data tab.
Connect Data tab before deploying app
Ensure you're connected to the Internet and click on "Initialize data". This will cause Steroids CLI to deploy your app to the cloud and provision an AppGyver Sandbox database for use in this app. Wait for it to finish, after which the screen will update to show the Data Manager:
As the Data Browser will tell you, your app has an AppGyver Sandbox Database preconfigured. A data provider is basically a proxy between your app and the REST API from which your data is fetched from. They do all sorts of magic – you can read more in the Data Providers guide – but for now, we just want to use the preconfigured Sandbox Database provider in our app.
The Sandbox Database is a free development database provided by AppGyver. It's not intended for full-on production use, but it's great for getting a first version of your app up and running.
Click on the AppGyver Sandbox Database to open the Data Manager.
Before we can add any data, we must create a new resource definition. Click on the "Add new resource" button.
Let's create a new resource with the name
superhero for our awesome superhero database app. After creating the superhero resource you can configure the data model for the resource. Let's keep it simple – we'll have a
publisher. To add a new field to the data model, just type the name of the desired field and press the blue checkmark on the right side of the field:
Defining a data model
You'll also have the option of determining the type for each field in the data model, but the default "String" is appropriate for our needs. After defining the three fields, press "Save changes to data model" to save your changes.
Now, you can click on the "Browse data" button in the top right side of the screen to add an actual entry to the database. Since you only have one resource defined, it will be selected automatically and display an empty resource.
Resource data browser
Let's add a few characters by pressing the button – you can copy the data below:
|Clark Kent||Superman||DC Comics|
|Barbara Gordon||Batgirl||DC Comics|
|Steven Rogers||Captain America||Marvel Comics|
|Wanda Maximoff||Scarlet Witch||Marvel Comics|
Though the Connect Screen does its best to keep up with changes, you can always click the button to ensure your local project has the latest configs (the actual data is always fetched from the backend).
Now that we've got a few cool superheroes in our database, we want to show that in our app!
Navigate to the "Generate Scaffolds" tab. Since we only have a single resource, it's automatically selected, so you can just click "Generate". This instructs the Steroids CLI to generate a CRUD scaffold for the
If you open your app project in a text editor, you'll notice we have a new Superhero module in
app/superhero/. Let's make our app start from the Superhero index, and while we're at it, disable tabs. Open
config/structure.coffee, comment out or remove the tabs item and add a new
rootView: location: "superhero#index"
Save the document, and your app will update with just the index page of our Superhero app:
Data display in device
Now, click on any of the superheroes to view more details. You can edit superheroes or remove them. From the index view, you can also create new superheroes.
If you now look at the Data Browser in the Connect Screen again, you'll see that it has updated with your modified data. As you can see if you peek inside the source code, AngularJS takes care of keeping your view in sync, and Supersonic Data does the hard lifting for syncing changes between the cloud and your device.
That's it! You've now got a fully functioning app with real live data bolted on. Feel free to play around, browse the docs or go to the forums if you run into trouble.
You can find all the rest of guides and tutorials on data in the Data Management section.
Now that you have all the neccessary tools for creating a complete app, the next step is distributing your app. Our Fourth mile tutorial covers how to create standalone versions of your app with the AppGyver Build Service.