Tutorial apptoide

57
Programación en Programación en Android: Android: Apptoide Apptoide Enol Matilla Blanco Enol Matilla Blanco 2ºBCT 2ºBCT

description

Presentación turorial sobre el uso de apptoide para crear aplicaciones android.

Transcript of Tutorial apptoide

Page 1: Tutorial apptoide

Programación en Programación en Android:Android:ApptoideApptoide

Enol Matilla Blanco Enol Matilla Blanco 2ºBCT2ºBCT

Page 2: Tutorial apptoide

ÍndiceÍndice

AndroidAndroid AppInventorAppInventor

– GlosarioGlosario– Crear nuevo proyectoCrear nuevo proyecto– Barras de herramientasBarras de herramientas– MapeadoMapeado (editor de bloques) (editor de bloques)– Ejemplos grupos simplesEjemplos grupos simples– ArrangementsArrangements– Ejemplos grupos complejosEjemplos grupos complejos– Emular a un dispositivoEmular a un dispositivo– EmpaquetarEmpaquetar– DistribuciónDistribución

La app usada para La app usada para los ejemplo podrá los ejemplo podrá ser descargada al ser descargada al final de la final de la presentación, o presentación, o desde este enlace.desde este enlace.

Page 3: Tutorial apptoide

AndroidAndroid

Es un sistema operativo libre y gratuito.Es un sistema operativo libre y gratuito. Se programa sobre un java modificado.Se programa sobre un java modificado.

Page 4: Tutorial apptoide

AndroidAndroid

Algunos programas para programar son:Algunos programas para programar son: Java Eclipse, con el SDK de android.Java Eclipse, con el SDK de android.

Page 5: Tutorial apptoide

AndroidAndroid

Programas de interfaz gráfica, como Programas de interfaz gráfica, como apptoide, Basic 4Android, etc.apptoide, Basic 4Android, etc.

Page 6: Tutorial apptoide

AppinventorAppinventor

Dentro de este ultimo modo de Dentro de este ultimo modo de programar, encontramos appinventor, programar, encontramos appinventor, con el mismo método de hacer la con el mismo método de hacer la estructura externa, pero una estructura externa, pero una revolucionaria forma de mapear el revolucionaria forma de mapear el interior, con “piezas de puzzle”.interior, con “piezas de puzzle”.

Page 7: Tutorial apptoide

GlosarioGlosario

Antes que nada, un pequeño glosario Antes que nada, un pequeño glosario de terminos:de terminos:

Canvas: Canvas: es un elemento HTML incorporado es un elemento HTML incorporado en HTML5 que permite la generación de gráficos en HTML5 que permite la generación de gráficos dinámicamente por medio del dinámicamente por medio del scriptingscripting. Permite . Permite generar gráficos estáticos y animaciones.generar gráficos estáticos y animaciones.

Page 8: Tutorial apptoide

GlosarioGlosario

Scrip: Scrip: guión, archivo de órdenes o archivo de procesamiento por lotes

Sprite: Sprite: Se trata de un tipo de mapa de bits dibujados Se trata de un tipo de mapa de bits dibujados en la pantalla del ordenador por hardware gráfico en la pantalla del ordenador por hardware gráfico especializado sin cálculos adicionales de la CPU.especializado sin cálculos adicionales de la CPU.

Page 9: Tutorial apptoide

AppinventorAppinventor Lo primero, entramos en Lo primero, entramos en appinventorappinventor..

Y le damosY le damos a inventar.a inventar.

Page 10: Tutorial apptoide

AppinventorAppinventor Nos pedirá un correo o cuenta, en mi caso, Nos pedirá un correo o cuenta, en mi caso,

una cuenta de Gmail. Le damos a permitir.una cuenta de Gmail. Le damos a permitir.

Page 11: Tutorial apptoide

AppinventorAppinventor Tras hacerlo y confirmar el correo que nos Tras hacerlo y confirmar el correo que nos

manda, podremos entrar a la portada.manda, podremos entrar a la portada.

