Mudanças entre as edições de "Oficina AppInventor I"
(5 revisões intermediárias por 2 usuários não estão sendo mostradas) | |||
Linha 13: | Linha 13: | ||
=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 | + | 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:// | + | 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" |
Linha 55: | Linha 55: | ||
[[Arquivo:AppInventorDesigner_Pronto.png|800px|thumb|center]] | [[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). | 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.