INICIACIÓN A APPINVENTOR

Transcripción

1 INICIACIÓN A APPINVENTOR

2

3 ÍNDICE INSTALACIÓN... 1 PRIMEIRA OPCIÓN ( RECOMENDADA)... 1 SEGUNDA OPCIÓN... 1 TERCEIRA OPCIÓN... 1 PRIMEIRA APLICACIÓN : FÁLAME ( AO PREMER UN BOTÓN, AO AXITAR O MÓVIL E DICIR O QUE O USUARIO ESCRIBA)... 2 EMPREGANDO O ACELERÓMETRO... 3 EMPREGANDO UNHA CAIXA DE TEXTO... 3 SEGUNDA APP: A PELOTA QUE REBOTA... 4 APP PARA DEBUXAR... 5 APP PROMOCIONA A TÚA ZONA... 6 PANTALLA DE BENVIDA... 6 PANTALLA PRINCIPAL DA APP... 7 DANDO FORMATO Á APP... 8 ABRIR WEBS, MAPAS, ENVIAR CORREOS, HACER LLAMADAS (USO DE ACTIVITY STARTER COMPONEN)... 8 MAPA... 8 VIDEO... 9 CHAMADA... 9 ENLACE A WEB... 9 CREAR APK PUBLICAR E PROMOCIONAR AS TÚS APPS FONTES... 10

