La guía
Cómo se usa Uttra
Paso a paso, de una primera idea a un sitio publicado con tu propio código en la mano.
Paso 1
Empieza tu primer proyecto
Describe tu idea con palabras normales, y Uttra empieza a construirla delante de ti.
- Escribe tu idea en el compositor de la página de inicio, en árabe, en dialecto o en inglés, igual que se la explicarías a una persona delante de ti.
- Haz clic en «Empezar a construir». Uttra prepara un entorno aislado solo para tu proyecto; sus archivos nunca se comparten con los de nadie más.
- Sigue la construcción paso a paso en el chat: las páginas, los datos y la lógica se van creando uno tras otro delante de ti. También puedes elegir una dirección de diseño en «UI Styles» si quieres.
- Cuando esté listo, puedes seguir pidiendo cambios en el mismo chat cuando quieras; el proyecto sigue abierto para más desarrollo.
Paso 2
Abre la vista previa y ve tu sitio en vivo
Una vista previa en vivo junto al chat, que se actualiza al instante con cada petición.
- En cuanto termina la construcción, Uttra abre una vista previa en vivo de tu sitio o app justo al lado de la ventana del chat.
- Cualquier cambio que pidas en el chat se refleja en la vista previa al momento: ves el resultado mientras hablas con Uttra, no después.
- El enlace de vista previa es privado: nadie más puede verlo hasta que decidas publicar el proyecto para todo el mundo.
ChatCódigoVista previa
Publicar
Preview
En vivo
Clínica Dental SmileReserva tu visita
Paso 3
Usa «Seleccionar elemento» para editar visualmente
Haz clic en «Seleccionar elemento», elige cualquier cosa de la página y dile a Uttra qué cambiar en ella.
- Encima de la vista previa hay un botón llamado «Seleccionar elemento». Haz clic en él y elige cualquier cosa de la página (texto, imagen, botón, una sección entera).
- El elemento que eliges se envía al chat como contexto automáticamente, así que puedes escribir tu petición directamente, como «haz este texto más grande» o «borra esta sección», sin describir dónde está.
- Es más rápido para retoques precisos en un elemento. Para cambios más grandes, que toquen varias partes y necesiten lógica y conexiones de datos, el chat normal es la mejor herramienta.
Preview
Seleccionar elemento
Clínica Dental Smileh1.hero-title
Haz este texto más grande
Paso 4
Prueba tu sitio en distintos dispositivos
Cambia entre las vistas de móvil, tableta y ordenador desde la misma pantalla.
- Desde la barra de herramientas de la vista previa puedes cambiar entre los tamaños de móvil, tableta y ordenador sin abrir otro dispositivo.
- Así confirmas que el diseño funciona y se ve claro en todos los tamaños antes de publicar tu sitio para que la gente lo vea.
- Si Uttra te ha creado una app móvil, puedes probarla en tu teléfono real directamente con la app Expo Go escaneando un código QR.
Preview
Paso 5
Publica en un dominio Uttra gratuito
Un clic, y un enlace listo para compartir con quien sea, sin configurar alojamiento.
- Haz clic en el botón «Publicar» en la parte superior del proyecto: tu proyecto pasa a ser «Público» y obtienes al instante un enlace directo para compartir con quien quieras.
- El enlace está en un subdominio gratuito como tu-app.uttra.io, sin que tengas que configurar ningún alojamiento.
- Los sitios publicados funcionan con los recursos de tu plan (CPU, memoria, almacenamiento), repartidos automáticamente, listos para tráfico real sin que tengas que montar un servidor.
- Si pulsas «Publicar» otra vez después de una edición, la versión anterior sigue en línea para los visitantes hasta que la nueva quede verificada; tu sitio nunca se cae durante una actualización.
ChatCódigoVista previa
Publicar
PublicarHacer este proyecto accesible al público
Alojamiento
0.8 vCPU
procesador
2.4 GB
memoria
24 GB
almacenamiento
Dominio
Nuestro subdominio
clinic-smile.uttra.io
Dominio propio
Trae el tuyo, gratis en todos los planes
Publicar
Paso 6
Conecta tu propio dominio
Tu sitio en tu propio dominio, gratis con todos los planes.
- En la pantalla «Publicar», elige «Dominio propio» e introduce tu dominio, por ejemplo app.ejemplo.com.
- Añade los registros DNS que Uttra te muestra en el panel de control de tu registrador de dominios, normalmente un registro TXT para la verificación y un registro A.
- Haz clic en «Verificar dominio». Cuando la configuración se propague (puede tardar un poco), tu sitio queda en línea directamente en tu propio dominio.
| Tipo | Alojar | Importe |
|---|---|---|
| TXT | @ | uttra-verify=8a2f... |
| A | @ | 76.13.x.x |
Verificado: tu sitio está en línea en tu dominio
Paso 7
Conecta GitHub y sube tu código
Una copia completa del código, en tu propio repositorio.
- Desde la pestaña «GitHub» dentro del proyecto, conecta tu cuenta con un Personal Access Token que tenga el alcance repo.
- Una vez conectado, sube tu proyecto directamente a tu propio repositorio cuando quieras.
- Importar un repositorio existente (pull) se puede hacer desde la terminal dentro del entorno del proyecto con los comandos de git habituales, como git clone y git pull.
Conectar GitHub
clinic-smile-appSubir
Paso 8
Descarga tu código o edítalo tú mismo en la terminal
El código es totalmente tuyo, y nunca queda encerrado en la plataforma.
- El código es totalmente tuyo. Puedes subirlo a GitHub cuando quieras, o descargarlo/copiarlo directamente desde la terminal integrada en el proyecto.
- La terminal te da un entorno de desarrollo real: abre los archivos y edítalos a mano, e instala cualquier paquete npm o del sistema que tu proyecto necesite.
- Así no te limitas solo al chat: puedes trabajar como un desarrollador completo dentro del mismo proyecto cuando quieras.
zsh
$
$
¿Listo para probarlo tú mismo?
Gratis · Sin tarjeta de crédito