Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

PhoneGapp y AppInventor

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 132

PROGRAMACION DE TERMINALES MOVILES

Profesor: Edwin Martnez Hernndez edwin.mtz.hdez@gmail.com

Morelia, Michoacn, Mxico. 2013

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

4.- Creacin del proyecto en la plataforma Build de Adobe y compilacin

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

Camera provee la capacidad de utilizar la camara del dispositivo

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

// Wait for Cordova to connect with the device // document.addEventListener("deviceready",onDeviceReady,false);


// Cordova is ready to be used! // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; }

33

// Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data // console.log(imageData);

// Get image handle // var smallImage = document.getElementById('smallImage');


// Unhide image elements // smallImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // smallImage.src = "data:image/jpeg;base64," + 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');

// Unhide image elements // largeImage.style.display = 'block';


// Show the captured photo // The inline CSS rules are used to resize the image // largeImage.src = imageURI; }

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

Permissions Android app/res/xml/config.xml

<plugin name="Media" value="org.apache.cordova.AudioHandler" />


app/AndroidManifest.xml <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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">

// Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false);


// Cordova is ready // function onDeviceReady() { playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"); }

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);

// Play audio my_media.play();


// Update my_media position every second if (mediaTimer == null) { mediaTimer = setInterval(function() { // get my_media position my_media.getCurrentPosition( // success callback function(position) { if (position > -1) { setAudioPosition((position) + " sec"); } },

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

C:\Program Files (x86)\AppInventor\commands-for-Appinventor


58

59

http://www.tuappinvetorandroid.com/

60

http://www.tuappinvetorandroid.com/

61

62

63

64

65

66

67

68

Permiten modificar el flujo de ejecucin de las instrucciones del programa

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 and 3 > 5


Falso

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

Cmo funcionan las decisiones

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

var1 <--5 var2 <-- 7

var3 <-- true

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

Bloques de control en App Inventor (decisiones)


Si Exp_Log haz(ejecuta) Sino haz(ejecuta)
false
E.L.

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)

Bloques de control en App Inventor (bucle o iteracin while)

Mientras Exp_Log haz(ejecuta)

false

E.L.
true

Bloques de control en App Inventor (bucle o iteracin while)

Mientras i <= 10 haz(ejecuta)

Bloques de control en App Inventor (bucle o iteracin for)


Desde i = s hasta i = e incrementando i de s en s haz(ejecuta)
valor numrico de i en la primera iteracin
v,s,e,s

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

Bloques de control en App Inventor (bucle o iteracin for)


Desde i = 1 hasta i = 10 incrementando i de 1 en 1 haz(ejecuta)

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

Construir una cadena de texto - make text

Pasar a maysculas una cadena de texto - upcase

Insertar saltos de lnea en una cadena de texto - \n

Nmero de caracteres en una cadena de texto - length

Posicin de un caracter en una cadena de texto - starts at

Extraer una subcadena de una cadena de texto - segment

Extraer una lista de palabras de una cadena de texto - split

Es una lista

Eliminar los espacios en blanco en una cadena de texto - trim

Sin espacios en blanco, ni al principio, ni al final

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

Juan Mara Elisa

Mara

listas mixtas

En una lista distinto tipo lista

podemos

almacenar

datos

de

lista mixta

alumnos

calificaciones

Juan Mara Elisa

Juan 7 9 8 Mara 6 9 10 Elisa 9 9 9

listas anidadas Podemos almacenar listas dentro de listas.

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

listas en App Inventor lista lista mixta lista de listas

listas en App Inventor

Alumnos(5)

listas en App Inventor Calificaciones(3)

listas en App Inventor

Calificaciones(3,1)

Construir una lista - make a list

calificaciones

Juan 7 9 8

Mara 6 9 10

Elisa 9 9 9

Seleccionar un elemento de la lista - select list item

calificaciones

Juan 7 9 8

Mara 6 9 10

Elisa 9 9 9

Reemplazar un elemento de una lista - replace list

10
calificaciones

Juan 7 9 8

Mara 6 9 10

Elisa 10 9 99 99

Insertar un elemento en una lista - insert list item

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

Eliminar un elemento de una lista - remove list item

calificaciones calificaciones

Juan 7 9 8

Mara 6 9 10

Manuel10 7 9 6 9 9 Elisa

Elisa 10 9 9

Unir dos listas - append to list

Unir elementos al final de una lista - add items to list

Recorrer los elementos de una lista - for each

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.

Crear una tabla Fusion


Accede con tu cuenta de Google a Drive y en crear selecciona Tabla dinmica o conectar aplicaciones

Crear una tabla Fusion

Crear una tabla Fusion


El dilogo que se presenta a continuacin nos permite crear una tabla desde una hoja de clculo, archivos de texto delimitado (csv por ejemplo) o crear una tabla vaca

Definir la estructura de la tabla Fusion


En el men edicin, seleccionamos la opcin cambiar columnas. Podremos modificar el nombre, el tipo de dato y el formato de las columnas

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

Visualizar los datos de la tabla Fusion Filas

Visualizar los datos de la tabla Fusion Fichas

Visualizar los datos de la tabla Fusion Mapa de localizaciones

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

Obtencin de la 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

Uso de la API Key en la App

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

Resultado de la consulta 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

Consola de las APIs de Google

La tabla busqueda_detalle

La tabla empleada tiene la estructura siguiente

Una frase SQL simple

SELECT numero, etapa, lugar, location FROM 1yLaHuW3flrWkrFN-PTNmcZfOCKVAxPXe4flvZA WHERE busqueda = 1

Fusion Tables y manejo de listas

El mtodo SendQuery devuelve los

Fusion Tables y manejo de listas

list from csv table transforma el resultado devuelto por la consulta SQL en una lista de listas.

Fusion Tables y manejo de listas

Una vez tenemos los datos en una lista podemos acceder directamente a los datos de una

Fusion Tables y manejo de listas

O a los de una columna

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> }

También podría gustarte