Curso y Libro Vue Native: Tu primer contacto creando aplicaciones nativas

En este curso, conoceremos como trabajar con el ecosistema, componentes de base, animaciones, ruteo, consumir datos de una Rest Api, manejo de estilos y uso del ecosistema Vue y React.

Curso en Legacy (No tendrá más actualizaciones)

 

Tambien tengo recursos gratuitos para el Curso en el Blog

Es importante mencionar, que el curso tambien tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.

Prólogo

Vue Native es un framework para crear aplicaciones móviles nativas para Android e IOS empleando JavaScript; específicamente Vue; con esta tecnología podemos crear aplicaciones móviles de buena calidad.

Otro punto fundamental es que Vue Native, emplea el code de React Native para cada uno de los componentes que tenemos para crear nuestras aplicaciones; por lo tanto, Vue Native se comunica directamente con el core de React Native para poder visualizar mediante componentes, imagenes, textos, botones, listado y un largo etc.

La ventana fundamental que tiene esta plataforma, es que podemos emplear los plugins de Vue y de React Naive para crear nuestras aplicaciones.

Lamentablemente esta tecnología quedó obsoleta al momento de escribirse este libro; por lo tanto, el libro no tiene todos los capítulos que se tenía pensado inicialmente y queda como una referencia para comenzar con este framework.

Sin embargo, aunque esté obsoleta o deprecated, nos sirve para conocer todo lo que nos ofrece esta herramienta, podemos emplear para impulsarnos en desarrollar en frameworks similares como React Native, Galio, entre otros.

Como recomendación, emplea Visual Studio Code como editor, ya que es un editor, excelente, con muchas opciones de personalización, extensiones, intuitivo, ligero y que puedes desarrollar en un montón de plataformas, tecnologías, frameworks y lenguajes de programacion; asi que, en general, Visual Studio Code será un gran compañero para ti; pero, si prefieres otros editores como Sublime Text, PHPStorm o similares, puedes usarlo sin ningún problema.
 

Para quien es este curso

Este curso está dirigido a cualquiera que quiera comenzar con el desarrollo móvil y que conozca las bases de Vue.

Para aquellos que quieran conocer el framework y que conozcan Vue, que quieran conocer frameworks actuales similares a este, pero no tienen los conocimientos necesarios para aventurarse en estos por no conocer las bases que los sustentan.

Para a aquellas personas que quieran aprender algo nuevo, conocer sobre un framework que tiene muy poca documentación (sobre todo en español), que quiera mejorar una habilidad en el desarrollo web, que quiera crecer como desarrollador y que quiera seguir escalando su camino con otros frameworks superiores a este; con que cumplas al menos alguna de las consideraciones anteriores, este libro es para ti.
 

 

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Sobre el curso

• 1 Presentación

• 2 Requisitos para tomar el curso

• 3 El contenido del curso

Software necesario e instalacón de las herramientas

• 1 Herramientas y software necesario

• 2 Instalar Vue Native mediante Node

  Vamos a preparar nuestro ambiente de trabajo instalando el framework.

• 3 Extra: Instalar Vue Native mediante Node (Mac)

  Vamos a preparar nuestro ambiente de trabajo instalando el framework.

Repaso JavaScript

• 1 Introducción

• 2 Tipos

  Tipos de datos en JavaScript.

• 3 Funciones

  Definir funciones en JavaScript.

• 4 Arrays

  Cómo usar los arrays en JavaScript.

• 5 Objetos

  Cómo usar los objetos en JavaScript.

• 6 Condicionales

  Uso básico de los condicionales en JavaScript.

• 7 Ciclos

  Vamos a aprender el uso de los ciclos en JavaScript; sobre todo el de for y sus variantes.

• 8 Variables, lets y constantes

  Vamos a conocer los tres mecanismos que tenemos para almacenar datos mediante variables.

• 9 Desestructurar objetos

  Vamos a conocer esta fascinante característica para poder dividir un objeto en variables o constantes.

• 10 Desestructurar arrays

  Vamos a hacer lo mismo que la clase anterior, pero con arrays.

• 11 spread (propagar o esparcir) operador

  Conoce cómo emplear este famoso operador en JavaScript.

