Desarrollo de app móviles con tecnlogías web
26
-
Upload
ing-abraham-calas-torres -
Category
Mobile
-
view
23 -
download
0
Transcript of Desarrollo de app móviles con tecnlogías web
DESARROLLO DE APLICACIONES MÓVILES CONDESARROLLO DE APLICACIONES MÓVILES CONTECNOLOGÍAS WEBTECNOLOGÍAS WEB
Autor: Abraham Calás
@dogcalas
Es un sistema operativo creado por Google, inicialmente pensado parateléfonos móviles.
http://dl.google.com/android/installer_r24.3.3-windows.exe
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
INSTALANDO DEPENDENCIASINSTALANDO DEPENDENCIAS
android
https://nodejs.org/download/
Git para windows
Es un framework gratuito y open source para desarrollar aplicacioneshíbridas multiplataforma que utiliza HTML5, CSS y JavaScript(AngularJS).
npm install -g cordova ionic
INSTALANDO IONICINSTALANDO IONIC
ANGULARJSANGULARJS
http://download.oracle.com/otn-pub/java/jdk/8u45-b15/jdk-8u45-windows-
i586.exe
AGREGAR CAMINOS A VARIABLE DE ENTORNOAGREGAR CAMINOS A VARIABLE DE ENTORNO
D:\Installers\WIN\Desarrollo\apache-ant-1.9.5\bin;
https://www.genymotion.com/#!/download
Descarga del drive
Crear y descargar la máquina virtual Android
Creando nuestra primera app
> ionic start example blank> cd example> ionic platform add android> ionic build android> adb devices> ionic run android
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">
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(); } });})
Probando la app en un dispositivo
Phonegap DesktopiOS AppStore
Android Play Store
Windows Phone Store
FirefoxOS MarketPlace
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?
Ya podemos hacer app con JS+HTML+CSS
