Agenda
- Definición
- Tipos de servidores
- Protocolos
- Tipos de conexiones
- Flujo
- Conexión a base de datos
- Conexión a servidores
- Actividad de aprendizaje
Conexión a Servidores en Internet
Definiciones
Conexión a servidores en internet
Establecer comunicación entre el dispositivo del usuario y un servidor remoto (normalmente mediante internet) para enviar o recibir información.
Tipo de servidores en internet
| Servidor | Uso |
|---|---|
| Servidor de archivos | Guarda documentos o imágenes. |
| Servidor web | Entrega páginas o APIs (como REST o GraphQL). |
| Servidor de bases de datos | Almacena la información estructurada. |
| Servidor de aplicaciones | Ejecuta lógica de negocio (ej. autenticación, análisis, procesamiento). |
Desplaza para ver más
Conexión a servidores en internet
Protocolo usado- HTTP/HTTPS(seguro): Es el protocolo más común.
- Otros menos usados en apps móviles modernas: FTP, WebSocket, MQTT.
Flujo de comuniación
Base de datos Web desde móviles
¿cómo se conectan?
Las apps móviles no se conectan directamente a bases de datos como MySQL. Siempre lo hacen a través de una API.
Flujo general
Tecnologías utilizadas
Buenas prácticas
- Usar HTTPS para cifrar los datos.
- Validar siempre del lado del servidor.
- Implementar tokens de acceso (ej. JWT).
- Manejar errores de red con cuidado (timeouts, no hay conexión, etc.).
Ejemplo en React Native
// Petición GET desde React Native
fetch("https://api.midominio.com/productos")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error al conectar:", error));
Recomendaciones generales
| Recomendación | ¿Por qué es importante? |
|---|---|
| Usar APIs intermedias | Nunca exponer directamente la base de datos |
| Validar datos en servidor | Evita inyecciones y errores de seguridad. |
| Manejar errores de conexión | Los usuarios móviles pueden perder conexión fácilmente. |
| Sincronización offline | Mejora la experiencia de usuario cuando no hay internet. |
Ejemplo práctico
Requisitos:
- XAMPP o LAMP instalado y corriendo (Apache y MySQL).
- Editor de código (VS Code recomendado).
- Node.js y Expo CLI instalados.
- Dispositivo móvil con la app Expo Go (o emulador).
- Computadora y móvil conectados a la misma red local.
Parte 1
Crear Base de Datos:
CREATE DATABASE tienda;
USE tienda;
CREATE TABLE productos (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(100),
precio DECIMAL(10,2)
);
INSERT INTO productos (nombre, precio) VALUES ('Camisa', 250.00), ('Pantalón', 400.00);
Ejemplo práctico
Parte 2: Crear API PHP (server local):
Ejemplo práctico
Estructrua:
/htdocs/tienda-api/
├── conexion.php
├── obtener_productos.php
Ejemplo práctico
Conexión a la Base de Datos:
$host = "localhost";
$user = "root";
$password = "";
$db = "tienda";
$conn = new mysqli($host, $user, $password, $db);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
Ejemplo práctico
obtener_productos.php (API):
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
include("conexion.php");
$sql = "SELECT * FROM productos";
$result = $conn->query($sql);
$productos = array();
while($row = $result->fetch_assoc()) {
$productos[] = $row;
}
echo json_encode($productos);
$conn->close();
Ejemplo práctico
Parte 3:
App Móvil en React Native
Ejemplo práctico
npx create-expo-app tiendaApp --template -blank
cd tiendaApp
npx expo start
Ejemplo práctico
Actividad de aprendizaje
- Google Frexus
- Selecciona la opción: Generando Valor Agregado.
- En frexus, Ve a la sección de búsqueda (pulsa sobre la lupa).Escribe: "Programación Móvil 2"
- Selecciona la opción "Conexión de App Móviles a Servidores LAMP".
- Resuelve cada una de las actividades planteadas.