4 1 INICIACIÓN A APPINVENTOR ( OLLO: necesitas ter unha conta en GMAIL e tamén sería útil en DRIVE para subir os arquivos.apk e logo descargalos dende o móbil e instalar directamente a app ) INSTALACIÓN Primeira opción ( recomendada) Temos tres opcións para crear e probar as apps que fagamos con APPINVENTOR, se tes un móbil Android e unha conexión Wifi, só cómpre instalar no móbil AppInventorCompanion dende o Play Store ou empregando o seguinte código QR. Unha vez instalado tes que ir á páxina de appinventor dende o teu ordenador e ter conectado a mesma rede wifi o móbil e o ordenador. Unha vez que tes creado un proxecto seleccionas Connect-AI Companion,aparecerá un código QR, logo abres a aplicación no móbil, dáslle a ler código QR e xa tes a app que creache no móbil. Segunda opción A segunda opción é instalar o software no PC e empregar un emulador de móbil, neste caso non precisas ter un móbil android xa que podes probar as túas apps no emulador. Tes que descargar o software dende a páxina da appinventor ( Unha vez instalado o software terás no escritorio un programa auxiliar chamado aistarter que permite comunicarse co emulador polo que temos que inicialo cun dobre clic e aparecerá a seguinte pantalla Cando abras un proxecto e o queiras ver no emulador tes que ir a Connect-Emulador e aparecerá o teléfono ao cabo de un par de minutos Terceira opción Require conectar o móbil a través do cable USB tendo que configurar tanto o móbil como o ordenador, algo que en Windows pode complicarse polo que non se recomenda.

5 2 PRIMEIRA APLICACIÓN : FÁLAME ( ao premer un botón, ao axitar o móvil e dicir o que o usuario escriba) Primeiro tes que ir a páxina appinventor.mit.edu premer en Create e entrar na túa conta de gmail. Para empezar un proxecto tes que darlle a Projectsstart new project e poñerlle un nome ( sen espazos nin símbolos e mellor todo xunto), chamámoslle ao proxecto Falame ( sen tilde, nin comillas). Aparece a seguinte pantalla onde facemos o deseño (interface) da app. Logo para facer a programación premeremos en Blocks. Empezamos: O primeiro que temos que facer e arrastrar un botton da paletta da esquerda ata a pantalla do móbil. Veremos agora que na columna de compoñentes nos aparece Screen1 (pantalla do móbil) e un botón. Na columna da dereita aparecen as propiedades da pantalla ou do botón ( temos que selecionalo) que modificamos ao noso gusto. Agora na columna Palette prememos en Media e arrastramos en Text To Speech ( aparecerá debaixo da pantalla do móvil pois é un elemento non visible) Teremos algo semellante a isto. Xa temos feita a parte do deseño agora imos a facer a parte de programación para indicarlle ao programa o que queremos que fagan os elementos que arrastramos á pantalla do móbil. Para elo prememos no botón Blocks (arriba á dereita). Na nova pantalla temos a esquerda os compoñentes que arrastramos antes. Programación: Prememos na esquerda no botton que arrastramos antes e nos aparecen unha serie de opcións, escollemos When botton1. clic do Agora prememos en Text To Speech1 e das opción que aparecen escollemos TextToSpeech1.Speak message e o encaixamos no elemento do botón. call Por último en Built in, prememos en Text e escollemos o primeiro elemento e o encaixamos no oco que queda ao lado de onde pon message. Dentro de este escribimolo que queremos que nos diga o móbil cando premamos o botón. XA REMATAMOS A PRIMEIRA APP agora é momento de probala Preme en Connect Emulator e comproba que funciona. Se utilizas a primeira opción wifi, daslle a Connect-AI Companion, inicias AI2 Companion no móvil sáeche unha opción para escanear un código QR, o escaneas e xa está.calquera modificación que fagamos verémola directamente no móbil.

6 3 Empregando o Acelerómetro Podes facer o mesmo pero en lugar de ter que premer un botón tes que axitar o móbil empregando o acelerómetro que ten, o que cambia é que en lugar de un botón, tes que coller o sensor do acelerómetro que está en sensors e outra vez o Text To Speech. Tamén podes engadir unha etiqueta de texto (Na esquerda User Interface- label) para escribir algo na pantalla. Quedará algo semellante a isto. ( isto non funciona no Emulador) Empregando unha caixa de texto Se queremos que o móbil diga aquello que o usuario escriba faremos o seguinte Na vista de deseño collemos unha etiqueta ( label), unha caixa de texto ( TextBox), un Botón e en Media o TextToSpeech. Daslle o formato que queiras e logo na vista de bloques fas a programación como se indica abaixo.

7 4 SEGUNDA APP: A PELOTA QUE REBOTA Abrimos un novo proxecto e lle chamamos pelotaquerebota, na pantalla de deseño arrastramos un elemento Canvas da pestaña que pon Debuxos e animacions na parte esquerda. Cómpre desmarcar na screen a opción de scroll ( scrollable)para poder traballar co elemento Canvas. Para que o elemento Canvas ocupe toda a pantalla, selecciónao e nas súas propiedades marcar no ancho e alto encher todo ( en Width e en Height, marcara Fill parent). Agora arrastramos unha bola dende Debuxos e animacións e nas súas propiedades subímoslle o radio a 15 ( o o que queiras) Programación Imos á pantalla de Blocks e coa bola marcada arrastramos o compoñente que pon Cuando Ball1. Lanzado Agora temos que configurar a dirección (heading) e a velocidade(speed) da bola. Para elo prememos na bola a esquerda e buscamos as opción de dirección e velocidade que se indican na imaxe Agora no bloque de When ball1.flung colocamos o cursor sobre speed e sobre heading e escollemos get speed e get heading Agora temos que facer que a bola rebote nos bordes, para elo escollemos When Ball1 EdgeReached ( cuando la bola toque el borde, logo call Ball1 Bounce edge e logo dende edge engadimos get edge. Ten que quedar algo semellante a isto ( podes modificar a velocidade da bola nas propiedades)

8 5 APP PARA DEBUXAR Arrastramos un compoñente Canvas (Lienzo)e facemos que ocupe toda a pantalla, logo en Blocks escollemos o seguinte para poder debuxar. Podes engadir un botón para borrar o que debuxas Tamén podes engadir unha imaxe de fondo ao Canvas e pintar por enriba. Quedará algo semellante a isto

9 6 APP PROMOCIONA A TÚA ZONA Ides crear unha app para promocionar alguna zona que vos guste, o voso pobo, cidade, praias, rutas polo que necesitaredes fotos dos lugares ou monumentos máis interesantes para ver ou visitar. Normalmente antes de iniciar unha App cando prememos na icona aparece unha pantalla previa que dura uns segundos antes de iniciar a aplicación. Esta pantalla chámase Splash en AppInventor e pode ser unha imaxe, logotipo, unha mensaxe e vai ser a primeira que imos crear. PANTALLA DE BENVIDA Primeiro creamos un novo proxecto e na pantalla que aparece (screen1) cambias o nome a inicio por exemplo e lle pos unha label onde escribes unha mensaxe de benvida co formato que queiras e pos na pantalla inicio unha imaxe ou o dáslle o formato que queiras. Queda algo semellante a imaxe Agora creamos unha nova pantalla en add screen que será a principal da aplicación. Unha vez creada, volvemos a pantalla inicio. Agora para converter esta pantalla de inicio nunha Splash temos que poñer un temporizador para que só apareza uns segundos, para iso imos a Sensors e arrastramos o compoñente clock (non visible). Nas propiedades en Time Interval poñemos por exemplo 3000 ( ms), que serán 3 segundos. Agora para que o temporizador só funcione unha vez, desactivamos onde pon TimerAlwaysFires. Agora imos a programar en Blocks a pantalla de inicio para que apareza só ao principio e cando premamos a frecha hacia atrás na App, non volver a ela. Prememos en clock e arrastramos o que pon Clock1.Timer, agora en Built in en Control buscamos unha opción para que ao rematar o temporizador para a outra pantalla ( neste caso a principal da aplicación). Esta opción é Open Another Screen e logo arrastramos un elemento de Text e escribimos o nome da pantalla a onde queremos ir. Agora para cerrar a pantalla e que non apareza ao darlle á frecha hacia atrás temos que facer un procedemento para pechala. Arrastramos o bloque procedure e lle engadimos o de close screen en Control. Prememos no texto procedure do bloque e cambiamos o nome por cierrainicio, por exemplo. Por último prememos ma esqueda en procedure e arrastramos call cierrainicio ata o bloque de Clock1.Timer

10 7 PANTALLA PRINCIPAL DA APP Aquí na vista deseño tedes que arrastrar os botón,labels,imaxes e para colocalos ou ordenalos empregamos Layout. Imos facer a App con só tres monumentos ou lugares importantes como mostra, para elo tes que arrastrar sobre a pantalla dúas labels, unha imaxe e tres botón. Quedará algo así. A primeira label (etiqueta) é para o título A segunda label é onde aparecerá o texto cando premamos sobre un botón, podemos chamarlle a esta label, labelresultado Os tres botóns ( aos que lle cambiamos o nome en Rename, son dos lugares de interés) Agora premendo en cada elemento e nas súas propiedades cambiamos o nome, tipo de letra, color, colocamos unha imaxe nos botón Feito un primeiro deseño imos agora a Blocks. Programamos para que cando premamos nun dos botones nos devolva un texto ( na etiqueta de labelresultado), para elo facemos en cada botón Poñemos o texto que queremos que apareza ao premer o botón Agora imos facer que cando prememos no botón do monumento se mostre a imaxe ( debes telas subidas a AppInventor, só tes que premer en media debaixo de compoñentes). En Bloques, prememos en imaxe e seleccionamos set image1.picture to engadímoslle un compoñente de texto para escribir o nome da imaxe( o mesmo que teña no pc) e conectamos todo. O mesmo para todos os botón. Agora ao premer debe cambiar o texto da label e ademais amosar a imaxe no centro da pantalla Imos engadir unha Audioguía para que ao premer o botón ademais nos lea un texto que nos escribimos previamente. Para elo imos a vista deseño e arrastramos o compoñente TextToSpeech1 na sección Media e nas súas propiedades el Language poñemos SPA. Agora no editor de Bloques buscamos o compoñente a esquerda TextToSpeech1 o prememos e arrastramos ao bloque de When button.click o que pon Call.TextToSpeech1.Speak e lle engadimos o texto que queremos que diga.

11 8 DANDO FORMATO Á APP Empregando os arranxos de Layout podemos mellorar o formato para ordenar os botón e tamén podemos poñerlles unha imaxe para facer máis comprensible App ( un tamaño normal de botón e de 50 x 50 px). Intenta que queda algo semellante a isto ABRIR WEBS, MAPAS, ENVIAR CORREOS, HACER LLAMADAS (uso de Activity Starter Componen) Para engadir todos estes compoñentes a nosa App empregamos o componente ActivityStarterComponen que está na Paleta da esquerda en Connectivity. Primeiro engadimos tres botones e os colocamos debaixo e ordenador cun layout horizontal, chamámoslle aso botón,por exemplo, mapa, video e chamada. ENGADIR SITUACIÓN NO MAPA, VIDEO E CHAMADA Arrastramos dous compoñente ActivityStarterComponen a nosa pantalla ( para o mapa e para o vídeo). Agora nas propiedades temos que encher só onde pon Action e poñer exactamente o seguinte nos dous compoñentes MAPA android.intent.action.view Imos a Blocks e co compoñente ActivityStarter do mapa pulsado sacamos o valor que pon ActivityStarter.DataUri to e lle engadimos un bloque de texto onde debemos de copia as coordenadas. Para coñecer as coordenadas do sitio que queremos situar temos que ir a google maps e sobre o lugar que queremos amosar prememos botón dereito que pulsamos onde do Qué hay aquí?, abrirase unha ventá coas coordenadas, as seleccionamos e as copiamos.

12 9 Agora temos que copialas nas propiedades de ActivityStarterComponen onde pon DataUri precedidas de geo: e separadas por unha coma, por exemplo Se ademais queremos que o mapa se centre na zona e poña unha marca modificamos e poñemos VIDEO Para enlazar a un vídeo de Youtube facemos o mesmo que antes, arrastramos o compoñente set ActivityStarter.DataUri to lle engadimos un elemento de texto onde copiaremos a dirección de Youtube CHAMADA En Social arrastramos un compoñente PhoneCall na pantalla de deseño, agora imos a Blocks e co compoñente PhoneCall marcado arrastramos set PhoneCall.PhoneNumber to e lle engadimos un elemento de texto onde copiaremos o número de teléfono ao que queremos chamar. Ten que quedar algo así ao final. Fariámolo mesmo para tódolos monumentos o lugares de interés que temos na App ENLACE A WEB Podemos engadir un novo botón e poñerlle a imaxe do logo do concello por exemplo e outro compoñente ActivityStarter para poñer un enlace directo a súa páxina. O único que temos que facer e poñer no campo DataUri das propiedades do ActivityStarter a dirección web e logo en Blocks facer Finalmente quedará algo semellante a isto

13 10 CREAR apk Unha vez rematadas as app podes crear a súa apk para poder instalala no móbil. Unha opción sinxela é gardar a apk no teu PC ( Build-save.apk to my computer), subila logo a google Drive e unha vez que a tes subida a descargas dende o teu móbil e a instalas. Tes que ter activado o permiso para poder instalar app de terceiros, que non sexan de Google Play. PUBLICAR E PROMOCIONAR AS TÚS APPS Para poder publicar a túa app en Google Play tes que darte de alta na páxina como desarrollador e despois subir a túa app dando unha pequeña explicación do que fai, indicando a que categoría pertence e subindo unas imaxes dalgunhas das pantallas da app. Para poder facer isto tes que pagar 25$ ao ano. Para promocionala podes difundila gratuitamentepor redes sociais, crear un blog, presentala en diferentes eventos, facer publicidad dela noutras apps similares FONTES AppInventor Beginner Tutorial : Curso Emprendimiento y AppInventor de MiriadaX