/mobile-gov-app

Aplicativo com react-native para o governo

Primary LanguageTypeScript

🇺🇸 This is a React Native project, bootstrapped using @react-native-community/cli. I've used the Django Rest Framework for the backend API.

Getting Started

Step 0: Clone the project and install dependencies

Note: Before proceeding, ensure you've completed the React Native - Environment Setup up to "Creating a new application". Also, ensure you have Python version 3.11.4 or above.

git clone https://github.com/roberto-fernandino/mobile-gov-app.git

cd mobile-gov-app
npm install

# now lets fix an error with dependencie rn-fetch-blob (THIS IS OBLIGATORY)

# Windows
rm .\node_modules\rn-fetch-blob\react-native.config.js

# Linux (Which u should be using 👍)
rm node_modules/rn-fetch-blob/react-native.config.js

 # And finally
npm cache clean -f

To run IOS

Install cocoapods following the guide obs. U can only run IOS in a macOS with Xcode installed since we are not using Expo reason, Expo is not good for professional Applications.

# Now
cd ios
# Run 
gem uninstall cocoapods activesupport
gem install activesupport -v 6.0.0
gem install cocoapods
pod install

# Now you wait and if u want u can run the application in IOS

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm (npx is the npx executioner built for react applications)
npx react-native start --reset-cache # To already clear cache.

# if ask to install dependencies press (Y) and ENTER for all them.

# OR using Yarn
yarn start

Second, you will need to apply the migrations and commit it to the database to make everything work.

This can be made with Django the python framework, from the root, running:

# Installing dependencies (just copy and paste if you are in any linux distro which you should fucking be)
# If you are on windows do the same with windows commands

python -m venv env

# for linux (which you should be using as you are probably a fucking developer).
source /env/bin/activate
pip install -r requirements.txt
# Applying migrations, migrating and creating the admin API user.
python core/manage.py makemigrations
python core/manage.py migrate
# Remember the superuser is just the admin user dont use it for the app.
python core/manage.py createsuperuser

# for windows using Powershell ! NOT RECOMMENDED ! Windows is useless for Developers.
Set-ExecutionPolicy RemoteSigned
.\env\Scripts\activate 
pip install -r .\requirements.txt
# Applying migrations, migrating and creating the admin API user.
python .\core\manage.py makemigrations
python .\core\manage.py migrate
# Remember the superuser is just the admin user dont use it for the app.
python .\core\manage.py createsuperuser

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app: Start the django DRF

Starting the API server

# Start the server
python core/manage.py runserver

Now you can access API admin page from this link.

For Android

# I recommend already run the android emulator and check if ADB found it running:
adb devices # Anywhere in the terminal

# This done now lets bundle, build and start the application with:
# using npm (npx)
npx react-native run-android

# OR using Yarn
yarn android