• 12 Promesas

  Vamos a explicar el mecanismo por excelencia y básico para crear procesos asíncronos en JavaScript, las promesas.

• 13 fetch y json

  Vamos a conocer como realizar peticiones asíncronas mediante HTTP y el uso de los JSON así como su estructura.

• 14 Extra: setTimeout

  Vamos a explicar el uso de esta peculiar función.

Tips para desarrollar en Vue Native

• 1 Introducción

• 2 Crear emulador Android

  Mostramos cómo crear un emulador en Android con Android Studio.

• 3 Lanzar un emulador en Android

  Te presento las formas que uso para ejecutar un emulador de Android.

• 4 Error Emuladores Android

  Tips que te dejo en caso de que el emulador te de problemas.

• 5 Aplicación no responde al abrir la misma en una terminal

  Tips que de dejo cuando la terminal no termina de ejecutarse al momento de lanzar la app al emulador.

• 6 Errores indetectables

  Vamos a ver otro ejemplo en el cual la app no responde y esto se debe cuando ocurre un error pero la app NO indica cual es.

• 7 Desarrollar tus apps en iOS en una Mac

• 8 Expo CLI y Metro

  Vamos a hablar sobre ambas tecnologías que son empleadas internamente por Vue Native.

Primeros pasos con Vue Native

• 1 Introducción

• 2 ¿Qué es Vue Native?

  Hablemos sobre como funciona el framework, que nos ofrece, como funciona y que podemos hacer.

• 3 ¿Qué es y qué no es Vue Native?

  Vamos a dar algunos puntos que pueden resultar de interés para entender más a fondo esta herramienta.

• 4 Crear un proyecto y ejecutar la aplicación

  Vamos a crear un proyecto y ejecutarlo en el emulador.

• 5 Composición del proyecto: Carpetas y archivos

  Vamos a presentar la composición de archivos y carpetas del proyecto.

• 6 Entorno de trabajo

  Vamos a preparar el entorno de trabajo, junto con nuestro editor.

• 7 Primeras pruebas

  Vamos a realizar las primeras pruebas y conocer de manera básica como funciona y que nos ofrece Vue Native.

• 8 Mostrar mensajes por la terminal

  Demo: Mensajes de debug

• 9 Crear una aplicación con ruteo

  Vamos a crear una app en base a rutas.

• 10 Navegar entre pantallas

  Vamos a navegar entre pantallas de manera programática con un botón.

Componentes fundamentales

• 1 Introducción

• 2 Crear estructura

  Vamos a crear nuestra aplicación de ejemplo que incluye el componente de navegación.

• 3 Componente View

  Vamos a conocer el componente de view, para embeber elementos, el div de nuestro HTML.

• 4 Componente Text

  Vamos a conocer el componente de texto, para colocar textos en cualquier nivel.

• 5 Componente Text Input

  Vamos a conocer el componente de input, para ingresar data de nuestro usuario.

• 6 Componente Button

  Vamos a conocer el componente de botón, para los eventos click.

• 7 Componente Imagen

  Vamos a conocer el componente para visualizar imágenes.

• 8 Tarea: Cargar Imagen

  Vas a hacer una tarea de mostrar una imagen que tienes que importar al proyecto.

• 9 Componente Alert

  Vamos a conocer el componente de alerta, para mostrar diálogos.

• 10 Componente ScrollView

  Vamos a conocer el componente para permitir el scroll en nuestra app, ya sea horizontal o vertical.

• 11 Tarea: ScrollView, Generar un listado con un v-for

  Vas a realizar un experimento con el componente de scroll.

• 12 Componente FlatList

  Vamos a conocer el componente que nos permite crear listados pero más potentes que con scrollview.

• 13 Componente FlatList

  Vamos a conocer el componente que nos permite crear listados pero más potentes que con scrollview.

Trabajando con los estilos

• 1 Introducción

• 2 Crear aplicación

  Vamos a crear una aplicación nueva para esta sección.

• 3 Crear pantallas de prueba

  Vamos a crear unas pantallas y un esquema de navegabilidad.<br /> <br /> Comandos:<br /> <br /> npm install react-native-screens react-native-reanimated react-native-gesture-handler react-native-paper<br /> <br /> npm install vue-native-router

