Top Ionic Resources to Learn Hybrid App Development

WRITTEN BY GARETH DUNNE @JSDIARIES

Hybrid app development is an extremely fast growing niche. In particular, Ionic 3 is a platform that allows you to produce and distribute your app ideas to the market without having to specialise in iOS or Android development.

We can use the latest and greatest from frontend web technologies such as Angular 4 to power these apps. If you have previously read any of the Ionic content here, such as Creating a Google Map Place or Ionic 3 whats new? then none of this will be news to you. However, I wanted to list what I think is the highest quality learning content available now in relation to Ionic 3.

While there currently isn’t a proper Ionic 3 book to use as a learning resource. This Ionic 2 cookbook covers a wide range of Ionic developing basics and more.

Toptal also covers some common Ionic development mistakes here.

Content that is more practical than theoretical will always be a stronger learning asset so hopefully some of these will help to continue or start your Ionic development path.

Coursetro

Starting off with the Ionic related content on Coursetro.

I cant emphasis enough how much knowledge is gained from following any of Gary Simon’s Ionic related courses.

Starting all the way from designing a prototype in Adobe XD to implementing and developing your designed app using Ionic 3, no other content practically nails down the broader scope of full stack development by creating hybrid apps.

In particular, the course focusing on creating a gaming related app could not be more practical for creating a high quality application with solid functionality and purpose.

Just note that this tutorial in particular is behind a monthly subscription model, for one of the non premium app courses you can see the Wife Alert app which is not updated to Ionic 3 but the core fundamentals of Ionic are still there to learn.

Paul Halliday

Paul is one of the most prolific publishers when its comes to Ionic 3 content at the moment. He covers a plethora of useful Ionic 3 tutorial on his Youtube channel as well as some Udemy courses which I have no experiences with but if they are anything like his free content they are up to a very high standard of teaching.

I’m constantly learning new technologies that I can use in combination with the Ionic stack that would not know otherwise. On those terms, he is unmatched in the Ionic tutorial world.

Here are some of my favourites of his free content.

Joshua Morony

One of first Ionic tutorial publishers, Joshua provides frequent, useful and clear cut tutorials on his website and Youtube channel. There is an abundance of content that you can explore and he is up to date on the Ionic 3 front.

Joshua provides very good elements of clarity as he explains his content and has an impressive amount and experience publishing Ionic content.

Some great material here:

Raja Yogan

Raja had produce some very nice lengthy free content on Youtube. He provides very useful and fully fledged practical Ionic examples usually in combination with Firebase.

I really enjoyed his latest chat application and encourage you to check it out as its an fantastic series for building your own application using Firebase and Ionic. He is also a publisher who speaks clearly and teaches by example with no unnecessary theoretical fluff.

Exploring any of those publishers content is a great way to really get to grips with Ionic and Hybrid Web Development in general. All with their own different teaching styles, even spending a few hours will be more than beneficial to understanding various concepts for hybrid development.

Angular 4 Directives Overview

WRITTEN BY GARETH DUNNE @JSDIARIES

If you missed our last Angular post please check it out here.

Not much has changed in terms of directives for Angular 4 so this post will be a general directive overview mentioning Angular 4 directive changes where appropriate.

Under the hood, a directive in Angular is just a plain JavaScript class that is decorated with the @directive decorator. In Angular, we have 3 different types of directives.

These are:

  • Component Directives
  • Structural Directives
  • Attribute Directives

An attribute directive tends to change the look and behaviour of an element. Whereas a structural directive will manipulate the DOM and add or remove elements depending on what action the structural directives apply.

A Component Directive uses the shadow DOM to create encapsulated visual behaviour that is typically used to create UI widgets.

Some directives go beyond the scope of this post but be sure to check out this awesome Angular book by Nathan Murray for additional information.

Attribute Directives

We will start with attribute directives and how this interacts with our DOM and data.

We can also differentiate a component from a directive using this handy table provided for here.

You can create your own attribute directives or you can use Angular’s built in directives.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

ngClass

A fairly simple illustration of a basic attribute directive, ngClass is added into our component element and its value is given as a class.


As you can see, we can use the ngClass attribute to assign a class based on styles that we had specified in our styles array.

ngFor

In short, ngFor is a directive that outputs an array element, iterating through each element inside it.

For multiple classes, we can create an array and put those classes inside it to apply to our iterative list. We can then combine this with the aforementioned *ngFor.

The let key is part of the Angular template syntax. It creates a local variable that can be referenced anywhere in that specific template. let also creates the index i and keeps it as a reference to the current whiskey. All this is done under the hood of this directive.

What if we wanted to style the first and last item in our ngFor directive? This is actually made relatively easy by using let again to assign the first items to variable first and last to variable last.

To be as efficient as possible, ngFor will attempt to not remove and recreate these DOM elements and instead to reuse and recycle when possible. This helps with performance and prevents significant slowdown in our DOM.

ngSwitch

ngSwitch provides us with a structural directive similar to a switch loops in JavaScript and our other Object Oriented language counterparts.

Here is a simple example that combines input button events with ourSwitchCase loop. Based on the number that value returns which is changed depending on which button is clicked, one of the divs with the *ngSwitchCase will be displayed.

