Ionic 3 – HTTP Requests – Retrieving a Photo from a Google Place

WRITTEN BY GARETH DUNNE @JSDIARIES

As I become more comfortable with Ionic 3 and its functionality, I wanted to share how to connect to the Google Maps API, retrieve a specific place and then to request a photo from that requested place.

In doing so, you will then know how define a HTTP object using TypeScript and using ES6 Promises in order to make a callback function that requests the photo using that HTTP object.

This functionality stems from an app that I made called CoffeeTrail.

Android Coffee Finder Application CoffeeTrail
CoffeeTrail

It’ll be on the iOS store very soon but be sure to check it out on Android here.

Setup Project

As always we can generate our Ionic 3 project using the command

We then want to generate our locations provider.

This is a provider that contains all our methods that we will use to request data from Google’s APIs. When you open up this locations provider you will see that the Ionic CLI has automatically injected a HTTP object into the constructor for us.

This is the object we will be using to make the requests.

We will also generate a location-details component that will display our requested images.

API Key

In order to have access to multiple API calls in our app we need to request a developer API key for Google Maps.

You can generate one by going to this page and clicking Get A Key , This is required for all place and photo requests and won’t work without one.

Google API Key
Google API Key

Get Place

We will create a getLocation method that will accept latitude and longitude as parameters.

We utilize a ES6 JavaScript Promise that will use the http object created in our constructor in order to make the request along with the details of the location which you can change for your own personal preferences.

You will of course have to reference the API key that you created earlier on in the apiKey variable of type string..

This Promise will return true or resolve when the the request has been completed and the data has been returned. The results of the data is mapped to a new json object which we assign to the this.data variable through ES6’s arrow functions .

This data will be resolved/returned when we call it in our location-details file.

We also can add the getPhoto method.

This will take in a photo reference string as a parameter in order to a retrieve a specific photo based on the location from the locations/location returned from our getLocation method.
So how do we get the photo reference from the data set returned from getLocation? Well we can do this in the locations-list file.

Display Photo

Our location-details.html file should look like this to display the retrieved image of the location.

Notice how we use the async pipe with the current image template variable.

This is because some asynchronous data objects can be a bit tricky to display without async pipe. The data source is an Observable that contains an array so using the async pipe secures it so to speak.

We then use the ng-template (which is new to Angular 4) syntax to display error text if no image can be retrieved.

So in our location.details.ts file we need to use our getLocation method in order to get a place and then to send a photo reference from that place to the getPhoto method.

This is just one way to retrieve data from an API in an Ionic application. The use of Angular 4 in an Ionic 3 project enables a developer to makes a request for some data and then to easily share that data throughout the rest of the components using a service or in this case, using our location.ts. provider.

Ionic 3 Release – Whats New?

WRITTEN BY GARETH DUNNE @JSDIARIES

Ionic 3 has released and with it, has brought some impressive but not overbearing changes to the Ionic framework.

While sites like Toptal have previously covered performance differences between Ionic 1 and 2.
This post will cover the upgrade from Ionic 2 to 3 and the performance differences that come with it.

Similar to the Angular 4 release, this isn’t a core change to the platform, rather it is adding some improvements to your applications that will increase overall performance and allows hybrid app development to come a few steps close to being on par with its native development counterparts.

As always here is some useful Ionic reading material. And here is the official post from the Ionic team specifying all the changes.

Updating from Ionic 2

Updating from Ionic 2 is actually quite a simple process. This video from Paul Halliday simplifies the process even further:

Angular 4

Ionic has been updated to be compatible with Angular 4 and all the features that come with it. You can find our Angular 4 release post here.

And the official Angular blog covers it here aswell.

Lazy Loading

One of the most notable features of the release, lazy loading provides us with the ability to breakdown our bundles for our application even further.

This allows our application to only load certain bundles/modules when they are actually needed. When you lazy load, your application performance improves, particular as the app is starting up because all the modules that were previously loaded in our app.module.ts are not requested at once rather they are loaded on a page by page basis.

I would highly recommend checking out Paul Hallidays tutorial on this:

TypeScript 2.1 and 2.2 compatibility

As specified on the official Ionic blog. Ionic 3 has been updated to be compatibly with Typescript versions 2.1 and 2.2. This is inline with **Angular 4 ** being compatible with these versions as well. More information can be found here.

A Promising future

So that just about summarizes the main changse for Ionic 3. I don’t think anyone can deny the momentum and progression that this framework has going for it.

While originally I was concentrating on all things Angular. Ionic has really provided such a sleek way to use web technologies in order to reach such a wider userbase and to target them more personally through mobile applications.

If you needed even more detail regarding Ionic 3 changes please check our Joshua Morony’s detailed guide here:

I highly recommend all his content as it provides a huge insight into all potential features you might want to implement into your application.

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