Mar 13 2016
My thoughts on the mobile web 

Currently the mobile web is growing and growing, every week there is a new ways of using web technologies to create mobile apps.My weapon of choice is Ionic, mainly because the Ionic team have created a framework that allows a web developer to create apps that work well and look fantastic. 
It really shows the power of the web, it’s everywhere, you can build anything with just HTML, CSS and JavaScript. For a company who want their product to reach as many platforms as possible, the mobile web is the ideal solution. A single web developer can built apps for mobile, tablet, desktop and now TV.

The web has always been an exciting place to be, but now with the options for the mobile web, being a web developer is a great place to be.

Unfortunately with more and more technologies coming out, different approaches to using web technology to develop cross platform apps. This ‘my technology is better than yours’ arguments start. Usually these are fuelled by the companies who’s technology it is. I mean they have to sell their product. But what is better, native, hybrid, or these ones that use web technologies to compile down to native. They are all great, but for me as a web developer I want to be able to create great apps for as many platforms as I can. For the people who use these apps, they don’t care what technology the apps was developed in. All they care is it works as they wanted to, it’s fast and looks good. For me as a web developer I want to use something that I can use my current skills for and Ionic is my platform of choice for these reasons.

So web developers enjoy this current growth we have in the mobile web it’s a very exciting time.

Stephen Adams 0 Comments
Mar 5 2016
SyncHerts mobile development event

I went to my first SyncHerts event in a while. It was about mobile development, a favourite subject of mine, so I was keen to see what others in the local area are doing.

This was the second part of a 2 part event. In the first event people broke into teams and wrote user stories and made UI designs. In this the second part they needed developers to actually make these apps.

so again we split into teams and as the developer in the team I started making the app with Ionic. We only had 20-30 minutes before we had to demo to the other groups, which isn’t long enough to create a fully featured apps. But with the power of Ionic I was able to build an app that loads in a JSON file with a list of pizzas (it’s a pizza ordering app) then when you select on a pizza you get to see the full details of the pizza. Finally we added a Order button, so people could chose which one they wanted ordered for the next meet up.

We weren’t the only team using Ionic, another team had created a Ionic app that used a carousel to go from one pizza type to the next. Another team used Xamarin, and another team used Bootstrap with ASP MVC.

It was interesting to see how quickly people could get something together in such a small space of time. It was also interesting to see what technologies people would use.

I was impressed with how quickly you could build something that looked OK and worked using mobile web technologies like Ionic.  I was also able to load the app on my phone to demo using Ionic View.

I might add to the app and get it on GitHub

 

Stephen Adams 0 Comments
Dec 31 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.

Stephen Adams 0 Comments
Dec 13 2015
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>

Stephen Adams 0 Comments
Dec 2 2015
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.

Stephen Adams 0 Comments
Nov 7 2015
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

Stephen Adams 0 Comments
Sep 26 2015
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

 

 

Stephen Adams 0 Comments