# Gestor de Productos

**Published by:** [Frexus](https://paragraph.com/@frexus-2/)
**Published on:** 2025-06-11
**URL:** https://paragraph.com/@frexus-2/gestor-de-productos

## Content

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 previosTener instalado Node.jsTener 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 SQLitenpm install react-native-sqlite-storage npx pod-install # (solo en iOS) Paso 2: Crear archivos baseEstructura 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 appEn 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/

## Publication Information

- [Frexus](https://paragraph.com/@frexus-2/): Publication homepage
- [All Posts](https://paragraph.com/@frexus-2/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@frexus-2): Subscribe to updates