Mudanças entre as edições de "Oficina AppInventor I"
(Criou página com '=Introdução ao AppInventor= Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta [[AppInvent...') |
|||
(35 revisões intermediárias por 5 usuários não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
=Introdução ao AppInventor= | =Introdução ao AppInventor= | ||
− | Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta [[AppInventor]]. O [[AppInventor]] é um software educacional criado pelo [http://web.mit.edu/ MIT] para auxiliar seus alunos a melhor compreender a funcionalidade da lógica de programação. Trabalharemos diversos conceitos que serão importantes quando tratados em outras linguagens, como Variáveis, Listas, | + | Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta [[AppInventor]]. O [[AppInventor]] é um software educacional criado pelo [http://web.mit.edu/ MIT] para auxiliar seus alunos a melhor compreender a funcionalidade da lógica de programação. Trabalharemos diversos conceitos que serão importantes quando tratados em outras linguagens, como Variáveis, Listas, ''Procedures'' e etc. Nesta primeira parte da oficina, aprenderemos um pouco mais sobre o [[AppInventor]]. |
− | O [[AppInventor]] é uma ferramenta muito intuitiva, e por isso, de fácil compreensão. Ele é dividido em duas partes, o | + | O [[AppInventor]] é uma ferramenta muito intuitiva, e por isso, de fácil compreensão. Ele é dividido em duas partes, o '''Designer''' e o '''Blocks'''. Na etapa '''Designer''', trataremos ''Buttons'', ''Labels'', ''Canvas'' e até arquivos de mídia, como ''Sounds''. Observe na imagem abaixo como a nomenclatura de cada seção (em inglês) indica exatamente sua função, como por exemplo, ''Viewer'' e ''Properties''. |
[[Arquivo:AppInventorDesigner.png|800px|thumb|center]] | [[Arquivo:AppInventorDesigner.png|800px|thumb|center]] | ||
− | Já no Blocks, criaremos | + | Já no '''Blocks''', criaremos ''Procedures'', Listas, Variáveis e etc. Nesta parte desenvolveremos diversos blocos que detalharão o a funcionalidade do aplicativo, ou seja, o que os componentes do aplicativo deverão fazer. |
[[Arquivo:AppInventorBlocks.png|800px|thumb|center]] | [[Arquivo:AppInventorBlocks.png|800px|thumb|center]] | ||
− | Tanto o | + | Tanto o '''Designer''' como o '''Blocks''' possuem diversos conceitos que precisam ser abordados de uma maneira mais prática do que teórica. Sendo assim o ensino do [[AppInventor]] será através de oficinas de desenvolvimento de APPs. |
+ | |||
=Tutorial HelloPurr= | =Tutorial HelloPurr= | ||
− | |||
− | |||
− | |||
− | [[ | + | Antes de começarmos a desenvolver nossa aplicação, precisamos ter certeza do que exatamente queremos. Como este é o nosso primeiro tutorial iremos seguir o '''HelloPurr Tutorial''' que pode ser encontrado na sua versão original no site do [http://appinventor.mit.edu/explore/ai2/tutorials Tutoriais do AppInventor - MIT]. Este primeiro APP é relativamente simples, ele conterá a imagem de um gato que, quando tocada, deverá tocar o som de um miado e uma instrução que dirá "Clique no Gato". |
+ | Faça o download da [http://appinventor.mit.edu/explore/sites/all/files/tutorials/helloPurr/kitty.png Imagem do Gato] e do [http://appinventor.mit.edu/explore/sites/all/files/tutorials/helloPurr/meow.mp3 Miado] antes de continuar. Para fazer o download click com o botão direito do mouse na figura e escolha "salvar imagem como" | ||
− | |||
− | [ | + | Para começar vá ao site do [http://appinventor.mit.edu/explore/ AppInventor] click no link ''' Create ''', canto superior direito, e entre com uma conta Gmail. A imagem abaixo mostra como deverá aparecer sua tela na primeira vez que você loga no site e destacado em vermelho o botão ''Start New Projetc'', que você deve clicar para criar um novo projeto: |
− | + | [[Arquivo:AppInventor_Novo_Projeto.png|800px|thumb|center]] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | [[ | + | Em seguida crie um novo projeto e o nomeie ''HelloPurr''. Assim que você cria um projeto, o [[AppInventor]], automaticamente, o redirecionará para o '''Designer''', onde iniciaremos o desenvolvimento do projeto. Como vimos na Introdução, no '''Designer''', selecionamos e "organizamos" os componentes do aplicativo, porque é neste ambiente que são criados os ''Components''. ''Component'' ou simplesmente Componente é um termo utilizado para representar um objeto. Uma aplicação pode ser formada apenas por ''Components''. Para o [[AppInventor]] os Componentes são objetos que podem conter métodos, eventos e/ou propriedades. A imagem abaixo mostra a tela inicial do '''Designer''' e destaca a posição de algumas de suas seções. |
− | + | [[Arquivo:ApppInventor_Descricao_Designer.png|800px|thumb|center]] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Perceba que quando iniciamos um novo projeto o '''Designer''' já inicia com um componente: a '''Screen1'''. Todo componente utilizado no aplicativo é listado na seção ''Components'', e a sua direita, na seção ''Properties'', estão as propriedades do componente selecionado. Agora, selecione o componente ''Screen1'' e altere sua propriedade ''Title'' (na seção ''Properties'') para ''HelloPurr''. A propriedade ''Title'' de uma ''Screen'' pode ser considerada como o título da mesma, neste caso, não teremos a necessidade de criar mais ''Screens'', por isso o ''Title'' da nossa ''Screen1'' pode ser o do próprio aplicativo. | |
+ | == Adicionando Componentes == | ||
− | + | Agora nós adicionaremos um novo componente ao nosso aplicativo. Para adicionar um novo componente, vá até a seção ''Palette'', na sub-seção ''User Interface'', selecione um componente e o arraste até a tela do celular. Para criar nosso APP temos que adicionar à nossa ''Screen'' um componente ''Button''. Assim que o componente ''Button'' é criado, a seção ''Properties'' mostra as propriedades referentes ao componente <tt>Button1</tt>. Antes de modificarmos as propriedades deste novo componente, vá até a seção ''Components'' e altere o nome do ''Button1 para ''BtGato'', para facilitar a sua identificação. | |
− | + | Apesar de este tutorial possuir poucos componentes é importante nomeá-los adequadamente. Para entender melhor a necessidade de se organizar os nomes dos componentes, leia [http://wiki.sj.ifsc.edu.br/index.php/Usu%C3%A1rio:Ernani.rs#Padroniza.C3.A7.C3.A3o Padronização]. | |
− | + | Agora que já possuímos um ''Button'' criado, precisamos fazer com que ele assuma a imagem do gato (link para download esta disponível no início deste tutorial). | |
− | [[Arquivo:AppInventor - Designer Sound.jpg|800px|thumb|center]] | + | === Carregando uma Mídia === |
+ | |||
+ | Selecione o componente ''ButtonGato'', e na seção ''Properties'', procure pela propriedade ''Image''. A propriedade ''Image'' de um ''Button'' possui uma única função: Adicionar uma imagem de fundo a um componente. Como já possuímos a imagem do gato, precisamos carregá-la no ''Designer''. Há duas formas de carregar uma mídia no ''Designer'': | ||
+ | |||
+ | *Logo abaixo da seção ''Properties'' há a seção ''Media'' clique na opção ''Add...'' e selecione o arquivo. Em seguida vá até a propriedade que você deseja carregar a mídia, e selecione o arquivo carregado. | ||
+ | *Na própria seção ''Properties'', quando for carregar um arquivo de mídia em uma propriedade, e este arquivo ainda não estiver carregado no ''Designer'', você pode selecionar a opção “Add...” e selecionar o arquivo. | ||
+ | Assim que você tiver a imagem carregada, o ''Designer'', estará assim: | ||
+ | |||
+ | [[Arquivo:ApppInventor_Carregando_midias.png|800px|thumb|center]] | ||
+ | |||
+ | === Fazendo acertos e carregando mais componentes === | ||
+ | |||
+ | Pela imagem acima podemos perceber um problema no nosso APP: Por cima da imagem do gato aparece um texto, isso acontece porque a propriedade ''Image'' de um ''Button'' adiciona apenas uma imagem de fundo e não sobrepõe outras propriedades dos ''Buttons'', como a ''Text''. A propriedade ''Text'' possui uma função muito simples, adicionar um texto ao componente. Portanto a solução para o nosso "problema" é: Apagar o valor da propriedade ''Text''. Assim que você tiver resolvido o problema do texto, nós já teremos a imagem do gato no nosso aplicativo pronta. | ||
+ | Agora é necessário adicionar uma pequena instrução que diga: Clique no Gato. Portanto, trabalharemos com outro componente, chamado ''Label''. Os ''Labels'', diferente da maioria dos componentes, possui apenas uma função: Exibir um texto. E é exatamente isso que precisamos, portanto, vamos até a seção ''Pallete'' e arrastamos para a tela do nosso celular o componente ''Label''. Em seguida altere o nome do ''Label1'' para ''Lb_Instrucao'' (lembre-se que o [[AppInventor]] não aceita "ç" em nome de componentes). Agora, observe as propriedades do ''Lb_Instrucao'', como a função de um componente ''Label'' é apenas exibir um texto, é óbvio que todas as suas propriedades vão ser relativas a edição de texto. | ||
+ | Por isso, vamos realizar uma série de alterações nas suas propriedade1, para que o nosso texto ganhe maior visibilidade: | ||
+ | *''BackgroundColor'' = esta propriedade é muito semelhante ao ''Image'' dos ''Buttons'', entretanto, ela não necessita de uma mídia carregada e só aceita as opções já disponíveis. Altere o valor desta propriedade para uma cor que destaque o texto. Exemplo: Red. | ||
+ | *''FontBold'' e ''FontItalic'' = são respectivamente as propriedades ''Negrito'' e ''Itálico'', comumente utilizadas em edição de textos. Ative-as. | ||
+ | *''FontSize'' = Tamanho da letra. Aumente a letra para que o texto seja mais visível. Sugestão: 30. | ||
+ | *''Text'' = Como já vimos anteriormente nos componentes ''Buttons'', o valor desta propriedade é exibido pelo ''Label'' (é comum que diferentes componentes possuam propriedades que realizam a mesma função). Altere o valor desta propriedade para: Clique no Gato. Como foi especificado no início deste tutorial. | ||
+ | |||
+ | [[Arquivo:AppInventorDesigner_Pronto.png|800px|thumb|center]] | ||
+ | |||
+ | === Acrescentando o Som === | ||
+ | |||
+ | Nosso aplicativo possui a imagem do gato e uma instrução, só falta uma coisa: que quando clicarmos no gato ele toque o Miado. Mas para fazermos um arquivo de áudio ser executado no [[AppInventor]], é necessário que outro componente seja adicionado no ''Designer'': O ''Sound''. Portanto, vá até a seção ''Paletta'', na subseção ''Media'' e arraste um ''Sound'' para o celular. Observe que o ''Sound'' é um arquivo invisível no ''Designer'' e que necessita de uma mídia carregada para ser executado (sem uma mídia nenhum som será tocado). Portanto altere o nome do componente ''Sound1'' para ''Miado'' e a propriedade ''Source'' para o arquivo de som baixado. Agora quando você instruir o aplicativo para executar o ''Miado'' ele tocará o arquivo de som que foi carregado. | ||
+ | |||
+ | [[Arquivo:AppInventor_-_Designer_Sound.jpg|800px|thumb|center]] | ||
+ | |||
+ | == Atribuindo funcionalidades aos componentes == | ||
+ | |||
+ | Por enquanto nosso aplicativo não possui instruções, ou seja, não faz nada. Ele apenas é uma imagem de um gato com uma instrução em baixo. Como vimos na Introdução, o ''Designer'' adiciona os componentes e os valores iniciais as suas propriedades (podem ser alterados futuramente). | ||
+ | |||
+ | Já no ''Blocks'' podemos definir instruções para esses componentes, e é exatamente isso que faremos a seguir abra o ''Blocks'' (click no botão ''Blocks'' no canto superior direito da tela). | ||
− | |||
[[Arquivo:AppInventor - Blocks.jpg|800px|thumb|center]] | [[Arquivo:AppInventor - Blocks.jpg|800px|thumb|center]] | ||
− | A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte | + | A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte ''Blocks'' do desenvolvimento de um aplicativo, no início, nos parece mais complicada porque não possuímos um bom domínio de [[AppInventor]] e como consequência não sabemos onde buscar as instruções desejadas. Por isso durante o desenvolvimento das oficinas tentaremos abranger um grande números de funcionalidades para que você tenha mais "ferramentas" para utilizar. |
+ | Agora vamos adicionar as instruções que desejamos. Precisamos fazer com que quando o ''BtGato'' seja clicado ele execute o miado. Vá até o ''Blocks'' e na seção ''Screen1'' clique em ''BtGato''. Observe que assim que você clica aparece um conjunto de comandos que podem ser utilizados com este botão. | ||
+ | Arraste a instrução indica na figura abaixo para o centro da tela. Observe a cor deste bloco (verde escuro), somente os blocos de eventos possuem essa cor. Em [[AppInventor]], evento é uma ação ou acontecimento que desencadeia um ''Procedure''. Como por exemplo, o clique do mouse é uma condição para que um objeto se movimente. No caso ''HelloPurr'' o evento é o clique do mouse sobre o ''BtGato''. Essa instrução sugere que quando o evento ocorrer, haverá uma consequência. A consequência deve ser adicionada a instrução evento. | ||
[[Arquivo:Button Gato click.jpg|thumb|center]] | [[Arquivo:Button Gato click.jpg|thumb|center]] | ||
− | + | ||
+ | A consequência que esperamos é o miado, ou seja, a execução do ''Miado''. Para isso acontecer, vá até a seção ''Blocks'' e clique em ''Miado'' procure pela instrução mostrada abaixo e arraste esta para o centro da tela. | ||
[[Arquivo:Call Sound Miado.jpg|thumb|center]] | [[Arquivo:Call Sound Miado.jpg|thumb|center]] | ||
− | Perceba que dentro deste bloco esta escrito: "call | + | Perceba que dentro deste bloco esta escrito: "call Miado.Play". Os blocos [[AppInventor]] são autoexplicativos, dentro deles PODEM existir até três informações: |
*A função do bloco. | *A função do bloco. | ||
− | *O componente em questão (o bloco pode estar relacionado a algo que não seja um componente, como um | + | *O componente em questão (o bloco pode estar relacionado a algo que não seja um componente, como um ''Procedure''). |
*A consequência. | *A consequência. | ||
− | Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente | + | Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente ''Miado'', e "Play", significa "tocar" ou "executar". Como o componente em questão é um arquivo de som, se executarmos o ''Miado'' teremos como resposta o miado que desejamos. Agora só o que temos de fazer é juntar o bloco de evento com o "call" arrastando o "call" para dentro do de evento. Este deverá ser o resultado: |
[[Arquivo:Instrucao HelloPurr.jpg|thumb|center]] | [[Arquivo:Instrucao HelloPurr.jpg|thumb|center]] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | == Testando o Aplicativo == | |
− | [[ | + | Assim que você tiver combinado as duas instruções, conecte o [[AppInventor]] a um dispositivo ou abra o emulador para testar o aplicativo. Vá até o ''menu'' principal do APP e click em ''connect''e selecione Al Companion. Irá aparecer na tela o QR-CODE, utilize o APP ''MIT AI2'' para ler o CODE e diverta-se. |
− | |||
− | + | [[Arquivo:AppInventor_Gato_QR-CODE.png|800px|thumb|center]] |
Edição atual tal como às 07h55min de 30 de março de 2017
Introdução ao AppInventor
Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta AppInventor. O AppInventor é um software educacional criado pelo MIT para auxiliar seus alunos a melhor compreender a funcionalidade da lógica de programação. Trabalharemos diversos conceitos que serão importantes quando tratados em outras linguagens, como Variáveis, Listas, Procedures e etc. Nesta primeira parte da oficina, aprenderemos um pouco mais sobre o AppInventor. O AppInventor é uma ferramenta muito intuitiva, e por isso, de fácil compreensão. Ele é dividido em duas partes, o Designer e o Blocks. Na etapa Designer, trataremos Buttons, Labels, Canvas e até arquivos de mídia, como Sounds. Observe na imagem abaixo como a nomenclatura de cada seção (em inglês) indica exatamente sua função, como por exemplo, Viewer e Properties.
Já no Blocks, criaremos Procedures, Listas, Variáveis e etc. Nesta parte desenvolveremos diversos blocos que detalharão o a funcionalidade do aplicativo, ou seja, o que os componentes do aplicativo deverão fazer.
Tanto o Designer como o Blocks possuem diversos conceitos que precisam ser abordados de uma maneira mais prática do que teórica. Sendo assim o ensino do AppInventor será através de oficinas de desenvolvimento de APPs.
Tutorial HelloPurr
Antes de começarmos a desenvolver nossa aplicação, precisamos ter certeza do que exatamente queremos. Como este é o nosso primeiro tutorial iremos seguir o HelloPurr Tutorial que pode ser encontrado na sua versão original no site do Tutoriais do AppInventor - MIT. Este primeiro APP é relativamente simples, ele conterá a imagem de um gato que, quando tocada, deverá tocar o som de um miado e uma instrução que dirá "Clique no Gato". Faça o download da Imagem do Gato e do Miado antes de continuar. Para fazer o download click com o botão direito do mouse na figura e escolha "salvar imagem como"
Para começar vá ao site do AppInventor click no link Create , canto superior direito, e entre com uma conta Gmail. A imagem abaixo mostra como deverá aparecer sua tela na primeira vez que você loga no site e destacado em vermelho o botão Start New Projetc, que você deve clicar para criar um novo projeto:
Em seguida crie um novo projeto e o nomeie HelloPurr. Assim que você cria um projeto, o AppInventor, automaticamente, o redirecionará para o Designer, onde iniciaremos o desenvolvimento do projeto. Como vimos na Introdução, no Designer, selecionamos e "organizamos" os componentes do aplicativo, porque é neste ambiente que são criados os Components. Component ou simplesmente Componente é um termo utilizado para representar um objeto. Uma aplicação pode ser formada apenas por Components. Para o AppInventor os Componentes são objetos que podem conter métodos, eventos e/ou propriedades. A imagem abaixo mostra a tela inicial do Designer e destaca a posição de algumas de suas seções.
Perceba que quando iniciamos um novo projeto o Designer já inicia com um componente: a Screen1. Todo componente utilizado no aplicativo é listado na seção Components, e a sua direita, na seção Properties, estão as propriedades do componente selecionado. Agora, selecione o componente Screen1 e altere sua propriedade Title (na seção Properties) para HelloPurr. A propriedade Title de uma Screen pode ser considerada como o título da mesma, neste caso, não teremos a necessidade de criar mais Screens, por isso o Title da nossa Screen1 pode ser o do próprio aplicativo.
Adicionando Componentes
Agora nós adicionaremos um novo componente ao nosso aplicativo. Para adicionar um novo componente, vá até a seção Palette, na sub-seção User Interface, selecione um componente e o arraste até a tela do celular. Para criar nosso APP temos que adicionar à nossa Screen um componente Button. Assim que o componente Button é criado, a seção Properties mostra as propriedades referentes ao componente Button1. Antes de modificarmos as propriedades deste novo componente, vá até a seção Components e altere o nome do Button1 para BtGato, para facilitar a sua identificação. Apesar de este tutorial possuir poucos componentes é importante nomeá-los adequadamente. Para entender melhor a necessidade de se organizar os nomes dos componentes, leia Padronização. Agora que já possuímos um Button criado, precisamos fazer com que ele assuma a imagem do gato (link para download esta disponível no início deste tutorial).
Carregando uma Mídia
Selecione o componente ButtonGato, e na seção Properties, procure pela propriedade Image. A propriedade Image de um Button possui uma única função: Adicionar uma imagem de fundo a um componente. Como já possuímos a imagem do gato, precisamos carregá-la no Designer. Há duas formas de carregar uma mídia no Designer:
- Logo abaixo da seção Properties há a seção Media clique na opção Add... e selecione o arquivo. Em seguida vá até a propriedade que você deseja carregar a mídia, e selecione o arquivo carregado.
- Na própria seção Properties, quando for carregar um arquivo de mídia em uma propriedade, e este arquivo ainda não estiver carregado no Designer, você pode selecionar a opção “Add...” e selecionar o arquivo.
Assim que você tiver a imagem carregada, o Designer, estará assim:
Fazendo acertos e carregando mais componentes
Pela imagem acima podemos perceber um problema no nosso APP: Por cima da imagem do gato aparece um texto, isso acontece porque a propriedade Image de um Button adiciona apenas uma imagem de fundo e não sobrepõe outras propriedades dos Buttons, como a Text. A propriedade Text possui uma função muito simples, adicionar um texto ao componente. Portanto a solução para o nosso "problema" é: Apagar o valor da propriedade Text. Assim que você tiver resolvido o problema do texto, nós já teremos a imagem do gato no nosso aplicativo pronta. Agora é necessário adicionar uma pequena instrução que diga: Clique no Gato. Portanto, trabalharemos com outro componente, chamado Label. Os Labels, diferente da maioria dos componentes, possui apenas uma função: Exibir um texto. E é exatamente isso que precisamos, portanto, vamos até a seção Pallete e arrastamos para a tela do nosso celular o componente Label. Em seguida altere o nome do Label1 para Lb_Instrucao (lembre-se que o AppInventor não aceita "ç" em nome de componentes). Agora, observe as propriedades do Lb_Instrucao, como a função de um componente Label é apenas exibir um texto, é óbvio que todas as suas propriedades vão ser relativas a edição de texto. Por isso, vamos realizar uma série de alterações nas suas propriedade1, para que o nosso texto ganhe maior visibilidade:
- BackgroundColor = esta propriedade é muito semelhante ao Image dos Buttons, entretanto, ela não necessita de uma mídia carregada e só aceita as opções já disponíveis. Altere o valor desta propriedade para uma cor que destaque o texto. Exemplo: Red.
- FontBold e FontItalic = são respectivamente as propriedades Negrito e Itálico, comumente utilizadas em edição de textos. Ative-as.
- FontSize = Tamanho da letra. Aumente a letra para que o texto seja mais visível. Sugestão: 30.
- Text = Como já vimos anteriormente nos componentes Buttons, o valor desta propriedade é exibido pelo Label (é comum que diferentes componentes possuam propriedades que realizam a mesma função). Altere o valor desta propriedade para: Clique no Gato. Como foi especificado no início deste tutorial.
Acrescentando o Som
Nosso aplicativo possui a imagem do gato e uma instrução, só falta uma coisa: que quando clicarmos no gato ele toque o Miado. Mas para fazermos um arquivo de áudio ser executado no AppInventor, é necessário que outro componente seja adicionado no Designer: O Sound. Portanto, vá até a seção Paletta, na subseção Media e arraste um Sound para o celular. Observe que o Sound é um arquivo invisível no Designer e que necessita de uma mídia carregada para ser executado (sem uma mídia nenhum som será tocado). Portanto altere o nome do componente Sound1 para Miado e a propriedade Source para o arquivo de som baixado. Agora quando você instruir o aplicativo para executar o Miado ele tocará o arquivo de som que foi carregado.
Atribuindo funcionalidades aos componentes
Por enquanto nosso aplicativo não possui instruções, ou seja, não faz nada. Ele apenas é uma imagem de um gato com uma instrução em baixo. Como vimos na Introdução, o Designer adiciona os componentes e os valores iniciais as suas propriedades (podem ser alterados futuramente).
Já no Blocks podemos definir instruções para esses componentes, e é exatamente isso que faremos a seguir abra o Blocks (click no botão Blocks no canto superior direito da tela).
A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte Blocks do desenvolvimento de um aplicativo, no início, nos parece mais complicada porque não possuímos um bom domínio de AppInventor e como consequência não sabemos onde buscar as instruções desejadas. Por isso durante o desenvolvimento das oficinas tentaremos abranger um grande números de funcionalidades para que você tenha mais "ferramentas" para utilizar. Agora vamos adicionar as instruções que desejamos. Precisamos fazer com que quando o BtGato seja clicado ele execute o miado. Vá até o Blocks e na seção Screen1 clique em BtGato. Observe que assim que você clica aparece um conjunto de comandos que podem ser utilizados com este botão. Arraste a instrução indica na figura abaixo para o centro da tela. Observe a cor deste bloco (verde escuro), somente os blocos de eventos possuem essa cor. Em AppInventor, evento é uma ação ou acontecimento que desencadeia um Procedure. Como por exemplo, o clique do mouse é uma condição para que um objeto se movimente. No caso HelloPurr o evento é o clique do mouse sobre o BtGato. Essa instrução sugere que quando o evento ocorrer, haverá uma consequência. A consequência deve ser adicionada a instrução evento.
A consequência que esperamos é o miado, ou seja, a execução do Miado. Para isso acontecer, vá até a seção Blocks e clique em Miado procure pela instrução mostrada abaixo e arraste esta para o centro da tela.
Perceba que dentro deste bloco esta escrito: "call Miado.Play". Os blocos AppInventor são autoexplicativos, dentro deles PODEM existir até três informações:
- A função do bloco.
- O componente em questão (o bloco pode estar relacionado a algo que não seja um componente, como um Procedure).
- A consequência.
Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente Miado, e "Play", significa "tocar" ou "executar". Como o componente em questão é um arquivo de som, se executarmos o Miado teremos como resposta o miado que desejamos. Agora só o que temos de fazer é juntar o bloco de evento com o "call" arrastando o "call" para dentro do de evento. Este deverá ser o resultado:
Testando o Aplicativo
Assim que você tiver combinado as duas instruções, conecte o AppInventor a um dispositivo ou abra o emulador para testar o aplicativo. Vá até o menu principal do APP e click em connecte selecione Al Companion. Irá aparecer na tela o QR-CODE, utilize o APP MIT AI2 para ler o CODE e diverta-se.