Você está na página 1de 35

DE PONTA A PONTA

APRENDENDO
APPSHEET
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 01

ÍND I CE

Introdução 02

A diferença entre AppSheet e Excel 03

Que tipos de Apps podemos criar? 04

O que preciso saber para criar sistemas 06


com AppSheet?

Como criar uma conta 07

Como criar um banco de dados 08

Como criar um sistema através do


11
banco de dados

Como deixar o editor em portuguê 14

Ajustando a visualização do editor 16

Apresentando os principais menus 17

Configurando nossos dados 22

Cadastrar um cliente para demostração 25

Configurando visualizaçõe 26

Como testar o seu sistema 30

Como instalar AppSheet em


31
dispositivos móveis

Como compartilhar seu sistema 32

Como aprender mais? 33


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 02

INTR O D U Ç Ã O

Bem-vindo a SkillKey, a maior escola de AppSheet do Brasil! Nossa


missão nesse e-book é auxiliar você a começar à desenvolver
aplicativos utilizando a AppSheet da maneira mais rápida e fácil.

Vamos te passar algumas dicas de como iniciar e como essa


plataforma funciona, além de um tutorial para que você inicie a
criação do seu primeiro aplicativo.

Vamos iniciar com algumas informações


sobre essa ferramenta.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 03

A D IFEREN Ç A E N TR E AP P S HE E T
E EXC EL

Quando você pensa em AppSheet é impossível não lembrar-


mos das Planilhas digitais. Isso por que a AppSheet é uma ferra-
menta que tem como princípio a transformação das planilhas
em nuvem em sistemas e aplicativos que tornam mais fácil o
uso e tratamento dos seus dados.

A AppSheet foi criada e pensada para que você pudesse visu-


alizar suas informações e editá-las de maneira mais orgãnica
do que em uma planilha, onde as informações normalmente
estão todas presas a uma visualização muito engessada e
padronizada.

Com isso podemos dizer que a principal diferença entre a


AppSheet e o Excel é a facilidade para o usuário, uma vez que após
construído um app com a ferramenta, os usuários desse app
podem adicionar, editar e excluir as informações com mais segu-
rança e praticidade, e com uma visualização que transforma sua
experiência de uso em algo mais natural nos dias de hoje.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 04

QUE T IP OS D E A P P S
PODEM OS C RIA R ?

Com a AppSheet nós podemos desenvolver uma série de apli-

cativos diferentes, dentre eles Sistemas de Gestão, CRM, Galeri-


as de fotos e vídeos, Cardápios, Business Intelligence, entre
muitos outros.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 05

O foco principal da plataforma são sistemas para gerenciamen-

to interno de empresas e administração dos dados, mas ela


não se limita somente a isso, basicamente a regra é: Se você

pode transformar em planilha, então você pode gerar um App..


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 06

O QUE P REC IS O SAB E R PARA CR I AR


SISTE M AS CO M A P P S H E E T?

Diferente da programação tradicional a AppSheet é uma ferramenta


NO-CODE e isso torna o seu uso muito mais acessível e simplificado.

No-code é um nova maneira de desenvolver sistemas web e mobile


sem programação. O desenvolvimento desses sistemas é em sua
maioria mais ‘’visual’’ através de um editor que lhe da uma série de
opções para criar suas soluções e automações de maneira rápida e
prática.

Dito isso, para que você possa iniciar no mundo do desenvolvimento


utilizando a AppSheet você só precisa saber como utilizar um com-
putador e como criar uma planilha.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 07

COM O C RIA R U MA CO N TA

Para iniciar o desenvolvimento é necessário ter uma conta na


AppSheet.

Para criar sua primeira conta basta acessar


https://about.appsheet.com/home/ e fazer login com um dos domí-
nios de sua preferência (Aqui recomendamos o uso de contas
Google para facilitar no seu primeiro desenvolvimento e seguir
com facilidade as demais partes desse tutorial).
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 08

COM O C RIA R U M B AN CO DE DA DOS

Para iniciar seu primeiro aplicativo precisamos de um banco de


dados, mas aqui não é nada complexo e também não é necessário
usar programação, vamos criar nosso primeiro banco de dados utili-
zando Google Planilhas.

Acessando o site https://docs.google.com/spreadsheets/u/0/?tgif=d


e realizando o login com o mesmo e-mail da nossa conta AppSheet,
vemos o painel inicial do Google Planilhas. Aqui vamos começar
uma nova planilha em branco.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 09

Agora precisamos configurar essa planilha, para essa

aula iremos desenvolver um sistema simples de cadas-


tro de clientes, então vamos começar nomeando essa

planilha como ‘’Cadastro de Clientes”.

