Como fazer uma app sem saber programar na

Fábrica de Aplicativos
Carlos Pinheiro, 2019

Índice

1. Registo .................................................................................................................. 2
2. Definir a estrutura da app....................................................................................... 5
3. Adicionar conteúdo à app. ................................................................................... 10
4. Personalizar a app ................................................................................................ 16
5. Publicar a app ...................................................................................................... 18
1. Registo
1.1 Entre em https://fabricadeaplicativos.com.br

1.2 Clique em Entrar no campo superior direito.

1.3 Clique em «Ainda não tem cadastro? Crie sua conta» (Em
alternativa, pode entrar com a sua conta de Facebook ou Google).

2
1.4 Preencha o seu email e clique em Avançar.

1.5 Defina uma senha e clique em Avançar.

3
1.6 Preencha os campos seguintes com os seus dados pessoais (nome e
número de telefone – deverá, para este último passo, seleccionar o
país).

4
2. Definir a estrutura da app

2.1 Escolha a categoria da app (por exemplo, Educação).

2.2 Escolha o segmento da app (por exemplo, Projetos Educacionais).

5
 2.3 Clique em Avançar.

2.4. Escolha o logótipo da App clicando em Clique ou Arraste o

arquivo. (Pode saltar esta etapa e escolher mais tarde o logótipo.
Nesse caso, clique em Definir depois).

2.5. Se a imagem não tiver as dimensões predefinidas, ser-lhe-á

pedido para cortar a imagem. Clique em Confirmar.

6
 2.6 Clique em Avançar.

2.7 Defina o nome da App e clique em Avançar.

7
 2.8 Defina a partir de que base vai criar a sua app. Vamos escolher
Layouts.

2.9 Escolha o Layout que melhor representa a sua ideia. Neste

exemplo, vamos escolher o primeiro da esquerda (Grade duas
colunas).

8
 2.9 Neste passo irá escolher o esquema de cores da app. Estas cores
podem ser alteradas posteriormente.

2.10 Clique em Continuar editando.

9
3. Adicionar conteúdo à app

O ambiente de trabalho seguinte apresenta 4 separadores:

1 3

2 4

1. Informações gerais
2. Conteúdo do App
3. Editor visual
4. Configurações

O separador Informações gerais apresenta algumas das informações já

fornecidas, necessitando apenas de se preencher o campo «Descreva o
seu app».

10
Iremos agora para o separador Conteúdo do App.

Na coluna da esquerda encontra diferentes categorias de conteúdo que

pode adicionar à app (na versão gratuita nem todas as categorias podem
ser adicionadas). Estas categorias chamam-se abas.

Vamos escolher a aba «Lista» - procure-a na coluna da esquerda e,

passando o rato por cima do ícone, clique no sinal +.

11
A configuração do conteúdo da aba é feita na coluna da direita. A coluna
central apresenta a pré-visualização do conteúdo.

Vamos começar por definir o ícone da aba, clicando no respectivo botão,

para fazer o Upload da imagem.

O ícone deverá ser preferencialmente de fundo transparente. Poderá

encontrar uma grande variedade de ícones gratuitos em
https://www.flaticon.com

12
A imagem do ícone deverá ter 250x250 pixeis. Caso tenha um tamanho
diferente, terá de ser cortada. Clique em Confirmar.

Iremos de seguida definir o título da aba. Neste exemplo, demos o título

de Filmes Históricos.

13
A secção seguinte permite alterar a imagem de fundo do ícone. Neste
exemplo, não iremos fazer qualquer alteração.

Passamos para a secção seguinte, Adicionar item. É aqui que se adiciona

o conteúdo deste tipo de aba, por exemplo texto e imagens.

Ao clicar em Adicionar item, abre-se a janela do item, que tem do lado

esquerdo uma janela de pré-visualização.

Aqui deveremos preencher o Título do item, uma breve Descrição

(opcional), fazer o Upload de uma imagem e adicionar Conteúdo, por
exemplo sob a forma de texto.

14
Depois de preenchidos todos os campos, clique em Salvar alterações.
Regressa-se ao ecrã da aba, onde podemos, por exemplo, adicionar mais
itens à aba, repetindo o processo. Neste exemplo, a aba já tem 3 itens:

Para adicionar outra aba, repete-se o processo: selecciona-se o tipo de

aba na janela do lado esquerdo e clica-se em + para adicionar. O
processo de adicionar conteúdo à aba pode ser diferente de acordo com
o tipo de aba.
Vamos ver agora o separador seguinte, o Editor Visual.

15
4. Personalizar a app

A personalização da app faz-se no editor visual.

O Editor visual tem três janelas. A janela do lado esquerdo permite
seleccionar o tipo de personalização e a janela do lado direito apresenta
as opções do tipo de personalização seleccionado. A janela central
apresenta a pré-visualização.

A opção Personalizar layout permite escolher a organização das abas no

ecrã inicial, se as abas apresentam ou não texto, o tamanho do texto,
etc.

A opção seguinte, Cores do App, permite escolher as cores do

cabeçalho, dos títulos, do fundo, etc.

16
A opção Imagens do App permite definir uma imagem abertura, uma
imagem de cabeçalho e uma imagem de fundo.

A última opção permite adicionar o ícone da app, se ainda não o tiver

feito, e ainda um ícone para notificações.

O separador Configurações permite diversas configurações, mas que

apenas estão disponíveis nas versões pagas da plataforma.

17
5. Publicar a app

Depois de concluída, chegou o momento de publicar a app. Para isso,

basta clicar no botão Publicar.

A app fica disponível sob a forma de Web App, com um endereço web e
um qr code para download.
Existe também a opção de publicar na Play Store, para dispositivos
Android (obriga a uma Conta de Desenvolvedor Google Play e outros
requisitos) ou na Apple Store, para dispositivos iOS (obriga à contratação
de um plano Fab App e outros requisitos).

Mesmo depois de publicada, é possível editar a app e fazer alterações,

repetindo depois o processo de publicação.

18