10. phonegapp y appinventor

Profesor: Edwin Martnez Hernndez

[email protected]

PROGRAMACION DE TERMINALES MOVILES

Morelia, Michoacn, Mxico. 2013

16

Si ya tengo Creado un

Proyecto para Android, lo

puedo Exportar para

diferentes Plataformas??

17

https://build.phonegap.com/

25

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

27

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.

28

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.

29

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:

30

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:

31

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.

32

Camera provee la capacidad de utilizar la camara del dispositivo

Metodos

camera.getPicture

camera.cleanup

Permisos:

app/res/xml/config.xml

app/AndroidManifest

33

Capture Photo

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;

}

34

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

}

35

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

}

36

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

}


//

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

}

37


//

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

}

38

Capture Photo

Capture Editable Photo

From Photo

Library

From Photo

Album

39

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.

40

Permissions

Android

app/res/xml/config.xml

app/AndroidManifest.xml

41

Media Example

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

}

42

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

}

},

43

// error callback

function(e) {

console.log("Error getting pos=" + e);

setAudioPosition("Error: " + e);

}

);

}, 1000);

}

}

// Pause audio

//

function pauseAudio() {

if (my_media) {

my_media.pause();

}

}

44

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

}

45

// Set audio position

//

function setAudioPosition(position) {

document.getElementById('audio_position').innerHTML = position;

}

Play Audio

Pause Playing Audio

Stop Playing Audio

47

http://appinventor.mit.edu/explore/content/setup-mit-app-inventor.html

48

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.

49

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.

51

http://appinventor.mit.edu/

58

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

60

http://www.tuappinvetorandroid.com/

61

http://www.tuappinvetorandroid.com/

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

Verdadero

3 > 5

Falso

3 < 5 and

3 > 5

Falso

3 < 5 or

3 > 5

Verdadero

and, or y not

A B A and B

Verdadero Verdadero Verdadero

Verdadero Falso Falso

Falso Verdadero Falso

Falso Falso Falso

A B A or B

Verdadero Verdadero Verdadero

Verdadero Falso Verdadero

Falso Verdadero Verdadero

Falso Falso Falso

A not A

Verdadero Falso

Falso Verdadero

Cmo funcionan las decisiones

5 < 7

5 < 7 true

5 >= 7

5 >= 7

false

Dependiendo del

resultado obtenido

al evaluar la

expresin lgica,

el programa toma

un camino u otro

true

false

false

Ejemplos

var1

Bloques de control en App Inventor (decisiones)

false false true true E.L.

E.L.

Si Exp_Log

haz(ejecuta)

Si Exp_Log

haz(ejecuta)

Sino

haz(ejecuta)

Bloques de control en App Inventor (decisiones)

Si var1

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

true

false E.L.

Mientras Exp_Log

haz(ejecuta)

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

Mientras i

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

v,s,e,s

valor numrico de i en la

primera iteracin

Incrementa el valor

de i en cada

iteracin, en este

caso de uno en uno.

i

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.

Mara

Elisa

Juan

alumno1

alumno2

alumno3

Juan Mara Elisa

alumnos

lista alumnos(2)

Mara

listas mixtas

En una lista podemos almacenar datos de

distinto tipo

Juan Mara Elisa

alumnos

lista

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

calificaciones

lista mixta

listas anidadas

Podemos almacenar listas dentro de listas.

lista de listas

calificaciones

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

calificaciones(3)

Elisa 9 9 9

calificaciones(3,1)

Elisa

listas en App Inventor

lista lista mixta lista de listas


Alumnos(5)


Calificaciones(3)


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

calificaciones

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

10

Elisa 10 9 9

Insertar un elemento en una lista - insert list item

calificaciones

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

calificaciones

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

Manuel 7 6 9

Eliminar un elemento de una lista - remove list item

calificaciones

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

calificaciones


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


\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

A todo jazz

http://www.rtve.es/alacarta/audios/a-todo-jazz/

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.

es

Tue, 15 Jan 2013 18:52:28 GMT

.............

Extraer segmento entre

etiquetas


etiquetas


etiquetas

Tue, 15 Jan 2013 18:52:28 GMT

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.

A todo jazz Extraer segmento

Entrada

Salida

Entrada y salida

Un procedimiento puede tener uno o varios

parmetros de entrada y puede devolver (o no)

un valor de salida documento xml

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

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.

Entrada Procedimien

to

Salida

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


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/sql-

reference

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

Consola de las

APIs de Google

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

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

datos en formato

csv


list from csv table

transforma el resultado

devuelto por la consulta

SQL en una lista de

listas.

Cada elemento de la lista

se corresponde con una

fila de la tabla y a su

vez es una lista con los

valores de cada columna

El primer elemento es la

lista con la cabecera de

las columnas


Una vez tenemos

los datos en una

lista podemos

acceder

directamente a

los datos de una

fila


O a los de una

columna

Un poco de SQL

SELECT {, column_spec>}*

FROM

{ WHERE |

{ AND }*

}

{ GROUP BY {, }* }

{ ORDER BY { ASC | DESC } |

}

{ OFFSET }

{ LIMIT }

10. phonegapp y appinventor

Documents