• 4 Opcional: Publicar en Git

  Vamos a salvar el trabajo en Github, para poder utilizar este esquema más adelante.

• 5 Navegación

• 6 Estilos por componente: Bloque de estilo

  Vamos a aplicar la navegación entre pantallas de manera programática.

• 7 Estilos por componente: Atributos

  Vamos a crear un estilo en base a bloques con la etiqueta de estilos particular para cada componente.

• 8 Estilos globales o por componentes con StyleSheet.create

  Vamos a repasar el estilo en base a atributos por componentes.

• 9 Estilos globales con StyleSheet.create

  Finalmente, vamos a presentar un esquema en el cual podemos usar el bloque de estilo de manera programática en el tiempo del render tanto global como local.

• 10 StyleSheet.create: Emplear estilos locales y globales

  Vamos a combinar los estilos globales con los estilos locales.

Aplicación de Anime: Conexiones a Api Rest, listado y ruteo

• 1 Introducción

• 2 Crear listado inicial

  Vamos a crear una aplicación nueva para esta sección colocando la app de nuestro repositorio en github.

• 3 Web de anime para obtener los datos

  Vamos a conocer la web con la que vamos a obtener nuestros datos.

• 4 Obtener un listado de animes

  Vamos a obtener los datos mediante un fetch en la app de Vue Native.

• 5 Construir una interfaz para trabajar con una estructura fija

  Vamos a crear el componente que nos permitirá mapear de la respuesta devuelta por la Api Rest a un array de objetos.

• 6 Reto: v-for

  Vas a generar el listado con scroll para nuestros items.

• 7 Reto: Listado, con Scroll

  Vamos a conocer la web con la que vamos a obtener nuestros datos.

• 8 Reto: Navegación hacia una nueva página con pase de parámetro

  Vamos a navegar hacia otra pantalla pasando parámetros.

• 9 Reto: Página de detalle

  Vamos a crear una página de detalle con el ítem seleccionado.

• 10 Pequeños detalles de estilo

  Vamos a aplicar pequeños cambios de estilo.

• 11 Reto: Estilos globales

  Vamos a aplicar estilos globales a la app, de tal manera que vamos a determinar qué estilos son locales y que estilos son globales.

• 12 Reto: Indicador de carga

  Vamos a colocar un indicador de carga al momento de hacer el loading de la data.

• 13 Opcional: Publicar en Git

Aplicación de Anime: Adivina Quien

• 1 Introducción

• 2 Crear aplicación

  Vamos a crear una aplicación nueva para esta sección.

• 3 Crear esquema de obtener animes aleatorios

  Vamos a crear un archivo que se encargue de generar estos registró de manera aleatoria.

• 4 Optimizar la conexión a la rest api, consultando la misma una sola vez

  Vamos a evitar realizar peticiones vía fetch cada vez que recargamos el listado.

• 5 Problema con la ordenación

  Vamos a corregir un pequeño detalle para corregir un bug en la ordenación.

• 6 Ordenar el listado en dos secciones

• 7 Generar el contador de anime aleatorio (Respuesta correcta)

  Vamos a generar un número aleatorio para el anime a adivinar.

• 8 Mostrar imagen

  Vamos a mostrar la imagen de anime en el componente correspondiente.

• 9 Errores y advertencias

• 10 Publicar en Git

  Vamos a guardar nuestro trabajo en nuestro repositorio en git.

• 11 Crear Tag

  Vamos a crear un tag antes de subir el trabajo antes de hacer los retos.

• 12 Reto: Mostrar opción de ver bajo demanda

  Vas a mostrar la opción de ver cuando el usuario seleccione una opción.

• 13 Reto: Modularizar el componente de selección: props y eventos

  Vas a crear un componente de botón para los botones de opciones.

• 14 Reto migrar de props a eventos

  Vas a migrar de tus props a un evento.

Introducción a las animaciones

• 1 Introducción

• 2 Crear aplicación

  Vamos a crear la app para esta sección.

• 3 Acotación sobre el useNativeDriver

  Una consideración que te dejo antes de seguir el resto de la sección.

• 4 Creando nuestra primera animación

  Vamos a crear nuestra primera animación, que será una esfera creciente.

• 5 Reto: Animación inversa

  Vas a hacer la animación inversa (decrecer).