Feito isso podemos começar a configurar os dados


que queremos inserir. Na primeira tabela que foi

criada (Página 1) vamos renomeá-la para ‘’Cliente’’.


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 10

Agora vamos inserir os nomes em cada coluna da primeira linha


para criarmos um ‘’Cabeçalho’’: ID, Nome, Email, Celular, Endereco*

**É importante no nome dessas colunas não inserirmos acentuação, caracteres


especiais ou espaços para facilitarmos a criação do nosso sistema.

Com isso temos o nosso primeiro banco de dados já finalizado,


você pode alterar a cor do cabeçalho caso deseje. Agora no nosso
próximo passo já podemos criar nosso sistema.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 11

COMO C RIA R U M S I STE M A


ATRAV ÉS D O B A N CO DE DADOS

Após a criação do banco de dados devemos acessar esse site

https://www.appsheet.com/home/apps e fazer login com o


mesmo e-mail que criamos o banco de dados.

Feito isso podemos clicar no botão ‘’CREATE’’ no canto superi-

or esquerdo e escolher a opção App > Start with existing data.


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 12

Com isso uma aba com o nome ‘’Create a new app’’ será demonstra-
da, aqui podemos definir o nome do nosso app e sua categoria. Vou
selecionar ‘’Sales & CRM” como categoria e nomear nosso aplicativo
como ‘’Cadastro de clientes”.

Após isso uma tela irá aparecer onde podemos selecionar uma
conta do google drive para escolher nosso banco de dados, aqui
basta clicarmos no e-mail que fizemos nosso banco de dados e bus-
carmos pela planilha que criamos.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 13

Ao selecionarmos a planilha seremos redirecionados para uma


nova tela onde temos o editor do nosso aplicativo e todas as config-
urações que podemos realizar no nosso novo aplicativo.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 14

COM O D EIXA R O E DI TO R
E M PO RT UGU Ê S

Caso você não tenha familiaridade com a língua inglesa e


queira utilizar essa ferramenta em português é bem simples.

Dentro do editor você pode ativar o Google Tradutor para que


toda a ferramenta seja apresentada na linguagem de sua
preferência. Por ser uma ferramenta Google sua tradução está
em constante processo de melhoria tornando seu uso cada vez
mais fácil.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 15

AJU STA N D O VI S UAL I Z AÇÃ O


DO ED ITO R

Para facilitar nossa aula e evitar traduções diferentes

vamos deixar nosso painel de edição em inglês, que é sua


linguagem original, durante o conteúdo desse e-book.

Nosso primeiro passo para iniciarmos a criação do siste-

ma será deixar o nosso editor em visualização ‘’Legado’’,


pra isso precisamos verificar se esse ícone no canto superi-

or direito se encontra como na imagem:


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 16

Feito isso sua tela de edição do aplicativo deve estar sendo apresen-
tada dessa seguinte maneira:
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 17

APRESEN TA N DO
P RIN C IPA IS M E N U S

ME NU DATA

Nesse Menu podemos administrar nosso banco de dados, cada


coluna inserida neles e também outras informações de comporta-
mento de dados.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 18

TABLE S

Aqui é a tela principal para administrar nossa fonte de dados. Aqui


estão inseridas todas as tabelas que iremos utilizar.

COLUM N S

Nessa tela conseguimos configurar o comportamento de cada


uma das colunas nas tabelas que adicionamos ao sistema.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 19

MENU UX

No menu UX podemos alterar a experiência do usuário dentro do


nosso sistema, ou seja, aqui fazemos a configuração de como
nosso app será visto e apresentado.

VI E WS
Nesse menu podemos
realizar a configuração
de cada visualização.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 20

B RAN D
Esse menu serve para
configurações princi-
palmente da ‘’marca’’
do nosso app, ou seja,
configuração de Logo,
Cor principal, telas de
carregamento, etc.

ME NU B EH AV IO R

Nesse menu podemos


realizar a configuração
de cada visualização.

No menu Behavior podemos configurar alguns botões de ação do


nosso sistema e também como ele irá se comportar Offline.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 21

AC T IO N S
Os ‘’Action’’ são botões que realizam ações dentro do sistema e
podem facilitar nosso uso e a automação do sistema.

Nesse menu podemos


realizar a configuração
de cada visualização.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 22

CONFIGU RA N DO N OSS OS DA DOS

A primeira configuração que devemos realizar primeiro é a

das colunas que criamos na nossa tabela. A partir do momen-


to que configurarmos para que o sistema saiba quais tipos de
dados serão inseridos em cada coluna já poderemos utilizar o
sistema e configurar suas visualizações posteriormente.

