Mudanças entre as edições de "Oficina 4 de App Inventor"
Linha 56: | Linha 56: | ||
− | '''Antes de testar, entre na câmera e diminua a resolução da foto para o mínimo possível. Isso evitará problemas de sobrecarga no servidor e na rede.''' | + | '''Antes de testar, entre na câmera e diminua a resolução da foto para o mínimo possível. Isso evitará problemas de sobrecarga no servidor e na rede. Além de facilitar o teste.''' |
Edição das 22h11min de 1 de junho de 2014
Objetivos
Preparar as equipes para o desenvolvimento do projeto integrador. Mais especificamente, prepará-las para o uso do App Inventor com:
- uso da câmera
- implementação com múltiplas telas (screen) e troca de informação entre elas usando o TinyDB
- compartilhamento de fotos usando a infra-estrutura criada no IFSC
APLICAÇÃO-EXEMPLO de uso de componentes de interesse do Projeto Integrador
Na sequência desenvolveremos uma pequena aplicação que demonstra o uso da câmera, do TinyDB para troca de informações entre múltiplas telas e compartilhamento de fotos usando a infra-estrutura criada no IFSC.
Parte 1 - Preparação dos componentes visuais e não visíveis
Nesta etapa colocaremos todos os componentes visuais necessários a aplicação, conforme a imagem abaixo. Além disso, adicione os componentes "não visíveis": "Web" (aba "Connectivity"), "Camera" (aba "Media") e "TinyDB" (aba "Storage").
Observe os nomes dos componentes. Para padronização usamos lbl (label) e btn (button) como iniciais de rótulos e botões. Todos possui a largura (width) configurada como "Fill Parent" e altura (height) automática, com excessão da "Image1" que possui altura de 200pixels para limitar o tamanho da foto. Verifique se essa configuração é compatível com o seu celular.
Crie uma nova tela ("AddScreen") e adicione todos os componentes visuais necessários a aplicação, conforme a imagem abaixo. Além disso, adicione o componente "não visível""TinyDB" (aba "Storage"), que será utilizado para compartilhar informações entre as duas telas da aplicação.
Parte 2 - Fotografando e escolhendo a foto
- É necessário definir algumas variáveis globais que serão utilizadas na aplicação":
- strACCESSKEY: Senha para acessar a infra-estrutura criada no IFSC para compartilhamento da foto.
- strFilename: Nome da foto selecionada.
- strPath: Caminho para encontrar a foto dentro do sistema Android
- Abaixo verifique os blocos necessários para fotografar a partir do botão "btnFoto" e salvar a localização da foto depois do evento gerado pela câmera chamado ".AfterPicture":
Parte 3 - Enviando a foto
Nessa etapa enviaremos a foto ao servidor do IFSC quando o botão "btnEnviar" for pressionado. O componente usado para o envio é o "Web1" que se comunica com um script no servidor e faz o upload da foto. O nome da foto será salva no "TinyDB1" para ser usado pela próxima tela que mostrará a foto recuperada do servidor. Esses passos são mostrados na figura abaixo.
Depois do comando de envio, o componente "Web1" é usado para verificar se o envio foi de fato foi bem sucedido (resposta do servidor deve ser "200"). Se foi bem sucedido, libera o botão "btnVerificar" para que possamos fazer o download da foto (na outra tela – "Screen2") e completar o ciclo de compartilhamento. O botão verificar faz a troca para segunda tela ("Screen2")
Parte 4 - Recebendo a Foto
Selecione a "Screen2" e programe os blocos abaixo. A chamada da "Screen2" é feita após o click do botão "btnVerificar", programado na seção anterior. Depois que ele é pressionado, a "Screen2" inicializa. Aproveitamos esse evento ("Initialize") para programar o download da foto do servidor. O TinyDB é usado para recuperar o nome da foto salvo na "Screen1". O botão padrão "Voltar" do Android é programado para retornar a "Screen1".
Antes de testar, entre na câmera e diminua a resolução da foto para o mínimo possível. Isso evitará problemas de sobrecarga no servidor e na rede. Além de facilitar o teste.