Para crear una app damos a new, para Para crear una app damos a new, para crear un proyecto nuevo. Yo tengo 3.crear un proyecto nuevo. Yo tengo 3.

Page 12: Tutorial apptoide

Crear nuevo proyectoCrear nuevo proyecto

Al pulsar en new, simplemente Al pulsar en new, simplemente escogemos el nombre del proyecto, escogemos el nombre del proyecto, que posteriormente será el de la app, que posteriormente será el de la app, cuando la empaquetemos.cuando la empaquetemos.

Page 13: Tutorial apptoide

Página generalPágina general Nos saldrá algo así, pero esto en blanco.Nos saldrá algo así, pero esto en blanco.

1.Para salir.1.Para salir.2.Volver a proyectos.2.Volver a proyectos.3.Ver ejemplos.3.Ver ejemplos.

Page 14: Tutorial apptoide

AppinventorAppinventor

Primero veremos toda la barra de Primero veremos toda la barra de herramientas, o “paleta”, y herramientas, o “paleta”, y posteriormente el resto de barras y el posteriormente el resto de barras y el editor de bloques.editor de bloques.

Para colocar un elemento de la “paleta” Para colocar un elemento de la “paleta” en la aplicación, arrastrarlo sobre la en la aplicación, arrastrarlo sobre la “pantalla emuladora”.“pantalla emuladora”.

Page 15: Tutorial apptoide

PaletaPaleta Coloca un botón interactivoColoca un botón interactivo

Coloca un espacio editableColoca un espacio editable

Coloca una casilla marcableColoca una casilla marcable

Coloca un reloj, cronometro, no visibleColoca un reloj, cronometro, no visible

Coloca un hueco, donde subir una imagenColoca un hueco, donde subir una imagen

Coloca un rectángulo de dialogoColoca un rectángulo de dialogo Coloca una listaColoca una lista

Coloca una casilla de contraseñaColoca una casilla de contraseña

Coloca un rectángulo de dialogo editableColoca un rectángulo de dialogo editable

Objeto no visible que guarda datos y los envía a través de Objeto no visible que guarda datos y los envía a través de internet a tu cuenta.internet a tu cuenta.

Page 16: Tutorial apptoide

PaletaPaleta Elemento no visible, unible a botón para Elemento no visible, unible a botón para

grabar video.grabar video. Elemento no visible, unible a botón para Elemento no visible, unible a botón para

sacar fotos.sacar fotos. Botón selector de imágenes guardadas en Botón selector de imágenes guardadas en

el dispositivo. Unible a mas botones para el dispositivo. Unible a mas botones para seleccionar como fondo de escritorio, etc.seleccionar como fondo de escritorio, etc.

Elemento no visible, al que se le adjudica Elemento no visible, al que se le adjudica una canción, imagen, y se vincula a un una canción, imagen, y se vincula a un botón, imagen…botón, imagen…

Elemento no visible, adjudicado a una Elemento no visible, adjudicado a una canción, reproducible con un botón.canción, reproducible con un botón.

Elemento visible, adjudicado a un video, Elemento visible, adjudicado a un video, reproducible desde el mismo elemento.reproducible desde el mismo elemento.

Page 17: Tutorial apptoide

PaletaPaleta

Sprite circular que se Sprite circular que se puede integrar en un puede integrar en un canvas.canvas.

Sprite que se puede Sprite que se puede integrar en un canvas, integrar en un canvas, con la forma de la con la forma de la imagen subida imagen subida correspondiente.correspondiente.

Page 18: Tutorial apptoide

PaletaPaleta Botón que abre una lista de contactos, Botón que abre una lista de contactos,

editables.editables.

Cuadro de texto para E-mailsCuadro de texto para E-mails

Elemento no visible vinculable a un botón, Elemento no visible vinculable a un botón, que llama a quien este especificado en el que llama a quien este especificado en el valor del elementovalor del elemento

