Como fazer - Usar o bloco Form

O bloco Form dá-lhe a capacidade de projetar um formulário personalizado para que os usuários do seu aplicativo possam enviar dados para você. Ao usar o bloco Form, a AppMachine vai cuidar do armazenamento de dados, para que você não terá que hospedar um web service.

Neste artigo vamos guiá-lo através do processo de adicionar e configurar o bloco Form.

Como fazer

Neste exemplo vamos criar uma aplicação simples para um concurso de fotografia. Assim, os usuários do aplicativo serão capazes de fazer upload de sua foto, juntamente com o seu nome, uma descrição da foto, etc.

1. Vá para http://design.appmachine.com/ e faça login.
2. Abra um app existente ou crie um novo app para o qual irá adicionar o bloco Form.
3. Clique no botão + Bloco.
4. Selecione a guia Pro.
   
5. Selecione o bloco Form.
   
6. Clique em Novo Bloco.
7. Dê um nome au seu bloco, por exemplo "Envie sua foto", e clique em Terminar.
   
   
   
8. O bloco vai ser adicionado e você vai ver o Editor de Formulário. O editor permite arrastar controlos para seu formulário. Você será capaz de configurar cada controle e personalizar a aparência, o comportamento e o nome do controle. O botão enviar (submit) já está disponível na tela.
   
9. Vamos começar com algumas informações básicas sobre o participante, por isso vamos adicionar um campo de texto. Para adicionar um controle, passe o mouse sobre o controle, clique e arraste-o para o telefone mock-up ao lado da lista de controles, acima do botão Enviar.
   
10. Selecione o controle de campo de texto, clicando nele.
    Nota: Quando você selecionar um controle, você será capaz de ver todas as opções de configuração para o controle no painel esquerdo. Use estas opções para personalizar seus controles e formulário.
11. Depois de ter selecionado o campo de texto você precisa ajustar algumas propriedades:
• Altere o Label para "Seu nome".
  
• Altere a Watermark para "Por favor, insira o seu nome".
  
• Altere o Name para "NomeParticipante".
  
12. Ao projetar seu formulário você vê o resultado ao vivo através do simulador no lado direito da sua tela. Isto é realmente útil ao trabalhar com margens e cores.
    
13. Precisamos adicionar alguns controles adicionais para o formulário do concurso, então repita os passos acima e adicione os seguintes controles:
• Adicione um Image Picker: isso vai permitir que o usuário selecione uma imagem de seu rolo da câmera ou tire uma foto diretamente de dentro do aplicativo. Altere o Label para "Sua foto" e mude o nome para "Foto".
• Adicione um Date and Time Picker e altere o Label para "Quando você tirou esta foto?" e mude o nome para "DataTirada".
• Adicione um Text box e mude o Label para "Descreva a sua foto" e mude o nome para "Descrição".
14. Agora o formulário deve estar assim:
    
15. Tudo bem, estamos quase lá. Clique em Salvar para salvar as alterações até agora.
16. Selecione a guia Advanced.
    
17. Se você gostaria de receber um email de notificação quando o usuário envia o formulário, preencha seu endereço de e-mail na seção "Send results to".
    
18. Clique em Salvar novamente, e está tudo pronto para o lançamento do concurso de fotografia!
19. Quando você abre o aplicativo usando o Previewer da AppMachine você vai ser capaz de usar a câmera do seu dispositivo para tirar uma foto ou fazer upload de uma de suas fotos existentes.

Analisando os resultados

Você pode ver os formulários preenchidos na guia Data. Todos os resultados serão mostrados em uma grade. Em breve, vamos adicionar a capacidade de exportar os resultados para um documento Excel.