Desenvolvimento Mobile Híbrido
-
Upload
juliano-martins -
Category
Technology
-
view
2.588 -
download
0
Transcript of Desenvolvimento Mobile Híbrido
Mobile Development
Mobile Development
Juliano Marcos Martins [email protected]
http://jmmwrite.wordpress.com
Intro
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
HTML
CSS
JavaScript
Json
Nice to KnowGit
Git Hub
Java Development Environment
Native Mobile Development
Apple IOs (X-Code / Swift)
Google Android
IOs
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
- {{carro.name}} {{carro.historia}}
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:
- {{carro.name}} {{carro.historia}}
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 - Filtering
Hands On - Ordering
Get angular.min.js
Get bootstrap.css
Create a controller
Order results!
Hello World! Busca de Carros
Pesquisar: Ordenar por: Nome Ano
- {{carro.name}} - {{carro.ano}} {{carro.historia}}
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'} ];
$scope.orderProp = 'ano';});
Hands On - Json
Create a controller
Create the json file
Hello World! Busca de Carros
Pesquisar: Ordenar por: Nome Ano
- {{carro.name}} - {{carro.ano}} {{carro.historia}}
var carrosApp = angular.module('carrosApp', []);
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
Pesquisar: Ordenar por: Nome Ano
- {{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
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
2009
2011
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
iOS
Ubuntu
Windows Phone 8
Windows
Tizen
PhoneGap
PhoneGap is Adobes productized version and ecosystem on top of Cordova.
http://phonegap.com/
IONIC
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
IOs
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 CarrosCtrl($scope, $ionicLoading, $ionicListDelegate, CarrosService) { $ionicLoading.show({ template: 'Carregando carros...' }); $scope.carros = []; $scope.$on("CarrosApp.carros", function(_, result){ result.data.forEach(function(c) { $scope.carros.push({ ide: c.id, name: c.name, brand: c.brand }); }); $ionicLoading.hide(); }); CarrosService.loadCarros();}
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
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.