Usar esta ferramenta é algo relativamente simples, você não precisa obrigatoriamente ser um programador para criar seus próprios aplicativos para seu Smartphone, o único pré-requito para o uso dessa ferramento é a criatividade, e uma conta no gmail.
O App Inventor se baseia no princípio drag and drop - arratar e soltar. A estrutura lógica do seu aplicativa está disposta, literalmente como se fosse um quebra cabeças, tornado a construção divertida,e ao mesmo tempo, desafiadora.
Vamos criar um aplicativo bem simples onde você digitará um texto e seu celular irá literalmente falar com você! Espero que goste!
Bom, vamos ao que importa: por a mão na massa!
Para acessar o site do app inventor aqui.
Após acessar o site você pode clicar em "Create apps!"
Depois que você fizer o login e tudo mais... deve aparecer a imagem a seguir, daí é só clicar em continuar para começar.
Na imagem seguinte clique em Start new project, escolha um nome - eu escolhi PrimeiroAppInventor. E vamos analisar o que temos!
No canto mais a esquerda temos a nossa bela e querida paleta, é ela que vai nos fornecer várias opções de componentes para o nosso projeto.
A paleta é dividida em várias categorias, porém, vamos usar somente a primeira referente a interface, por hora.
Em cenas estão disponíveis as telas, geralmente existe a necessidade de se trabalhar com diversas telas no seu aplicativo, mas aqui vamos trabalhar apenas com uma.
Em menu controle e help temos as funções de controle geral: em Projects estão dispostas as opções salvar projeto, gerar o seu .apk, abrir, apagar projeto. Em Connect estão dispostas as opções de testes, afinal com o app inventor você não precisa ter um smartphone! e você também pode testar seu aplicatico direto no seu celular através de um QR Code em Connect > Al Companion, simplesmente fantástico não?
Componentes. Serão os componentes que você escolheu para usar em seu aplicativo, ex: botões, imagens, sons, vídeos, data, hora etc..
Propriedades, são as propriedades dos componentes que estamos trabalhando, nas propriedades você pode alterar cor,tamanho,posição, efeito de um componente e muito mais.
Estrutura é a parte onde você começa a dar "vida" ao seu aplicativo, em blocos você da "ações" aos seus componentes para que eles possam se comportar da maneira adequada.
Agora que você já conhece o básico da estrutura do app inventor vamos começar a criação!
Vá na sua paleta procure por Button, arraste para a tela que está no cento da página.
Em seguida, logo a baixo do botão está a nossa TextBox, caixa de texto. Arraste também para a tela, o projeto deve ficar como a imagem a baixo:
Agora, clicando em cima do TextBox, perceba que ela fica preenchida com um quadradinho verde, isso significada que o mesmo foi selecionado. Agora vá em propriedades e procure o parâmetro Width que corresponde a largura da nossa caixa de texto. Como você pode notar, ao inserirmos uma caixa de texto ela fica desalinhada cabe a nós deixa-la alinhada e mais bonita, então clique sobre o width e marque a opção fill parent e dê ok. Ainda na caixa de texto, a baixo do width existe um hint, esse hint nada mais é do que um texto informativo da caixa. Apague o que está escrito e escreva "fale comigo!".
Agora faça o mesmo processo para o botão: clique sobre ele, procure o parâmetro width, selecione fill parent, em seguida procure o parâmetro Text nas propriedades do botão, altere de acordo com a imagem a baixo:
Repita o processo acima para o botão, assim como a imagem a baixo:
O TTS é uma tecnologia disposta para "falar", ela reproduz o som de uma fala feminina a partir de um texto, por exempo: quando você digitar algo na entrada de texto e apertar o botão, o sistema irá ler o que você escreveu e chamar o TTS para "falar" o que você escrito.
Veja como fica o projeto:
Ótimo! Agora vamos programar os elementos!
Click em Blocks, na sua direita.
Você deve entrar nessa página:
Perceba que a baixo estão os componentes que iremos precisar, sendo assim, aqui começa nossa programação!
Clique em cima do seu botão, Button1, e perceba que irá aparecer um conjunto de opções, cada opção dessa funciona como uma ação, um comportamento, que o botão irá fazer. Assim como os outros componentes também possuem ações.
A ideia do aplicativa é a seguinte: você irá digitar um texto dentro da caixa de texto, e ao clicar no botão o aplicativo pega esse texto e envia para o TTS, quando o TTS recebe esse texto ele transforma em palavras e irá "falar" para você!
Perceba que abriu várias opções de ações para o botão, selecione a primeira.
Essa ação significa o seguinte: quando o botão for clicado, faça ... Então, quando o botão for clicado, vamos pedir para ele enviar o texto da caixa para o TTS.
Clique sobre o TTS, a baixo do botão, logo em seguida selecione o bloco call.TextToSpeech1.Speak:
Encaixe o bloco do TTS dentro do bloco do botão.
Perceba que o bloco roxo, referente ao nosso TTS, possuí uma lacuna aberta, essa lacuna ( ou abertura) está esperando ser preenchida, então o que será que irá preencher essa lacuna??
A mensagem da caixa de texto!
Agora que você já sabe o básico para mexer nesses bloquinhos... Clique sobre TextBox1 e procure o parâmetro: TextBox1.text.
Agora encaixe na lacuna do TTS e pronto! Nosso aplicativo está prontinho!
Para testar seu aplicativo você pode acessar a Google Play e procurar pelo aplicativo MIT App Inventor:
depois de baixar e instalar o programa, abra-o:
e vá ao menu do site e clique em Connect>>All Conpanion
Logo em seguida será gerado um QR Code, no qual você poderá fazer a leitura pela câmera do seu celular.
Você também pode ir em Build > App(Save .apk to my computer), para fazer o download do seu aplicativo direto no seu pc ou micro.
Bom, aqui termina esse tutozihno, espero que tenha sido útil para você, qualquer dúvida, dicas =, sugestões ou reclamação você pode entar o contato com o nosso site para lhe atermos. Muito obrigado pela atenção.Compartilhe o conhecimento, se você puder compartilhar serve de grande ajuda!
Até a próximo, valeeu!
Nenhum comentário:
Postar um comentário