Botón que abre una lista de contactos Botón que abre una lista de contactos telefónicos.telefónicos.

Cuadro de texto para enviar un mensaje, Cuadro de texto para enviar un mensaje, poner los datos de un contacto, etc.poner los datos de un contacto, etc.

Elemento no visible vinculado a una cuenta Elemento no visible vinculado a una cuenta de Twitter. Cuando el usuario acepta, se de Twitter. Cuando el usuario acepta, se puede hacer lo mismo que desde su puede hacer lo mismo que desde su aplicación.aplicación.

Page 19: Tutorial apptoide

PaletaPaleta

Integra a la app un Integra a la app un acelerómetro.acelerómetro.

Integra a la app un sensor Integra a la app un sensor geolocalizador.geolocalizador.

Integra a la app un sensor de Integra a la app un sensor de orientación, para girar pantalla, orientación, para girar pantalla, etc.etc.

Todos los sensores son Todos los sensores son elementos no visibles.elementos no visibles.

Page 20: Tutorial apptoide

PaletaPaleta

Los arrangement son Los arrangement son cuadrados o rectángulos cuadrados o rectángulos donde organizar botones y donde organizar botones y demás, puedes colocarlos:demás, puedes colocarlos:

Horizontales.Horizontales.

Formando una tabla con el Formando una tabla con el numero de columnas y filas numero de columnas y filas que se desee.que se desee.

Verticales.Verticales.

Page 21: Tutorial apptoide

PaletaPaleta

Son todo elementos no Son todo elementos no visibles configurables para visibles configurables para que un robot LEGO pueda que un robot LEGO pueda ser controlado desde la ser controlado desde la aplicación, desde aplicación, desde sensores, a comandos sensores, a comandos basicos y mas complejos.basicos y mas complejos.

Page 22: Tutorial apptoide

PaletaPaleta Objeto no visible configurable para ejecutar otra Objeto no visible configurable para ejecutar otra

app mediante comandos, vinculando a un botón.app mediante comandos, vinculando a un botón.

Escáner de códigos QR o de barras mediante la Escáner de códigos QR o de barras mediante la cámara del dispositivo.cámara del dispositivo.

Cliente y servidor de bluetooth, respectivamente.Cliente y servidor de bluetooth, respectivamente.

Objeto no visible, que aparece cuando se cumple X Objeto no visible, que aparece cuando se cumple X condición, en forma de texto (notificación).condición, en forma de texto (notificación).

Conversor de voz a texto.Conversor de voz a texto. Conversor de texto a voz.Conversor de texto a voz.

Conexión con base de datos en la web.Conexión con base de datos en la web.

Proporciona funciones HTTP.Proporciona funciones HTTP.

Page 23: Tutorial apptoide

PaletaPaleta

Objeto no visible que se comunica Objeto no visible que se comunica con Google fusion tables.con Google fusion tables.

Permite a la app comunicarse con Permite a la app comunicarse con el cliente de un juego online.el cliente de un juego online.

Grabadora de audio mediante el Grabadora de audio mediante el micrófono del dispositivo.micrófono del dispositivo.

Permite votar y comunicar el Permite votar y comunicar el resultado a una web.resultado a una web.

Permite ver una pagina web Permite ver una pagina web completamente.completamente.

Page 24: Tutorial apptoide

Barra SuperiorBarra Superior

Esta es la barra superior. Desde ella se Esta es la barra superior. Desde ella se puede, en orden:puede, en orden:

Salvar (guardar) el proyecto.Salvar (guardar) el proyecto. Salvar el proyecto con nuevo nombre, o Salvar el proyecto con nuevo nombre, o

sobrescribiendo otro.sobrescribiendo otro. Crear un punto de salvado, para volver atrás.Crear un punto de salvado, para volver atrás. Añadir (1º) o remover (2º) una pantalla.Añadir (1º) o remover (2º) una pantalla. Abrir el editor de bloques (mas adelante se Abrir el editor de bloques (mas adelante se

verá para que)verá para que) Empaquetar la aplicación en un archivo .apkEmpaquetar la aplicación en un archivo .apk

