PhoneGapp y AppInventor
PhoneGapp y AppInventor
PhoneGapp y AppInventor
10
11
12
13
14
15
Si ya tengo Creado un Proyecto para Android, lo puedo Exportar para diferentes Plataformas??
16
https://build.phonegap.com/
17
18
19
20
21
22
23
24
2.- Creacin del proyecto local en Dreamweaver Abrimos el programa de Adobe Dreamweaver, vamos al inspector de archivos del Deamweaver y creamos un nuevo Sitio. El sitio creado no tiene que estar sincronizado con un servidor externo, con tener un sitio local es suficiente. Dentro de la carpeta de nuestro sitio local vamos a copiar un proyecto ya creado que tiene PhoneGap en su cuenta Github. Mediante el siguiente enlace podemos acceder a la raz de la misma: https://github.com/phonegap Dentro del mismo vemos un repositorio llamado phonegap-start, accedemos al mismo y nos descargamos la carpeta www que contiene. En la siguiente imagen pueden ver donde hay que pulsar para descargarnos la carpeta en formato comprimido ZIP
25
26
Una vez descargado y descomprimido en nuestra computadora, tendremos que copiar el contenido de la carpeta www dentro de la carpeta local de nuestro sitio de Dreamweaver en nuestra computadora. El proyecto descargado contiene los archivos de configuracin de un proyecto de PhoneGap, los Screen Splash y un Index entre otros elementos. La diferencia ms notable frente al rbol de archivos de un proyecto creado en XCode o en Eclipse, es que no tenemos que aadir el archivo phonegap.js en su ltima versin, ya que la plataforma Build de Adobe nos lo inserta de forma automtica.
27
En la pestaa PhoneGap Build Settings en el caso de querer crear una app para Android o bien para webOS, tendremos que tener seleccionada la direccin donde tenemos instaladas dichas SDKs dentro de nuestro ordenador. En la pestaa PhoneGap Build Service debemos introducir el email y la contrasea que hemos utilizado en la plataforma onlineAdobe PhoneGap Build. Por ltimo presionamos el botn de Login.
28
Una vez logueados la ventana PhoneGap Build Service cambiar de aspecto y ser parecida a la siguiente:
29
Mediante esta ventana Dreamweaver nos da la opcin de crear un nuevo proyecto, pulsamos continuar Dreamweaver se encargar de crear el proyecto en la plataforma online Build de Adobe. Una vez creado la pantalla cambiar y aparecer la siguiente:
30
Esta pantalla nos muestra en los diferentes sistemas operativos en los que se compilar nuestro proyecto. Pulsaremos el botn Rebuild Application, de forma automtica se subirn nuestros archivos locales a la plataforma de Adobe donde se compilar el proyecto. Una vez compilado nos irn apareciendo uno tras otro en los sistemas operativos en los que ha sido posible la compilacin del mismo. Nosotros vamos a trabajar con el sistema operativo Android, con lo que nos permitir insertar el proyecto de forma directa en nuestro dispositivo mvil pulsando la flecha que apunta hacia la derecha o descargrnoslo mediante un cdigo QR o pulsando en la flecha que apunta hacia abajo.
31
Metodos
camera.getPicture camera.cleanup Permisos:
app/res/xml/config.xml
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
app/AndroidManifest
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
32
<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value
33
// Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data // console.log(imageData);
34
// Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // console.log(imageURI);
// Get image handle // var largeImage = document.getElementById('largeImage');
35
// A button will call this function // function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function // function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }
36
// A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } </script> </head>
37
<body> <button onclick="capturePhoto();">Capture Photo</button> <br> <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> </body> </html>
38
Parameters src: A URI containing the audio content. (DOMString) mediaSuccess: (Optional) The callback that is invoked after a Media object has completed the current play/record or stop action. (Function) mediaError: (Optional) The callback that is invoked if there was an error. (Function) mediaStatus: (Optional) The callback that is invoked to indicate status changes. (Function) Constants The following constants are reported as the only parameter to the mediaStatus callback function. Media.MEDIA_NONE = 0; Media.MEDIA_STARTING = 1; Media.MEDIA_RUNNING = 2; Media.MEDIA_PAUSED = 3; Media.MEDIA_STOPPED = 4; Methods media.getCurrentPosition: Returns the current position within an audio file. media.getDuration: Returns the duration of an audio file. media.play: Start or resume playing audio file. media.pause: Pause playing audio file. media.release: Releases the underlying OS'es audio resources. media.seekTo: Moves the position within the audio file. media.startRecord: Start recording audio file. media.stopRecord: Stop recording audio file. media.stop: Stop playing audio file. 39
40
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Media Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script> <script type="text/javascript" charset="utf-8">
41
// Audio player // var my_media = null; var mediaTimer = null; // Play audio // function playAudio(src) { // Create Media object from src my_media = new Media(src, onSuccess, onError);
42
// error callback function(e) { console.log("Error getting pos=" + e); setAudioPosition("Error: " + e); } ); }, 1000); } } // Pause audio // function pauseAudio() { if (my_media) { my_media.pause(); } }
43
// Stop audio // function stopAudio() { if (my_media) { my_media.stop(); } clearInterval(mediaTimer); mediaTimer = null; } // onSuccess Callback // function onSuccess() { console.log("playAudio():Audio Success"); } // onError Callback // function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); }
44
// Set audio position // function setAudioPosition(position) { document.getElementById('audio_position').innerHTML = position; } </script> </head> <body> <a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s__rockGuitar.mp3');">Play Audio</a> <a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> <a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> <p id="audio_position"></p> </body> </html>
45
46
http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html
47
App inventor es una framework creado inicialmente por el MIT (Instituto tecnolgico deMassachusetts) y fu cogido por google para que cualquier persona con inters pueda crearse su propia aplicacin movil, ya sea para su empresa, para su casa o por otros interses.
No esta creada paga ganar dinero con ella sino para hacer la programacin mas accesible a todo el mundo aunque se pueden crear grandes aplicaciones.
48
Para crear una aplicacin con app inventor hay que realizar tres pasos: 1. El diseo de la aplicacin , en la que se seleccionan los componentes para su aplicacin.
2. El editor de bloques , donde irs escogiendo los bloques que te sean necesarios segun la aplicacin que tengas pensada de hacer.
3. Tu aplicacin aparecer paso a paso de en la pantalla del telfono a medida que aada piezas a la misma, para que puedas probar tu trabajo. Cuando haya terminado, puedes empaquetar la aplicacin y producir una aplicacin independiente para instalar.
49
50
http://appinventor.mit.edu/
51
52
53
54
55
56
57
59
http://www.tuappinvetorandroid.com/
60
http://www.tuappinvetorandroid.com/
61
62
63
64
65
66
67
68
Tomar decisiones
Tomamos decisiones evaluando expresiones lgicas. Expresin lgica es aquella que tienen un resultado de dos posibles: o Verdadero, o Falso. Para construir expresiones lgicas empleamos. operadores de comparacin: < <= > >= = not= operadores lgicos: not and or
3 < 5
3 > 5
3 < 5 or 3 > 5
Verdadero
Verdadero
Falso
and, or y not
A
Verdadero
B
Verdadero
A and B
Verdadero
A
Verdadero Verdadero
B
Verdadero Falso
A or B
Verdadero Verdadero
Verdadero
Falso
Falso
Verdadero
Falso
Falso
Falso
Falso
Verdadero
Falso
Verdadero
Falso
Falso
Falso
Falso
A
Verdadero
Falso
not A
Falso
Verdadero
5 < 7 5 >= 7
true
false
false
5 < 7 5 >= 7
true
Dependiendo del resultado obtenido al evaluar la expresin lgica, el programa toma un camino u otro
Ejemplos
false true
false false
true
false false true true Si ponemos como expresin lgica el nombre de una variable la estructura de control evaluar su contenido
true
Si Exp_Log haz(ejecuta)
false
E.L.
true
true
Bloques de control en App Inventor (decisiones) Si var1 <= var2 haz(ejecuta) Sino haz(ejecuta)
false
E.L.
true
valor numrico de i en la ltima iteracin Incrementa el valor de i en cada iteracin, en este caso de uno en uno. i <-- i +1
Cadenas de texto
Una cadena de texto es una sucesin de caracteres (letras, nmeros u otros signos o smbolos)
App Inventor proporciona la pieza text para expresar una cadena de caracteres
Es una lista
Qu son las listas? Es una estructura de datos en la que cada elemento puede ser referenciado por la posicin que ocupa en la misma.
alumno1
lista
alumno3
alumnos(2)
Juan
alumno2
Elisa
Mara
alumnos
Mara
listas mixtas
podemos
almacenar
datos
de
lista mixta
alumnos
calificaciones
lista de listas
calificaciones(3)
calificaciones
Juan 7 9 8
Mara 6 9 10
Elisa 9 9 9
Elisa 9 9 9
calificaciones(3,1)
Elisa
Alumnos(5)
Calificaciones(3,1)
calificaciones
Juan 7 9 8
Mara 6 9 10
Elisa 9 9 9
calificaciones
Juan 7 9 8
Mara 6 9 10
Elisa 9 9 9
10
calificaciones
Juan 7 9 8
Mara 6 9 10
Elisa 10 9 99 99
Manuel 7 6 9
calificaciones calificaciones
Juan 7 9 8
Mara 6 9 10
Manuel10 7 9 6 9 9 Elisa
Elisa 10 9 9
calificaciones calificaciones
Juan 7 9 8
Mara 6 9 10
Manuel10 7 9 6 9 9 Elisa
Elisa 10 9 9
calificaciones
Juan 7 9 8
Mara 6 9 10
Manuel 7 6 9
Elisa 10 9 9
\n es un salto de lnea, as conseguimos que cada elemento de la lista calificaciones aparezca en una lnea
csv significa valores separados por comas
Qu son los procedimientos? Son una forma de empaquetar un conjunto de piezas en una sola, de modo que puedan ser reutilizados con distintas entradas.
Piezas que se repiten Cuando en una App se repite un conjunto de piezas podemos agruparlas bajo un nombre de forma que puedan ser invocadas por el mismo
Funciones o tareas Cuando se repite el mismo conjunto de piezas es porque realizan una tarea o funcin especfica
<?xml version="1.0" encoding="UTF-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel> <title>A todo jazz</title> <link>http://www.rtve.es/alacarta/audios/a-todo-jazz/</link> <description>El jazz en todas sus vertientes clsicas, con especial atencin al be hop, el cool, el sonido west coast o todos los maestros esenciales de este estilo definitorio del siglo XX. Miles Davis, Dexter Gordon, Duke Ellington, Max Roach, Dizzy Gillespie, Don Cherry o Art Tatum, comparten cartel con solistas y grupos y orquestas de nueva generacin.</description> <language>es</language> <pubDate>Tue, 15 Jan 2013 18:52:28 GMT</pubDate> <itunes:owner> .............
Entrada
Extraer Extraer segmento segmento entre entre Extraer Extraer segmento segmento entre etiquetas etiquetas etiquetas Salida <description> <title> </title> </description> <pubDate> </pubDate>
El jazz en todas sus vertientes clsicas, con especial atencin al be hop, el cool, el sonido west coast o todos los maestros esenciales de este estilo GMT Tue, A15 todo Janjazz 2013 18:52:28 definitorio del siglo XX. Miles Davis, Dexter Gordon, Duke Ellington, Max Roach, Dizzy Gillespie, Don Cherry o Art Tatum, comparten cartel con solistas y grupos y orquestas de nueva generacin.
Entrada y salida
Un procedimiento puede tener uno o varios parmetros de entrada y puede devolver (o no) un valor de salida
documento xml
<title> </title>
A todo Jazz
Entrada y salida
Un procedimiento puede tener uno o varios parmetros de entrada y puede devolver (o no) un valor de salida
documento xml <description> </description>
Salida
El jazz en todas sus vertientes clsicas, con especial atencin al be hop, el cool, el sonido west coast o todos los maestros esenciales de este estilo definitorio del siglo XX. Miles Davis, Dexter Gordon, Duke Ellington, Max Roach, Dizzy Gillespie, Don Cherry o Art Tatum, comparten cartel con solistas y grupos y orquestas de nueva generacin.
Procedimien to
Entrada
Qu es Fusion Tables? Google Fusion Tables es una aplicacin experimental que permite crear, compartir, consultar, actualizar y visualizar tablas de datos. El resultado de las consultas puede ser CSV o JSON.
Para aadir una columna, en el men edicin, seleccionamos la opcin aadir columna
Insertar, modificar y eliminar datos en la tabla Fusion En el men edicin, disponemos de las opciones necesarias para realizar este tipo de operaciones
El componente FusiontablesControl
Se trata de un componente no visible que permite la comunicacin entre nuestra App y el servicio Google Fusion Tables. Este componente usa la API V1.0. Para desarrollar una App que use Fusion Tables es necesaria una API Key
Accede a la consola de las APIs de Google y selecciona la opcin servicios Pon el servicio Fusion Tables a ON Selecciona la opcin API Access. Tu API Key se encuentra en la seccin Simple API Access
Podemos establecer la propiedad ApiKey del componente FusiontablesControl en el panel de propiedades del Designer
Otra posibilidad es hacerlo en el editor de bloques empleando la pieza set FusiontablesControl.ApiKey to insertndole una pieza texto con la API Key
Consulta (query)
Podemos establecer la propiedad Query del componente FusiontablesControl en el panel de propiedades del Designer
Otra posibilidad es hacerlo en el editor de bloques empleando la pieza set FusiontablesControl.Query to insertndole una pieza texto con la con la consulta
Consultas SQL
La propiedad FusiontablesControl.Query es una cadena de texto que contiene la frase SQL que se enviar al servicio Fusion Tables mediante el mtodo SendQuery
El documento que describe cmo utilizar las consultas SQL del API Fusion Tables para manipular filas de datos y ejecutar consultas en una tabla lo encontrars en esta direccin:
https://developers.google.com/fusiontables/docs/v1/sqlreference
Consultas SQL
Si la consulta tiene xito el servicio nos retornar el resultado en formato CSV. Para manejar el resultado empleamos el evento GotResult
Lista de comprobacin
1.- Obtencin de la API Key 2.- Asignar la API Key a la propiedad correspondiente del control 3.- Preparar mediante una pieza de texto la frase SQL 4.- Asignar la frase a la propiedad correspondiente del control 5.- Enviar la frase al servicio invocando al mtodo SendQuery 6.- Tratar el resultado devuelto por el servicio (CSV) utilizando el evento GotResult del control
La tabla busqueda_detalle
list from csv table transforma el resultado devuelto por la consulta SQL en una lista de listas.
Una vez tenemos los datos en una lista podemos acceder directamente a los datos de una
Un poco de SQL
SELECT <column_spec> {, column_spec>}* FROM <table_id> { WHERE <filter_condition> | <spatial_condition> { AND <filter_condition> }* } { GROUP BY <column_name> {, <column_name>}* } { ORDER BY <column_spec> { ASC | DESC } | <spatial_relationship> } { OFFSET <number> } { LIMIT <number> }