Tutorial de uso da Easy Easy Apps: Criando seu Aplicativo!

Tutorial de uso da Easy Easy Apps: Criando seu Aplicativo!

Nesse artigo do Blog da Easy Easy Apps apresentaremos um tutorial completo de como usar nossa plataforma de criação de aplicativos.

Você irá aprender como criar seu próprio app, totalmente personalizado, sem precisar saber nem um pouco de programação. Todas as configurações são simples e intuitivas e serão explicadas passo-a-passo.

Vamos a primeira etapa!

Se cadastrando na Easy Easy Apps

Para realizar o seu cadastro na plataforma, clique aqui.

Na página que irá abrir, clique na aba “Criar conta” e comece a preencher os dados solicitados:

  • E-mail;
  • Senha;
  • Confirme sua senha.
cadastro-easy-easy-apps

Por fim, clique no botão “Criar Conta”.

Criando o seu primeiro aplicativo

Terminado o processo de criação de conta você será redirecionado para o “Painel de Controle” da Easy Easy Apps, onde poderá iniciar a criação de seu primeiro aplicativo. Futuramente, poderá também observar dados referentes aos seus aplicativos criados. Por enquanto serão exibidas informações de exemplo, no lado direito desta página.

Para criar seu primeiro app, em “Meus Aplicativos”, no campo “Nome Aplicativo” (caso esse campo não esteja aparecendo, clique no botão “Criar um novo aplicativo”) digite o nome do app que irá ser criado e em seguida clique no botão “Criar”.

painel-de-controle-easy-easy-apps

Agora teremos acesso a página de edição.

Escolhendo um modelo e visualizando o resultado

Ao carregar a página para edição do app, será exibida uma janela com diversas opções de modelos de aplicativos pré-configurados, que se diferenciam por nicho. Por padrão estará selecionado a categoria “Todos”, mas se preferir pode navegar por outras categorias específicas, localizadas na lateral esquerda.

Recomendamos que escolha o modelo que mais se aproxima de seu negócio e objetivos. Para ativá-lo, basta clicar sobre ele e na mensagem que será exibida, clique em “OK”. Como exemplo, para esse tutorial escolhi a categoria “Empresarial” e o template “Empresa”.

modelos-apps

Então, depois de selecionar o template que mais se adequa a seu negócio, poderá executar as alterações que achar necessário para sua personalização.

E o melhor, a Easy Easy Apps possibilita a visualização em tempo real das mudanças aplicadas. Isso é possível por meio de um “Celular Virtual” localizado no lado direito da página.

Mas antes, aproveite para simular o uso das funcionalidades do modelo escolhido. Basta utilizar o Celular Virtual, pois ele também é interativo.

celular-virtual-app

Nos próximos passos explicaremos como fazer diversas alterações interessantes.

Entendendo o processo de edição do aplicativo

Mesmo que todas as funcionalidades que estejam aparecendo no template que você escolheu, sejam exatamente as que precisa, ainda sim você terá que editar o app. Pois será necessário inserir conteúdos específicos, como uma logomarca por exemplo.

Por isso, é importante conhecer as opções e o funcionamento das edições. Mas não se preocupe, é tudo muito intuitivo!

Temos cinco abas disponíveis para mudar o que for necessário no aplicativo, até chegar ao ponto da publicação. A forma de acesso a cada uma dessas abas é por meio do menu lateral esquerdo ou do menu superior da página.

design-aplicativo

O recomendado, é seguir a sequência em que se encontram, levando em consideração que já estamos na primeira delas (a aba de Design).

Segue um breve resumo de cada uma.

  • Design: nessa aba é possível definir a aparência principal do app, definindo-se a imagem inicial, o layout referente a forma como os ícones das funcionalidades do aplicativo serão mostrados e mais algumas opções.
  • Cores: essa aba possui todas as configurações de cores disponíveis, como: a cor dos botões, ícones, página inicial, cabeçalho, etc.
  • Recursos: aba onde podemos inserir, remover e editar cada função do aplicativo que estamos criando.
  • Aplicativo: aqui devemos definir o ícone do app e o ícone das notificações, caso você decida utilizar essa função.
  • Publicação: por fim, nesta aba é necessário preencher informações importantes para poder realizar a publicação do aplicativo. Informações como o nome, descrição e palavras-chave, por exemplo.

Agora iremos abordar cada uma delas, de forma mais detalhada.

Design: Definindo a aparência de seu app

Uma das funções da aba Design já utilizamos na parte inicial do tutorial, que é a alteração de modelo. Além dessa opção, é possível modificar o layout do app, que basicamente é a maneira como os ícones dos recursos do aplicativo são exibidos.

Para realizar essa mudança, clique em “Alterar seu layout” e abrirá uma janela com diversas opções. Escolha a que mais te agrada ou mantenha a original.

layout-aplicativos

Feito sua escolha, será possível modificar configurações extras do layout selecionado.

Essas configurações são exibidas ao lado do Celular Virtual, em “Opções de Layout”, variando as possibilidades de alterações dependendo do layout escolhido.