Commom error that DEVS who mistakenly use WINDOWS to develop software. (looks a joke but isn't)

image

# To check what's causing this run
netstat -aon | findstr 8081

You will see something like: image Where the red arrow points to the PID of the process windows mistakenly and stupidly run in port=8081 Now lets check what is the process using port 8081:

  • Open Task Manager pressing "ctrl + shift + esc".
  • Paste in the search bar the PID u found with the last command
  • If the process is an daemon (service) it is important so we restart in a diferent port (OR SIMPLY KILL THE PROCESS AND RESTART WATCHMAN IT'S EASIER).

1st way to fix:

  • press "win + r"
  • after u know the service it is using the port find it in the services manager
  • right click on it and restart, this will make it use another por. Now run safe:
 npx react-native start

2nd way to fix:

JUST STOP USING WINDOWS SERIOUSLY, WHAT ARE U DOING ? ? ? Buy a macbook or simply and better install any Linux distro and learn how this magic OS works, i sware it will make you more inteligent and a fkcing REAL developer.

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

image

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Congratulations! 🎉

You've successfully run my React Native App. 🥳

You can acces admin page in Here.

Use the account you created with py manage.py createsuperuser

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

🇧🇷 Projeto React Native

Este é um projeto React Native, inicializado usando @react-native-community/cli. Usei o Django Rest Framework para a API de backend.

Começando

Passo 0: Clone o projeto e instale as dependências

Nota: Certifique-se de que concluiu as instruções de Configuração do Ambiente React Native até o passo "Criando uma nova aplicação".

git clone https://github.com/roberto-fernandino/mobile-gov-app.git
cd mobile-gov-app
npm install

# Correção de erro com a dependência rn-fetch-blob (ISSO É OBRIGATÓRIO)
rm node_modules/rn-fetch-blob/react-native.config.js
npm cache clean -f

Para executar no IOS

Instale cocoapods seguindo o guia obs. Você só pode rodar IOS em um macOS com Xcode instalado, já que não estamos usando o Expo, o Expo não é bom para aplicativos profissionais.

cd ios
# Rode

gem uninstall cocoapods activesupport
gem install activesupport -v 6.0.0
gem install cocoapods
pod install

# Agora você espera e se quiser pode rodar a aplicação no IOS

Passo 1: Iniciando os Servidores

Primeiro, você precisará iniciar o Metro, o bundler JavaScript que vem com o React Native.

Para iniciar o Metro, execute o seguinte comando na root do seu projeto React Native:

# Usando npm (npx):
npx react-native start --reset-cache 

# OU usando Yarn:
yarn start

Segundo, você precisará aplicar as migrações e enviá-las ao banco de dados para que tudo funcione.

Isso pode ser feito com Django the python framework, do root, executando:

python -m venv env

# No Linux:
source /env/bin/activate
pip install -r requirements.txt
# Aplicando migrações so pra ter certeza, migrando no banco e criando superusuario.
python core/manage.py makemigrations
python core/manage.py migrate
# Lembre-se o superuser é criado pra ser utilizado no painel de admin no host, não logue com ele no app.
python core/manage.py createsuperuser

# No Windows (usando PowerShell) ! Não Recomendando ! Windows é inutil pra desenvolvedores, muita burocracia, configuraões ruins, pior shell já inventado etc
.\env\Scripts\activate 
pip install -r .\requirements.txt
# Aplicando migrações so pra ter certeza, migrando no banco e criando superusuario.
python .\core\manage.py makemigrations
python .\core\manage.py migrate
# Lembre-se o superuser é criado pra ser utilizado no painel de admin no host, não logue com ele no app.
python .\core\manage.py createsuperuser

Passo 2: Inicie sua Aplicação

Iniciando o servidor da API

python core/manage.py runserver

Agora voce pode acessar o painel de admin a partir desse link.

Deixe o Metro Bundler rodando em seu próprio terminal. Em um novo terminal, execute o seguinte comando para iniciar sua aplicação Android ou iOS: Para Android:

For Android

# Recomendo que ja inície o emulador pelo android-studio e cheque se o adb achou o emulador rodando:
adb devices # no terminal


# Isso feito agora vamos empacotar, construir e iniciar a aplicação com:
# npm (npx)
npx react-native run-android

# Yarn
yarn android

Commom error that DEVS who mistakenly use WINDOWS to develop software. (looks a joke but isn't)

Erro comum que "DEVS" que erroneamente cometem o erro DRÁSTICO de utilizar WINDOWS para desenvolver software. (parece piada mas não é)

image

# Para checar qual proceso ta impedindo o watchman se comunicar com emulador rode:
netstat -aon | findstr 8081

Você verá algo como: image

Onde a seta vermelha aponta pro PID (Process Identifier) da porcaria do WINDOWS que erroneamente e estupidamente iniciou na porta=8081 Agora vamos chechar qual é a daemon:

  • Abra o task manager🤮 com "ctrl + shift + esc".
  • Cole o pid na barra de pesquisa
  • Se o processo é uma daemon (serviço do OS para leigos) iremos reiniciar pois é importante. (Caso seja um processo inutil simplesmente mande um sinal KILL e acabe com essa merda).

1st jeito de corrigir:

  • press "win + r"
  • depois de descobrir qual daemon está causando isso ache ela
  • right click e clique em restart, iso fará com que ela use outra porta. Agora rode safe:
 npx react-native start

2nd caminho pra corrigir:

APENAS PARE DE USAR WINDOWS SINCERAMENTE, O QUE EXATAMENTE VOCE TA FAZENDO ??? Compre um macbook ou simplesmente e até melhor instale qualquer Distribuição Linux e aprenda como esse OS magico funciona, eu juro que isso vai te tornar uma pessoa mais inteligente e a porra de um Desenvolvedor de verdade.

Para iOS:

npm run ios

Se tudo estiver configurado corretamente, você deverá ver seu novo aplicativo em execução em seu Android Emulator ou iOS Simulator em breve, desde que tenha configurado seu emulador/simulador corretamente.

imagem

Essa é uma maneira de executar seu aplicativo – você também pode executá-lo diretamente no Android Studio e no Xcode, respectivamente.

Parabéns! 🎉

Você executou com sucesso meu aplicativo React Native. :festa_face:

Você pode acessar a página de administração em Aqui.

Use a conta que você criou com py manage.py createsuperuser

Solução de problemas

Se você não conseguir fazer isso funcionar, consulte a página Solução de problemas.

Saber mais

Para saber mais sobre React Native, dê uma olhada nos seguintes recursos: