Expo Apollo Paper - Plantilla React Native con GraphQL y Material Design

Plantilla starter para aplicaciones móviles multiplataforma construida con Expo, Apollo Client para gestión de datos GraphQL, y React Native Paper para componentes UI Material Design. Ideal para desarrollar apps iOS, Android y Web con una sola base de código.

📋 Tabla de Contenidos

• Características
• Tecnologías
• Requisitos Previos
• Instalación
• Uso
• Estructura del Proyecto
• Configuración GraphQL
• Personalización del Tema
• Comandos Disponibles
• Recursos Adicionales
• Licencia

✨ Características

• ⚡ Desarrollo Multiplataforma: Ejecuta tu aplicación en iOS, Android y Web desde un único código base
• 🔌 Integración GraphQL: Configuración lista para usar con Apollo Client 3.x
• 🎨 Material Design: Componentes UI modernos y accesibles con React Native Paper
• 📘 TypeScript: Tipado estático completo para mejor experiencia de desarrollo
• 🔧 Calidad de Código: ESLint y Prettier configurados con reglas modernas
• 🚀 Hot Reload: Recarga en caliente con Expo para iteración rápida
• 🎯 Hooks de Git: Husky integrado para validación automática de código antes de commits

🛠 Tecnologías

Tecnología	Versión	Descripción
Expo	~42.0.1	Framework para desarrollo React Native
React	16.13.1	Biblioteca para interfaces de usuario
React Native	SDK 42	Framework para apps móviles nativas
Apollo Client	^3.3.21	Cliente GraphQL con caché inteligente
React Native Paper	^4.9.2	Componentes Material Design
GraphQL	^15.5.1	Lenguaje de consulta para APIs
TypeScript	~4.0.0	Superset tipado de JavaScript
ESLint	^7.31.0	Herramienta de linting
Prettier	2.3.2	Formateador de código
Husky	>=6	Hooks de Git

📦 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (versión 14 o superior) - Descargar
• Yarn o npm - Gestor de paquetes
• Expo CLI - npm install -g expo-cli o yarn global add expo-cli
• Expo Go (app móvil) - Disponible en iOS App Store y Google Play

🚀 Instalación

1. Clona el repositorio:

git clone https://github.com/tu-usuario/expo-apollo-paper.git
cd expo-apollo-paper

2. Instala las dependencias:

# Con Yarn (recomendado)
yarn install

# O con npm
npm install

3. Inicia el servidor de desarrollo:

yarn start
# o
npm start

4. Ejecuta en tu dispositivo:

• Escanea el código QR con Expo Go (iOS/Android)
• Presiona i para abrir en simulador iOS
• Presiona a para abrir en emulador Android
• Presiona w para abrir en navegador web

💻 Uso

El proyecto incluye una configuración básica de Apollo Client conectada a un endpoint GraphQL de ejemplo. Para comenzar a desarrollar:

Configurar tu Endpoint GraphQL

Edita el archivo src/utils/graphql/client.ts:

export const client = new ApolloClient({
  uri: 'TU_ENDPOINT_GRAPHQL_AQUI',
  cache: new InMemoryCache(),
});

Realizar Consultas GraphQL

El componente principal en App.tsx muestra un ejemplo de consulta:

client
  .query({
    query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `,
  })
  .then((result) => console.log(result));

Para más ejemplos, consulta la documentación oficial de Apollo Client.

📁 Estructura del Proyecto

expo-apollo-paper/
├── src/
│   ├── assets/              # Imágenes, iconos y recursos estáticos
│   │   ├── adaptive-icon.png
│   │   ├── favicon.png
│   │   ├── icon.png
│   │   └── splash.png
│   └── utils/
│       ├── config.ts        # Configuración de URLs y constantes
│       ├── theme.ts         # Personalización del tema de Paper
│       └── graphql/
│           └── client.ts    # Configuración del cliente Apollo
├── App.tsx                  # Componente principal de la aplicación
├── app.json                 # Configuración de Expo
├── package.json             # Dependencias y scripts
├── tsconfig.json            # Configuración de TypeScript
├── babel.config.js          # Configuración de Babel
├── .eslintrc.js             # Reglas de ESLint
├── .prettierrc              # Configuración de Prettier
└── README.md                # Documentación del proyecto

🔌 Configuración GraphQL

Este proyecto utiliza Apollo Client para gestionar consultas y mutaciones GraphQL. La configuración actual apunta a un endpoint público de demostración.

Personalizar la URL del Servidor

1. Edita src/utils/config.ts para definir tu backend:

export const BASE_URL = 'https://tu-dominio.com';
export const GRAPHQL_URL = `${BASE_URL}/graphql`;

2. Actualiza src/utils/graphql/client.ts para usar la nueva URL:

import { GRAPHQL_URL } from '../config';

export const client = new ApolloClient({
  uri: GRAPHQL_URL,
  cache: new InMemoryCache(),
});

Añadir Autenticación

Para incluir tokens de autenticación en las cabeceras:

export const client = new ApolloClient({
  uri: GRAPHQL_URL,
  cache: new InMemoryCache(),
  headers: {
    Authorization: `Bearer TU_TOKEN`,
  },
});

🎨 Personalización del Tema

El tema de React Native Paper está configurado en src/utils/theme.ts e incluye colores personalizados:

• ✅ success - Verde (#0d741e)
• ⚠️ warning - Ámbar (#b97611)
• ❌ danger - Rosa (#dd1c66)
• ℹ️ info - Azul (#0d99c4)

Modificar Colores

Edita el archivo theme.ts para personalizar la paleta:

const success = '#tu-color-success';
const warning = '#tu-color-warning';
// ... etc

Consulta la guía de tematización de React Native Paper para más opciones.

📝 Comandos Disponibles

Comando	Descripción
yarn start	Inicia el servidor de desarrollo de Expo
yarn android	Ejecuta en emulador/dispositivo Android
yarn ios	Ejecuta en simulador/dispositivo iOS
yarn web	Ejecuta en navegador web
yarn lint	Ejecuta ESLint y corrige errores automáticamente
yarn eject	Expulsa el proyecto de Expo Managed Workflow

📚 Recursos Adicionales

• Documentación de Expo
• Tutorial de Apollo Client con React
• Componentes de React Native Paper
• Guía de TypeScript para React Native
• GraphQL Learn

🤝 Contribución

Las contribuciones son bienvenidas. Por favor:

1. Haz fork del repositorio
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.

---

Hecho con ❤️ usando Expo, Apollo GraphQL y React Native Paper