O primeiro passo é abrir o menu Data > Columns


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 23

A primeira coluna que devemos configurar é a coluna Id, ela tem


um ''padrão'' bem simples. Primeiro passo é verificar se ela está
com o tipo de coluna ''Text'', devemos deixar marcada a opção
''Key'' e desmarcar a opção ''Label''. Como essa coluna irá ficar com
um código aleatório não é importante que ela seja apresentada no
sistema então podemos desmarcar a opçao ''Show''.

Ultimas configurações para essa coluna: precisamos confirmar se a


opção ''Require'' está marcada, se no campo ''Initial value'' está com a
fórmula UNIQUEID() e por fim se a opção ''Search'' está desmarcada.

Feito isso nossa coluna Id já está completamente configurada.


Essa coluna é como um documento único do cliente para o nosso
sistema, através dela será possível identificar clientes diferentes mas
com nomes parecidos e também encontrar seus dados de maneira
mais prática.
Já podemos partir para as demais colunas.
Vamos configurá-las na ordem do nosso banco de dados, então agora
a coluna Nome que é um pouco mais simples.
Na coluna nome devemos garantir que a opção ''Label'', ''Show'', ''Edit-
able'' e ''Require'' estão ativas
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 24

Agora a coluna "Email''. Essa coluna é bem simples, precisamos


deixá-la com o tipo ''Email'', e garantir que as opções ''Show'', ''Edit-
able'' e ''Search'' estão marcadas. Além disso podemos alterar o ''Dis-
play name'' para que seja apresentado nome corretamente dentro
do sistema. Inserir 'E-mail' entre aspas conforme a imagem a seguir:

Coluna Celular, essa coluna também possui um tipo específico que


podemos selecionar, basta escolher o tipo ''Phone'' e marcar as
seguintes opções: ''Show'', ''Editable'' e ''Search''.

Por último nossa coluna Endereco. Como falamos na criação do


banco de dados essa coluna foi criada com o nome incorreto mas
podemos alterar como ela vai ser apresentada dentro do sistema. Pra
isso precisamos escrever 'Endereço' com as aspas no campo ''Display
name'' das configurações

Fora isso podemos deixar a coluna com o tipo ''Adress'' e deixar marca-
dos também as opções ''Show'',''Editable'',''Require'' e ''Search''.
Com isso nossas colunas já estão configuradas e podemos começar a
configuração das nossas visualizações.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 25

T UTORIA L D E CO MO CADASTRA R
UM CLIEN T E PARA DE M ON STRA ÇÃO

Para adicionar um novo cliente basta, no aplicativo, clicar em

'+' para abrir o formulário de cadastro.

Com o formulário aberto é só completar cada campo com


seus respectivos dados.

Após completar todos os campos clique no canto inferior

direito em 'Save' e seu cadastro terá sido concluído.


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 26

CONFIGU RA N DO N OSSAS
VISUA LIZ A Ç Õ E S

Agora que nossas configurações principais já foram realiza-

das podemos melhorar a visualização do nosso aplicativo


para garantir uma melhor experiência de usuário.
Com a configuração das visualizações finalizadas nosso app
já estará pronto para uso.

O primeiro passo é abrir o menu UX > Views


DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 27

Precisamos configurar primeiro


a nossa tela inicial do cadastro
de clientes. No nosso editor ela
já foi criada assim que iniciamos
nosso app, por isso vamos
apenas editá-la.

Pra começar vamos acessar a


visualização ''Cliente'' e alterar
seu nome para ''Clientes''.

Aqui também podemos alterar


o tipo de visualização para
''Table'', assim será demonstra-
do para nós outros botões de
ação que facilitam o uso dos
dados inseridos.

Para melhorar esse visualização


vamos deixar a opção ''Sort by''
para organizar os clientes por
Nome e na ordem ''Ascending''.

Em ''Column order'' vamos


deixar a seguinte sequência:
Nome, Celular, Email, Endereço.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 28

Feito isso podemos escolher também um ícone para esse menu.


Aqui eu costumo procurar por ''User'' e escolher um dos ícones do
resultado dessa busca. Feito isso nosso menu já está finalizado.

Agora podemos melhorar também a visualização dos nossos detal-


hes, sempre que você clicar em um dos cadastros você será direcio-
nado a outra tela, essa tela é chamada de ''Detail''. Vamos abrir a
configuração dela indo em UX > Views e procurando por Cliente_-
Detail. Caso não esteja aparecendo basta clicar na parte inferior do
menu em Show system views.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 29

Agora vamos alterar o tipo de visualização para ''Side-by-side'' assim


as informações vão ter o cabeçalho a esquerda e os dados a direita,
sendo mostrados assim os dados de maneira mais dinâmica.

