Passo a Passo para criar uma aplicação Móvel Híbrida

1
Step by Step
Juliano Marcos Martins – juliano.jmm@gmail.com
http://jmmwrite.wordpress.com

2
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.
Lets create a brand new application to lists Blogs
entries from my blog at Wordpress.

3
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/

4
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

5
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.

6
Step by Step – 3 – Edit index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="cordova.js"></script>

<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
This is the original Index
file created by Ionic

7
Step by Step – 3.1 – Edit index.html
<!DOCTYPE html>
<html lang="en" ng-app="lePosts">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="cordova.js"></script>

<script src="js/app.js"></script>
</head>
<body ng-controller="lePostsCtrl">
<ion-pane>
<ion-header-bar class="bar-dark">
<h1 class="title">Posts</h1>
</ion-header-bar>
<ion-content>
<ion-refresher pulling-text="Reload blogs" on-refresh="reload()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="b in blogs" ng-click="show($index)">
<h2 ng-bind-html="b.title"></h2>
<p>{{b.name}}</p>
<p>{{b.URL}}</p>
<ion-option-button class="button-energized" ng-click="share($index)">
Share
</ion-option-button>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" ng-if="deviceReady"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</body>
</html>
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.

8
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 <body> 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.

9
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.

10
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.

11
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.

12
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.

13
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.

14
Step by Step – TIP
● At your browser, ALWAYS run taking a look in the Console, it can help you to find errors,
for example:

15
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.

16
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

17
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

18
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 ;)

19
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 Maps
http://codepen.io/ionic/pen/uzngt
● Interesting Article about IOs native dev migration to Ionic
https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic
● How to deploy to App Store
https://medium.com/@_qzapaia/deploy-an-ionic-app-to-the-ios-app-store-702c79a2dd97
● SQLite example
● https://blog.nraboy.com/2014/11/use-sqlite-instead-local-storage-ionic-framework/

20
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.
Thank you …
… for your dedication and patience!

Passo a Passo para criar uma aplicação Móvel Híbrida

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Passo a Passo para criar uma aplicação Móvel Híbrida

Similar to Passo a Passo para criar uma aplicação Móvel Híbrida (20)

Recently uploaded

Recently uploaded (20)

Passo a Passo para criar uma aplicação Móvel Híbrida