ionic Provider to Request API Data

ionic Provider to Request API Data

You got your ionic app set up but now you need to create a process to request data from your WordPress REST API server. ionic is Angular so most of the stuff you learn can be translated to Angular development. Likewise, you can use Angular 2 code in your ionic app. We won’t go into details on Providers, if you want to learn more Google a bit and you can find some more in-depth tutorials. The ionic CLI has a generate provider command that adds the files to your app. Run the following CLI command in your app folder.

Replace “api” with a name you choose to specify its data type. If you are building an app that displays posts you might call the provider “posts”. Later when you write class methods to run the provider it makes more sense. Example: posts.getPosts();, posts.addPost();. Name it whatever you want but a good naming practice is to name it in way that a person who’s never looked at your code could identify the functionality at a glance.

ionic g provider api

After running the command there will be a new “providers” folder with a .ts file. This is a basic file that doesn’t do much by itself. It imports the need files to do HTTP requests to your API and the class is named the title you chose during creation. There will be a constructor with a console log so you can test if file is loaded correctly.

We need to import this file to our providers. Open /app/app.module.ts. At the top of the file where other imports are add an import for this file. Make sure the path is correct.

 

In the same file, scroll down to the providers array and add the imported class.

 

Now you are ready to use the provider in a page or when the app loads. I place an API request in the /app/app.component.ts file. This file is loaded when the app is ready. There is a function that checks if the platform is ready. Thats when I do my first API request to get fresh data. If you call the API before the platform is ready it could slow down app loading. If you cache previous request data then you will have something for the user to view as you update the data.  Place the API request below any Cordova/Phonegap plugin code.

Import your provider to app.component.ts

 

Now scroll down to the constructor and add the provider as a parameter.

 

If you ran the app now you would see the log message in the console that was included when you created the provider class. Let’s add a method to the provider to request API data. Open you provider .ts file from the /providers folder. Below the constructor add the following code. Replace the url to link to your WordPress REST API posts endpoint. That would be your-site-url.com/wp-json/wp/v2/posts

 

Now go back to the app.component.ts and we can call this method and get the posts data. As noted before, I do this once when I load my app to get fresh data. You can add the method to other pages if its not data you need right away. I add it after the platform is ready and the cordova/phonegap plugins have ran any code. I also check if the device if offline and then alert the user. If you don’t have offline notices for an app and the app doesn’t function properly without internet access Apple will reject your app. So, anything needed internet access should always check if offline.

Add the code below and then run your ionic app, $ ionic serve in the command line. You should see the posts array objects in the console. Sweet!

 

You might ask what is this .map and .subscribe function?  They are Observables, if you really want to understand it watch this video. Observables are something like promises. In our case we want to call the API but don’t want to wait around for the data response. The subscribe is a way for the app to move along and then when the data is return it executes the next function. For an app like posts data, you’d update the posts data supplied to template.

If you want to dive in deeper there a a bunch of videos on YouTube for Angular providers, http, Observables.

Leave a Reply

Your email address will not be published. Required fields are marked *

Bitnami