Feito isso vamos aproveitar para alterar a cor do nosso sistema, pra
isso vamos acessar o menu UX > Brand.

Nessa tela vamos alterar a cor primária do aplicativo (Primary color),


você pode escolher pelo que achar melhor para o seu uso. Aqui
também acho interessante alterar o campo ''Style'' para a segunda
ou terceira opção, assim a parte de Brand já está finalizada.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 30

COM O T ESTA R O S E U S I STE MA

Para realizar os testes ou utilizar o seu sistema você acessar seu


app em uma nova guia ou utilizar a tela do prórpio editor.

Aqui podemos clicar no menu ''Clientes'', clicar no botão ''+'' no


canto inferior direito para abrir o formulário de cadastro dos
nossos clientes e inserir os dados, ao salvar seremos redirecio-
nados para outra tela e agora podemos visualizar o cadastro
dos nossos clientes.

Após o cadastro podemos testar principalmente os botões de


ação, vou explicar como cada um funciona abaixo:

ACTI O N S :
Ligação: serve para que o dispositivo
móvel possa abrir o app de chamadas
com o número já discado;

SMS: serve para abrir o app de men-


sagens com o número já discado;

E-mail: serve para abrir o app de e-mail


com o e-mail do cliente já discado;

Maps: abre uma visualização do


Google Maps com diversas opções de
ação.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 31

COM O IN STA LA R S E U A P P
NO CELULA R
Para baixar seu aplicativo em dispositivos móveis é bem sim-
ples:

No editor no canto superior direito temos o botão ''Share'', ao


clicar aqui temos acesso aos links do sistema incluindo o link
para download.

Ao acessar o link precisamos primeiro instalar o app ''AppSheet'' no


dispositivo. Depois de instalado basta acessarmos o app com nosso
e-mail e já teremos acesso ao uso do sistema na aba ''Created by me''.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 32

COM O CO M PA R TI L HAR S E U S I STE M A

Para compartilhar o sistema o processo é bem parecido com o


de download:

No editor no canto superior direito temos o botão ''Share'', ao


clicar aqui temos acesso aos links basta copiar e compartilhar
esse link para os usuários.

Além disso precisamos


também adicionar as pessoas
que irão usar esse sistema,
basta adicionar o e-mail que
elas irão utilizar e deixar a
opção ''Can use app''. Elas rece-
berão o convite com o link de
acesso no e-mail.
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 33

COMO A P REN D E R M A I S?

Gostou da plataforma e quer saber como aprender mais sobre


AppSheet? Aqui vão algumas dicas:

1- Aulão App de Vendas: Como criar seu primeiro app de


vendas. Em 1 hora de aula vamos te ensinar a criar da maneira
mais fácil e rápida um aplicativo de vendas. Além disso iremos
te entregar a cópia de um APP de Vendas feito pelos melhores
profissionais de Appsheet do Brasil, para você usar como base,
e, de quebra, você vai receber um E-BOOK de Vendas pra
aprender como veder seus aplicativos..

PARA VO C Ê Q U E L E U E SS E E B O OK
T EM OS U M A O F E R TA E S P ECI A L

P O R A P E N AS R $ 1 9, 90
OU 12 X R$1,99

QUE RO C RIA R ME U P R I ME I R O A P P
D E V EN DAS P O R M E N OS DE R $ 20,00
DE PONTA A PONTA: APRENDENDO APPSHEET PAGE 34

CO M O A P R E N D E R M A I S?
2- Cursos SkillKey: A melhor maneira de aprimorar seus estu-
dos na plataforma é com os cursos de desenvolvimento de
sistemas da SkillKey. Temos diversos cursos que te ensinam do
básico ao avançado como utilizar todas as ferramentas e
funções dessa plataforma. São mais de 40h de curso
disponíveis além de diversas vantagens como o acesso exclu-
sivo à nossa comunidade App Sem Código no Facebook, onde
você pode tirar suas dúvidas sobre projetos pessoais direta-
mente com alunos e professores especializados.

https://skillkey.com.br

3- Canal SkillKey no Youtube: Ainda em dúvida sobre o poten-


cial da plataforma? Acesse o canal SkillKey no Youtube e veja
mais conteúdos e tutoriais como esse:

https://www.youtube.com/skillKeyoficial

4- Instagram: Caso você queira receber novidades e também


conteúdos rápidos siga @SkillKey_ e @omatheus.lopes para
mais posts sobre AppSheet;

5- Comunidade global: link pra appsheet community

https://www.googlecloudcommunity.com/gc/AppSheet-Q-A/bd-p/appsheet-questions

Você também pode gostar