Embedded Files
Atualmente as cooperativas podem ter seus próprios aplicativos para dispositivos móveis, que são ferramentas de comunicação que aproximam cooperados e cooperativa.
Nesta unidade será abordada uma forma de desenvolvimento de aplicativos com o FabApp. Ele será utilizado para a atividade de desenvolvimento de uma aplicativa para a cooperativa modelo de vocês. Abaixo segue um tutorial de como utilizar este site.
1. Acesso à Plataforma Fábrica de Aplicativos
1. Acesso à Plataforma Fábrica de Aplicativos
O primeiro passo é acessar a plataforma, que se encontra disponível no seguinte endereço: www.fabricadeaplicativos.com.br, e você estará diante da tela ilustrada na figura abaixo:
Figura 1. Página principal do Fábrica de Aplicativos.
A partir desta tela o usuário poderá inscrever-se, clicando tanto no retângulo verde “Criar meu app grátis.” ou em “Entrar”, destacados pelos retângulos vermelhos na figura acima. Um registro no site é exigido, podendo ser realizado através de uma conta de email ou do Facebook. Concluindo esta etapa você já poderá começar a criar seu próprio aplicativo.
2. Iniciando um Aplicativo
2. Iniciando um Aplicativo
Depois que sua conta for ativada e você estiver logado na Fábrica de Aplicativos a tela abaixo será exibida:
Figura 2. Página principal do Fábrica de Aplicativos.
Clicando em criar novo aplicativo seremos levado a terceira tela, na qual serão apresentados alguns aspectos do nosso aplicativo:
Figura 3. Criar aplicativo.
Nesta tela iremos clicar em empresas e organizações e escolheremos o layout “Usar Modelo”.
Figura 4. Escolhendo o modelo de layout do aplicativo.
3. Aba de Informações
3. Aba de Informações
Ao escolher esse modelo seremos levados diretamente a página na qual será possível personalizar e testar nosso aplicativo:
Figura 5. Aba de informações do aplicativo.
Na figura 5 estaremos diante da área de trabalho do Fábrica de Aplicativos, na Aba de Informações. Essa área é composta de quatro abas: informações (a que está selecionada ao entrarmos) que contém as informações básicas do aplicativo; conteúdo, que apresenta os conteúdos que serão explorados pelos usuários do aplicativo; visual, que permite alterar os aspectos gráficos do aplicativo em si; e para finalizar, configurações, que apresenta a alguns ajustes em relação ao aplicativo.
Figura 6. Barra de Seleção de Abas.
A Aba Informações permite que selecionemos o nome de nosso app, sua categoria, área de atuação e informações gerais sobre o aplicativo em si. Primeiro, pensem no nome do aplicativo e no que ele irá se focar. Como estaremos fazendo um app para fins educacionais, modifiquem a categoria para “Educação” e a área de atuação para “Projetos Educacionais”. Na descrição coloquem que se trata de um trabalho para o curso técnico em agricultura da Escola Técnica Estadual Canguçu.
4. Aba de Conteúdo
4. Aba de Conteúdo
Ao selecionarmos a aba “Conteúdo” poderemos modificar esse aplicativo para atender nossas necessidades.
Figura 7. Aba Conteúdo.
Vejam que no lado esquerdo existem uma série de opções de abas que podem ser inseridas no seu aplicativo, para atender as suas necessidades:
Figura 9. Abas que podem ser adicionadas.
Para exercitar a utilização, selecione os itens conforme a imagem abaixo:
Para que não tenhamos que fazer isso, basta deletar algumas dessas abas. Inicie deletando as seguintes: blog, e-book, vídeos e links:
Figura 8. Abas a serem inseridas.
Testem as diferentes abas nos aplicativos de vocês. Vejam que entre as possibilidades podemos colocar a comercialização de itens pelo mercado livre, criar um catálogo de produtos ou ainda colocar um link para vídeos do Youtube, o que pode ajudar diferentes tipos de necessidades.
Se vocês tentarem inserir mais, um aviso soará informando que o limite foi atingido. Para inserir mais de 10 abas é necessário contratar um plano pago. Além disso, algumas opções exigem que se tenha o plano pago.
Figura 10. Aviso de limite de abas no plano grátis.
Note que na imagem acima existe um aviso na lateral esquerda, que avisa que o aplicativo atingiu o limite de organização de conteúdo. Isso significa que se quisermos usar este aplicativo deveremos contratar um plano pago.
5. Aba Editor Visual
5. Aba Editor Visual
Nesta aba poderemos modificar todo o visual do nosso aplicativo:
Figura 10. Aba Editor Visual.
Notem que o fundo e a cor da fonte que estamos utilizando no aplicativo prejudicam sua visualização. Por isso iremos personalizar o esquema de cores. Mas antes veremos todas as nossas opções. A primeira da opções é personalizar o layout. Existem muitos ajustes que podemos fazer para personalizar o layout de nosso aplicativo. Podemos modificar o tamanho ou disposição dos ícones, a opacidade do fundo entre outros. Uma lista de todos os ajustes possíveis podem ser observados na figura a seguir:
Figura 11. Opções de personalização do layout.
A segunda opções permite alterar o esquema de cores do aplicativo. Nesta opção, ao clicarmos no segundo esquema de cores a fonte do aplicativo ficará branca e legível:
Figura 12. Opções de cores do app.
Figura 12. Opções de cores do app.
Figura 13. Personalização das cores do app.
Além das cores em geral, existe a possibilidade de personalizar ainda mais o esquema de cores, conforme a figura ao lado. O código refere-se ao esquema de cores hexadecimal. Nele cada cor é relacionada a um código.
Modifique a cor dos títulos para o código “#00FA9A” e a cor dos itens de navegação para “#FFFF00” e veja a cor que fica. Para ajudar, deixarei algumas cores e seus respectivos códigos:
Azul claro: #ADD8E6Rosa: #ADD8E6Índigo: #4B0082Vermelho: #FF0000Lavanda: #E6E6FALima: #00FF00Turquesa: #40E0D0
Figura 13. Personalização das cores do app.
Para conhecer mais cores, visite o site “http://www.erikasarti.com/html/tabela-cores/” onde será possível pesquisar cada cor e seu respectivo código.
A próxima opção permite alterar as imagens do aplicativo:
Figura 14. Opções de imagens do app.
As imagens do aplicativo serão usadas na abertura, ao iniciar o aplicativo ele carrega aquela imagem; no cabeçalho, que fica por padrão no topo do aplicativo e no fundo. É possível inserir, e depois podemos retirar ou alterar qualquer uma das imagens. Se quiserem inserir um fundo, poderíamos colocar um de uma cor personalizada, como um verde escuro.
Como exercício, criem uma nova imagem de abertura e cabeçalho. Vocês podem usar o Paint ou PowerPoint para esse fim. Como modelo, utilizem esse modelo para personalizar sua Imagem de Abertura (ppt ou png), Cabeçalho (ppt ou png) e Imagem de Fundo (ppt ou png). Salvem o arquivo como PNG para ser carregado com máxima qualidade e atentem ao tamanho e dimensões para produzir seus arquivos de imagem.
Figura 15. App com as imagens de abertura, cabeçalho e fundo personalizadas.
A última parte personaliza o ícone do aplicativo. Esse é o ícone que ele apresentará no sistema Android e iOS, mesmo que seja feito na versão grátis que não utiliza a Google Store e a Apple Store. Procurem ícones ou criem o seu próprio para personalizar o aplicativo que estão criando através deste modelo (ppt ou png).
Figura 16. Opções de ícone do app.
6. Aba de Configurações
6. Aba de Configurações
A última aba permite fazer ajustes finos na configuração do app que estão desenvolvendo:
Figura 16. Aba Configurações do app.
Explorem essas opções de ajuste do App e principalmente “Termo de Uso” que deve ser adicionado a todos os aplicativos, de forma a definir quais os direitos e deveres dos usuários e dos desenvolvedores (que no caso, serão vocês).
Terminado o aplicativo, basta clicar no botão roxo “Publicar” e ele poderá ser acessado:
Figura 17. Página de publicação do app.
O aplicativo desenvolvido até agora funcionará como uma página de internet, se estivermos usando o plano gratuito. Ela poderá ser acessada pelo link ou através do QR Code. Ao abrir no dispositivo móvel ele poderá ser salvo através do seu navegador (por exemplo o Google Chrome para Android) e então salvar na tela inicial, onde ele ficará como um ícone e abrirá como um aplicativo:
Aplicativo aberto pelo Navegador
Salvando na Tela Inicial
Como fica na Tela Inicial
Aplicativo aberto pela Tela Inicia
Figura 18. Salvando o app.
Agora que já criamos um exemplo, devemos criar um do zero. Clique na seta no canto superior esquerdo e volte para a tela inicial. Clique em criar novo e faça um usando o layout em branco. Sempre que tiver dúvidas abra em uma nova aba e veja como foi feito no nosso modelo. Além disso, podemos ainda criar novos aplicativos com base nos modelos fornecidos pelo próprio site, que possui diversos modelos para cada necessidade.
Boa sorte e exercite, pois só assim poderemos aprender a desenvolver um app na Fábrica de Aplicativos!
Report abuse