Page 25: Tutorial apptoide

ViewView

Esto es lo que se Esto es lo que se vería en el movil vería en el movil ,tablet, etc.,tablet, etc.

Arriba vemos las Arriba vemos las pantallas creadas, y pantallas creadas, y editables. editables.

Page 26: Tutorial apptoide

Elementos no visiblesElementos no visibles

Esto está colocado debajo del visor (lo Esto está colocado debajo del visor (lo anterior) y nos muestra los elementos anterior) y nos muestra los elementos no visibles de la pantalla que se esta no visibles de la pantalla que se esta editando, en mi caso, 6 reproductores editando, en mi caso, 6 reproductores (uno por canción).(uno por canción).

Page 27: Tutorial apptoide

ElementosElementos

Esto esta a la derecha de Esto esta a la derecha de visor, y nos muestra visor, y nos muestra todos los botones, todos los botones, imágenes, y elementos imágenes, y elementos de la pantalla actual.de la pantalla actual.

Se pueden borrar y Se pueden borrar y renombrar lo elementos.renombrar lo elementos.

Al pulsar sobre uno, nos Al pulsar sobre uno, nos permitirá editar aspectos permitirá editar aspectos básicos, a la derecha.básicos, a la derecha.

Page 28: Tutorial apptoide

Media y propiedadesMedia y propiedades

Colocación.Colocación. Fondo.Fondo. Imagen de fondo.Imagen de fondo. Animación de cierreAnimación de cierre Icono de la app (estamos en la Icono de la app (estamos en la

edición de la pantalla principal)edición de la pantalla principal) Animación de arranqueAnimación de arranque Como orientar la pantallaComo orientar la pantalla Si es scrollableSi es scrollable Nombre de la paginaNombre de la pagina Versión del códigoVersión del código Versión de la appVersión de la app

Aquí se suben todas las imágenes y canciones que usara la Aquí se suben todas las imágenes y canciones que usara la app.app.

Aquí se editan los aspectos básicos de cada elemento:Aquí se editan los aspectos básicos de cada elemento:

Page 29: Tutorial apptoide

Editor de bloquesEditor de bloques

Una vez acabado el diseño general de Una vez acabado el diseño general de la app, los botones, imagen de fondo, la app, los botones, imagen de fondo, etc, hay que “mapear” la app, etc, hay que “mapear” la app, organizarla internamente.organizarla internamente.

Pulsamos en “open block editor”, y Pulsamos en “open block editor”, y nos descargara este archivo:nos descargara este archivo:

Page 30: Tutorial apptoide

Editor de bloquesEditor de bloques

Lo ejecutamos y empezara a descargar.Lo ejecutamos y empezara a descargar.

Page 31: Tutorial apptoide

Editor de bloquesEditor de bloques

Cuando acabe, ejecutamos.Cuando acabe, ejecutamos.

Si no queremos q nos molesten cada vez que ejecutamos, Si no queremos q nos molesten cada vez que ejecutamos, marcar.marcar.

Page 32: Tutorial apptoide

Editor de bloquesEditor de bloques

Si salen mensajes aceptar todos, y si Si salen mensajes aceptar todos, y si se traba, cerrar y ejecutar de nuevo, se traba, cerrar y ejecutar de nuevo, entrará directamente.entrará directamente.

Page 33: Tutorial apptoide

Editor de bloquesEditor de bloques

Al terminar, aparecerá esta ventana.Al terminar, aparecerá esta ventana.

Page 34: Tutorial apptoide

Editor de bloquesEditor de bloques

Esta es la barra superior, y de izquiera a derecha:Esta es la barra superior, y de izquiera a derecha:

