Ionic made faster: Build & deploy hybrid apps in minutes.

The starter kit let’s you deploy an Ionic app with a fully functional backend instantly.

Ionic Framework is a popular hybrid app development framework. The Hasura JS SDK can be used with Ionic to super-power your application with backend capabilities like authentication, data and file APIs. It lets you add these features without writing a single line of code.

This guide lays out the required information for you to kick start developing your Ionic application using Hasura backend APIs. We are using Ionic V1 apps which make use of AngularJS.

We have also made an Ionic-Hasura starter-kit which has complete working pages that demonstrates the capabilities of Hasura’s Backend APIs. You can refer to these to get started or even use this kit directly for your applications.

Including the Hasura JS SDK

The Hasura JS SDK is available on GitHub. The minified SDK is included in the starter-kit by default. In case you are starting your own app, download hasura.min.js and add the following snippet to your app’s index.html.

This script will expose a global variable called hasura which is available in the window scope. For normal JS applications, this would be enough. But, for AngularJS which is being used by Ionic, relying on global variables are not recommended. We need to inject this object to the components that would require it. For that purpose, we wrap this object inside an AngularJS Factory and make it available as an AngularJS component.

In order to do this, we create a new component under the scope of the AngulaJS module. Create a file called hasura.js with the following content and add include it in index.html.

Note: This assumes that the SDK has already loaded. Hence, make sure that the snippet including SDK comes before this file.

Now, you can inject hasura into any AngularJS component, like controllers etc. Before we can use the SDK to make queries and executing other actions, the SDK has to be initialised with a Hasura project. This can be done in the AngularJS app’s run section. If your application is for logged in users only, you can also make that check in the same section.

NOTE: This step also assumes that you have a Hasura project ready. In case you don’t have one, please log in to the Hasura Dashboard and create a project.

Auth APIs

Signup/Register

Sample controller for using Signup API is given below. Complete working example can be seen in the Ionic Hasura Starter-Kit

Login

A sample controller for using Login API is given below. A complete working example can be seen in the Ionic Hasura Starter-Kit

Data APIs

In order to use the Data APIs, you need to create tables and configure permissions using the Hasura Console. The example provided in this starter-kit is a ToDo app, where you can add todos and mark them as completed. You can also delete todos. The advantage of using Hasura Data APIs is that you get instant JSON APIs to access and manipulate data along with an easy-to-use permissions model to implement access controls.

  • Create a new table called todo using the Hasura Console, and add the following columns:
  1. id : Integer (auto-increment)
  2. title : Text
  3. user_id : Integer
  4. completed : Boolean
  • Select id as the Primary Key
  • Click Create
  • Go to the Permissions tab, click on ‘Add permissions for a new role’
  • Select user from the dropdown
  • Enter {"user_id": "REQ_USER_ID"} in all the Check and Filter fields
  • Toggle All for Select section
  • Tick completed on Update section
  • Save changes

Note: A complete working example can be seen in the Ionic Hasura Starter-Kit

You can now use the following APIs:

Select

In order to select all the todos that belongs to a user, you can execute the following query:

Insert

Create a new ToDo

Update

Toggle completed state of an existing ToDo

Delete

Delete a ToDo

File API

Upload

Download

Delete


Hasura is a Postgres BaaS + Kubernetes PaaS to help you build and deploy backends super fast. Try it out at: https://hasura.io

Originally published at docs.hasura.io.