JAVASCRIPT

Build Your First Mobile App with Ionic – Part 2


The focus of this app is to easily get hold of developers that actively contribute to open source in PHP and JS.

Luckily for us, we have the data of the most active github users from 1st of Dec 2014 to 1st of Dec 2015 available to us by the help of paulmillr here.

We could decide to just fetch it from there or download it as a .json file.

Download it and put in the www folder.

Step 6

Let’s create a Developers Service. Create a new file services.js in the js folder.

Now, Open services.js and add this:

 

In the code above, our service has one method called getData and we injected two inbuilt AngularJS services $http and $q . $http for network operations like fecthing and posting of data from/to external services and $q for dealing with promises.

 

This piece of code above filters through the result returned from the json file using underscore module and extracts the PHP developers into a variable and JS developers into another.

Then if it is succesful, we resolve the promise with an object containing PHP and JS data and if it is not, we reject the promise.

Quickly go to app.js and add this at the top to load the underscore module:

Also, Inject the devangelist.services into the global devangelist module like so:

Then, go to your terminal and run:

So that we can have the underscore library in the lib folder.

Now, open index.html and reference the underscore library file and services.js file

Now, let’s create a Developer controller that can fetch data from the Developers Service.

Open controllers.js and add this to the existing empty controllers in the file:

From the code above, apart from the $scope variable, we have injected the Developers Service and $ionicLoading service.

The $ionicLoading service has a show method that can be called on it to show a loading icon while data is been fetched.

The code above simply fetches the data via the getData method from the Developers service and assigns the result to developers array in the controller, then hides the loading icon.

Open developers.html and replace it with this:

developers.html

We are simply looping through the data in our developers array in the DeveloperCtrl.

We have an object of two keys namely PHP and JS.

That’s why we have the ng-repeat as dev in developers.PHP and for the Javascript tab, we have the ng-repeat as dev in developers.JS.

Quickly update your developers.scss file. Somethings have changed.

Your developers.scss should look like so now:

Let’s check our app. This is how it should look like now:

Screen Shot 2016-01-02 at 9.10.29 PM

 

Screen Shot 2016-01-02 at 9.10.45 PM

Fantastic! :smile:

Now, if you click on the button that shows the developer’s github handle, nothing happens.

Let’s fix that, it should actually open a link to the developer’s profile.

Add this to DeveloperCtrl

Now, click on the link, it now opens the developers profile in a new window.

One more thing

Right now, our app kinda looks dry. Let’s add some animations to spice it up.

Download animate.css from here and put it in your css folder

Reference it in your index.html like so:

Now go to developers.html and add animate and zoomIn classes to the first div in the PHP ion-tab like so:

Add animate and bounceInRight classes to the div in the JS ion-tab like so:

Note: I collapsed the divs in these two code snippets

Check out the results and see how the divs bounce in and zoom in. Cool, right?

Feel free to play with the different animations and select the one you really like.

Update: This post was updated January 3, 2016

If you observe carefully, you’ll discover that we are actually loading hundreds of data into the view at once which is not cool.

Let’s lazy load the data and implement infinite scrolling.

Ionic has a very easy way of handling that, there is a directive called  <ion-infinite-scroll>

Open developers.html

Add this just before the closing </ion-content> tag for the PHP and JS sections

This ion-infinite-scroll component has an on-infinite attribute directive which calls a loadMore function.

Let’s go ahead and create this function in the DeveloperCtrl.

Now, in the loadMore function, it still calls the Developers Service but it passes and argument to a getMoreData method. Let’s hold it right there.

Quickly head over to the Developers Service and add this getMoreData method.

This method is similar to the getData method that exists already but there is a twist to it.

It takes in an argument called end  here:

We are slicing the data from our github results to return only a specific amount of data.

Initially, when the loadMore function is called from the Controller, it fetches 20 results, When it is called again, it adds 1o to the end variable to add 10 more results to the array. Check out the code from the DeveloperCtrl

Here we are letting the ion-infinite-scroll know that we’re done loading in the new items. To do this, we had to broadcast the scroll.infiniteScrollComplete event.

Now, we need to tweak the original getData method in the Developers Service to load only 10 results into the view.

Awesome.

So, once the application loads up, it calls the getData method from the Developer Service which loads up just 10 results from the view.

When you get to the end of the view while scrolling, the infinite scrolling component invokes the loadMore function from the Developer controller which in turn calls the getMoreData method from the Developer Service to load more results into the view.

Quite Simple, right?. I’m also surprised how simple this was! :smile:

Conclusion

We have been able to set up the developers view and it works properly.

In the next blog post, we’ll be setting up the location of the developers on the location view and also setting up the about view. Stay tuned :smile:

Please, let me know if you have any questions or observations in the comments section below. :smile:

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

Food Ninja, Code Slinger, Technical Trainer, Accidental Writer, Open Source Advocate and Developer Evangelist.