opções-do-layout-app

Outra opção da aba Design é a inserção de imagens de fundo, tanto na vertical (Portrait), como na horizontal (Landscape).

Recomendamos escolher uma imagem que passe a identidade visual da marca.

página-inicial-aplicativo

Abaixo das imagens de fundo, existem mais três opções que podem ser marcadas:

  • Use the homepage image as background in all features: se marcar essa opção, a imagem de fundo que escolheu como padrão para página inicial do app, aparecerá também ao fundo em todas as outras funções/recursos do app.
  • Ocultar iOS barra de status: no caso de marcar essa opção, a barra de status (onde aparece hora, bateria, notificações, etc) do IOS o sistema dos celulares da Apple, ficará oculta. Pode ser interessante essa opção para tentar evitar que os usuários de seu aplicativo se distraiam enquanto utilizam ele.
  • Ocultar a barra de status do Android: essa opção possui basicamente a mesma função da anterior, porém diz respeito ao sistema Android, utilizado na maioria dos smartphones.
opções-extras-aplicativos

Por último, podemos escolher um país. Informação importante para definição da moeda (real, dólar, euro, etc.).

E depois o estilo de letra do app.

escolha-seu-país-app

Cores: Escolhendo para o aplicativo

Mais um processo extremamente simples, basta clicar nas cores que deseja modificar e na pequena janela que será exibida, selecionar a nova cor desejada. Pronto, ela será aplicada e o Celular Virtual mostrará as mudanças.

cores-dos-apps

Vale destacar que na parte inferior de cada cor, existe uma opção para regular a intensidade para mais transparente ou opaca, variando de 0 a 100.

Recursos: Diversidade de opções

Na aba Recursos você poderá selecionar aqueles que mais se encaixam nos seus objetivos.

Se você é dono de um restaurante ou uma loja, por exemplo, um ótimo recurso para ser inserido no aplicativo de seu negócio é o “Catálogo”. Através dessa função, poderão ser cadastrados para exibição no app, todos os pratos/produtos comercializados.

Entre todas as funcionalidades disponibilizadas, encontre a de Catálogo. Para adicionar, clique sobre ela.

recursos-aplicativos

Após o novo recurso ser adicionado, é preciso apenas configurar. As opções são extremamente intuitivas.

A primeira opção é a alteração do nome desse recurso, para ser exibido no app. Em um restaurante, um bom nome seria Cardápio, mas você pode colocar qualquer outro ou manter da forma que está.

Para alterar, é muito simples, você deve escrever o nome que deseja na caixa de texto “Nome da página”.

Agora é necessário inserir os itens que serão demonstrados neste recurso.

Inserindo uma Categoria

Primeiro, na aba “Catálogo”, clique no botão “Adicionar uma categoria”. Depois onde estiver escrito “New category” podemos escrever “Pratos”, seguindo com o exemplo de um restaurante.

configurações-recurso-app-1

Você perceberá que em ambos os lados do campo onde inserimos o nome da categoria, há ícones clicáveis. No lado esquerdo tem apenas um, como se fosse flechas em forma de uma cruz.

Este ícone serve para movimentar as categorias, no caso de ter mais de uma, deixando-as acima ou abaixo de outra, como você preferir. Também serve para tranformar uma categoria em uma subcategoria, movimentando-a para baixo e para o lado direito da categoria que estiver acima e mais a esquerda.

Fazer isso é simples. Clique sobre o ícone e mantenha o botão do mouse pressionado, enquanto o arrasta para a direção desejada.

Para exemplificar criarei uma nova categoria clicando no botão “Adicionar uma categoria”, a nomearei como “Sobremesa” e a colocarei como uma subcategoria de Pratos. Como já estará abaixo da categoria que foi criada primeiro, precisarei apenas a arrastar para o lado direito, ficando conforme demonstrado na imagem abaixo.

configurações-recurso-app-2

No lado direito dos nomes das categorias, tem mais dois ícones. O segundo é em formato de “x”, e serve para excluir a categoria. Para fazer isso é só clicar sobre ele e depois na mensagem que irá abrir, escolher a opção “Yes, delete!”.

Se quiser desistir clique em “No, go back!”. Lembrando que depois de excluída não a como recuperar e serão excluídos juntos quaisquer subcategorias abaixo dessa, assim como os produtos que estiverem cadastrados nela.

E é exatamente o que o primeiro ícone à direita, em formato de carrinho de compras faz: registra produtos em uma categoria.

configurações-recurso-app-3

E será isso que faremos agora!

Inserindo um Produto

Após clicar no ícone correspondente (no formato de carrinho de compras), irá aparecer as opções de cadastro:

  • Nome do produto;
  • Descrição: onde você pode formatar o texto de forma semelhante ao Word;
  • Preço;
  • Adicionar uma imagem;
  • Enable product formats?: opção que pode ser marcada para adicionar formatos extras para um mesmo produto.

Então preencha como desejar e clique no botão “Salvar”.