• 6 La función spring y otras referencias

  Vamos a ver una variante de la función que se encarga de animar.

• 7 Introducción a las Interpolaciones

  Vamos a conocer el uso de las interpolaciones para crear puntos específicos en la animación.

• 8 Interpolaciones: Variar tamaños

• 9 Interpolaciones: Variar colores

• 10 Animaciones Paralelas

  Vamos a mostrar como podemos realizar animaciones de manera paralela.

• 11 Reto, practica: Animaciones Paralelas

• 12 Interpolaciones: Rotaciones y grados

  Vamos a rotar un cuadrado con las interpolaciones.

• 13 Reto: Adaptar las rotaciones al esquema paralelo

• 14 Interpolaciones: Trasladar

• 15 Interpolaciones: Escalar

• 16 Reto, practica: Animaciones Paralelas

• 17 Opcional: Publicar en Git

CRUD: Aplicación de citas

• 1 Introducción

• 2 Crear aplicación

  Vamos a crear la app para esta sección.

• 3 Crear formulario básico

  Vamos a crear algunos campos básicos para crear y editar datos en nuestra app.

• 4 Aplicar estilo

  Vamos a aplicar algo de CSS local.

• 5 Atributos de los text-input: Campos numéricos

  Vamos a establecer el teclado de tipo numéricos para la edad.

• 6 Atributos de los text-input: Multilínea

  Vamos a crear un campo de tipo textarea para el formulario.

• 7 Agrupar nuestras propiedades de formulario

  Vamos a agrupar las propiedades del formulario en un objeto.

• 8 Campos de selección: Estado

  Vamos a crear un campo de selección para el estado.

• 9 Campos de selección: Estado: Paquete externo

  Vamos a instalar un paquete para manejar el campo de selección.

• 10 Sexo

  Vamos a crear un campo switch para el sexo.

• 11 Guardar datos locales: Instalar paquete y generar operaciones set y get

  Vamos a emplear la versión actual de React para manejar el storage

• 12 Guardar datos locales: Probar operaciones set y get

  Vamos a probar las operaciones set y get que definimos anteriormente.

• 13 Migrar el AsyncStorage a una versión comunitaria

  Vamos a realizar una migración del AsyncStorage a la versión comunitaria.

• 14 Dar soporte para guardar una lista de objetos

  Vamos a adaptar las funciones de get y set para que trabajen con un array de objetos.

• 15 Página de index

  Vamos a crear la página de listado de todas las citas.

• 16 Estructura inicial de los ítems/citas

  Vamos a aplicar cierta estructura y estilo para definir un ítem y sus opciones.

• 17 Editar una cita: Navegar a la página de Formulario

• 18 Extra: Generar data de manera automática cuando no tenemos citas

  Vamos a generar unos datos de ayuda de manera automática.

• 19 Editar una cita: Establecer formulario

  Vamos a establecer los datos en la propiedad form cuando vamos a editar.

• 20 Editar una cita: Recibir el parámetro y actualizar

  Vamos a actualizar los datos en nuestro store.

• 21 Demo: Eventos del ciclo de vida de la navegación

  Vamos a conocer un mecanismo para detectar cuando volvemos a una página anterior que ya estaba en el stack de navegación.

• 22 Refrescar listado

  Vamos a recargar el listado y ver una consideración en el uso de parámetros al retornar a una vista anterior.

• 23 Botón flotante para crear un elemento del listado

  Vamos a crear un botón flotante para mandar al formulario de creación.

• 24 Borrar una tarea

  Vamos a eliminar una tarea existente.

• 25 CRUD completado

  Vamos a hablar de lo que logramos hasta este vídeo y que vamos a hacer a partir de esta sección.

• 26 Reto: Hacer reutilizable el botón flotante

  Vas a crear un componente personalizado para el botón flotante.

• 27 Integrar plugins de Vue

  Vamos a hablar sobre cómo puedes emplear plugins nativos de Vue.

• 28 Vuelidate: Validaciones en el formulario, primeros pasos

  Vamos a instalar un plugin bastante famoso para validar formularios en Vue.

• 29 Vuelidate: Validar un campo y mostrar errores

  Vamos a aplicar validaciones sobre el campo de formulario y mostrar los errores en el template.

