desenvolvimento mobile híbrido

Mobile Development

Juliano Marcos Martins [email protected]

http://jmmwrite.wordpress.com

Native Mobile Development Overview

Hybrid Mobile DevelopmentAngular Hands on

Playing with Ionic

Examples and Information in this slides has been created based on the official documentation sites for each technology. Coincidences are not just coincidences :P

Must know

JavaScript

Nice to KnowGit

Git Hub

Java Development Environment

Native Mobile Development

Apple IOs (X-Code / Swift)

Google Android

IPhone, IpadApp Store

http://www.apple.com

Google Android

80% of the marketGoogle Play

https://www.android.com/

Windows Phone, Ubuntu, Tizen, BlackBerry, etc...

Hybrid Mobile App

Angular + Cordova + IONIC Our focus

Appcelerator + Titanium IDE

Xamarin

Python + Kivy

Hybrid Mobile App

Built with HTML, CSS and JavaScript and is contained in a native wrapper so that it can be installed on a mobile device.

This allows web developers to build mobile apps without having to learn the native programming languages (e.g., Objective-C, Swift, Java).

It also means that you can have one codebase for all the different platforms.

Frameworks...

Attention Points:Maybe you can loose some native functions that use specific OS/Hardware resources.

Maybe the performance can be lower than the native development.

Hybrid PROS

1- Easy to learn and Develop2- Fast to create a prototype3- Easy to find workforce4- Easy to create a beautiful app5- No need to learn native technology6- Its faster to develop than Native (supposing that you are good in both technologies)7- Write once! (keep in mind that there are differences from Platforms)

Hybrid CONS

1- Performance can be lower (supposing that you are expert in Native and Hybrid)2- You can loose native functions specific for a OS/Device

When go Native or Hybrid*

IF ( NEED HIGH PERFORMANCE or NEED A LOT NATIVE RESOURCES or NEED A NATIVE RESOURCE NOT SUPPORTED) { goNative();} ELSE { goHibrid();}

* this is what I THINK. Please, research before start your project. Many fail because there are no planning, just code write.

Angular.js

A client-side JavaScript Framework for adding interactivity to HTML.

https://angularjs.org/

Bootstrap

Is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

http://getbootstrap.com/

Angular Basics

Directives

Modules

Controller

Expression

Services

In order to implement our next examples locally, you must disable web security. In the command line, start Google Chrome with the command:

Google-Chrome --args -disable-web-security (Linux / Windows)sudo open /Applications/Google\ Chrome.app/ --args -disable-web-security (Mac)

This can change and be different for other Operational Systems and for other browsers. Search the web for your case.

You can get the source code from this slides here:https://github.com/julianommartins/angular

Hands On

Get angular.min.js

Get bootstrap.css

Hello World! Hello World 1 + 2 = {{ 1 + 2 }}

Hands On - Controller

Get angular.min.js

Get bootstrap.css

Create a controller

Hello World! Listagem de Carros

var carrosApp = angular.module('carrosApp', []);

carrosApp.controller('carrosCtrl', function ($scope) { $scope.carros = [ {'name': 'Fusca', 'historia': 'Eterna Paixao do Brasileiro', 'ano':'66'}, {'name': 'Opala', 'historia': 'Bebe muito', 'ano':'72'}, {'name': 'Brasilia', 'historia': 'Carrao', 'ano':'70'} ];

Hands On - Controller

Hands On - Filtering

Get angular.min.js

Get bootstrap.css

Create a controller

Filter results!

Hello World! Busca de Carros

Pesquisar:

Hands On - Filtering

Hands On - Ordering

Get angular.min.js

Get bootstrap.css

Create a controller

Order results!

Pesquisar: Ordenar por: Nome Ano

{{carro.name}} - {{carro.ano}} {{carro.historia}}

$scope.orderProp = 'ano';});

Hands On - Json

Create a controller

Create the json file