Nombre de la app (proyecto)Nombre de la app (proyecto) Guardar los cambios realizadosGuardar los cambios realizados Volver atrás (por si te has equivocado, o borraste lo q Volver atrás (por si te has equivocado, o borraste lo q

no era)no era) Volver adelanteVolver adelante Nueva emulación (explicación más adelante)Nueva emulación (explicación más adelante) Conectar con dispositivoConectar con dispositivo Estado del dispositivo conectadoEstado del dispositivo conectado Zoom del minimapaZoom del minimapa

Page 35: Tutorial apptoide

Editor de bloquesEditor de bloques

En esta nueva ventana que se nos En esta nueva ventana que se nos abrió, editaremos todo el interior de la abrió, editaremos todo el interior de la app, lo que hacen los botones, app, lo que hacen los botones, animaciones, etc, mediante “piezas de animaciones, etc, mediante “piezas de puzzle”.puzzle”.

Page 36: Tutorial apptoide

Editor de bloquesEditor de bloques

A la izquierda del A la izquierda del todo, tenemos tres todo, tenemos tres pestañitas.pestañitas.

Se empieza por la Se empieza por la 2º, en la que están 2º, en la que están las “piezas” de las “piezas” de cada elemento de cada elemento de la pantalla en la la pantalla en la que estemos en la que estemos en la pagina web.pagina web.

Page 37: Tutorial apptoide

Editor de bloquesEditor de bloques Las mas básicas son:Las mas básicas son: Cuando pulsas (X botón, Cuando pulsas (X botón,

imagen) hacer (otra pieza)imagen) hacer (otra pieza) Cuando pulsas Cuando pulsas

prolongadamente (X botón) prolongadamente (X botón) hacer (otra pieza)hacer (otra pieza)

Transformar el fondo (del Transformar el fondo (del botón, imagen, etc) en (pieza botón, imagen, etc) en (pieza de color, o de una imagen)de color, o de una imagen)

Marcar la anchura de (X) en Marcar la anchura de (X) en (pieza numérica)(pieza numérica)

Page 38: Tutorial apptoide

Editor de bloquesEditor de bloques

Las piezas de Las piezas de color están en la color están en la pestaña “built-in”, pestaña “built-in”, dentro de “colors”dentro de “colors”

Page 39: Tutorial apptoide

Editor de bloquesEditor de bloques

También hay También hay piezas de control:piezas de control:

Si (x) entonces Si (x) entonces (Y)(Y)

Si (x) haz (Y) y Si (x) haz (Y) y sino (Z)sino (Z)

El resto son con El resto son con variables variables editables con editables con casillas de texto y casillas de texto y rangos.rangos.

Page 40: Tutorial apptoide

Grupos SimplesGrupos Simples

Ahora que conocemos las piezas Ahora que conocemos las piezas básicas, comenzaremos a crear básicas, comenzaremos a crear “grupos cerrados”.“grupos cerrados”.– 1º, Botón para cerrar una pantalla, o salir 1º, Botón para cerrar una pantalla, o salir

de la aplicación.de la aplicación.– 2º, Botón para abrir una pantalla.2º, Botón para abrir una pantalla.– 3º, Establecer fondo de pantalla al iniciar 3º, Establecer fondo de pantalla al iniciar

pantalla.pantalla.– 4º, Botón para reproducir una canción.4º, Botón para reproducir una canción.

Page 41: Tutorial apptoide

Grupo cerrado 1ºGrupo cerrado 1º

Necesitamos colocar en la app desde Necesitamos colocar en la app desde la web:la web:– 1º, Botón que usaremos para cerrar la 1º, Botón que usaremos para cerrar la

app app – Es muy simple, el grupo quedaría así:Es muy simple, el grupo quedaría así:

Se usan la pieza del botón “whenSe usan la pieza del botón “when (nombre que hayamos dado al (nombre que hayamos dado al botón).click) do” y la pieza “close botón).click) do” y la pieza “close (nombre de la pantalla)”(nombre de la pantalla)”

Page 42: Tutorial apptoide

Grupo cerrado 2ºGrupo cerrado 2º

