![Page 2: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/2.jpg)
Proceso de creación de una app
Análisis de requisitos
Diseño funcional
Diseño de interfaz
Desarrollo Pruebas e implementación
Reciclado y evolución Mantenimiento
![Page 3: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/3.jpg)
Análisis de requisitos
![Page 4: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/4.jpg)
Otros requisitos externos que
afectan al diseño
![Page 5: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/5.jpg)
Diseño funcional
![Page 6: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/6.jpg)
Diseño de interfaz y prototipado
![Page 7: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/7.jpg)
Desarrollo
![Page 8: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/8.jpg)
Pruebas e implantación
![Page 9: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/9.jpg)
Mantenimiento
![Page 10: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/10.jpg)
Reciclado y evolución del sistema
![Page 11: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/11.jpg)
Diseño gráfico de interfaz
![Page 12: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/12.jpg)
Definir contextos de uso
![Page 13: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/13.jpg)
Wireframe
![Page 14: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/14.jpg)
Guías de diseño de interfaz: Google
Material Design
![Page 15: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/15.jpg)
Guías de diseño de interfaz
![Page 16: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/16.jpg)
Guías de diseño de interfaz
![Page 17: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/17.jpg)
Guías de diseño de interfaz
![Page 18: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/18.jpg)
Guías de diseño de interfaz
![Page 19: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/19.jpg)
Guías de diseño de interfaz
![Page 20: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/20.jpg)
Guías de diseño de interfaz
![Page 21: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/21.jpg)
Framework UI: iOS Human I.G.
![Page 22: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/22.jpg)
Framework UI: Material Design
![Page 23: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/23.jpg)
Framework UI: terceros
![Page 24: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/24.jpg)
Framework UI: Propio
![Page 25: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/25.jpg)
Prototipado: marvel
![Page 26: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/26.jpg)
Tipos de apps
![Page 27: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/27.jpg)
APPS NATIVAS
![Page 28: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/28.jpg)
WEB APPS
![Page 29: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/29.jpg)
HYBRID NATIVE
• Programación web (HTML, CSS y JS). • Cordova/Phonegap el más utilizado. • Nivel de integración con el SO: depende del
framework. • Rendimiento cada vez mejor. • Instagram:
• Nativo: para hacer y publicar la fotografía. • Web: para desplegar las fotografías y perfil.
• Solución económica y equilibrada.
![Page 30: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/30.jpg)
Comparativa de mercado
![Page 31: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/31.jpg)
Los principales lenguajes de
programación para el desarrollo de
Aplicaciones con Phonegap y Cordova
![Page 32: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/32.jpg)
HTML5
![Page 33: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/33.jpg)
CSS3
![Page 34: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/34.jpg)
CSS3
![Page 35: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/35.jpg)
CSS3
![Page 36: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/36.jpg)
JS Javascript
![Page 37: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/37.jpg)
¿Que es Apache Cordova
/Phonegap?
PhongeGap/Cordova permite el desarrollo de aplicaciones para
dispositivos móviles utilizando herramientas genéricas tales como
JavaScript, HTML5 y CSS3.
![Page 38: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/38.jpg)
Plataformas que soporta
![Page 39: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/39.jpg)
Cuota de mercado SO Móviles
Spain
US
![Page 40: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/40.jpg)
Creando una App
1. Creamos la App: $ cordova create hello com.example.hello HelloWorld
2. Añadimos las plataformas sobre las vamos a trabajar: $ cordova platform add iOS
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add windows
3. Añadir los plugins necesarios: $ cordova plugin add cordova-plugin-geolocation
$ cordova plugin add cordova-plugin-device
$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=“bime”
![Page 41: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/41.jpg)
Notificaciones
Crear Callbacks para las notificaciones:
function onConfirm(buttonIndex) { alert('Has pulsado el boton: ' + buttonIndex); } function onPrompt(results) { alert("Has pulsado el boton: " + results.buttonIndex + " tu nombre es: " + results.input1); }
Crear un botón que haga beeps: <button type="button" onclick="navigator.notification.beep(2);">Beep Plugin</button>
Instalar el plugin de vibración:
cordova plugin add cordova-plugin-vibration
Crear botón que haga vibrar el dispositivo(con patrones): <button type="button" onclick="navigator.vibrate([500, 1000, 500]);">Vibrar</button>
![Page 42: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/42.jpg)
Camara
Instalar el plugin de la cámara:
cordova plugin add cordova-plugin-camera
Crear dos funciones para acceder a la cámara y a la galería: function getCamera(){ navigator.camera.getPicture(onSuccessPicture, onFailPicture, { quality: 80, destinationType: Camera.DestinationType.FILE_URI }); } function getAlbum(){ navigator.camera.getPicture(onSuccessPicture, onFailPicture, { quality: 80, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, destinationType: Camera.DestinationType.FILE_URI }); } function onSuccessPicture(imageData) { var image = document.getElementById('imagen'); image.src = imageData; } function onFailPicture(message) { alert('Failed because: ' + message); }
![Page 43: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/43.jpg)
Geolocalización
Instalar el plugin de geolocalización:
cordova plugin add cordova-plugin-geolocation
Crear una función que llame muestre los datos de localización: function getLocation(){ navigator.geolocation.getCurrentPosition(onSuccessAlert, onError); } function onSuccessAlert(position) { alert('Latitude: ' + position.coords.latitude + '\n' + 'Longitude: ' + position.coords.longitude + '\n' + 'Altitude: ' + position.coords.altitude + '\n' + 'Accuracy: ' + position.coords.accuracy + '\n' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' + 'Heading: ' + position.coords.heading + '\n' + 'Speed: ' + position.coords.speed + '\n' + 'Timestamp: ' + position.timestamp + '\n'); };
Crear una función pinte un mapa con nuestra posición:
function onSuccessPrint(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&markers=color:blue%7Clabel:T%7C"+latlon; document.getElementById("imagen").src = img_url; };
![Page 44: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/44.jpg)
Brújula
Instalar el plugin de la brújula:
cordova plugin add cordova-plugin-device-orientation
Crear una función que llame muestre los datos de brújula:
function onSuccessBrujula(heading) { alert('Brújula: ' + heading.magneticHeading); }; function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function getBrujula(){ navigator.compass.getCurrentHeading(onSuccessBrujula, onError); }
![Page 45: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/45.jpg)
Acelerómetro
Instalar el plugin del acelerómetro:
cordova plugin add cordova-plugin-device-motion
Crear dos funciones una que empiece a mirar el acelerómetro y otra que lo pare:
function onSuccessAccel(acceleration) { document.getElementById("accX").innerHTML=acceleration.x.toFixed(4); document.getElementById("accY").innerHTML=acceleration.y.toFixed(4); document.getElementById("accZ").innerHTML=acceleration.z.toFixed(4); }; function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } var watchID; function startAccelerometer(){ var options = { frequency: 300 }; watchID= navigator.accelerometer.watchAcceleration(onSuccessAccel, onError, options); } function stopAccelerometer(){ navigator.accelerometer.clearWatch(watchID); }
![Page 46: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/46.jpg)
Media - Capture
Instalar el plugin media-capture:
cordova plugin add cordova-plugin-media-capture
Crear una función que capture videos y muestre sus datos por pantalla:
function captureSuccess(mediaFiles) { console.log(mediaFiles) for (i = 0; i < mediaFiles.length; i ++) { alert(mediaFiles[i].fullPath); } }; function captureError(error) { console.log(error); alert('Error code: ' + error.code); }; function getVideo(){ navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:1}); }
Como insertar videos en nuestra app: <iframe width="90%" height="275" src="http://www.youtube.com/embed/ABbQWiGgw-c?autoplay=0" allowfullscreen></iframe>
![Page 47: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/47.jpg)
Contactos
Instalar el plugin de contatos:
cordova plugin add cordova-plugin-contacts
Crear una función que busque contactos en nuestra agenda: function onSuccess(contacts) { console.log(contacts); alert(contacts.length + ' contactos encontrados.'); document.getElementById("contactos").innerHTML=''; for (i=0;i<contacts.length;i++){ alert(contacts[i].displayName+" "+contacts[i].phoneNumbers[0].value); document.getElementById("contactos").innerHTML+=contacts[i].displayName+" "+contacts[i].phoneNumbers[0].value+"<br>"; } }; function findContact(){ var options = new ContactFindOptions(); options.filter = document.getElementById("buscar").value; options.multiple = true; options.desiredFields = [navigator.contacts.fieldType.id,navigator.contacts.fieldType.name,navigator.contacts.fieldType.phoneNumbers]; options.hasPhoneNumber = true; var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name]; navigator.contacts.find(fields, onSuccess, onError, options); }
![Page 48: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/48.jpg)
Dispositivo
Instalar el plugin del dispositivo :
cordova plugin add cordova-plugin-device
Crear que muestre la información de nuestro terminal:
function getInfo(){ document.getElementById("info").innerHTML=""; document.getElementById("info").innerHTML+="cordova: "+device.cordova+"<br>"; document.getElementById("info").innerHTML+="model: "+device.model+"<br>"; document.getElementById("info").innerHTML+="uuid: "+device.uuid+"<br>"; document.getElementById("info").innerHTML+="version: "+device.version+"<br>"; document.getElementById("info").innerHTML+="manufacturer: "+device.manufacturer+"<br>"; document.getElementById("info").innerHTML+="isVirtual: "+device.isVirtual+"<br>"; document.getElementById("info").innerHTML+="serial: "+device.serial+"<br>"; }
![Page 49: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/49.jpg)
Batería
Instalar el plugin de la batería:
cordova plugin add cordova-plugin-battery-status
Crear que muestre la información de la bateria:
function getBattery(){ window.addEventListener("batterystatus", onBatteryStatus, false); } function onBatteryStatus(info) { alert("Nivel: " + info.level + "% Enchufado: " + info.isPlugged); }
![Page 50: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/50.jpg)
Estado de la red
Instalar el plugin del estado de la red:
cordova plugin add cordova-plugin-network-information
Crear que muestre la información de nuestro terminal:
function checkConnection() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Desconocida'; states[Connection.ETHERNET] = 'Ethernet'; states[Connection.WIFI] = 'WiFi'; states[Connection.CELL_2G] = 'Conexión 2G'; states[Connection.CELL_3G] = 'Conexión 3G'; states[Connection.CELL_4G] = 'Conexión 4G'; states[Connection.CELL] = 'Conexión Movil'; states[Connection.NONE] = 'No hay conexion'; alert('Conexión: ' + states[networkState]); }
![Page 51: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/51.jpg)
Browser In App
Instalar el plugin InAppBrowser:
cordova plugin add cordova-plugin-inappbrowser
Crear varios botones que prueben este plugin:
<button type="button" onclick="cordova.InAppBrowser.open('http://www.google.com','_system', 'location=yes');">System InAppBrowser</button> <button type="button" onclick="cordova.InAppBrowser.open('http://www.google.com','_blank', 'location=yes');">Blank InAppBrowser</button> <button type="button" onclick="cordova.InAppBrowser.open('http://www.google.com','_self', 'location=yes');">Self InAppBrowser</button> <button type="button" onclick="window.open('http://www.google.com', '_system');">Window.Open</button> <button type="button" onclick="document.location='http://www.google.com';">Document.Location</button>
![Page 52: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/52.jpg)
Ficheros
Instalar el plugin de gestión de ficheros:
cordova plugin add cordova-plugin-file
Crear dos funciones una para escribir un fichero y otra para leerlo:
function leerFichero(path) { window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + path, gotFileReader, fail); } function escribirFichero(path, texto) { window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + path, gotFileWriter, fail); } function gotFileReader(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { console.log("Text is: "+this.result); document.getElementById("info").innerHTML = this.result; } reader.readAsText(file); }); } function gotFileWriter(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { console.log('Write completed.'); }; fileWriter.onerror = function(e) { console.log('Write failed: ' + e.toString()); }; var blob = new Blob(["hola que tal"], {type:'text/plain'}); fileWriter.write(blob); }, fail); } function fail(e) { console.log("FileSystem Error"); console.dir(e); }
![Page 53: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/53.jpg)
Plugins de terceros
• Hay una comunidad activa que genera plugins de Cordova para complementar las funcionalidades ofrecidas de forma oficial.
• Tú mismo puedes crearte tus propios plugins con código nativo.
![Page 54: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/54.jpg)
phonegap-plugin-push
![Page 55: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/55.jpg)
cordova-facebook-plugin
![Page 56: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/56.jpg)
Cuenta de desarrollador
99$/año 25$/vida
![Page 57: Pasos para crear una app móvil - Osalan...Pasos para crear una app móvil Proceso de creación de una app Análisis de requisitos Diseño funcional Diseño de interfaz Desarrollo](https://reader036.vdocuments.pub/reader036/viewer/2022070707/5ea334d05b5a4e33ad6aa335/html5/thumbnails/57.jpg)
Dudas y Preguntas