Mobile Development
Step by Step
Juliano Marcos Martins [email protected]
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.
