Category: Ionic

Using SQLite instead of LocalStorage with Ionic

For the last few Ionic apps I’ve built I’ve used Local Storage to save data, usually app settings or a list of names. Generally a small amount of data so it was fine in local storage.

Now on the app I’m building for myself I need to use a better data storage solution, one of the possible options is SQLite. Searching on the internet I found Nic Raboy’s great introduction on how to set up and insert data into an SQLite database in your Ionic app.

Use SQLite Instead of Local Storage in Ionicframework

This is a great intro, the one thing I did find was I was running my app in the Chrome emulator and the SQLite database wasn’t being created. So I have to build my app and get it running the iOS emulator, which with the power of the Ionic framework takes only 3 lines to do:

  1. $ ionic platform add ios
  2. $ ionic build ios
  3. $ ionic emulate ios

This launches the iOS emulator loading your Ionic app. Then if you open Safari and go to the developer tools you can use the inspector to look at what your app is doing  (Develop > Simulator) any console logs you have in your code will appear in the console.

With a combination of Nic’s article and using the Web Developer tools in Safari I’m able to get SQLite up and running in my app and move away from local storage.

Adding Buttons to Sidemenu Ionic Template

I’m working on a new Ionic app, one of my own ideas. For the layout of the app I’m using the Sidemenu template instead of the Tabs template, which I’ve used a few times before.

In this app I wanted to have a New button in the top right corner of the app. So you can add a new item to the app from anywhere within the app.

Now I wasn’t to sure how to add this in the Sidemenu template. It looks as though all the views load into <ion-nav-view> which is in the main index.html page. So adding the new button in <ion-nav-buttons> in the index.html page doesn’t work.

In order to add this New button I needed to add it to the menu.html page where the toggle menu button is. This view is displayed all the time, so my New button is available either in a list view or the details view.

To position the button to the right of the app I simply added the side attribute as ‘right’. This is how my page was set up:

 

<ion-side-menu-content>
<ion-nav-bar class=”bar-stable”>
<ion-nav-back-button>
</ion-nav-back-button>

<ion-nav-buttons side=”left”>
<button class=”button button-icon button-clear ion-navicon” menu-toggle=”left”>
</button>
</ion-nav-buttons>
<ion-nav-buttons side=”right”>
<button class=”button”>New</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name=”menuContent”></ion-nav-view>
</ion-side-menu-content>

The Learn Ionic site

I’m working on Ionic app and I need to open a modal in order to record some information. Pretty standard stuff, but sometimes you forget these type of things. Thankfully the Ionic team have the Learn Ionic site.

This great site gives you a sort of cookbook of Ionic recipes of some of the things you may need to have in your Ionic apps.

 

Loading a service at startup in a Ionic app

This is more a note to myself than a full on tutorial.

Some of the Ionic apps I create need to create add something to local storage during startup of my app. The way I’ve been doing this recently is to run a service in the Run function of my app. Something like this:

.run(function(MyService){
MyService.appStartup();
})

I’ve used this a couple of times to load something in local storage, usually app settings. Then in my service (MyService.js) I can check what is stored in my settings, and if there is nothing there I can load them in via the same service.

Ionic are killing it at the moment

I’ve just got the Ionic newsletter email, reading through it I am amazed at the amount of new projects that are coming from Ionic over the next few weeks/months, there is:

The team over in Ionic are really creating a eco system around their product. It’s a great business plan, build a free product that users love, then create paid tools that users will need to support their apps they have created using your free tool. I think using this approach means that users won’t mind paying for a tool like Analytics after they have invested time in creating a product using the free platform you’ve created.

Using Ionic View

Today I’ve used Ionic’s new feature, Ionic view. This is the first time I’ve used this and it’s fantastic.

The basic idea behind Ionic View is that you build your app, then ‘upload’ it to Ionic’s servers. Once there you download the Ionic View app (which is available for both iOS and Android). Then with you use your Ionic.io log in credentials and Ionic View lists the apps that you’ve uploaded.

Then in the Ionic View mobile app you select the project you want to view, this then downloads the files to your phone to view it.

Ionic View is a great system, makes getting a early working version of your app on a phone so quick and easy.

A new series on learning Ionic from Josh Morony

Josh Morony has just started a new series on learning Ionic. So far part 1 is going through the basics of creating and setting up a Ionic app, but it is an interesting series, because Josh has mainly developed mobile apps using Sencha, which I’ve never used. Seeing how a developer moves from alternative technology to Ionic shows that Ionic is getting some real traction and become a real contender for mobile hybrid apps.

 

Ionic CLI tip

Just reading through the CLI documentation on the Ionic site, found this small tip for updating the version of Ionic you have in a project.
To do this go to your project in terminal, then run:

ionic lib update

This then updates Ionic for that project to the latest, nice….

Loading data at startup in a Ionic app

I’m working on a Ionic app that loads data at startup and also checks to see if this data is available everytime a view loads.

So to do this I’ve created a Service that loads the data, this I can call within the run function in the main JavaScript file, where I set up the routes using ui-router.

These run functions, and there can be more than one, are called when the application first runs.

.run(function(StartupService){
    StartupService.loadData();
})

In the above example I can call a function from my StartupService. The loadData() function then can load the data into localStorage so it is accessible when offline.

This was all fine, but I also wanted to check when a view loads to see if the data is accessible from local storage. Looking through the great documentation on the Ionic website there are a set of events that the ion-view has including:

  • $ionicView.loaded
  • $ionicView.enter
  • $ionicView.leave
  • $ionicView.beforeEnter
  • $ionicView.beforeLeave
  • $ionicView.afterEnter
  • $ionicView.afterLeave
  • $ionicView.unloaded

All these lifecycle events can be listened for, using the $scope.$on event handler.

So I used the $ionicView.enter event to make a call to see if the data was available in local storage.

This may not be the ideal approach, but it does work. The one thing I did get from this was the use of the event lifecycle for views and how it can help to tie into them.

A great article on these views and the lifecycle events is Navigating the Changes from the Ionic blog.