← Volver al listado de tecnologías

Capítulo 10: Proyecto Final

Por: Siempre Listo
rozeniteproyectoreact-nativedevtools

Proyecto Final: Dashboard de DevTools

Aplicarás todo lo aprendido configurando DevTools completos para una app.

Estructura del Proyecto

src/
├── plugins/
│   ├── index.ts
│   └── custom-state.plugin.ts
├── providers/
│   └── DevToolsProvider.tsx
├── screens/
│   ├── HomeScreen.tsx
│   ├── ProductsScreen.tsx
│   └── CartScreen.tsx
├── store/
│   └── useStore.ts
└── App.tsx

Configuración Central

// providers/DevToolsProvider.tsx
import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';
import { StoragePlugin } from '@rozenite/storage';
import { PerformancePlugin } from '@rozenite/performance';
import { StatePlugin } from '../plugins/custom-state.plugin';

const plugins = [
  NetworkPlugin.configure({
    ignoreUrls: [/analytics/],
    maxRequests: 50,
  }),
  StoragePlugin,
  PerformancePlugin.configure({
    trackRenders: true,
    fpsWarningThreshold: 50,
  }),
  StatePlugin,
];

export function DevToolsProvider({ children }) {
  return (
    <RozeniteProvider
      plugins={plugins}
      config={{
        enabled: __DEV__,
        defaultPanel: 'network',
      }}
    >
      {children}
    </RozeniteProvider>
  );
}

Plugin de Estado Personalizado

// plugins/custom-state.plugin.ts
import { definePlugin, usePluginState } from '@rozenite/core';
import { useStore } from '../store/useStore';

export const StatePlugin = definePlugin({
  name: 'app-state',
  displayName: 'App State',
  icon: '🗃️',

  Panel: function StatePanel() {
    const store = useStore();

    return (
      <ScrollView>
        <Text style={styles.title}>Estado Global</Text>
        <Text style={styles.code}>
          {JSON.stringify(store, null, 2)}
        </Text>
      </ScrollView>
    );
  },
});

Ejercicio Final

Objetivo

Crear una app de e-commerce con DevTools completos.

Requisitos

  1. Plugins configurados: Network, Storage, Performance, Custom
  2. Funcionalidades:
    • Lista de productos (fetch API)
    • Carrito (AsyncStorage)
    • Estado global (Zustand)
  3. DevTools:
    • Ver todas las peticiones HTTP
    • Inspeccionar/editar carrito en Storage
    • Monitorear FPS durante scroll
    • Ver estado de Zustand en plugin custom

Criterios de Evaluación

Siguientes Pasos

Recursos Adicionales

Temas Avanzados

  1. Crear plugins para librerías específicas (TanStack Query, SWR)
  2. Integración con CI para métricas de performance
  3. Plugins de testing automatizado

Proyectos Sugeridos

← Volver al listado de tecnologías