{{carro.name}} - {{carro.ano}} {{carro.historia}}

carrosApp.controller('carrosCtrl', function ($scope, $http) { $http.get('carros.json').success(function(data) { $scope.carros = data; }); $scope.orderProp = 'ano';});

[ {"name": "Fusca", "historia": "Eterna Paixao do Brasileiro", "ano":66}, {"name": "Opala", "historia": "Bebe nada..., "ano":72}, {"name": "Brasilia", "historia": "Carrao", "ano":70}, {"name": "Gol", "historia": "Popular. SQN!", "ano":84}, {"name": "i30", "historia": "Carro de Nerd que paga uma de boy", "ano":2014}]

Hands On - Routing

Create the app.js

Get angular-route

Hello World!

var carrosCtrl = angular.module('carrosCtrl', []);

carrosCtrl.controller('carrosCtrl', function ($scope, $http) { $http.get('carros.json').success(function(data) { $scope.carros = data; }); $scope.orderProp = 'ano';});

carrosCtrl.controller('carrosDetalheCtrl', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.name = $routeParams.name; }]);

[ {"name": "Fusca", "historia": "Eterna Paixao do Brasileiro", "ano":66}, {"name": "Opala", "historia": "Bebe nada..., "ano":72}, {"name": "Brasilia", "historia": "Carrao", "ano":70}, {"name": "Gol", "historia": "Popular. SQN!", "ano":84}, {"name": "i30", "historia": "Carro de Nerd que paga uma de boy", "ano":2014}]

var carrosApp = angular.module('carrosApp', ['ngRoute','carrosCtrl']);

carrosApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/carros', { templateUrl: 'carros/carros.html', controller: 'carrosCtrl' }). when('/carros/:name', { templateUrl: 'carros/carrosdetalhe.html', controller: 'carrosDetalheCtrl' }). otherwise({ redirectTo: '/carros' }); }]);

Hands On Routing - cont

Create folder and carros.html and carrosdetalhe.html

Busca de Carros

{{carro.name}} - {{carro.ano}} {{carro.historia}} mais detalhes

Hands On Routing - cont

Results

Exercises

Make the details page work, just showing any details that you want to add to the Json file.

Node JS

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

https://nodejs.org/

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff youre looking for.

http://bower.io/

Adobe buy NitobeNitobe PhoneGapOpen Source

Adobe PhoneGapApache Cordova

Apache Cordova

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

http://cordova.apache.org/

Amazon Fire OS

Android

BlackBerry 10

Firefox OS

Ubuntu

Windows Phone 8

Windows

PhoneGap

PhoneGap is Adobes productized version and ecosystem on top of Cordova.

http://phonegap.com/

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.

http://ionicframework.com

Installation

Install Git - https://git-scm.com/

Install Node Package Manager (npm) - https://nodejs.org/

Install Cordova/Ionic - npm install -g cordova ionic

Install Android SDK - http://developer.android.com/sdk/index.html

Create Environment Variable ANDROID_HOME , Example: ANDROID_HOME=/home/julianom/Android/Sdk Install Java JDK 7

Create Environment Variable JAVA_HOME , Example (Linux):JAVA_HOME=/opt/java Its a good idea put at your Path:

$JAVA_HOME/bin and $ANDROID_HOME/tools, Example (Linux): PATH=$JAVA_HOME/bin:$ANDROID_HOME/tools:$PATH Install Genymotion (to emulate Android) - https://www.genymotion.com/#!/

Create a virtual device at Genymotion and test it. I recommend a not powerful device, like a Galaxy S3.

Install a good Editor, I recommend Brackets (Its free) - http://brackets.io/

Create a user at Git Hub - https://github.com/

Take note about the users that you will create, you will use along the course.

Hands on IONIC

ionic start myApp tabs

cd myApp

ionic serve

ionic serve --lab

Hands on IONIC

ionic platform list list available platforms

Android

ionic platform add android

ionic emulate android

or

ionic run android

ionic platform add ios

ionic emulate ios

or

ionic run ios

More Ionic

Config.xml

IconsCreate a resources folder

Put your icon / splash screen

ionic resources icon

Be careful with platform ready

Ionic Creator - https://creator.ionic.io/

Testing

Android We recommend test with Genymotion, by running the command ionic run android. Also, if you plug your Android phone at your computer, the run command should install it at your device.

IOs You can test in the simulator running ioinic emulate ios.

You can open your project in at XCode by going to the folder platforms/PLATFORM of your project, and run this as a normal XCode project. Also, you can publish your app from here.

Any time that you change content inside www folder, run the command cordova prepare ios in order to update the XCode project. Have in mind that this will overwrite any change that you have done at XCode.

More about XCode/Cordova:http://cordova.apache.org/docs/en/3.3.0/guide_platforms_ios_index.md.html

Our APP

Create a simple application to list cars from

https://tars.eigmercados.com.br/tamandare-friendly-web/rest/vehicle/get ** If URL are note working, you can use a static JSON file to play. In the following slides, we will have an example that show how to get data from Wordpress and you can use it also.

STEPS Create a blank project:ionic start leCarros blank

Go to www and delete html, css and js files

Create your own index.html and index.js files based on next slides

Test in browser: ionic serve

Add Platform:ionic platform add ios (or android)

Run (at this point, for Android Have genymotion running):ionic run ios (or android)

Carros

Listagem de Carros ID: {{c.ide}} Nome: {{c.name}} Modelo: {{c.brand}}

index.html

var CarrosApp = angular.module("CarrosApp", ["ionic"]);

CarrosApp.service("CarrosService",["$http","$rootScope",CarrosService]);

CarrosApp.controller("CarrosCtrl", ["$scope", "$ionicLoading", "$ionicListDelegate", "CarrosService", CarrosCtrl]);

function CarrosService($http, $rootScope){ this.loadCarros = function() { $http.get("https://tars.eigmercados.com.br/tamandare-friendly-web/rest/vehicle/get").success(function(result){ $rootScope.$broadcast("CarrosApp.carros", result); }); }}

index.js

{"data":[{"id":2,"name":" FUSCA","brand":" VW"},{"id":3,"name":" BRASILIA","brand":" VW"},{"id":4,"name":" GOLF","brand":" VW"},{"id":1,"name":"GOL 1.6V","brand":"VW"},{"id":5,"name":" UNO","brand":" FIAT"}],"returnCode":0,"returnType":0,"returnMessage":"Operation ocurred successful","date":1439989279411,"processTag":null}

This is the json the URL return to us. If you are not able to reach it, use the json instead like we did for Angular Example.

Our APP Next Steps

Create a share button

http://ionicframework.com/docs/api/directive/ionOptionButton/ https://github.com/leecrossley/cordova-plugin-social-message

Create a click function when user select a car, and open a pop-up with the same info with the plug in:

https://github.com/apache/cordova-plugin-inappbrowser

Create an infinite scroll

http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

Exercises

1 Create a new project at Ionic Creator site (https://creator.ionic.io/)

The project must have a side menu with 3 options (Noticias, Cotacoes, Sobre)

We must have 3 pages (noticias, Cotacoes, sobre)

Noticias must be the default

For now, you can use a static Json files for this or you can use real services

For router doubts: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/

2 Create a simple application that show Google maps in the screen and when user click in some point, it show a new window (pop-up, browser, page, etc) with the coordinates (see codepen example at links slide)

3 Create a application that ask the user name in the first execution, then, when user submit username, it goes to a second page showing Hello Username. In the second execution it should go to a second page that show Hello Username.

Search for local storage in order to implement this.

Test both projects in Android and IPhone devices if possible(emulator or real)

Submit all the projects to your github and send me the url

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.

desenvolvimento mobile híbrido

Technology