← Volver al listado de tecnologías

Capítulo 10: Proyecto Final

Por: Siempre Listo
reactotronproyectoreact-nativedebugging

Proyecto Final: Debug Dashboard

Aplicarás todo lo aprendido configurando debugging completo para una app.

Estructura del Proyecto

src/
├── config/
│   └── ReactotronConfig.ts
├── store/
│   ├── index.ts
│   └── slices/
├── services/
│   └── api.ts
├── screens/
│   └── ...
└── App.tsx

Configuración Completa

// config/ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { navigationRef } from '../navigation';
import { store } from '../store';

const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({
    name: 'E-Commerce App',
  })
  .useReactNative({
    asyncStorage: true,
    networking: {
      ignoreUrls: /analytics|logs/,
    },
    editor: true,
    errors: true,
  })
  .use(reactotronRedux())
  .connect();

// Custom Commands
reactotron.onCustomCommand({
  command: 'resetApp',
  title: 'Reset App',
  handler: async () => {
    await AsyncStorage.clear();
    store.dispatch({ type: 'RESET' });
    reactotron.log('App reseteada');
  },
});

reactotron.onCustomCommand({
  command: 'mockUser',
  title: 'Mock User Login',
  args: [{ name: 'role', type: 'string' }],
  handler: ({ role }) => {
    store.dispatch(setUser({
      email: `${role}@test.com`,
      role,
    }));
  },
});

reactotron.onCustomCommand({
  command: 'navigate',
  title: 'Navigate',
  args: [{ name: 'screen', type: 'string' }],
  handler: ({ screen }) => {
    navigationRef.navigate(screen);
  },
});

export default reactotron;

API con Logging

// services/api.ts
import Reactotron from '../config/ReactotronConfig';

export async function apiRequest(endpoint, options = {}) {
  const bench = Reactotron.benchmark(`API: ${endpoint}`);

  try {
    const response = await fetch(endpoint, options);
    const data = await response.json();

    Reactotron.display({
      name: 'API',
      value: { endpoint, status: response.status, data },
      preview: `${response.status} ${endpoint}`,
    });

    bench.stop();
    return data;
  } catch (error) {
    Reactotron.error('API Error', { endpoint, error });
    throw error;
  }
}

Ejercicio Final

Objetivo

Configurar debugging completo para una app de e-commerce.

Requisitos

  1. Reactotron configurado con todos los plugins
  2. Redux integrado con visualización de acciones
  3. Network tracking para todas las APIs
  4. AsyncStorage para carrito y preferencias
  5. Custom commands para:
    • Reset app
    • Mock login (admin/user)
    • Agregar producto al carrito
    • Navegar a pantalla

Criterios de Evaluación

Siguientes Pasos

Recursos Adicionales

Temas Avanzados

  1. Plugin para React Query/TanStack Query
  2. Integración con Sentry para error tracking
  3. Performance profiling avanzado

Proyectos Sugeridos

← Volver al listado de tecnologías