# Gestor de Productos

By [Frexus](https://paragraph.com/@frexus-2) · 2025-06-11

---

### Objetivo:

Crear una aplicación móvil sencilla que permita:

*   Registrar productos (nombre y precio).
    
*   Almacenarlos en una base de datos local.
    
*   Listarlos en pantalla.
    

Requisitos previos
------------------

*   Tener instalado [Node.js](https://nodejs.org)
    
*   Tener instalado el entorno de React Native:
    
        npx react-native init GestorProductos
        
    
*   Instalar el emulador de Android Studio o conectar un dispositivo real.
    
*   Entrar al proyecto:
    
        cd GestorProductos
        
    

Paso 1: Instalar SQLite
-----------------------

    npm install react-native-sqlite-storage 
    

    npx pod-install  # (solo en iOS)
    

Paso 2: Crear archivos base
---------------------------

Estructura del proyecto:

    /GestorProductos
      ├── App.js
      ├── db.js
      ├── productoDao.js
    

Paso 3: Fichero `db.js` (configura la base local)
-------------------------------------------------

    // db.js
    import SQLite from 'react-native-sqlite-storage';
    
    SQLite.enablePromise(true);
    
    const db = SQLite.openDatabase(
      {
        name: 'miapp.db',
        location: 'default',
      },
      () => console.log('Base de datos abierta'),
      error => console.log('Error: ', error)
    );
    
    export default db;
    

Paso 4: Fichero `productoDao.js` (DAO)
--------------------------------------

    // productoDao.js
    import db from './db';
    
    export const crearTablaProducto = () => {
      db.transaction(tx => {
        tx.executeSql(
          `CREATE TABLE IF NOT EXISTS productos (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            nombre TEXT,
            precio REAL
          );`
        );
      });
    };
    
    export const insertarProducto = (nombre, precio, callback) => {
      db.transaction(tx => {
        tx.executeSql(
          'INSERT INTO productos (nombre, precio) VALUES (?, ?);',
          [nombre, precio],
          (_, resultado) => callback(true, resultado),
          (_, error) => {
            callback(false, error);
            return false;
          }
        );
      });
    };
    
    export const obtenerProductos = callback => {
      db.transaction(tx => {
        tx.executeSql(
          'SELECT * FROM productos;',
          [],
          (_, { rows }) => callback(rows._array),
          (_, error) => {
            console.log(error);
            return false;
          }
        );
      });
    };
    

Paso 5: Fichero `App.js` (interfaz y lógica)
--------------------------------------------

    import React, { useEffect, useState } from 'react';
    import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
    import {
      crearTablaProducto,
      insertarProducto,
      obtenerProductos,
    } from './productoDao';
    
    export default function App() {
      const [nombre, setNombre] = useState('');
      const [precio, setPrecio] = useState('');
      const [productos, setProductos] = useState([]);
    
      useEffect(() => {
        crearTablaProducto();
        cargarProductos();
      }, []);
    
      const cargarProductos = () => {
        obtenerProductos(data => setProductos(data));
      };
    
      const guardar = () => {
        if (!nombre || !precio) return;
        insertarProducto(nombre, parseFloat(precio), (ok) => {
          if (ok) {
            setNombre('');
            setPrecio('');
            cargarProductos();
          }
        });
      };
    
      return (
        <View style={styles.container}>
          <Text style={styles.title}>Gestor de Productos</Text>
          <TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
          <TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} style={styles.input} keyboardType="decimal-pad" />
          <Button title="Guardar" onPress={guardar} />
          <Text style={styles.subtitle}>Listado:</Text>
          <FlatList
            data={productos}
            keyExtractor={item => item.id.toString()}
            renderItem={({ item }) => (
              <Text>{item.nombre} - ${item.precio.toFixed(2)}</Text>
            )}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: { padding: 20, marginTop: 50 },
      title: { fontSize: 20, marginBottom: 10 },
      subtitle: { marginTop: 20, fontWeight: 'bold' },
      input: { borderWidth: 1, marginBottom: 10, padding: 8 },
    });
    

Paso 6: Ejecutar la app
-----------------------

En Android:

    npx react-native run-android
    

En iOS:

    npx react-native run-ios
    

Más información en:

[https://www.frexus.dev/post/modelado-de-datos-locales/](https://www.frexus.dev/post/modelado-de-datos-locales/)

---

*Originally published on [Frexus](https://paragraph.com/@frexus-2/gestor-de-productos)*