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.

Angular 4 News Roundup April

WRITTEN BY GARETH DUNNE @JSDIARIES

Whats New?

As more and more developers are upgrading their projects to Angular 4 the initial confusion of this sudden incremented version has settled and has brought with it some handy but hardly groundbreaking changes. I covered this in another post here.

Although there isn’t much reading material specifically for Angular 4 I still recommend having a look at Yakov Fain’s Angular and Typescript book here.

Angular Attack

Over a 48 hour period developers were instructed to create an Angular application to be submitted and reviewed with the best receiving a wide range of prizes. There are a lot of impressive entries and some really nice user interfaces were created in that short space of time.

Be sure to check out the entries here and the prizes here.

ngConf

Claimed to be one of the biggest and original Angular conferences. ngConf took place on the 5th to 7th of April in Salt Lake City Utah.

With plenty of Angular related content and speakers your bound to find something useful for you.

Plenty of topical and insightful information can be found from these talks so be sure to have a look at some of the speakers when you find the time.

Here are all the related live streams that took place over those 3 days. Use this schedule list here to find a talk that you want to listen to from the recorded live streams.

Animation

As covered in a previous Angular post, the way animations are imported has been simplified in Angular 4. One of the best videos to come out this month regarding this is Coursetro’s Angular 4 animations video by Gary Simon.

He presents his videos very well and concentrates on the broader scope of the full stack developer, starting from conceptual design all the way to full development in Angular. Be sure to check our more of his content, most of it is free,

Angular 5

Almost unthinkable at this stage right? Surely there can’t be anyone contemplating details of another Angular version? Well there actually has been a few hints from ngConf .

The release window is estimated for Autumn 2017. Not much details are revealed but promises of simpler and smoother Ahead of Time Compilations were hinted at. And although it might seem ridiculous to think about another version already, this is the path Angular will be following form now on.

Every forthcoming version will contain small and efficient refinements to the previous Angular version every 6 months or so. Not much core changes but rather notable improvements to make your development life smoother. We can only hope that not much is broken in the process with each of these incremental versions.

For more information please check it out this post here.

More Angular 4 and Ionic content will be sure to covered here so subscribe to the mailing list if you haven’t already.

As we grow, we hope to implement a job board that will have listings of some open Angular positions. Hopefully, this will connect potential employers with some of the developers from the JSdiaries community.

Still looking to upgrade your AngularJS app to Angular 2? Check out this tutorial by Toptal here.