Desenvolvimento Mobile Híbrido

2,456 views

Published on

Introdução a desenvolvimento híbrido para dispositivos móveis (Iphone, android) utilizando Ionic Framework (Angular, Cordova, Bootstrap). Tem exemplos de implementação.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,456
On SlideShare
0
From Embeds
0
Number of Embeds
1,550
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento Mobile Híbrido

  1. 1. 1 Mobile Development Juliano Marcos Martins – juliano.jmm@gmail.com http://jmmwrite.wordpress.com
  2. 2. 2 Intro Native Mobile Development Overview Hybrid Mobile Development Angular 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
  3. 3. 3 Must know HTML CSS JavaScript Json Nice to Know Git Git Hub Java Development Environment
  4. 4. 4 Native Mobile Development Apple IOs (X-Code / Swift) Google Android
  5. 5. 5 IOs IPhone, Ipad App Store http://www.apple.com Google Android 80% of the market Google Play https://www.android.com/ Windows Phone, Ubuntu, Tizen, BlackBerry, etc...
  6. 6. 6 Hybrid Mobile App Angular + Cordova + IONIC ← Our focus Appcelerator + Titanium IDE Xamarin Python + Kivy
  7. 7. 7 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.
  8. 8. 8 Hybrid PROS 1- Easy to learn and Develop 2- Fast to create a prototype 3- Easy to find workforce 4- Easy to create a beautiful app 5- No need to learn native technology 6- 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)
  9. 9. 9 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
  10. 10. 10 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.
  11. 11. 11 Angular.js A client-side JavaScript Framework for adding interactivity to HTML. https://angularjs.org/
  12. 12. 12 Bootstrap Is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http://getbootstrap.com/
  13. 13. 13 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
  14. 14. 14 Hands On Get angular.min.js Get bootstrap.css <!DOCTYPE html> <html ng-app> <head> <title>Hello World!</title> <script src= "js/angular.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="page-header"> Hello World </div> <p>1 + 2 = {{ 1 + 2 }}</p> </body> </html>
  15. 15. 15 Hands On - Controller Get angular.min.js Get bootstrap.css Create a controller <!DOCTYPE html> <html ng-app="carrosApp"> <head> <title>Hello World!</title> <script src= "js/angular.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Criaremos um controller --> <script src="js/controller.js"></script> </head> <body ng-controller="carrosCtrl"> <div class="page-header"> Listagem de Carros </div> <ul> <li ng-repeat="carro in carros"> <span>{{carro.name}}</span> <p>{{carro.historia}}</p> </li> </ul> </body> </html> 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'} ]; });
  16. 16. 16 Hands On - Controller
  17. 17. 17 Hands On - Filtering Get angular.min.js Get bootstrap.css Create a controller Filter results! <!DOCTYPE html> <html ng-app="carrosApp"> <head> <title>Hello World!</title> <script src= "js/angular.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Criaremos um controller --> <script src="js/controller.js"></script> </head> <body ng-controller="carrosCtrl"> <div class="page-header"> Busca de Carros </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Janela de busca--> Pesquisar: <input ng-model="query"> </div> <div class="col-md-10"> <!--Resultado da Busca --> <ul class="carros"> <li ng-repeat="carro in carros | filter:query"> {{carro.name}} <p>{{carro.historia}}</p> </li> </ul> </div> </div> </div> </body> </html> 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'} ]; });
  18. 18. 18 Hands On - Filtering
  19. 19. 19 Hands On - Ordering Get angular.min.js Get bootstrap.css Create a controller Order results! <!DOCTYPE html> <html ng-app="carrosApp"> <head> <title>Hello World!</title> <script src= "js/angular.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Criaremos um controller --> <script src="js/controller.js"></script> </head> <body ng-controller="carrosCtrl"> <div class="page-header"> Busca de Carros </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Janela de busca--> Pesquisar: <input ng-model="query"> Ordenar por: <select ng-model="orderProp"> <option value="name">Nome</option> <option value="ano">Ano</option> </select> </div> <div class="col-md-10"> <!--Resultado da Busca --> <ul class="carros"> <li ng-repeat="carro in carros | filter:query | orderBy:orderProp"> {{carro.name}} - {{carro.ano}} <p>{{carro.historia}}</p> </li> </ul> </div> </div> </div> </body> </html> 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'; });
  20. 20. 20 Hands On - Json Create a controller Create the json file <!DOCTYPE html> <html ng-app="carrosApp"> <head> <title>Hello World!</title> <script src= "js/angular.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Criaremos um controller --> <script src="js/controller.js"></script> </head> <body ng-controller="carrosCtrl"> <div class="page-header"> Busca de Carros </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Janela de busca--> Pesquisar: <input ng-model="query"> Ordenar por: <select ng-model="orderProp"> <option value="name">Nome</option> <option value="ano">Ano</option> </select> </div> <div class="col-md-10"> <!--Resultado da Busca --> <ul class="carros"> <li ng-repeat="carro in carros | filter:query | orderBy:orderProp"> <a href="https://www.google.com.br/? gws_rd=ssl#q={{carro.name}}">{{carro.name}}</a> - {{carro.ano}} <p>{{carro.historia}}</p> </li> </ul> </div> </div> </div> </body> </html> 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} ]
  21. 21. 21 Hands On - Routing Create the app.js Get angular-route <!DOCTYPE html> <html ng-app="carrosApp"> <head> <title>Hello World!</title> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script src="js/app.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/controller.js"></script> </head> <body> <div ng-view></div> </body> </html> 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' }); }]);
  22. 22. 22 Hands On – Routing - cont Create folder and carros.html and carrosdetalhe.html <div class="page-header"> Busca de Carros </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Janela de busca--> Pesquisar: <input ng-model="query"> Ordenar por: <select ng-model="orderProp"> <option value="name">Nome</option> <option value="ano">Ano</option> </select> </div> <div class="col-md-10"> <!--Resultado da Busca --> <ul class="carros"> <li ng-repeat="carro in carros | filter:query | orderBy:orderProp"> <a href="https://www.google.com.br/? gws_rd=ssl#q={{carro.name}}">{{carro.name}}</a> - {{carro.ano}} <p>{{carro.historia}}</p> <p><a href="#/carros/{{carro.name}}">mais detalhes</a></p> </li> </ul> </div> </div> </div>
  23. 23. 23 Hands On – Routing - cont Results
  24. 24. 24 Exercises Make the details page work, just showing any details that you want to add to the Json file.
  25. 25. 25 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/
  26. 26. 26 Bower Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. http://bower.io/
  27. 27. 27 Adobe buy NitobeNitobe PhoneGap Open Source 2009 2011 Adobe PhoneGap Apache Cordova
  28. 28. 28 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
  29. 29. 29 PhoneGap PhoneGap is Adobe’s productized version and ecosystem on top of Cordova. http://phonegap.com/
  30. 30. 30 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
  31. 31. 31 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.
  32. 32. 32 Hands on IONIC ●ionic start myApp tabs ●cd myApp ●ionic serve ●ionic serve --lab
  33. 33. 33 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
  34. 34. 34 More Ionic ● Config.xml ● Icons ● Create a resources folder ● Put your icon / splash screen ● ionic resources –icon Be careful with platform ready Ionic Creator - https://creator.ionic.io/
  35. 35. 35 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
  36. 36. 36 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)
  37. 37. 37 <!DOCTYPE html> <html lang="en" ng-app="CarrosApp"> <head> <meta charset="UTF-8"> <title>Carros</title> <script src="cordova.js"></script> <meta http-equiv="Content-Security-Policy" content="default-src *;"> <link rel="stylesheet" href="lib/ionic/css/ionic.css"> <script src="lib/ionic/js/ionic.bundle.js"></script> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body ng-controller="CarrosCtrl"> <ion-pane> <ion-header-bar class="bar.dark"> <h1 class="title">Listagem de Carros</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="c in carros"> <h2>ID: {{c.ide}}</h2> <h3>Nome: {{c.name}}</h3> <p>Modelo: {{c.brand}}</p> </ion-item> </ion-list> </ion-content> </ion-pane> </body> </html> index.html
  38. 38. 38 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
  39. 39. 39 {"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.
  40. 40. 40 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/
  41. 41. 41 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
  42. 42. 42 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/
  43. 43. 43 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!

×