ngIf

NgIf adds or removes an element or elements from a sub tree based on the condition specified.

If the expression assigned to ngIf evaluates to a falsy value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

This would be similar to how the display: none property behaves in CSS.

The NgModel directive allows us to provide two way data binding to our HTML element. Whatever we type in the input field will reflect in our name element. In our sample Plunker we had to import and declare our FormsModule in order for this to work. The name attribute should also have the same value as our ngModel.

Creating our own Attribute Directive

I will be going over the fantastic introduction to creating our own directives from Angular University.

We can also create our own custom directives in Angular. In this case, this directive can be applied to any HTML element on the page and will hide this element when it is clicked.

Firstly, we need to import our Angular Directives from Angular core library into your component file.

We then need to then initialise our directive meta data decorator with the selector property of our choice. In this example its HideElement.

We then want specify the CSS classes that we want to use for the fade out transition.

And we also need an action to occur when the element is clicked so we will create a function called toggle.

We than want to use a click event that will trigger the function “Toggle” that will add or remove this fade out css class but we will not be using Angular’s (click) event so how exactly will we accomplish this?

Well, we will use the Angular directive HostListener from Angular Core. Using a Host Listener, Angular will invoke the decorated method (in this case toggle) when the our html element emits the event (when clicked).

In order to access and change properties of the Host Element we must use the HostBinding Decorator. This will check the host binding properties once a change is detected.

For a more detailed explanation of creating your own Angular directives check out this tutorial from Rangle.

If this helped you out be sure to check out our resources page for more recommended reading material on Angular.

Ionic 2 – Geolocation & Google Maps

 WRITTEN BY GARETH DUNNE @JSDIARIES

Using Ionic Native

One of the most straightforward ways to demonstrate Ionic Native and how it works is to use the GeoLocation native plugin. This will allow us to use a range of methods that will configure the the users current GeoLocation and we can then use this information in combination with a Google Maps implementation as well.

There is already some well established tutorials for achieving this so I’m going reference them in this post whilst also giving an overview for those that don’t have to time to implement their own example.

Please also keep in mind this excellent Ionic 2 book that will get you up to scratch very quickly.

And these articles by Toptal might help you to further understand Ionic concepts:

Geolocation

With your Ionic 2 project already created we need to install the cordova geolocation plugin here.

This plugin will provide information about the current users device’s location, such as latitude and longitude. When starting the application, the user will receive a dialog asking for permission to use the current location.

This is a standard practice as some of the native plugins want to ensure that the user is content with sharing certain information with our Ionic 2 application.

In our created Ionic page, where we want to display our Google maps instance, we need to import our GeoLocation plugin from ionic native so we have access to it in the page.

We should then add an event click listener to the desired button that will provide the action of locating the users current position.

We are just invoking the .getCurrentPosition() method on the imported Geolocation object. Afterwards or .then(),  we assign the current value of our location variable to our components location variable of type any that was declared earlier in the component.

In our html file we are now able to output a value for our coordinates by accessing the properties for coordinates (.coords) and for the latitude value of those coordinates (.latitude) as well as the longitude (.longitude) on the location object.

Google Maps

While getting a GeoLocation is handy to know, what exactly should we do with the users position? Well you could implement the retrieved coordinates into a Google Maps implementation in your App.

There are two main ways to do this.

The first is to install Angular Google Maps. This is very well covered in the video tutorial below by Mindspace.

Fast forward to about 21:37.

And if you have the time,  be sure to watch part 1 and 2 in its entirety as you will come away with a full application with some nice Ionic Native functionality.

The second option that we can do is to use the JavaScript SDK, so that we can put in the header of our index.html file. This would be considered an easier way to implement it and it will also work in the browser as well as natively on devices .

However, for both cases you might as well generate an API key as if you were to ever to implement your app into a production environment or upload it to the app store there is a usage limit Google has and you might have to pay in order to remove the limit.

index.html Google Maps JavaScript SDK implementation
index.html Google Maps JavaScript SDK implementation

https://developers.google.com/maps/documentation/javascript/get-api-key

Without generating an API key, to use the Maps SDK simply put the following in your index.html file.

We then just need to reference the map id in our template HTML.

By default, the div containing our Google Maps object has no styling properties. We need to change this order for the map to display properly.

 

Finishing up

Overall, I hope that this post has given a good indication of how to use Ionic Native plugins and from that point how to combine them together.

I didn’t want to provide too much detail as there is already quite a lot of fully fledged tutorials on this.

However, if you followed the links and references in the tutorial provided there is plenty of information to digest but bear in mind that the way you implement Ionic Native functionality never really changes, its just the built in methods and functions of the particular Ionic Native plugin that you are using that will be different.

I’m far from an expert in Ionic 2 but as I’m getting to grips it, I’m becoming more comfortable with Hybrid App development and want to share what I’m learning so be sure to check out our future posts on it.

I’m thinking about covering the changes in Ionic 3 and what it means for the framework.

Please check out our resources here for additional reading content.

References

A lot of this post stems from Josh Morony’s Ionic Google Maps & Geolocation guide so be sure to check his post out and his great Ionic 2 content in general.

Ionic 2: How to Use Google Maps & Geolocation