Mudanças entre as edições de "Oficina 1 de App Inventor"

De MediaWiki do Campus São José
Ir para navegação Ir para pesquisar
 
(28 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
 +
== Antes de iniciar ==
 +
 +
* Caso não tenha conta no gmail abra uma, pois será necessário para acessar o Appinvetor. ([https://accounts.google.com/SignUp?service=mail&hl=pt_br&continue=http%3A%2F%2Fmail.google.com%2Fmail%2F%3Fpc%3Dpt-ha-latam-br-bk-refresh13&utm_campaign=pt&utm_source=pt-ha-latam-br-bk-refresh13&utm_medium=ha Gmail])
 +
* Configure o smartphone que seu grupo recebeu, ative a rede wifi e instale um QR-Code Reader.
 +
 
==Acesse o site do App Inventor==
 
==Acesse o site do App Inventor==
 
*http://www.appinventor.mit.edu/
 
*http://www.appinventor.mit.edu/
*http://beta.appinventor.mit.edu/
+
: Click no link indicado pelo botão '''Start'''. Você esta na página que fornece as informações para os iniciantes do Appinventor, click no link '''Setup Instructions''' e siga as instruções para ''' Build apps with an Android device and WiFi Connection'''.
*você precisa ter uma conta no google para o acesso ao site
 
 
 
==Instale o App Inventor Setup Software==
 
Antes que você possa usar o App Inventor, você precisa instalar um software no seu computador. O software que você precisa é fornecido em um pacote chamado App Setup Inventor. Siga as instruções para seu sistema operacional e em seguida construa o aplicativo demo (Olá Purr) com o telefone conectado ou usando o emulador.
 
: Instruções para Mac OS X
 
: [http://beta.appinventor.mit.edu/learn/setup/setuplinux.html Instruções para GNU / Linux]
 
: [http://beta.appinventor.mit.edu/learn/setup/setupwindows.html Instruções para Windows]
 
FONTE: http://beta.appinventor.mit.edu/learn/setup/index.html
 
 
 
==Iniciando o App Inventor==
 
Antes de começar, certifique-se de ter acesso aos seguintes aspectos: Internet e a conta do Gmail (para fazer login no site do MIT App Inventor)
 
 
 
===Inicie o Designer e criar um novo projeto===
 
Em seu navegador, acesse o site da App Inventor no http://beta.appinventor.mit.edu/. Se esta é a primeira vez que você está usando o App Inventor, você verá uma página de projetos em branco. 
 
#Clique Novo ['''New'''] no lado esquerdo, na parte superior da página.  
 
#Digite o nome do projeto ['''HelloPurr'''] (uma palavra, sem espaços) na caixa de diálogo que aparece, clique em ['''OK'''].
 
 
 
[[Arquivo:new_project.png]]
 
 
 
O navegador irá abrir a página web do Designer, o lugar onde você seleciona os componentes para sua aplicação e projetar a interface do usuário, e deve ficar assim:
 
 
 
[[Arquivo:ai2.png]]
 
 
 
Além do Designer, você precisa iniciar o Editor de blocos, o lugar que você estava definir o comportamento do aplicativo. É uma aplicação separada com sua própria janela, e, portanto, precisamos abrir duas janelas para projetar um aplicativo. Estas janelas estão ligados: as alterações feitas no Designer será imediatamente refletida no Editor de blocos.
 
 
 
===Iniciando o Editor de Blocos===
 
 
 
Quando você clica em Abra o editor de blocos ['''Open the Blocks Editor'''] a partir da janela do Designer, os blocos de arquivo de programa Editor deve baixar e executar.
 
 
 
[[Arquivo:ai3.png]]
 
 
 
Você pode ser solicitado a aceitar o arquivo Editor de Blocos. Clique em "salvar", "permitir", "manter", ou qualquer tipo de botão de aceitação vem (isso depende do seu computador e do navegador). Para usuários do Windows, siga as instruções do assistente de instalação automática sugere. Para abrir o Editor de Blocos:
 
 
 
#Clique em 'OK' (Abra o arquivo de Java)
 
#Clique em 'Sempre confiar em conteúdo deste editor "e abra o arquivo
 
#Clique em 'Run'
 
 
 
Este processo pode levar 30 segundos ou mais. Se o Editor de Blocos não abrir, uma possível razão é que seu navegador não está configurado para executar aplicativos Java transferidas automaticamente. Para levar em conta esta possibilidade, encontrar o arquivo baixado chamado AppInventorForAndroidCodeblocks.jnlp e abri-lo. A janela Editor de blocos deve ser semelhante a esta:
 
 
 
[[Arquivo:ai9.png]]
 
 
 
A grande tela vazia do lado direito é a sua área de trabalho, na qual você colocar blocos para montar o programa.
 
 
 
No lado esquerdo, tem três paletas ('''Built-In''', '''My Blocks''', '''Advanced'''). Cada paleta tem gavetas que armazenam conjuntos de blocos. Ao clicar em uma gaveta, você pode ver todos os blocos armazenados na gaveta. Você pode rolar para baixo para ver mais blocos. A paleta '''Built-In''' contém o conjunto padrão de blocos que estão disponíveis para todos os aplicativos que você construção (por exemplo, definições, texto, listas etc.) A paleta '''My Blocks''' contém blocos específicos, que estão vinculados ao conjunto de componentes que você escolheu para sua aplicação. A paleta '''Advanced''' contém blocos para inventar aplicativos intermediários e avançados, com uma lógica mais complexa.
 
 
 
O Designer é executado a partir do navegador, e o Editor de Blocos é executado em Java, no entanto, eles estão ligados. Por isso, mesmo quando você fechar a janela do Editor de blocos, todas as informações no Editor de Blocos são armazenado no Designer e na conta utilizada para login no site do App Inventor.  Quando você clicar no botão '''Open the Blocks Editor''', um novo arquivo .jnlp é baixado para seu computador, e você precisa abrir o arquivo novamente. Quando um Editor de Blocos se abre, ele irá conter todos os blocos que você programou antes de fechado o Editor de Blocos.
 
 
 
Quando você já construir seu aplicativo, você pode fazer "testes ao vivo" em um dispositivo Android.  Se você não tem um dispositivo Android, você ainda pode ver seu App com o "emulador"  on-screen que vem com o App Inventor (você já instalou quando instalou o App Inventor).
 
 
 
FONTE: http://appinventor.mit.edu/explore/content/first-time.html
 
 
 
==Prepare conexão sem fio==
 
Nesta seção, vamos verificar se o dispositivo Android está pronto para uso com o App Inventor e Wifi. Isso significa ter certeza que seu dispositivo tem a App '''App Inventor Companion''' instalado.
 
 
 
''Recomendamos o uso do Wifi, mas se você não tem acesso a uma conexão sem fio confiável (WiFi), ou prefere ligar o seu computador para o seu telefone com um cabo USB, por favor use as instruções de instalação para conexão USB. Note que os usuários do Windows do sistema USB será necessário instalar drivers USB para o seu dispositivo Android particular. Os usuários de sistemas LINUX devem seguir as instruções próprias mostradas em: XXXX. Os usuários do sistema sem fio não precisa desses drivers.''
 
 
 
===Passo 1: Faça o download e instale o aplicativo AICompanion MIT e instalá-lo em seu dispositivo.===
 
[[Arquivo:mit_aicompanion_qr.png|right|200px]] Instale o aplicativo AICompanion através da loja Google Play. Ao instalar, certifique-se de ativar a atualização automática do aplicativo. Digitalização o código QR mostrado aqui ou [https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion2 clicando aqui] também o levará à App AICompanion MIT na loja Google Play (a maneira mais fácil de instalar no seu aparelho é para digitalizar o código QR, que irá levá-lo para a loja Play).
 
Note que para digitalizar o QRCode, você precisa ter instalado um App para leitura de QRCode. Quais Apps funcionam? No Samsung Tablet 7 use o [https://play.google.com/store/apps/details?id=la.droid.qr&feature=search_result#?t=W251bGwsMSwyLDEsImxhLmRyb2lkLnFyIl0 QR Droid]. Em outros dispositivos precisa testar.  Se funcionar indique aqui.
 
 
 
Você precisa instalar o AICompanion MIT apenas uma vez, e depois deixá-lo em seu dispositivo para que quando você usar o App Inventor.
 
 
 
===Passo 2: Ligue para o dispositivo===
 
 
 
No editor de blocos, clique no botão "'''Conectar ao dispositivo'''" suspensa e escolha a opção "WiFi". Uma caixa de diálogo com instruções e um código de seis letras será exibida. Um código QR também será exibido.
 
[[Arquivo:setup_wifi.png]]
 
 
 
===Passo 3: Inicie o MIT AICompanion App===
 
 
 
Inicie o aplicativo '''MIT AICompanion''' seu dispositivo(você pode lançá-lo como uma aplicação Android normal). Ela terá uma caixa de texto onde você deve digitar o código exibido na caixa de diálogo editor de blocos a partir do passo 2. Uma vez que o código é inserido, pressione "Ligar a App Inventor". Alternativamente, se o seu dispositivo tem uma câmera e um aplicativo de código apropriado para digitalização de QRCode, você pode selecionar a opção "'''Verificar o QR Code'''" botão no aplicativo de depuração e digitalizar o QRCode apresentado e pressionar o botão "'''Conectar ao App Inventor'''".
 
 
 
FONTE: http://appinventor.mit.edu/explore/content/setup-device-wifi.html
 
  
 
==Atividades em classe - siga os tutoriais==
 
==Atividades em classe - siga os tutoriais==
 
*[[Oficina AppInventor I]]
 
*[[Oficina AppInventor I]]
*[http://beta.appinventor.mit.edu/learn/setup/hellopurr/hellopurrphonepart1.html Tutorial Basico do HelloPurr], [http://translate.google.com.br/translate?hl=pt-BR&sl=en&tl=pt&u=http%3A%2F%2Fbeta.appinventor.mit.edu%2Flearn%2Fsetup%2Fhellopurr%2Fhellopurrphonepart1.html Pt]
+
*[http://appinventor.mit.edu/explore/ai2/hellopurr.html Tutorial Basico do HelloPurr]
*[http://beta.appinventor.mit.edu/learn/tutorials/paintpot/paintpot-part1.html PaintPot: (Part 1)], [http://translate.google.com.br/translate?sl=en&tl=pt&js=n&prev=_t&hl=pt-BR&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fbeta.appinventor.mit.edu%2Flearn%2Ftutorials%2Fpaintpot%2Fpaintpot-part1.html Pt]
+
*[http://appinventor.mit.edu/explore/ai2/paintpot-part1.html PaintPot (Part 1) for App Inventor 2]
*[http://beta.appinventor.mit.edu/learn/tutorials/paintpot/paintpot-part2.html PaintPot (Part 2)], [http://translate.google.com.br/translate?sl=en&tl=pt&js=n&prev=_t&hl=pt-BR&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fbeta.appinventor.mit.edu%2Flearn%2Ftutorials%2Fpaintpot%2Fpaintpot-part1.html Pt]
+
*[http://appinventor.mit.edu/explore/ai2/paintpot-part2.html PaintPot (Part 2) for App Inventor 2]
  
 
==Atividades extraclasse - siga os tutoriais==
 
==Atividades extraclasse - siga os tutoriais==
  
*[http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html MoleMash], [http://translate.google.com.br/translate?hl=pt-BR&sl=en&tl=pt&u=http%3A%2F%2Fbeta.appinventor.mit.edu%2Flearn%2Ftutorials%2Fmolemash%2Fmolemash.html Pt]
+
*[http://appinventor.mit.edu/explore/ai2/tutorials Página de Tutoriais do APPInventor],  
 
*[http://www.amazon.com/App-Inventor-Create-Your-Android/dp/1449397484 App Inventor: Create Your Own Android Apps]
 
*[http://www.amazon.com/App-Inventor-Create-Your-Android/dp/1449397484 App Inventor: Create Your Own Android Apps]
 
:*[http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch1HelloPurr.pdf CHAPTER 1 - Hello Purr]
 
:*[http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch1HelloPurr.pdf CHAPTER 1 - Hello Purr]

Edição atual tal como às 09h20min de 22 de abril de 2015

Antes de iniciar

  • Caso não tenha conta no gmail abra uma, pois será necessário para acessar o Appinvetor. (Gmail)
  • Configure o smartphone que seu grupo recebeu, ative a rede wifi e instale um QR-Code Reader.

Acesse o site do App Inventor

Click no link indicado pelo botão Start. Você esta na página que fornece as informações para os iniciantes do Appinventor, click no link Setup Instructions e siga as instruções para Build apps with an Android device and WiFi Connection.

Atividades em classe - siga os tutoriais

Atividades extraclasse - siga os tutoriais

Documentação de Referência


Curso de Engenharia de Telecomunicações