Necesitamos lo mismo que en el Necesitamos lo mismo que en el anterior, y las mismas “piezas”, anterior, y las mismas “piezas”, cambiando la de “close screen” por cambiando la de “close screen” por “open screen” (en “open screen” (en built in>controlbuilt in>control ) y ) y añadiendole al lado una de texto (en añadiendole al lado una de texto (en built in>textbuilt in>text ) con el nombre de la ) con el nombre de la pantalla a abrir, en este caso, Screen1pantalla a abrir, en este caso, Screen1

Page 43: Tutorial apptoide

Grupo cerrado 3ºGrupo cerrado 3º En este caso no necesitamos ningún En este caso no necesitamos ningún

elemento, ya que se usaran piezas de la elemento, ya que se usaran piezas de la pantalla, ni botones ni nada.pantalla, ni botones ni nada.

Se empieza con la pieza “When (nombre de la pantalla).initialize do” Se empieza con la pieza “When (nombre de la pantalla).initialize do” dentro de dentro de my blocks my blocks y pulsando sobre el nombre de la pantalla.y pulsando sobre el nombre de la pantalla.

Luego, del mismo sitio, se pone la pieza “set (x).Backgroundcolor to”, Luego, del mismo sitio, se pone la pieza “set (x).Backgroundcolor to”, y dentro de y dentro de built in>colorsbuilt in>colors

La pieza del color que queramos, o dentro de una imagen subida La pieza del color que queramos, o dentro de una imagen subida (pulsando en su nombre) poniendo la pieza que diga “component (pulsando en su nombre) poniendo la pieza que diga “component (nombre de la imagen)”(nombre de la imagen)”

Page 44: Tutorial apptoide

Grupo cerrado 4ºGrupo cerrado 4º

Para este ya necesitaremos mas cosas:Para este ya necesitaremos mas cosas:– 1º, Botón, que ejecutara la canción.1º, Botón, que ejecutara la canción.– 2º, Elemento no visible “player”2º, Elemento no visible “player”– 3º, Subimos la canción en mp3, pulsando 3º, Subimos la canción en mp3, pulsando

“upload new” dentro de “upload new” dentro de mediamedia , en la web., en la web.– 4º, Vinculamos el player con la canción, 4º, Vinculamos el player con la canción,

pulsando sobre él en pulsando sobre él en elementos elementos y donde y donde pone “source” poniendo la canción pone “source” poniendo la canción previamente subida.previamente subida.

Page 45: Tutorial apptoide

Grupo cerrado 4ºGrupo cerrado 4º

Una vez hecho lo anterior, desde el editor de bloques:Una vez hecho lo anterior, desde el editor de bloques:– 1º Ponemos la pieza básica del “botón”1º Ponemos la pieza básica del “botón”– 2º Ponemos la pieza, que esta dentro de 2º Ponemos la pieza, que esta dentro de my blocks>player1my blocks>player1

(o el que sea), “call player1.Start”(o el que sea), “call player1.Start”Nos quedaría algo así:Nos quedaría algo así:

Para pararlo, habría que poner otro botón y poner la pieza básica Para pararlo, habría que poner otro botón y poner la pieza básica del botón y la pieza “call player1.Pause” o “call player1.Stop”, del botón y la pieza “call player1.Pause” o “call player1.Stop”, depende de si queremos pausarla o pararla del todo.depende de si queremos pausarla o pararla del todo.

Otra opción, mas complicada, la veremos más adelante.Otra opción, mas complicada, la veremos más adelante.

Page 46: Tutorial apptoide

ArrangementsArrangements

Antes de empezar con bloques Antes de empezar con bloques complejos, tendremos un problema, complejos, tendremos un problema, ya que si pones un botón tras otro, ya que si pones un botón tras otro, automáticamente te pone uno debajo automáticamente te pone uno debajo de otro, sin posibilidad de moverlos.de otro, sin posibilidad de moverlos.

Para esto vamos a usar los Para esto vamos a usar los “Arrangements”.“Arrangements”.

Page 47: Tutorial apptoide

