Year: 2015

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.

Review of AngularConnect

At the end of October I went to AngularConnect a massive Angular conference, the biggest conference I’ve ever been to.

The first day of the conference was a series of workshops about Angular 2, Angular 1 and Ionic. I went to the Ionic workshop, which was all about Ionic 2.  It was a great workshop, using the new alpha of Ionic 2. This was my first exposure to Ionic and Angular 2 along with TypeScript.

Like a lot of people I’ve seen the slides from the ng-conf presentation where scope and controllers were both declared dead in Angular 2. So I was interested in seeing how the new version was structured.

Getting to work with Ionic 2 in the workshop gave me a great introduction to both TypeScript and the component based structure of Angular.

That was the Monday, then on the Tuesday the conference started proper. First off was the keynote by Brad Green. I like everyone else was hoping that the alpha of Angular 2 was going to be announced, but it was (though I’m sure it’s close). The keynote was great, full of details about Angular, the Angular eco-system and the performance gains that are coming with Angular 2, really it can’t come quick enough.

Here’s a list of the talks I went:

  • Building cross-platform apps with Ionic 2
  • Routing in Eleven Dimension with Component Router
  • Full Stack Angular 2
  • Extreme programming in a Nutshell
  • Getting Started in Angular 2
  • Building native mobile apps with NativeScript
  • These are not the models you’re looking for
  • TypeScript tooling for greater productivity
  • Building performant components
  • Creating realtime apps with Angular 2 and Meteor
  • Using web workers for more responsive apps
  • How to design large scale AngularJS applications that scale
  • Optimise Yourself

So there was quite a lot of talks, thankfully everything was recorded and the videos are available to see on YouTube. So do yourself a favour go watch the YouTube channel and go next year

Node training course

On Friday I attended a one day Node course by White October. This course was run by Tim Ruffles

It was a great course, pretty full on and fast paced. Tim is a great instructor, who really knows his stuff and was a great tutor.

When I started the course I knew a little about Node and some ExpressJS, but after sitting through the course I realised I need to learn a lot more about Node and how to write Node, especially the callback pattern.  For what I learnt during the course, the callback pattern is extremely important to get right or your Node code can quickly turn into a right mess.

Here’s a good link to understanding the Node way:

The Node Way

I’ve also got a couple of books to read through:

So plenty to get through.

White October put on some good events. The next big event I’m going to is the AngularConnect conference in October

 

 

It is fun to learn

I’ve just read Dan Davies article “It’s fun to learn” it’s a great article where he talks about how he is a self taught web developer and over the last year he has really pushed his jQuery skills building demo sites and projects. It’s a great post and well worth checking out.

While reading I was reminded about that initial fun you get when you start out learning new technologies. Like Dan I’m a self taught developer, who has picked up new skills as I’ve gone along. For me learning a new technology has recently felt like it’s something I have to do. For example as a contractor if I want to earn so much a day then I need to have a particular set of skills (not the set of skills that Liam Neeson has in Taken). Which has lead me to looking to pick up the next thing that is popular.

Really I have  a lot of experience and a good set of skills, and I could easily stick with what I know, but this leads to stagnation and a feeling that you are going nowhere in your career. This takes the fun out of the job.

Dan’s post has reminded me to not learn something cause it’s popular and may increase contract opportunities, but to learn something that I find fun. And the best way to learn a new technology is to build demo sites as Dan lists in his post.

For me I’ve recently been interested in NodeJS (yes I know it is very popular at the moment, but it’s something I want to learn). As a web developer I like the web frameworks that Node supports, the one I am interested in is ExpressJS. So that’s what I’m going to start learning and have fun doing it.