Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desarrollo de app móviles con tecnlogías web

365 views

Published on

Guía de configuración de un entorno para crear applicaciones móviles Android, utilizando tecnologías web.
Presentación en HTML: http://slides.com/abrahamcalas/ionic

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Desarrollo de app móviles con tecnlogías web

  1. 1. DESARROLLO DE APLICACIONES MÓVILES CONDESARROLLO DE APLICACIONES MÓVILES CON TECNOLOGÍAS WEBTECNOLOGÍAS WEB Autor: Abraham Calás @dogcalas
  2. 2. Es un sistema operativo creado por Google, inicialmente pensado para teléfonos móviles.
  3. 3. http://dl.google.com/android/installer_r24.3.3-windows.exe
  4. 4. AGREGAR CAMINOS A VARIABLE DE ENTORNOAGREGAR CAMINOS A VARIABLE DE ENTORNO D:InstallersMobileandroid-sdk-windowsplatform-tools; D:InstallersMobileandroid-sdk-windowstools
  5. 5. INSTALANDO DEPENDENCIASINSTALANDO DEPENDENCIAS android
  6. 6. https://nodejs.org/download/ Git para windows
  7. 7. Es un framework gratuito y open source para desarrollar aplicaciones híbridas multiplataforma que utiliza HTML5, CSS y JavaScript(AngularJS).
  8. 8. npm install -g cordova ionic INSTALANDO IONICINSTALANDO IONIC
  9. 9. ANGULARJSANGULARJS
  10. 10. http://download.oracle.com/otn- pub/java/jdk/8u45-b15/jdk-8u45-windows- i586.exe
  11. 11. https://ant.apache.org/bindownload.cgi
  12. 12. AGREGAR CAMINOS A VARIABLE DE ENTORNOAGREGAR CAMINOS A VARIABLE DE ENTORNO D:InstallersWINDesarrolloapache-ant-1.9.5bin;
  13. 13. https://www.genymotion.com/#!/download Descarga del drive
  14. 14. Crear y descargar la máquina virtual Android
  15. 15. Creando nuestra primera app > ionic start example blank > cd example > ionic platform add android > ionic build android > adb devices > ionic run android
  16. 16. La estructura de nuestro código <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS i <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable">
  17. 17. La estructura de nuestro código // Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular mo // 'starter' is the name of this angular module example (also set in a <body> attribute // 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 t // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); })
  18. 18. Probando la app en un dispositivo Phonegap Desktop iOS AppStore Android Play Store Windows Phone Store FirefoxOS MarketPlace
  19. 19. Bibliografía http://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#An http://learn.ionicframework.com/videos/windows-android/ https://docs.angularjs.org/api?PHPSESSID=cae8e98e7ca559b4605d75c813b358 ¿PREGUNTAS?¿PREGUNTAS?
  20. 20. Ya podemos hacer app con JS+HTML+CSS

×