Post on 15-Apr-2017
Mobile Development
Step by Step
Juliano Marcos Martins juliano.jmm@gmail.com
http://jmmwrite.wordpress.com
Lets create a brand new application to lists Blogs entries from my blog at Wordpress.
Step by Step - 1
Create a simple application to list the post from my blog:
My blog: https://jmmwrite.wordpress.com/
Wordpress REST Documentation: https://developer.wordpress.com/docs/api/
Step by Step 1.1
Getting posts URL (try to hit this URL at your browser): https://public-api.wordpress.com/rest/v1.1/sites/jmmwrite.wordpress.com/posts/?number=2
Number its the number of posts to retrieve. Default is 20
See that each post have many attributes, what we care now is TITLE and excerpt
Step by Step 2 Create a Blank project
ionic start lePosts blank
It create some files and folders.What matter to us now, is the WWW folder.
Step by Step 3 Edit index.html
Ionic Blank Starter
This is the original Index file created by Ionic
Step by Step 3.1 Edit index.html
Posts {{b.name}} {{b.URL}} Share
This is the final version, see that we changed many things. Be careful with cut and paste. You can delete all the content of your index file and paste this there.
Step by Step 4 Edit the app.js file
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a attribute in index.html)// the 2nd parameter is an array of 'requires'angular.module('starter', ['ionic'])
.run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } });})
Inside js, you can find this file. This is the original file created by Ionic.
Step by Step 4.1 Edit the app.js file
var lePosts = angular.module("lePosts", ["ionic"]);
lePosts.service("lePostsSvc", ["$http", "$rootScope", lePostsSvc]);
lePosts.controller("lePostsCtrl", ["$scope", "$sce", "$ionicLoading", "$ionicListDelegate", "$ionicPlatform", "lePostsSvc", lePostsCtrl]);
function lePostsCtrl($scope, $sce, $ionicLoading, $ionicListDelegate, $ionicPlatform, lePostsSvc) { $ionicLoading.show({template: "Loading blogs..."}); $scope.deviceReady = false; $ionicPlatform.ready(function() { $scope.$apply(function() { $scope.deviceReady = true; }); }); $scope.blogs = []; $scope.params = {}; $scope.$on("lePosts.blogs", function(_, result) { result.posts.forEach(function(b) { $scope.blogs.push({ name: b.author.name, avatar_URL: b.author.avatar_URL, title: $sce.trustAsHtml(b.title), URL: b.URL, excerpt: $sce.trustAsHtml(b.excerpt), featured_image: b.featured_image }); });
Here is the edited file. Its big, so, it continue in the next slide. Use this.
Step by Step 4.1 Edit the app.js file - cont
$scope.$broadcast("scroll.infiniteScrollComplete"); $scope.$broadcast("scroll.refreshComplete"); $ionicLoading.hide(); }); $scope.loadMore = function() { lePostsSvc.loadBlogs($scope.params); } $scope.reload = function() { $scope.blogs = []; $scope.params = {}; lePostsSvc.loadBlogs(); } $scope.show = function($index) { cordova.InAppBrowser.open($scope.blogs[$index].URL, "_blank", "location=no"); } $scope.share = function($index) { $ionicListDelegate.closeOptionButtons(); window.socialmessage.send({ url: $scope.blogs[$index].URL }); } }
function lePostsSvc($http, $rootScope) { this.loadBlogs = function(params) { $http.get("https://public-api.wordpress.com/rest/v1.1/sites/jmmwrite.wordpress.com/posts/", { params: params}) .success(function(result) { $rootScope.$broadcast("lePosts.blogs", result); }); }}
Here is the edited file continuation. Take care to copy and paste and do not loose any piece of code.
Step by Step A pause to explanations...
So far we: Created a new project
Edited the index page that will hold the list of blogs. There, we set up the Controller that will make the magic. See that we have a FOR loop to list the posts. We also created a functionality to reload blogs when user pull text and load more when user scroll down.
In the controller, we created a service that connect to the wordpress feed and put the results in the array called blogs.
You can separate controller and services in more files to organize your code.
Step by Step 5 Testing at your browser
Now, in the command line, got to your app folder root, in my case:[~/workspaceIonic/lePosts]$ pwd/home/julianom/workspaceIonic/lePosts
Run the command:
ionic serve
Test now.
Step by Step 5.1 Testing at your browser
With the following command, you can test simulating a phone appearance:
ionic serve --lab
Test now.
Step by Step TIP
At your browser, ALWAYS run taking a look in the Console, it can help you to find errors, for example:
Step by Step TIP 2
When you change html, js, css, Ionic Serve will reload it, and you just need to reload the page at your browser. In some cases this will not work properly, so, its better close Ionic Serve (type q in the console), and start again.
Step by Step 6 Testing in the Phone
First of all, you need to add Platform, in my case, Android. Run the command (inside your app folder):
ionic platform add android
Step by Step 6 Testing in the Phone
Then, in order to run, you need to have your environment OK. Remember to perform the installations from the previous slides. In my case, I have started genymotion, then, I run the command:ionic run android
Step by Step Exercises
1- We have a Bug in the project: When pulling up, app load more blogs entries, but it repeat the entries! How to solve?
2- When user click URL, you should open it ;)
Links
Ionic JavaScript functionalities
http://ionicframework.com/docs/api/ Ionic CSS
http://ionicframework.com/docs/components/ Ionic Creator
http://creator.ionic.io/app/login Extensions for Cordova API
http://ngcordova.com/ Example with Google Mapshttp://codepen.io/ionic/pen/uzngt
Interesting Article about IOs native dev migration to Ionichttps://www.airpair.com/javascript/posts/switching-from-ios-to-ionic
How to deploy to App Storehttps://medium.com/@_qzapaia/deploy-an-ionic-app-to-the-ios-app-store-702c79a2dd97
SQLite examplehttps://blog.nraboy.com/2014/11/use-sqlite-instead-local-storage-ionic-framework/
Thank you
for your dedication and patience!
All text and image content in this document is licensed under the Creative Commons Attribution-Share Alike 3.0 License (unless otherwise specified). Adobe, Google, Apple, Apache, and other are registered trademarks. Their respective logos and icons are subject to international copyright laws.