nathankim0/app-demo-recorder

Grabador de demos de apps

Crea grabaciones de pantalla cortas que parezcan hechas por una persona usando la app con confianza: una funcionalidad por clip, sin pausas de carga, sin superposiciones de depuración, sin anuncios, una barra de estado ordenada.

$S es scripts/appdemo.sh en el directorio de este skill. Necesita ffmpeg (brew install ffmpeg), además de adb para Android o xcrun simctl de Xcode para iOS. En agentes en sandbox, ejecútalo con permisos elevados: se comunica con el emulador, el simulador y escribe fuera del espacio de trabajo.

1. Acordar qué mostrar

• Pregunta qué funcionalidades mostrar si el usuario no lo ha dicho. Graba un clip por funcionalidad y nombra los clips NN_funcionalidad (01_busqueda_precio, 02_calculadora). Empieza por lo que el producto hace mejor, no por la pantalla en la que se abre la app.
• Pregunta qué build y cuenta usar cuando no sea obvio. El material de marketing normalmente necesita un build de release de producción con datos reales. Un build de depuración/staging muestra menús de desarrollo, toasts de advertencia, datos de prueba y funciona más lento. No asumas; una grabación de staging normalmente hay que rehacerla.
• Si el clip necesita un estado de pago o premium, busca un override de depuración/desarrollador en la app antes de tocar facturación real.
• Las credenciales que el usuario te dé: introdúcelas con un comando cuya salida descartes (adb shell input text ... >/dev/null en Android; printf ... | xcrun simctl pbcopy <udid> y luego pegar en iOS) en lugar de usar herramientas que registren cada comando, y no las escribas en archivos.

2. Haz el dispositivo rápido y silencioso

• Emulador Android: asígnale recursos. Un AVD pequeño se entrecorta en pantalla y el entrecortamiento termina en el clip. emulator -avd <nombre> -memory 6144 -cores 4 -gpu host -no-snapshot-save -no-boot-anim Si el mismo id de app ya está instalado con una clave de firma diferente, usa otro AVD en lugar de desinstalar (desinstalar borra los datos del usuario).
• Build de release instalado y ejecutándose; inicia sesión; descarta popups de primera ejecución, permisos y anuncios intersticiales antes de grabar.
• $S statusbar on: hora fija (APPDEMO_TIME, por defecto 9:41), batería y señal completas, iconos de notificación ocultos. $S statusbar off lo restaura.
• En Android, no pulses Atrás del sistema en la pantalla raíz de la app. Finaliza la actividad y un override en memoria (switch premium, feature flag) se pierde al reiniciar.

3. Ensaya, luego graba

1. Ensaya cada clip una vez sin grabar. Aprende los toques, coordenadas y tiempos de espera. Abrir la pantalla una vez también calienta las cachés, por lo que la toma grabada carga más rápido.
2. Graba:

   $S start 01_busqueda_precio
   # maneja la app: adb shell input tap/swipe/text, xcrun simctl, o tu herramienta de automatización de UI
   $S stop 01_busqueda_precio        # -> $APPDEMO_OUT/01_busqueda_precio.mp4
   

   La grabación se ejecuta en el host (adb emu screenrecord / simctl io recordVideo). No uses adb shell screenrecord dentro del dispositivo en un emulador: compite con la app por la CPU y puede congelar la UI, de modo que los desplazamientos y toques nunca aparezcan.
3. Envía las acciones para un clip como un solo lote con pausas cortas (0.5–2.5 s), no una llamada de herramienta por toque. Inspeccionar la pantalla entre pasos deja largos tramos muertos en la toma.
4. Desplázate en pasos deliberados (aproximadamente 40 % de la pantalla, 600–800 ms por deslizamiento) para que los espectadores puedan leer.
5. Usa la entrada de texto del controlador de UI para texto no ASCII (coreano, emoji); adb shell input text solo maneja ASCII.
6. Cuando una funcionalidad solo muestre valor con datos (un libro mayor, un diario, un carrito), graba la creación de una entrada realista, luego bórrala inmediatamente después y confirma que la pantalla vuelve a su estado original. Primero verifica la configuración de compartir: una nueva publicación podría ser pública.

4. Verifica cada clip

$S strip $APPDEMO_OUT/01_busqueda_precio.mp4 /tmp/01.jpg 8

Mira la viñeta, no tu script: confirma que cada paso previsto realmente ocurrió (los desplazamientos se movieron, la pestaña cambió, el resultado apareció) y que no hay nada no deseado en pantalla: toasts, teclados cubriendo contenido, anuncios, datos personales como una dirección real o banners de depuración. Vuelve a grabar los clips fallidos; no entregues un clip cuya acción no hizo nada en silencio.

5. Corta la espera

$S tighten in.mp4 out.mp4          # corte de la entrada inactiva, tramos congelados -> 0.35 s, pantalla de resultado final mantenida 1.5 s
$S speed  in.mp4 out.mp4 1.3       # aceleración uniforme opcional

tighten comienza el clip 0.4 s antes de la primera acción real (los segundos inactivos después de start nunca están perfectamente quietos, por lo que la detección de congelación sola los pasa por alto) y acorta cada tramo donde la imagen no cambia, de modo que los toques se sucedan como los de una persona que conoce la app. Los clips típicos pierden aproximadamente la mitad de su duración. Verifica también un clip ajustado con strip: si se cortó un cambio pequeño (escribir un dígito, alternar un chip), baja --noise; si quedan pausas, baja --min-freeze.

6. Entrega

Pon todo en una carpeta: los clips raw, las versiones ajustadas (recomendadas para edición) y un breve README que enumere cada clip, lo que muestra y cualquier cosa que el usuario deba saber (datos creados y eliminados, datos personales visibles, recorte de la cámara del emulador en la parte superior). Informa las duraciones de los clips y qué no se pudo grabar y por qué.