¿Qué es Twine?

Twine es un software que permite crear relatos del estilo "Elige tu propia aventura".

Utilizamos Twine para diseñar nuestros bots porque nos da la posibilidad de armar un flujo con diferentes caminos dependiendo de la opción que se seleccione.

Al mismo tiempo, al diseñarse en forma de diagrama de árbol de decisiones, es muy fácil tener un panorama visual del esquema del bot.

Twine puede usarse tanto online en la web como descargarse a la computadora, todo desde https://twinery.org/  

Te invitamos a seguir esta guía paso a paso para crear un Twine 👇

Primer paso: Crear el proyecto

Esta guía está basada en el uso online del software, es decir, sin necesidad de descargarlo.

El primer paso es ingresar a https://twinery.org/

Una vez en esa web, seleccionar la opción Use it online como se ve en la primera imagen de esta guía. 

Existen dos formas de empezar a trabajar en un proyecto: crear un proyecto de cero o importar un proyecto ya creado y trabajar sobre el mismo.

Veamos las dos opciones 👇

Crear un proyecto de cero

  • En el dashboard de Twine, ir al menú Story y hacer clic el botón "New"

  • Nombrar el proyecto y hacer clic en el botón "Create"

¡Listo! El proyecto ya fue creado y podemos empezar a trabajar en él.

Crear una card

Por defecto, el primer card se crea automáticamente. Este card por lo general refiere al Menú principal del bot. 

¿Notaste el ícono del cohete 🚀  verde unido al card? Eso significa que esa es el card inicial y el contenido de ese card será lo primero que el bot muestre.

  • El primer paso es nombrar el card.
    Hay dos formas de hacerlo:
    En el dashboard de Twine, ir al menú Passage y hacer clic en el botón "Rename", ingresar el nombre y hacer clic en OK

  • Hacer doble clic sobre el card para abrirla, y en el submenú con el contenido del card, hacer clic en "Rename", ingresar el nombre y hacer clic en OK

Simplemente cerrando el card desde la flechita de arriba a la derecha o haciendo clic en cualquier lado fuera del card, se guardarán los cambios que hayamos hecho.

Importar un proyecto ya creado

Es posible importar un proyecto existente y editarlo.

Los pasos a seguir son:

  • Hacer clic en Import en el submenú Library

  • Desde el pop-up que aparecerá, buscar y seleccionar el archivo a importar

  • Al encontrar el archivo, hacer click en Abrir

¡Listo! El archivo ya está disponible para ser editado.

Si lo prefieres, puedes arrastrar el archivo directamente sobre la pantalla para importarlo 😉

Luego puedes continuar con las siguientes tareas 👇

Crear contenido

El contenido de los cards será lo que el bot muestre en sus mensajes.
Puede ser texto, menús, imágenes...

Vamos a centrarnos en crear texto y menús, ya que otro tipo de elemento puede necesitar de la ayuda y el consejo del equipo de Chat-Tonic.

Agregar texto

En vez que el card está disponible para editar, podemos empezar a escribir el texto que vamos a querer que se muestre al usuario.

A modo de ejemplo, vamos a crear un card de Inicio/Menú principal, pero la lógica aplica a todos los cards.

- Escribiremos el texto que queramos que el bot muestre a la persona usuaria. 

- ¡Twine permite usar emojis! Podés buscar el emoji que quieras acá 👈 y copiarlo y pegarlo en el card 😉

- Una vez que hayamos terminado de escribir el texto, cerramos el card ¡y listo!

Crear menú de opciones

Para crear opciones se debe usar el siguiente formato [[Quiero sacar un turno->Sacar turno]]

  • [[ ]] Dos corchetes deben contener el texto que será la opción.

  • El primer texto será lo que el usuario verá como opción.

  • -> La flechita es necesaria para indicar a donde se dirige la opción.

  • El texto después de la -> es la card a la que se dirige la opción.

Cada vez que se escriba algo dentro de [[ ]] dos pares de corchetes, se creará automáticamente una nueva card con el nombre de lo que figure entre los corchetes.

A veces la opción puede coincidir con el nombre de la card.
Como en el ejemplo del video: [[Ver más opciones]] será tanto el nombre de la opción como el de la card. 

Las dos opciones son correctas, como regla general diremos que para evitar cards con nombres muy largos, es preferible abreviar el nombre del card.

Como vemos en el ejemplo, para cada opción se crea una card.
Luego, para agregar contenido en cada card, haremos lo mismo que vimos en el paso anterior y así sucesivamente.

Visualizar el flujo creado

A la hora de visualizar el flujo completo, tenemos algunas opciones.
Primero vamos a centrarnos en la vista en la que venimos trabajando.

En esta vista observamos el árbol completo y cómo una card se relaciona con otras mediante flechas. Es un panorama muy visual del flujo completo.

Twine nos ofrece tres tamaños de visualización: Pequeño, mediando y grande.

El tamaño de vista deseado se puede ir seleccionando desde los íconos en el margen inferior derecho de la pantalla de Twine, como se ve en las imágenes explicativas de esta guía.

En segundo lugar, Twine ofrece una herramienta de visualización llamada Play 👇

Visualizar con Play

Esta opción de visualización permite navegar el flujo diseñado de una forma más similar a su versión final.
Es útil si queremos simular de manera más fiel de cómo sería la experiencia del usuario del bot.

Para utilizarla, solo debes ir al submenú Build y hacer clic en "Play".

También puedes visualizar el flujo desde cualquier card, abriéndola y haciendo clic en "Test from here".

Exportar el archivo

Para descargar el archivo, que luego debería ser compartido con el equipo de Chat-Tonic, solo debes hacer clic "Publish to file" en el submenú Build

Se descargará un archivo .html, por lo general a la carpeta de Descargas de la computadora, que luego podrá ser compartido por mail, Trello, o por donde te comuniques con el equipo de Chat- Tonic.

Finalizar

¡Listo! Con estas herramientas podrás empezar a crear un Twine de cero o editar un Twine existente 👍