• 30 Vuelidate: Reto, validar el resto del formulario de tipo text-input

  Vas a validar el resto de los campos de tipo input text.

• 31 Vuelidate: Validar el Picker

  Vamos a aplicar algunas validaciones sobre un componente que no tiene asignado un v-model, el picker.

• 32 Vuelidate: Detectar estado del formulario

  Vamos a verificar mediante una operación si el formulario es válido o no.

• 33 Vuelidate: Reto, deshabilitar botón submit

  Vamos a deshabilitar el botón al momento de hacer un submit.

• 34 Extra: Enviar un mensaje

  Vamos a instalar un paquete para el envío de mensajes en la app y hacer una demostración.

• 35 Extra: Enviar un mensaje al editar/crear un registro

  Vamos a mostrar un mensaje al momento de crear o editar una cita y crear un contenido bloqueante.

• 36 Extra: Enviar un mensaje al eliminar registro

  Vamos a mostrar un mensaje al momento de eliminar una cita.

• 37 Reto: Crear componente reutilizable para los errores

  Vas a crear un componente extra para mostrar los errores del formulario.

• 38 Reto: Crear diálogo de confirmación

  Vas a crear un dialogo de confirmación que se muestre cuando queremos eliminar un registro.

• 39 Optional: Publicar en Git

Componentes profesionales personalizados reutilizables para nuestras apps

• 1 Introducción

• 2 Introducción: Componente Burbujas

  Vamos a crear la app para esta sección.

• 3 Crear aplicación

  Vamos a crear la app para esta sección.

• 4 Burbuja: Crear

  Vamos a comenzar el proyecto, creando un círculo en un componente aparte.

• 5 Burbuja: Animación

  Vamos a crear una animación de desplazamiento en el eje de las Y para el círculo/burbuja.

• 6 Burbuja: Animación con interpolaciones

  Vamos a crear la animación anterior con las interpolaciones.

• 7 Burbuja: Obtener el tamaño de la pantalla

  Vamos a detectar el tamaño de la pantalla del dispositivo.

• 8 Burbuja: Desplazamientos leves a los lados

  Vamos a crear un desplazamiento leve en el eje de las X de derecha a izquierda y viceversa.

• 9 Burbuja: Refactorizar, props, propiedades fijas y propiedades en objetos

  Vamos a aplicar algunas refactorizaciones para tener mas organizado nuestro componente.

• 10 Burbuja: Crear componente Burbujas

  Vamos a crear un componente para manejar varias burbujas.

• 11 Burbuja: Establecer imágenes

  Vamos a mostrar algunas imágenes en nuestras burbujas.

• 12 Burbuja: Posición absoluta para romper los alineados de filas

  Vamos a hacer un acomodo para poder alinear las burbujas de la manera correcta.

• 13 Burbuja: Animación de la opacidad

  Vamos a crear una animación para variar la opacidad.

• 14 Burbuja: Establecer evento click

  Vamos a trabajar en el evento click para nuestras burbujas y que hagan alguna acción.

• 15 Introducción: Componente Campos de texto

• 16 Campo de Formulario: Estilo base

  Vamos a crear un componente nuevo, aplicar un estilo básico en los campos.

• 17 Campo de Formulario: Animando bordes

  Vamos a crear un efecto en el cual vamos a animar el color de los bordes del input.

• 18 Campo de Formulario: Activar en Foco

  Vamos a conocer un props o evento que se dispara cuando el elemento gana el foco.

• 19 Campo de Formulario: Animando un borde y el tamaño

  Vamos a crear otro efecto de animación.

• 20 Campo de formulario: Evento de cambios en el texto + Reto

  Vamos a crear un efecto en el cual vamos a animar el color de los bordes del input.

• 21 Campo de formulario: Enviar texto vía eventos

  Vamos a enviar los valores de los campos al componente padre vía eventos.

• 22 Introducción

• 23 Botones: Modernos

  Crearemos botones típicos modernos con color sólido y bordes redondeados.

• 24 Botones: Flat

  Crearemos un botón de tipo plano o flat.

• 25 Botones: sm y normales

  Vamos a crear nuestros componentes de botón adaptables para nuestros desarrollos.

• 26 Botones: Color de fondo

  Vamos a definir un prop para variar el color de fondo.