configurações-recurso-app-4

É possível ainda alterar o design da visualização do catálogo e a imagem de fundo, clicando na aba Design e fazendo as alterações em cada uma das respectivas opções: Design (clique em uma das três opções de layout disponíveis) e Fundo (clique nos botões em azul para inserir imagens de fundo). Por último salve.

configurações-recurso-app-5

Essas são as opções de configurações do recurso Catálogo.

Excluindo e Movimentando os Recursos

Se acontecer de inserir uma página de recurso e depois desistir da ideia, para excluir ela é muito simples.

Basta passar o cursor do mouse sobre a página do app que quer remover e aparecerá um pequeno “x”, clique nele, confirme a exclusão e pronto. Está feito!

Ao passar o cursor, irá perceber que também aparecerá um ícone parecido com duas pontas, cada uma para um lado diferente. Se clicar e manter pressionado o botão do mouse poderá arrastar a função selecionada para a posição que quiser.

É uma boa opção, pois a ordem em que essas funcionalidades aparecem na aba Recursos, será a ordem que será exibida no aplicativo pronto. Assim você poderá deixar da forma que achar melhor.

configurações-recurso-app-6

Considerações Extras sobre os Recursos do App

Algumas dessas funcionalidades podem adicionar automaticamente outros recursos, como por exemplo “Fidelidade” + “Minha Conta”.

Situações assim acontecem quando existe alguma dependência entre as duas funções. No caso do recurso de Fidelidade por exemplo, é necessário informações de um usuário cadastrado e portanto, inclui a funcionalidade de Minha Conta.

Bom, esse foi apenas um exercício para exemplificar o funcionamento de uma das funcionalidades disponíveis na aba de recursos. No entanto, temos mais de 40, portanto não será viável nesse tutorial explicar o funcionamento de todas.

Porém com essa base, provavelmente você conseguirá configurar as outras sem nenhum problema. Além disso estamos sempre dispostos a tirar qualquer dúvida que possa ter.

Aplicativo: Ícones e inicialização

A aba “Aplicativo”, é dividida em três partes.

1 – Ícone do Painel: onde deverá ser selecionado uma imagem que será exibida como ícone do seu aplicativo quando estiver instalado em algum celular. Para trocar a imagem padrão, clique no botão de cor rocha.

ícone-painel-aplicativo

2 – Android Push: referente ao ícone que será exibido quando enviar alguma notificação para ser entregue aos usuários do app.

Obs.: Caso não tenha configurado esse recurso, pode ignorar a inserção de uma imagem aqui. E além da imagem e do ícone (que deve ser branco e com transparência), também pode ser alterado a cor.

push-notifications-apps

3 – Imagem de Inicialização: como o próprio nome faz referência, é a imagem exibida na inicialização do app.

imagem-inicial-app

Publicação: Seu app disponível na Google Play e/ou Apple App Store

Chegamos na aba final e último passo antes de publicar seu aplicativo. O que significa que você criou, personalizou e configurou seu próprio aplicativo sem precisar escrever uma única linha de código!

Observe que em “Informações Gerais” automaticamente já haverá campos preenchidos. Sendo que não é recomendado modificar o “Id Do Bundle” e o “Package Name”. Se quiser altere apenas o “Nome do Aplicativo”.

informações-gerais-aplicativos

Agora se desejar rentabilizar seu app com propaganda, preencha as informações referentes ao seu AdMob ID. Se não quiser monetizar com anúncios, ignore essa parte.

E se não tiver um AdMob ID e nem saber do que se trata, clique aqui para mais informações sobre a AdMob.

rentabilizar-aplicativo

Por fim, se ainda não assinou um plano da Easy Easy Apps, verá o seguinte aviso: “Terá de completar a subscrição de um plano antes de baixar os arquivos de publicação”.

publicação-app

Para fazer isso, volte ao início desta página e clique no botão vermelho “Pronto? Publicar meu app!”.

botão-publicar-aplicativo

Então será carregado a página para assinatura. Preencha as informações solicitadas e escolha o plano que mais te agrada.

Conclusão do Tutorial

Realizado os passo que descrevemos acima, parabéns!!!

Você passa a ter todo o mundo de possibilidades que a Easy Easy Apps te oferece e poderá publicar seu aplicativo tanto na Google Play para celulares que usam Android, como na App Store para celulares da Apple que usam IOS.

Para isso, por favor, leia o artigo que criamos explicando o processo de publicação completo para nossos usuários.

Ficamos à disposição para quaisquer dúvidas, então aproveite para deixar um comentário abaixo.

Obrigado por ler nosso tutorial! 🙂

Author: Vasco

Vasco Andrade e Silva é um empreendedor de base tecnológica. Co-fundou a sua primeira empresa de software enquanto concluía o MSc em Engenharia de Software em 2008. Em 2013 criou a Easy Easy Apps com o objetivo de democratizar o desenvolvimento de aplicações móveis – porque acredita que todos devem poder fazer parte da revolução mobile.