App móvil con CRUD conectado a servidor LAMP

Objetivo general

Desarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.

Herramientas necesarias

MySQ: Base de datos
PHP (Apache o XAMPP): API en backend
React Native + ExpoApp: móvil frontend
Postman (opcional): Prueba de endpoints API
VS Code: Editor de código
Expo Go: Pruebas en el móvil (iOS/Android)

Parte 1: Crear la base de datos

En phpMyAdmin o línea de comandos de MySQL:

CREATE DATABASE tienda;

USE tienda;

CREATE TABLE productos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100),
  precio DECIMAL(10,2)
);

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

api/
├── conexion.php
├── obtener.php
├── crear.php
├── actualizar.php
├── eliminar.php

fichero conexion.php

<?php
$host = "localhost";
$user = "root";
$password = ""; // tu contraseña
$db = "tienda";

$conn = new mysqli($host, $user, $password, $db);

if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}
?>

Fichero obtener.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$sql = "SELECT * FROM productos";
$result = $conn->query($sql);

$datos = [];

while ($fila = $result->fetch_assoc()) {
    $datos[] = $fila;
}

echo json_encode($datos);
?>

fichero crear.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);

$nombre = $input["nombre"];
$precio = $input["precio"];

$sql = "INSERT INTO productos (nombre, precio) VALUES ('$nombre', '$precio')";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto creado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

fichero actualizar.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);

$id = $input["id"];
$nombre = $input["nombre"];
$precio = $input["precio"];

$sql = "UPDATE productos SET nombre='$nombre', precio='$precio' WHERE id=$id";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto actualizado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

fichero eliminar.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);
$id = $input["id"];

$sql = "DELETE FROM productos WHERE id=$id";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto eliminado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

Parte 3: Crear app en React Native con Expo

Crear proyecto:

npx create-expo-app tiendaApp --template -blank
cd tiendaApp
npx expo start

Instala dependencias (opcional si usarás formularios o navegación):

npm install react-native-paper

Lectura + Formulario básico (App.js

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TextInput, Button, StyleSheet } from 'react-native';

export default function App() {
  const [productos, setProductos] = useState([]);
  const [nombre, setNombre] = useState("");
  const [precio, setPrecio] = useState("");

  const API = "http://<TU_IP_LOCAL>/api";

  const obtenerDatos = () => {
    fetch(`${API}/obtener.php`)
      .then(res => res.json())
      .then(data => setProductos(data))
      .catch(err => console.error(err));
  };

  const crearProducto = () => {
    fetch(`${API}/crear.php`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ nombre, precio })
    })
      .then(res => res.json())
      .then(() => {
        obtenerDatos();
        setNombre("");
        setPrecio("");
      });
  };

  const eliminarProducto = (id) => {
    fetch(`${API}/eliminar.php`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id })
    })
      .then(res => res.json())
      .then(() => obtenerDatos());
  };

  useEffect(() => {
    obtenerDatos();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tienda</Text>

      <FlatList
        data={productos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.nombre} - ${item.precio}</Text>
            <Button title="Eliminar" onPress={() => eliminarProducto(item.id)} />
          </View>
        )}
      />

      <TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
      <TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} keyboardType="numeric" style={styles.input} />
      <Button title="Crear producto" onPress={crearProducto} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, marginTop: 40 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10 },
  input: { borderWidth: 1, marginVertical: 5, padding: 8 },
  item: { marginBottom: 10 }
});

Continua en:

https://www.frexus.dev/post/como-se-conectan-las-apps-moviles-a-servidores-y-bases-de-datos-fundamentos-esenciales/

More from Frexus

Frexus

Sep 1

Actividad diagnostica

Objetivo:Identificar los conocimientos previos de los estudiantes en HTML, CSS y lógica básica de diseño web.Instrucciones:Crea una página web simple con un archivo index.html.La página debe contener:Un título principal con tu nombre.Un párrafo donde describas qué entiendes por "aplicaciones web progresivas".Una lista (puede ser ordenada o no ordenada) con 3 aplicaciones web que uses en tu día a día.Una imagen (puede ser de internet o de tu computadora).Aplica algo de estilo con CSS interno o...

Cover image for La señal que nunca llegó

Frexus

Jul 9

La señal que nunca llegó

Lucas tenía una visión: crear una app que ayudara a pequeños productores locales a vender sus cosechas directamente a consumidores urbanos. Nada de intermediarios, solo conexión. La llamó Raíz. Desde su pequeño estudio en Oaxaca, con más corazón que presupuesto, construyó una app limpia, intuitiva y optimista. El diseño estaba listo. Las funciones estaban listas. Los productores estaban listos. Solo faltaba que el mundo se conectara con ella. El día del lanzamiento fue como un amanecer. Lucas...

Cover image for Diseña tu primer mini-juego

Frexus

Sep 2

Diseña tu primer mini-juego

ObjetivoExplorar las habilidades iniciales del alumno en lógica, creatividad y pensamiento estructurado para el diseño de videojuegos.IntroducciónAntes de programar, todo videojuego comienza con una idea clara de qué hará el jugador y cómo se logrará el objetivo. Tu reto es imaginar un mini-juego sencillo y describir cómo funcionaríaInstruccionesPiensa en un mini-juego que se pueda jugar en 1 minuto máximo.Ejemplo: atrapar objetos que caen, esquivar obstáculos, responder preguntas rápidas, et...

Objetivo general

Desarrollar una app móvil en React Native (Expo) capaz de conectarse a una API PHP que realiza operaciones CRUD sobre una tabla en MySQL, todo dentro de una red local.

