desarrollo de app móviles con tecnlogías web
TRANSCRIPT
![Page 1: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/1.jpg)
![Page 2: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/2.jpg)
DESARROLLO DE APLICACIONES MÓVILES CONDESARROLLO DE APLICACIONES MÓVILES CONTECNOLOGÍAS WEBTECNOLOGÍAS WEB
Autor: Abraham Calás
@dogcalas
![Page 3: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/3.jpg)
Es un sistema operativo creado por Google, inicialmente pensado parateléfonos móviles.
![Page 4: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/4.jpg)
http://dl.google.com/android/installer_r24.3.3-windows.exe
![Page 5: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/5.jpg)
AGREGAR CAMINOS A VARIABLE DE ENTORNOAGREGAR CAMINOS A VARIABLE DE ENTORNO
D:\Installers\Mobile\android-sdk-windows\platform-tools;D:\Installers\Mobile\android-sdk-windows\tools
![Page 6: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/6.jpg)
INSTALANDO DEPENDENCIASINSTALANDO DEPENDENCIAS
android
![Page 7: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/7.jpg)
![Page 8: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/8.jpg)
https://nodejs.org/download/
Git para windows
![Page 9: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/9.jpg)
![Page 10: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/10.jpg)
![Page 11: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/11.jpg)
Es un framework gratuito y open source para desarrollar aplicacioneshíbridas multiplataforma que utiliza HTML5, CSS y JavaScript(AngularJS).
![Page 12: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/12.jpg)
npm install -g cordova ionic
INSTALANDO IONICINSTALANDO IONIC
![Page 13: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/13.jpg)
ANGULARJSANGULARJS
![Page 14: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/14.jpg)
![Page 15: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/15.jpg)
http://download.oracle.com/otn-pub/java/jdk/8u45-b15/jdk-8u45-windows-
i586.exe
![Page 17: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/17.jpg)
AGREGAR CAMINOS A VARIABLE DE ENTORNOAGREGAR CAMINOS A VARIABLE DE ENTORNO
D:\Installers\WIN\Desarrollo\apache-ant-1.9.5\bin;
![Page 18: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/18.jpg)
![Page 19: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/19.jpg)
https://www.genymotion.com/#!/download
Descarga del drive
![Page 20: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/20.jpg)
Crear y descargar la máquina virtual Android
![Page 21: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/21.jpg)
Creando nuestra primera app
> ionic start example blank> cd example> ionic platform add android> ionic build android> adb devices> ionic run android
![Page 22: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/22.jpg)
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, width=device-width" <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 includes above <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">
![Page 23: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/23.jpg)
La estructura de nuestro código
// 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 // 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(); } });})
![Page 24: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/24.jpg)
Probando la app en un dispositivo
Phonegap DesktopiOS AppStore
Android Play Store
Windows Phone Store
FirefoxOS MarketPlace
![Page 25: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/25.jpg)
Bibliografía
http://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guidehttp://learn.ionicframework.com/videos/windows-android/https://docs.angularjs.org/api?PHPSESSID=cae8e98e7ca559b4605d75c813b358ee
¿PREGUNTAS?¿PREGUNTAS?
![Page 26: Desarrollo de app móviles con tecnlogías web](https://reader030.vdocuments.net/reader030/viewer/2022032619/55becf8bbb61eb15728b46ea/html5/thumbnails/26.jpg)
Ya podemos hacer app con JS+HTML+CSS