Nuestra primera app - Hello World!
Última actualización
Última actualización
Como es tradición en el mundo de la programación, vamos a crear nuestro primer Hello World!
El Hello World usualmente consiste en imprimir (print) en la consola la frase "Hello World!"
En nuestro caso, colocaremos un texto en el centro de la pantalla con estas palabras
Una vez hayas ingresado con tu cuenta te encontraras con el HomeScreen donde estarán todas tus apps que hayas abierto en tu computador. ¡Estas apps se almacenan de forma local!
Waoo no envía ni almacena el codigo de tu app a nuestros servidores. Creemos que este código es solo tuyo y no deberia ser de nadie mas.
Te invitamos a que sigas buenas practicas de desarrollo como guardar el codigo que hagas en Waoo App Builder en un repositorio como Github
El HomeScreen deberia verse de esta forma:
Para crear tu primera app selecciona el botón de "Crear nueva app", selecciona la carpeta donde se va a guardar tu proyecto y dale un nombre que sea facil de entender y significativo
Dado que Waoo usa Flutter para generar el código, se deben seguir ciertas reglas para el nombre y otros objetos. Esto es no usar mayusculas, no tener espacios e iniciar con una letra
¡Super importante! En el Flutter Path selecciona la carpeta donde tienes alojado Flutter. Usualmente es una ruta similar a:
/Users/your_name/flutter
/Users/your_name/developer/flutter
Sin esta carpeta es imposible para Waoo crear las apps y compilarlas.
Waoo esta diseñado para buscar automaticamente la carpeta pero este proceso puede fallar. Cambialo manualmente de ser necesario
Realiza un double-check del nombre de tu app, el flutter path y dale click al boton "Crear app"
Espera un instante mientras Waoo genera tu proyecto nuevo. Ten en cuenta que este proceso puede tomar algunos minutos dependiendo de la velocidad de tu Mac y el procesador que tengas.
Una vez creado tu nuevo proyecto, Waoo App Builder te permitira continuar al Home Screen de tu App. Esta pantalla debe verse similar al siguiente screenshot:
Esta pantalla esta dividida en 3 secciones: La barra de navegación superior (común a todas las pantallas), los tabs de tu app y el detalle de cada tab
Pasemos por cada tab (En los próximos días en la documentación publicare documentos más detallados para hablar de cada uno)
Pantallas: Aquí podrás crear cada pantalla para tu app. Piensa que al final, una app es una conexión de pantallas. Ejemplo: Una pantalla de Login, una pantalla de Home, una pantalla de perfil, etc
Modelos (Proximamente...): En el mundo de la programación existen los modelos u objetos. En esta pantalla podrás crearlos facilmente
Servicios (Proximamente...): Para que una app tenga conexión al mundo exterior necesita de servicios. Crea los servicios facilmente en este tab
Widgets (Próximamente...): En este tab puedes crear los componentes reusables que uses en mas de una pantalla para no tener que duplicar tus nodos
Recursos: En este tab puedes agregar los colores, las imágenes y los textos de tu app (Los textos estaran disponibles próximamente)
Crea tu primera pantalla dandole click al boton "Crear nueva pantalla" y asignale un nombre claro. Ejemplos: "profile_screen", "login_screen", "settings_screen"
Bienvenido al Scripting View. Este es el lugar donde la magia sucede. ¡Aquí podrás agregar nodos y conectarlos para crear tu app sin programar una sola línea de código!
El ScriptingView debería tener un aspecto similar a este:
Como puedes observar, esta pantalla esta dividida en multiples paneles: (También publicare nuevos documentos más detallados en los próximos días de cada panel)
Breadcrumb: Es la pequeña barra de navegación que ves arriba. Te ayudara a navegar facilmente en el scripting view
Panel central: Aquí podrás agregar tus nodos y conectarlos para formar tu app
Panel derecho: Este panel a su vez tiene tres pestañas
Detalle: Cuando selecciones un elemento del panel central, veras sus opciones aquí reflejadas
Vista previa: Proximamente...
Ajustes: Aquí podrás borrar tu pantalla completa
Panel inferior: Este panel a su vez también tiene tres pestañas:
Variables: Al igual que en programacion, puedes crear variables para tus pantallas. Podrás guardar todo tipo de información en ellas. Próximamente un tutorial de como usarlas pero puedes empezar a jugar con ellas ahora mismo
Funciones: Al igual que en programación, podemos crear funciones con el objetivo de tener nuestra pantalla organizada
Widgets: Cuando se habilite la pantalla de Widgets proximamente, aquí podras seleccionarlos y agregarlos
Como es tradición en el mundo del desarrollo, vamos a crear nuestro primer Hello World
El Hello World consiste usualmente en imprimir en consola la palabra "Hello World". En nuestro caso colocaremos un texto en el centro de la pantalla que diga "Hello World"
Para agregar nodos a nuestro panel central haz clic derecho. Se abrira una nueva pantalla similar a esta:
Aquí encontraras todos los nodos que puedes agregar
Vas a agregar dos nodos a tu panel central:
Center: El center centra los elementos que le indiques en su contenedor (en este caso la pantalla)
Text: Este es el nodo de texto básico
Colocalos para que esten de manera horizontal y se vean organizados, similar a la siguiente imagen:
Ahora vamos a conectarlos. Selecciona el circulo al lado de la palabra "body" de tu "home_screen" y luego selecciona el circulo al lado de la palabra "connector". Esto conectara con una línea roja tu pantalla inicial con el nodo de center
Ahora hay que indicarle al center cual es el texto que debe centrar. Para esto vas a conectar el "child" del center con el "connector" del texto
Deberias tener algo similar a la siguiente imagen:
Ahora vamos a indicarle al texto lo que debe decir. Para eso selecciona el nodo "Texto" y en el panel derecho en la propiedad "value" escribe "Hello World!"
Deberias tener algo similar a lo siguiente:
¡Estamos listos! Veamos nuestra app funcionando 🚀
Para probar nuestra app lo primero que debemos hacer es abrir el simulador de iOS. Asegurate de que este abierto antes de pasar al siguiente paso. Deberias estar como en la siguiente imagen:
Para correr nuestra app usamos el boton de Play arriba a la derecha de Waoo App Builder.
¡Dale play ahora!
En este momento Waoo App Builder generara tu código y lanzara tu app en el simulador. Ten en cuenta que este proceso puede tomar varios minutos segun la velocidad de tu maquina
Deberias ver el siguiente resultado en tu app:
¡Felicidades! ¡Finalizaste el Hello World! 🎉🎉🎉🚀🚀🚀🚀
¿Que sigue ahora? Empieza a experimentar con los demás nodos, agrega colores, prueba nuevas conexiones. ¡Cuando te sientas listo puedes incluso intentar crear una pantalla o app completa!
En los próximos días agregare nuevos tutoriales y guias a la documentación para que sea más facil entenderlo y aprendas más de como funciona Waoo App Builder
¿Que esperas para contarle a tus amigos?