Herramientas necesarias

MySQ: Base de datos
PHP (Apache o XAMPP): API en backend
React Native + ExpoApp: móvil frontend
Postman (opcional): Prueba de endpoints API
VS Code: Editor de código
Expo Go: Pruebas en el móvil (iOS/Android)

Parte 1: Crear la base de datos

En phpMyAdmin o línea de comandos de MySQL:

CREATE DATABASE tienda;

USE tienda;

CREATE TABLE productos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100),
  precio DECIMAL(10,2)
);

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

api/
├── conexion.php
├── obtener.php
├── crear.php
├── actualizar.php
├── eliminar.php

fichero conexion.php

<?php
$host = "localhost";
$user = "root";
$password = ""; // tu contraseña
$db = "tienda";

$conn = new mysqli($host, $user, $password, $db);

if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}
?>

Fichero obtener.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$sql = "SELECT * FROM productos";
$result = $conn->query($sql);

$datos = [];

while ($fila = $result->fetch_assoc()) {
    $datos[] = $fila;
}

echo json_encode($datos);
?>

fichero crear.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);

$nombre = $input["nombre"];
$precio = $input["precio"];

$sql = "INSERT INTO productos (nombre, precio) VALUES ('$nombre', '$precio')";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto creado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

fichero actualizar.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);

$id = $input["id"];
$nombre = $input["nombre"];
$precio = $input["precio"];

$sql = "UPDATE productos SET nombre='$nombre', precio='$precio' WHERE id=$id";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto actualizado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

fichero eliminar.php

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
include "conexion.php";

$input = json_decode(file_get_contents("php://input"), true);
$id = $input["id"];

$sql = "DELETE FROM productos WHERE id=$id";

if ($conn->query($sql)) {
    echo json_encode(["mensaje" => "Producto eliminado"]);
} else {
    echo json_encode(["mensaje" => "Error"]);
}
?>

Parte 3: Crear app en React Native con Expo

Crear proyecto:

npx create-expo-app tiendaApp --template -blank
cd tiendaApp
npx expo start

Instala dependencias (opcional si usarás formularios o navegación):

npm install react-native-paper

Lectura + Formulario básico (App.js

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TextInput, Button, StyleSheet } from 'react-native';

export default function App() {
  const [productos, setProductos] = useState([]);
  const [nombre, setNombre] = useState("");
  const [precio, setPrecio] = useState("");

  const API = "http://<TU_IP_LOCAL>/api";

  const obtenerDatos = () => {
    fetch(`${API}/obtener.php`)
      .then(res => res.json())
      .then(data => setProductos(data))
      .catch(err => console.error(err));
  };

  const crearProducto = () => {
    fetch(`${API}/crear.php`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ nombre, precio })
    })
      .then(res => res.json())
      .then(() => {
        obtenerDatos();
        setNombre("");
        setPrecio("");
      });
  };

  const eliminarProducto = (id) => {
    fetch(`${API}/eliminar.php`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id })
    })
      .then(res => res.json())
      .then(() => obtenerDatos());
  };

  useEffect(() => {
    obtenerDatos();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tienda</Text>

      <FlatList
        data={productos}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.nombre} - ${item.precio}</Text>
            <Button title="Eliminar" onPress={() => eliminarProducto(item.id)} />
          </View>
        )}
      />

      <TextInput placeholder="Nombre" value={nombre} onChangeText={setNombre} style={styles.input} />
      <TextInput placeholder="Precio" value={precio} onChangeText={setPrecio} keyboardType="numeric" style={styles.input} />
      <Button title="Crear producto" onPress={crearProducto} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, marginTop: 40 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10 },
  input: { borderWidth: 1, marginVertical: 5, padding: 8 },
  item: { marginBottom: 10 }
});

Continua en:

https://www.frexus.dev/post/como-se-conectan-las-apps-moviles-a-servidores-y-bases-de-datos-fundamentos-esenciales/

More from Frexus

Frexus

Sep 1

Actividad diagnostica

Frexus

Jul 9

La señal que nunca llegó

Frexus

Sep 2

Diseña tu primer mini-juego

Frexus

App móvil con CRUD conectado a servidor LAMP

Frexus

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

Parte 3: Crear app en React Native con Expo

No comments yet

More from Frexus

Frexus

More from Frexus

App móvil con CRUD conectado a servidor LAMP

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

Parte 3: Crear app en React Native con Expo

Frexus

App móvil con CRUD conectado a servidor LAMP

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

Parte 3: Crear app en React Native con Expo

More from Frexus

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en `/htdocs/api`)

Parte 3: Crear app en React Native con Expo

No comments yet

More from Frexus

No comments yet

No comments yet

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en /htdocs/api)

Parte 3: Crear app en React Native con Expo

No comments yet

More from Frexus

Frexus

More from Frexus

App móvil con CRUD conectado a servidor LAMP

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en /htdocs/api)

Parte 3: Crear app en React Native con Expo

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en /htdocs/api)

Parte 3: Crear app en React Native con Expo

More from Frexus

Objetivo general

Herramientas necesarias

Parte 1: Crear la base de datos

Parte 2: Crear la API en PHP

Estructura del backend (ubicado en /htdocs/api)

Parte 3: Crear app en React Native con Expo

No comments yet

More from Frexus

No comments yet

No comments yet

Estructura del backend (ubicado en `/htdocs/api`)

Estructura del backend (ubicado en `/htdocs/api`)

Estructura del backend (ubicado en `/htdocs/api`)

Estructura del backend (ubicado en `/htdocs/api`)