Skip to content

Ionic 2 – SQLite as a Service

Posted in Javascript

UPDATE: In Ionic 2 RC0, there seems to be a change with using SQLite. Checkout this thread to learn more.

So, Monday, what do we have here? Throughout last week, I have been getting dirty with putting finishing touches to an app I am working on, with Ionic 2.

I am using SQLite (WebSQLite) as storage backend. That was my first time using WebSQL.

How about, SQaaS, pronounced ‘skaas’. SQL as a Service? Duh

In every Web application, including mobile applications, there are, in almost every example, a backend to go with the app. The storage backend will be responsible for persisting and retrieving data added by clients or users.

Without a storage backend to persist user interactions and information, everything will be lost should you restart your server (either the hardware or the process). Many options exist today that fills the gap, of providing a persistent storage for apps.

Depending on the tools you’re using, you may choose to go with a particular database tool or the other. It doesn’t matter. What matters is getting the job done.

Some SQL will do

If you do have a background in SQL, using the Ionic Storage class will be pretty much icing on the sugar for you. The Ionic Storage class drops down the level where you are able to run arbitrary SQL commands.

At the basic, the Storage offers you the chances to do a key value add and retrieve with the WebSQL implementation. However, using the .query function in the Storage class opens a far bigger fun for all.

We’re going to implement a simple service that handles CRUD with SQLite in Ionic 2

Create the Service

To the extent that you wish to have SQLite backend in your Ionic project and access the endpoints via a service means you’re capable of setting up an Ionic project.

So let’s cut straight to the fun part. But before we do, there are certain assumptions to make.

Forms

Let us say you have a form like this. The form below is responsible for adding a category and selecting the type of it, either the expense or income. You don’t need to wonder why this form, just focus on the examples. 🙂

If you’ve followed my getting started with Ionic 2 Forms in my previous tutorial, the above will probably appear usual. Nothing fancy going on, just an implicit form created.

For now, we have not implemented the SQLite backend, so we will simply console log the output from the form above, which can be done as this:

The above should get us the formData logged into the console when the form is submitted. If the form is invalid, we aren’t gonna see anything. How does it know it is valid or not?

Remember we have the required on the form input elements we don’t want the user to miss. If a required input field isn’t satisfied, that boolean of whether valid never turns true.

If the form happens to be valid, and you submit, the submitted form object will look something like below:

Form submission is  Object {name: "Awesome", type: "income"}

It is time for Service

In your Command Line Interface, in your Ionic 2 Project folder, run ionic generate provider category.service

Open the category-service.js file in category-service folder in the providers folder in your root directory. That is where we’ll be doing our servicing.

Delete everything from it, and put in this. I leave comments inline

Let us put them all together, as in, let us bring in our service to the addcategory.js file, then feed it with the data from the form when submitted.

This is pretty much a basic standard use of Promises. The storage.query returns a promise, which we then do a then on. We either get a resolve (which means all went well) or a reject (bad news), and we intercept these responses in the (data) => { } block, then the error in the other.

You could even let a toast display if successful process happens or not. See:

You just pass in the message of your choice to the displayToast() function, and it will display after the category is added. If error, you’ll be told, if not, voila!

Edit Category

With that ground-breaking understanding you had from adding a category into the database using a service, you should pretty much be able to do the rest of the CRUD. We’ve done Create. Are you saying you can’t do the Read, Update, and Delete? You sure can, but let’s do the Update together. Because, why not?

This is the editcategory.html contents:

Some slight differences here and there. Let’s talk about it.

We could add the id value to the form after submitted, before pushing to the service to save, OR we could simply hide the id in the form, then it’ll get submitted along the rest. This approach is probably lazy and not recommended, at least if you’re in the web application environment. This is a mobile app, which will be built into an APK, where someone cannot right click and inspect the element to change the id value. So, we can get away with that, but in a web app, please don’t say I told you that trick when your boss asks.

The [(ngModel)]="category.name" should be familiar to you if you followed my previous Ionic 2 Forms getting started on the right foot. It is similar to the ng-model found in Angular 1, which ensures a two-way binding. Awesome!

But what are we binding to? Our editcategory.js should make things clearer:

This is getting fun. You see how the whole game is now? If you’re wondering how the params were sent in, it might be something like this:

Conclusion:

In all, this is how your service might look like with all the other CRUD parts:

That is it from me today. I hope you go out there, and as usual, turn on the Hadron Collider, and get things Ionized!