ArrangementsArrangements

Existen tres, que ya vimos anteriormente, y Existen tres, que ya vimos anteriormente, y funcionan de manera muy simple:funcionan de manera muy simple:

Arrastras el “arrangement” que se quiera sobre la Arrastras el “arrangement” que se quiera sobre la pantalla emuladora, y saldrá un rectángulo (negro). pantalla emuladora, y saldrá un rectángulo (negro). Todo lo que pongas en ese rectángulo se ordenara Todo lo que pongas en ese rectángulo se ordenara según el “arrangement” usado, los cuales son según el “arrangement” usado, los cuales son configurables. configurables.

El de arriba es uno de tablaEl de arriba es uno de tabla

El de abajo uno horizontal El de abajo uno horizontal

Page 48: Tutorial apptoide

Grupos complejosGrupos complejos

Ahora que sabemos hacer grupos Ahora que sabemos hacer grupos simples, comenzaremos con grupos simples, comenzaremos con grupos que se unen entre si, ya algo mas que se unen entre si, ya algo mas complejos.complejos.

Page 49: Tutorial apptoide

Grupos complejosGrupos complejos

1º, Texto variable en función de (x)1º, Texto variable en función de (x) 2º, 2º, Pasar a la siguiente canción al terminar.Pasar a la siguiente canción al terminar. 3º, 3º, Botón Pausa.Botón Pausa. 4º, Botón Stop.4º, Botón Stop.

Page 50: Tutorial apptoide

Grupo complejo 1ºGrupo complejo 1º

Necesitaremos el elemento “text box”, y Necesitaremos el elemento “text box”, y los elementos de que dependen.los elementos de que dependen.

Siempre dependerá de algo, por lo que en el Siempre dependerá de algo, por lo que en el mapeado se pondrá el botón ación de que mapeado se pondrá el botón ación de que depende, y la pieza del text Box “set textbox(X) depende, y la pieza del text Box “set textbox(X) to” y la pieza “text” dentro de to” y la pieza “text” dentro de Built in>TextBuilt in>Text

Page 51: Tutorial apptoide

Grupo complejo 2ºGrupo complejo 2º Necesitamos los botones de cada canción, y un Necesitamos los botones de cada canción, y un

reproductor por cada una.reproductor por cada una.

Ponemos una pieza “Player(X).Complete” por cada Ponemos una pieza “Player(X).Complete” por cada reproductor, y la pieza “Player(X).Start” del reproductor, y la pieza “Player(X).Start” del siguiente reproductor.siguiente reproductor.

Se puede hacer que un texto vaya cambiando y te diga que Se puede hacer que un texto vaya cambiando y te diga que canción está sonando, con un “Text Box” y las estas piezas, canción está sonando, con un “Text Box” y las estas piezas, que están en que están en built in>textbuilt in>text y en y en my blocks>TextBox(X)my blocks>TextBox(X)

Con esto puedes cambiar Con esto puedes cambiar la imagen del botón para la imagen del botón para saber cual es la que se saber cual es la que se está reproduciendo y está reproduciendo y devolver la imagen del devolver la imagen del que termino a la normal.que termino a la normal.

Page 52: Tutorial apptoide

Grupo complejo 3ºGrupo complejo 3º

Se necesita un botón, que Se necesita un botón, que hará de pause, y las canciones hará de pause, y las canciones (y sus correspondientes (y sus correspondientes botones de inicio).botones de inicio).

Se pone la pieza general del botón, y Se pone la pieza general del botón, y la pieza de la pieza de built in> controlbuilt in> control “if (X) “if (X) then (Y)”.then (Y)”.

En “if” ponemos la pieza de En “if” ponemos la pieza de “player(x).Playing”, y en “do” la de “player(x).Playing”, y en “do” la de “player(X).Pause”.“player(X).Pause”.

Se repite por cada reproductor, Se repite por cada reproductor, dentro del mismo botón. dentro del mismo botón.