• 27 Reto, Botones: title

  Vamos a definir el props para el título del botón.

• 28 Botones: Borde

  Vamos a crear un botón de tipo outline.

• 29 Botones: Otras opciones

  Border radius, tipográfica, color de texto.

• 30 Introducción

• 31 Expandible: Crear componente base

  Vamos a crear el componente base para crear nuestro nuevo componente.

• 32 Expandible: Crear animacion de expansión

  Vamos a implementar la animación de expansión para una circunferencia.

• 33 Expandible: Activar con un click

  Vamos a activar el evento click para expandir nuestros elementos.

• 34 Expandible: Mostrar/ocultar contenido bajo demanda

  Vamos a mostrar el contenido cuando expandamos el elemento.

• 35 Expandible: Definir estilo extra según el estado

  Vamos a definir un poco más de estilo para nuestro componente.

• 36 Expandible: Definir imagen inicial

  Vamos a colocar un icono de una imagen en nuestra burbuja y ocultarla cuando mostremos el contenido, y viceversa.

• 37 Opcional: Publicar en Git

Navegación: Drawers y tabs

• 1 Introducción

• 2 Sobre la navegación por menú lateral (Drawer) y Tabs empleando Vue Native Router

  Vamos a hablar sobre el esquema de navegación que nos permite usar Vue Native Router y sus limitaciones o inconvenientes actualmente.

• 3 Crear aplicación

  Vamos a crear una aplicación con la cual vamos a trabajar.

• 4 Crear componente para el Drawer o menú lateral

  Vamos a crear el contenedor del menú lateral.

• 5 Aplicar animaciones de traslaciones

  Vamos a aplicar una animación para cerrar y abrir el menú lateral.

• 6 Cerrar y Abrir bajo demanda

  Vamos a crear una opción para abrir o cerrar el drawer bajo demanda.

• 7 Items: Crear

  Vamos a crear un item para nuestra app.

• 8 Extra: Definir un layout base

  Vamos a crear una app modular para nuestra aplicación.

• 9 Extra: Carpeta src

  Vamos a reorganizar los .vue de la aplicación en un solo lugar.

• 10 Experimentar con el evento clic en la navegación en los ítems

  Vamos a realizar algunas pruebas con los eventos clicks sobre los ítems del menú lateral.

• 11 Publicar en git

• 12 Oscurecer cuando el drawer está abierto

  Vamos a crear una adaptación para oscurecer y/o bloquear la pantalla al abrir el menú.

• 13 Cerrar el Drawer desde el menú

  Vamos a cerrar el menú desde el menú.

• 14 Opcional: Publicar en git

Generar instaladores para Android e iOS

• 1 Generar ipa (iOS)

• 2 Generar apk (Android)

Nativebase

• 1 Introducción

• 2 Crear proyecto

  Crearemos un proyecto limpio para esta sección.

• 3 Instalar Nativebase y configurar el proyecto

  Vamos a instalar las dependencias y configurar el proyecto.

• 4 Sobre esta tecnología

  Vamos a hablar sobre esta tecnología, que nos ofrece y que vamos a hacer en los siguientes videos.

• 5 Pruebas con los botones

  Vamos a presentar el uso de los botones de NB.

• 6 Iconos, pruebas con botones

  Vamos a presentar el uso de los iconos de NB.

• 7 Contenedores y header

  Vamos a presentar el uso de los contenedores y el componente de header.

• 8 Pruebas con el header

  Conoceremos un poco mas el uso del header.

• 9 Pruebas con las cartas

  Vamos a realizar algunas pruebas con las cartas.

• 10 Pruebas con los Formularios

  Vamos a presentar el uso de los formularios en NB.

• 11 Pruebas con los FAB

  Vamos a conocer los botones flotantes, sus posiciones y el tipo extendido.

• 12 Pruebas con los Grids, Cols y Row

• 13 Listas

• 14 Pruebas con los Footer tags

• 15 Resto de los componentes

• 16 Publicar en git

Despedida

• 1 Depedida

  Depedida del curso

15-09-2021 - Andrés Cruz

• Categoría
• /
• Vue Native
• /
• Curso y Libro Vue Native: Tu primer contacto creando aplicaciones nativas