🚗 Sistema de Gerenciamento de Estacionamento (React Native + Firebase)

Este projeto é um aplicativo mobile desenvolvido com React Native (Expo) e Firebase Firestore. OBS: Muitas coisas ditas para criar, já estão feitas no repositório. Mas resolvi manter o passo a passo, para caso queira criar do Zero. Caso seja um completo iniciante, instale Node.js e Pesquise como iniciar um projeto react native.

Funções: Ele permite o cadastro, pesquisa, atualização e exclusão de veículos estacionados, com armazenamento em nuvem.

As chaves de acesso (API keys) ficam protegidas em um arquivo .env, e um arquivo intermediário chamado firebaseConfig.js é usado para importar essas variáveis de forma segura — evitando expor diretamente informações sensíveis no código-fonte.

---

📋 Índice

1. Visão geral
2. Criação do projeto no Firebase
3. Pegar as chaves de API e configurar o .env
4. Instalar dependências e configurar o Babel
5. Regras do Firestore
6. Comandos úteis
7. Exemplo rápido de uso
8. Gitignore recomendado
9. Dicas de segurança
10. Checklist rápido

---

💡 Visão geral

• Frontend: React Native (Expo)
• Backend: Firebase Firestore (banco de dados em nuvem)
• Gerenciamento de ambiente: react-native-dotenv
• Intermediário seguro: firebaseConfig.js (usa variáveis do .env para inicializar o Firebase)

---

1 — Criar conta e projeto no Firebase

1. Vá para https://console.firebase.google.com/.
2. Clique em “Adicionar projeto” e siga os passos.
3. Após criar, acesse o projeto.
4. No painel lateral, vá em Firestore Database → clique em “Criar banco de dados”.
   • Escolha o modo de teste inicialmente.
   • Escolha a região (ex.: southamerica-east1).

---

2 — Registrar um app e pegar as API keys

1. No painel superior do Firebase, clique na engrenagem ⚙️ → Configurações do projeto (Project settings).
2. Role até “Seus aplicativos (Your apps)” e clique no ícone </> (Web).
3. Registre o app (exemplo: admparkedcars-web).
4. Copie o bloco gerado de configuração:

const firebaseConfig = {
  apiKey: "AIzaSyA...example",
  authDomain: "meu-projeto.firebaseapp.com",
  projectId: "meu-projeto",
  storageBucket: "meu-projeto.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

---

3 — Criar o arquivo .env

Na raiz do projeto, crie um arquivo chamado .env com o seguinte conteúdo (exemplo):

FIREBASE_API_KEY=AIzaSyA...example
FIREBASE_AUTH_DOMAIN=meu-projeto.firebaseapp.com
FIREBASE_PROJECT_ID=meu-projeto
FIREBASE_STORAGE_BUCKET=meu-projeto.appspot.com
FIREBASE_MESSAGING_SENDER_ID=1234567890
FIREBASE_APP_ID=1:1234567890:web:abcdef123456

🔒 Importante: adicione o .env ao .gitignore para que ele não seja enviado ao GitHub:

echo ".env" >> .gitignore
git rm --cached .env

---

4 — Configurar React Native (Expo) para ler .env (react-native-dotenv)

4.1 Instalar dependências

O comando npm install já baixa tudo conforme o package.json, mas para referência:

npm install firebase axios
npm install --save-dev react-native-dotenv

---

4.2 Arquivo babel.config.js

Crie ou edite o arquivo na raiz do projeto:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv', {
        moduleName: '@env',
        path: '.env',
        safe: false,
        allowUndefined: true
      }]
    ],
  };
};

💡 Caso não use Expo, troque 'babel-preset-expo' por 'module:metro-react-native-babel-preset'.

---

4.3 Arquivo firebaseConfig.js (intermediário seguro)

Esse arquivo serve como camada intermediária para inicializar o Firebase com as variáveis do .env, evitando o uso direto no código principal.

// firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import {
  FIREBASE_API_KEY,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_APP_ID,
} from '@env';

// 🔐 Configuração usando variáveis de ambiente
const firebaseConfig = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
  projectId: FIREBASE_PROJECT_ID,
  storageBucket: FIREBASE_STORAGE_BUCKET,
  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
  appId: FIREBASE_APP_ID,
};

// 🚀 Inicializa o Firebase e o Firestore
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

---

4.4 Reiniciar o bundler

Após editar babel.config.js:

# Expo
npx expo start -c

# React Native CLI
npx react-native start --reset-cache

---

5 — Regras do Firestore (temporárias para testes)

No console do Firebase → Firestore Database → Regras (Rules)
Cole o seguinte e clique em Publicar:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

⚠️ Atenção: isso deixa o banco totalmente público — use somente para testes.

Para ambiente de produção, use algo mais seguro:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

---

6 — Comandos úteis e observações

Instalar dependências:

npm install

Rodar o app:

npx expo start
# ou
npx react-native run-android

Reiniciar cache:

npx expo start -c
# ou
npx react-native start --reset-cache

---

7 — Exemplo rápido de uso (gravar documento. Observação: Para executar esse script, digite node NomeDoArquivo.js)

import { db } from './firebaseConfig';
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';

await addDoc(collection(db, 'carros'), {
  nome: 'João Silva',
  telefone: '11999999999',
  marca: 'Toyota',
  modelo: 'Corolla',
  placa: 'ABC1234',
  timestamp: serverTimestamp(),
});

O Firestore cria automaticamente a coleção carros se ela ainda não existir.

---

8 — .gitignore recomendado (mínimo)

# Ambiente
.env

# Node / Expo
node_modules/
.expo/
.android/
.ios/
build/
dist/

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
*.log

---

9 — Dicas finais de segurança e produção

• 🔒 Nunca use allow read, write: if true em produção.
• Use autenticação com Firebase Auth.
• Guarde imagens no Firebase Storage (não diretamente no Firestore).
• Restrinja regras com base em request.auth.uid ou campos específicos.
• Nunca exponha variáveis sensíveis em repositórios públicos.

---

✅ Checklist rápido (para não esquecer)

• Criar projeto no Firebase
• Registrar app (Web) e copiar config
• Criar arquivo .env e adicionar ao .gitignore
• Instalar dependências (npm install)
• Configurar babel.config.js com react-native-dotenv
• Criar firebaseConfig.js intermediário
• Publicar regras no Firestore
• Rodar o app com expo start ou react-native run-android

---

👨‍💻 Autor

Desenvolvido por Arthur