Aplicativo Anotação

Informações Sobre o Aplicativo

• Sobre
• Requesitos
• Configurando ambiente de trabalho
  • Instalando o Visual Studio Code
  • Instalando o NodeJs
  • ReactJs
  • Instalação-Expo
• Iniciando o Aplicativo
• Criando a build do app e instalando
• Tecnologia

💬 Sobre o projeto

Faça download do projeto aqui

Este é um aplicativo desenvolvido para fazer anotações de maneira simples e que o usuario podera usar no dia a dia. Ele é feito através da linguagem NodeJS o ReactJS é feito para a linguagem Mobile para Android e IOS. Ele possue a dependencia do expo o que deixa a aplicação muita mais leve de ser aplicada.

Layout do Projeto

📃 Requisitos

Antes de começar , você vai precisar ter instalado em sua máquina as sequintes ferramentas: Node.js,além disso é bom ter um editor para trabalhar com o códico como VSCode.

⚙ Configurando ambiente de trabalho

Instalando o Visual Studio Code

Antes de começar , você vai precisar fazer o download e instalar o VSCODE Versao 2022 a mais conhecida no mercado na area de programação aonde eu instalei as minhas dependencias.

Instalando o NodeJs

Para gerenciar o reactjs você precisa instalar o NodeJs para isso você precisa ir no site do node e fazer o download da ultima versao v16.15.1 LTS após fazer o download é só clicar no botão verde e ele começará imediatamente, faça o download da versão LTS por ele ser estável. Após isso de next até o final para o nodejs ser instalado.

Para você testar se o node js foi instalado você precisa acessar o cmd no seu sistema e dar os comandos que estarão aqui abaixo.

C:\User\user>node -v
# Serve-para-ver-a-versão-do-node
v16.15.1
C:\User\user>npm -v
6.14.5
C:\User\user>

ReactJS

O React Native mudou de documentação e ele recomenda a usar o expo.

Instalação-Expo

Para instalar o expo na maquina você acessa o cmd do seu computador

C:\User\user>npm install -g expo-cli

E após isso aperte enter para ver se foi instalado basta dar este comando no cmd

C:\User\user>expo --version
3.21.10

Para ver outras documentações do expo acesse o site e faça o seu cadastro na expo.

😀 Iniciando o Aplicativo

Vamos iniciar o aplicato com o reactjs e com o expo para isso para isso va no desktop

C:\User\user>cd desktop
C:\User\user\desktop>
C:\User\user\desktop>expo init "Projeto_01"

Isso serve para você criar o seu projeto. Para ter acesse ao projeto do repositório , bastar fazer o downlond da pasta , como já tenho o expo instalado, você tem que entrar dentro da pasta baixada e dar o seguinto comando no cmd.

C:\User\user>cd desktop
C:\User\user\desktop>
C:\User\user\desktop>cd "Projeto_App_Agendamento"
C:\User\user\desktop\Projeto_App_Agendamento>expo start

Para ter acesso ao projeto recomendo instalar no seu aplicativo do seu celular o expo.

Após o comando expo start aparecerá o QrCode no aplicativo tem a opção QrCode scaneie o QrCode do seu celular com o QrCode do computador.

Microsoft Windows [versão 10.0.19044.1706]
(c) Microsoft Corporation. Todos os direitos reservados.

C:\Users\user>cd desktop

C:\Users\user\Desktop>cd "Projeto_App_Agendamento"

C:\Users\user\Desktop\Projeto_App_Agendamento>expo start
Starting project at C:\Users\user\Desktop\Projeto_App_Agendamento
Developer tools running on http://localhost:19002
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▄█▀     █ ▄▄▄▄▄ █
█ █   █ █▄   ▄██▀ █ █   █ █
█ █▄▄▄█ █ ▀█▀█▄▀ ██ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄█ █▄▀ █▄▄▄▄▄▄▄█
█  █ ▀█▄ ▀█ ▀▄ ▀██▀  ▄▀▄▄▀█
█  ▀ ▀▀▄▀▀▄▄█▄ ▀▀▄▄▀ ▀▀█▄▄█
█▄█▄▄▀ ▄▄█▀▀██▄ █▀█ ▄█ ██▀█
█▄▀ ███▄▀▄█▄ ▄▀ █ ▄▄ ▀▀██▄█
█▄▄▄▄█▄▄▄▀▄▄▀██▄  ▄▄▄ █ ▄ █
█ ▄▄▄▄▄ █▄ █▀▄▄▄  █▄█  ▀▄ █
█ █   █ █▀█ ▄█ ▀▀▄ ▄▄ █▀▄██
█ █▄▄▄█ █▀▄▀██ ▄█  █▄  ▄█▄█
█▄▄▄▄▄▄▄█▄▄█▄█▄▄█▄███▄▄█▄▄█

› Metro waiting on exp://192.168.100.245:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android

Quando você der o expo start aparecera o endereço do localhost:19002 clique nele para ir ao servidor.

C:\Users\user\Desktop\Projeto_App_Agendamento>expo start
Starting project at C:\Users\user\Desktop\Projeto_App_Agendamento
Developer tools running on http://localhost:19002

Você pode acessar o seu aplicativo com a web apertando a tecla w.

Criando a build do app e instalando

1. Para visualizar a build acesse o site da expo.
2. Abra o Projeto "Projeto_App_agendamento" no VSCode
3. No arquivo app.json esta configurado para instalar a build com este codico aqui,e obrigatorio ter este codico se não não ira funcionar.
   
   

"android":{ "package":"com.app.swapp", "versionCode":1 },

4. Para Exportar o aplicativo temos que ir no terminal cmd prompt e colocar estes comandos aqui atenção este comando ios muda para ipk de vez de ser apk.

C:\Users\user\Desktop\Projeto_App_Agendamento>expo build:android

5. Após isso aparecerá uma opção em azul clique em apk.
6. após isso aparecerá uma conta atenticação clica na segunda opção caso você já tenha uma conta na expo.
7. Em sequida perguntara o email da conta cadastrada coloque lá e a senha também.
8. Com isso ele será instalado com sucesso!
9. Irá aparecer um endereço de url na instalação é só copiar e colar
10. Com o cabo USB do seu celular conectado ao computador digite o seguinte comando.

C:\Users\user\Desktop\Projeto_App_Agendamento>adb install meuapp.apk
C:\Users\user\Desktop\Projeto_App_Agendamento>adb install meuapp.apk
Performing Streamd Install
Success
C:\Users\user\Desktop\Projeto_App_Agendamento>

E pronto o seu app foi instalado no seu celular

1. Para baixar o apk do Aplicativo de Anotação é recomendavel acessar este link pelo celular é só clicar aqui ao lado Expo Aplicativo Anotação clique aqui
2. Clique em download e será baixado no seu celular .

3. Vá no seu celular arquivos > download. 4. Clique na apk baixada e pronto o aplicativo aparecerá no seu celular.

🛠 Tecnologia

• Node.js
• React.js
• Expo

Made with 💜 by MarceloBenites 👋🏼 See my Linkedin.