---
title: Projeto Low Code Mobile
slug: low-code/projeto-low-code-mobile
docTags: 
createdAt: 2023-12-05T13:05:16.240Z
---

# Criação do projeto mobile

Dentro do projeto criado, na opção Mobile ir no icone de ‘+’ para criar um mobile.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/Qk2n0bCNXnCvWwGg1ZXLj_image.png)

Informar o nome e título do projeto mobile que será criado.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/P102jDL4XlWgmq0fVRi70_image.png)

Inserir o ícone e imagem splash. Para criar basta ir em Recusos > Imagens.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/FpVo2CkT9xkeDtVDGkMbO_image.png)

Por fim, basta gravar as informações.

## Criação das telas

Localizar o mobile que deseja editar no menu do projeto e clicar no ícone ‘\</>’ para abrir o editor.

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/hLuMGfhm0FYuClgbbG-AI_image.png" size="22" width="125" height="188" position="center" showCaption="false"}

No menu superior há as seguintes opções:

1. Salvar tela para salvar as alterações que fizer, no menu suspenso dessa opção tem a opção para salvar o projeto como um todo.&#x20;
   - Se estiver trabalhando com outras pessoas no mesmo projeto, priorize apenas salvar a tela que está fazendo para não correr o risco de perder o que foi feito.
2. Desenho é a opção para a visualização da edição da tela.
3. Visualizar é para testar o funcionamento da tela.
4. Quando selecionado, Esquerda mostra o menu esquerdo, que possui as configurações de telas e componentes.
5. Quando selecionado, Direita mostra o menu direito, que possui as configurações de propriedades e estilos.
6. Ajuda.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/1mTaApxG-b2CnplZmfMvv_image.png)

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/S5tbuY3WlwBPCcop1N3pe_image.png)

No menu lateral esquerdo mostra as opções de telas e elementos.

1. Em telas há a opção de criar uma tela no ícone de ‘+’, visualizar as que já existem e ao clicar no ícone de ‘:’ na tela selecionada é possível copiar, substituir, duplicar ou excluir uma tela.
2. Em elementos mostra a lista dos elementos presentes na tela selecionada, caso deseje excluir ou modificar a ordem de algum elemento é possível através dessa lista.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/nQsia0JU6sydsWtJbmwYt_image.png)

No menu lateral esquerdo, na opção do ícone de caixa há os componentes que podem ser utilizados na tela, para adicionar basta arrastar para a tela o componente desejado.

1. Button – componente para um botão, em que se adiciona um evento clicável para realizar alguma ação
2. Câmera - abre a camera do celular
3. Carousel – componente de carrosel.
4. Flex – Se comporta como uma div que usamos no html.
5. Form&#x20;
6. Get – facilita o processo de uma requisição de get, utilizando as propriedades você colocará a url onde deve ser chamado o get.
7. Icon – componente de ícones.
8. Image – componente de imagem.
9. Input – componente de campo em que será possivel o usuario escrever algo.
10. Text – componente de texto.
11. ListFetcher – componente que vai consultar uma lista de dados e mostrar na tela.
12. Maps.
13. Select – componente que mostrará opções para o cliente selecionar uma.
14. Text Area - área de texto para se inserir informações.
15. Webview.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/3NDcgg6NUBuS_ZlqZykmD_image.png)

No menu lateral direito, há a opção de propriedades e estilo, que podem se referir tanto à tela como um todo quando a um elemento, a depender do que esteja selecionado.

1. É possível colocar em relação à tela um pathname para se referir à tela de outro local, colocá-la como inicial ou inserir uma tela de loading.
2. Em relação a um elemento as propriedades vão variar de acordo com o tipo de elemento.
3. Em events é possível adicionar um evento, como de Mount ou de Click. Para adicionar um código é preciso primeiro criar o evento em ‘+’ e colocar o tipo do evento.
4. Em estilos, colocar o css que deseja.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/qNkRHIp8LuMq5IfbHIOId_image.png)

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/WhCIJcBsIYqJ8W3k4xVwm_image.png)

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/dY6X09lH-J7TjSVJVtBJm_image.png)

No segundo ícone do menu lateral direito é o local em que será adicionado o código em relação ao evento criado anteriormente.&#x20;

1. Primeiro selecione o evento e no espaço do editor coloque o código para o evento. Já vem automaticamente a base do código, só basta adicionar o que deseja.&#x20;

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/plZX7nc23HGxJHlfKG7bn_image.png)