Contenidos
- Paso 1: Instalar las herramientas necesarias en tu Mac
- Paso 2: Crear el proyecto desde la Terminal
- Paso 3: Crear el código HTML5
- Paso 4: Añadir la plataforma iOS y Sincronizar
- Paso 5: Evitar el Error 908 (Truco de conexión)
- Paso 6: Compilar y ejecutar desde Xcode
- Paso 7: Autorizar la App en el iPhone (Solo la primera vez)
Si quieres aprender a transformar tus conocimientos de desarrollo web (HTML, CSS y JavaScript) en aplicaciones móviles reales para iPhone, Ionic Capacitor es la herramienta moderna más eficiente.
Para evitar interferencias de librerías o bloqueos de hardware, en esta guía aprenderás paso a paso y desde el absoluto cero cómo configurar tu entorno y compilar un «Hola Mundo» limpio directamente en tu dispositivo físico.
Paso 1: Instalar las herramientas necesarias en tu Mac
Antes de tocar una sola línea de código, necesitas asegurarte de tener el motor de desarrollo listo en tu sistema.
- Descarga e instala Node.js desde su página oficial (o mediante Homebrew ejecutando
brew install node). - Abre la App Store en tu Mac, busca Xcode (el entorno oficial de Apple) e instálalo.
Paso 2: Crear el proyecto desde la Terminal
Abre la aplicación Terminal en tu Mac y ejecuta los siguientes comandos en orden para crear la estructura de tu proyecto:
- Crear una carpeta vacía e ingresar a ella:
mkdir micamara cd micamara - Inicializar el entorno de Node.js:
npm init -y - Instalar el núcleo de Capacitor:
npm install @capacitor/core @capacitor/cli - Crear la estructura de configuración inicial:
npx cap init "MiAppHolaMundo" "com.ejemplo.holamundo" --web-dir=www(Nota: Aquí le estamos indicando a Capacitor que busque nuestros archivos web dentro de una carpeta llamadawww).
Paso 3: Crear el código HTML5
Ahora vamos a crear nuestra interfaz web básica. Seguimos en la terminal dentro de la carpeta del proyecto:
- Crear la carpeta contenedora
www:mkdir www - Crear el archivo
index.html: Puedes usar tu editor de código favorito (como VS Code) para crear el archivoindex.htmldentro de la carpetawww. El código debe ser este:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo Capacitor</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #e6f7ff;
}
h1 {
color: #0050b3;
font-size: 32px;
text-align: center;
padding: 20px;
border: 2px dashed #1890ff;
border-radius: 10px;
background-color: white;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
</style>
</head>
<body>
<h1>👋 ¡Hola Mundo desde mi iPhone!</h1>
</body>
</html>
Paso 4: Añadir la plataforma iOS y Sincronizar
Con nuestro código web listo, es hora de inyectarlo en el ecosistema de Apple. Ejecuta estos tres comandos en tu terminal:
- Instalar el soporte nativo de iOS:
npm install @capacitor/ios - Agregar la plataforma al proyecto:
npx cap add ios - Sincronizar el contenido web con la carpeta nativa:
npx cap sync
Paso 5: Evitar el Error 908 (Truco de conexión)
Xcode suele trabarse al procesar los símbolos de sistema de dispositivos iOS modernos. Para evitar que la compilación falle con el molesto código de error 908, haz lo siguiente antes de abrir el entorno:
- Desconecta el cable USB de tu iPhone.
- En tu iPhone, ve al centro de control y activa el Modo Avión. Asegúrate manualmente de que el Wi-Fi y el Bluetooth estén completamente apagados.
- Vuelve a conectar tu iPhone a la Mac mediante el cable USB.
Ahora sí, abre tu proyecto en Xcode ejecutando este comando en la terminal:
npx cap open ios
Paso 6: Compilar y ejecutar desde Xcode
Una vez que la interfaz de Xcode se cargue por completo, realiza estos tres pasos clave:
- Configurar tu firma de desarrollador: Haz clic en la raíz del proyecto (la carpeta azul llamada
Apparriba a la izquierda). Ve a la pestaña Signing & Capabilities en el panel central. En la sección Team, despliega el menú y selecciona tu Apple ID. - Seleccionar tu dispositivo: En la barra de herramientas superior, haz clic en el selector de dispositivos (al lado del botón de Play) y elige tu iPhone real en lugar de un simulador.
- ¡Lanzar la App!: Haz clic en el botón Play (el triángulo equilátero) situado en la esquina superior izquierda.
Paso 7: Autorizar la App en el iPhone (Solo la primera vez)
Cuando Xcode termine de transferir la aplicación a tu teléfono, verás el icono en tu pantalla de inicio, pero al pulsarlo te indicará que es un «Desarrollador no confiable». No te preocupes, es una medida de seguridad de Apple.
Para solucionarlo:
- En tu iPhone, ve a Ajustes -> General.
- Desplázate hacia abajo y entra en Administración de dispositivos y VPN.
- Selecciona tu correo de Apple ID y pulsa en «Confiar en [Tu Correo]».
¡Listo! Abre la aplicación en tu iPhone y verás en tiempo real tu diseño HTML5 ejecutándose como una app nativa de iOS.