Con esto puedes cambiar Con esto puedes cambiar la imagen del botón, la imagen del botón, cuando esta en pausa, cuando esta en pausa, añadiendo la pieza añadiendo la pieza “component” de la “component” de la imagen.imagen.

Page 53: Tutorial apptoide

Grupo complejo 4ºGrupo complejo 4º

Mismos elementos que en el anterior, Mismos elementos que en el anterior, pero el botón servirá de Stop.pero el botón servirá de Stop.

Colocamos la pieza general del botón, y las Colocamos la pieza general del botón, y las piezas “player(x).Stop” piezas “player(x).Stop”

de todos los reproductores de todos los reproductores que tengamos. Simple.que tengamos. Simple.

Page 54: Tutorial apptoide

Emular a un disposit ivoEmular a un disposit ivo

Como es difícil saber que se está haciendo, o Como es difícil saber que se está haciendo, o si funciona, antes de empaquetar todo, se si funciona, antes de empaquetar todo, se puede emular únicamente la pantalla en la que puede emular únicamente la pantalla en la que se esta trabajando desde un dispositivo se esta trabajando desde un dispositivo android, vía Wifi.android, vía Wifi.

Desde el editor de bloques pulsamos “new Desde el editor de bloques pulsamos “new emulator” y después en “connect to device”emulator” y después en “connect to device”

Hay dos formas, mediante un código, que Hay dos formas, mediante un código, que debemos meter en la app previamente debemos meter en la app previamente descargada al dispositivo desde el market, o descargada al dispositivo desde el market, o leyendo un código QR que nos da.leyendo un código QR que nos da.

Page 55: Tutorial apptoide

EmpaquetarEmpaquetar Una vez acabado todo el trabajo, pulsamos Una vez acabado todo el trabajo, pulsamos

en “save”, desde el editor de bloques, y en “save”, desde el editor de bloques, y desde la pagina Web pulsamos en desde la pagina Web pulsamos en “Package for phone”, dándonos varias “Package for phone”, dándonos varias opciones:opciones:

Descargar la app al dispositivo leyendo un Descargar la app al dispositivo leyendo un código de barras QR, descargando el código de barras QR, descargando el archivo .apk al ordenador, o directamente archivo .apk al ordenador, o directamente instalándola en el dispositivo conectado instalándola en el dispositivo conectado desde el editor de bloques.desde el editor de bloques.

Page 56: Tutorial apptoide

DistribuciónDistribución

Una vez comprobado que la app cumple lo Una vez comprobado que la app cumple lo que se quería se puede poner al publico, que se quería se puede poner al publico, para que pueda descargarla y probarla.para que pueda descargarla y probarla.

Dos opciones:Dos opciones:– El market oficial, pagando 25€ de entrada.El market oficial, pagando 25€ de entrada.– Un market alternativo, como aptoide.com o la Un market alternativo, como aptoide.com o la

propia galería de appinventor, siempre que propia galería de appinventor, siempre que cumpla los requisitos: cumpla los requisitos: http://gallery.appinventor.mit.edu/#http://gallery.appinventor.mit.edu/#

Page 57: Tutorial apptoide

App ejemploApp ejemplo

La app usada para los ejemplo a sido La app usada para los ejemplo a sido Manganimeastur: Manganimeastur: http://rotura.store.aptoide.com/app/market/appinventor.ai_enolmbgi2http://rotura.store.aptoide.com/app/market/appinventor.ai_enolmbgi26.Manganimeastur/1/3114237/Manganimeastur# 6.Manganimeastur/1/3114237/Manganimeastur#

Desde la aplicación aptoide, añadir repositorio rotura.(lo que te Desde la aplicación aptoide, añadir repositorio rotura.(lo que te ponen) y al cargar saldrá la app.ponen) y al cargar saldrá la app.

Autoría de la app propia. Se permite Autoría de la app propia. Se permite libre distribución, siempre bajo mismo libre distribución, siempre bajo mismo copyright y nombrando al autor.copyright y nombrando al autor.