Curso Vue Native: Tu primer contacto creando aplicaciones nativas

15-09-2021 - Andrés Cruz

Curso Vue Native: Tu primer contacto creando aplicaciones nativas

Precio mínimo:

$5.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Contacto por mensajes

En este curso vamos a dar los primeros pasos con Vue Native para la creación de aplicaciones nativas para Android e iOS.

Requisitos

Este curso es desde cero, inclusive NO es necesario que conozcas Vue, ya que tenemos una sección de reforzamiento para Vue en su versión 3.

También te damos unas bases o aspectos más puntuales en JavaScript por si necesitas las mismas.

Si es importante que tengas bases en HTML, CSS, y también en JavaScript, ya que si nos las tienes puedes tomar primero mi curso de: Primeros pasos con la programación.

El curso es sencillo de seguir; inicialmente tenemos un par de secciones de reforzamiento tanto de JavaScript como de Vue, 

Para conocer los elementos específicos que vamos a necesitar para crear las apps en Vue Native así de simple, también veremos una introducción a los elementos principales en JavaScript que vamos a usar y también a Vue.

Estructura del curso

Vamos a evaluar uno a uno cada una de las secciones que veremos en el curso:

  • 1 Repaso a JavaScript

    Vamos a conocer SOLO los aspectos más básicos, un repaso al lenguaje y algunas funcionalidades que vamos a necesitar para crear nuestras apps en Vue Native; pero de igual manera vamos hacer una introducción básica al lenguaje conociendo las funciones, variables, alcances de las mismas, introducción a Node y todas esas cosas las veremos por aquí.

  • 2 Repaso a Vue

    En Vue vamos a dar un poco más de fuerza, y vamos a conocer el framework en detalle de manera básica, desde los primeros pasos y trabajando con Vue Cli, que es el que más nos permite realizar las operaciones más complejas con Vue y más importante, es el esquema más similar que tenemos al momento de crear las aplicaciones con Vue Native.

    Conocer la estructura de un proyecto es FUNDAMENTAL para crear las apps en Vue Native, ya que la estructura es casi la misma, conocer los elementos básicos, organización en base a módulos, crear tus primeros componentes, que son el corazón de Vue.

    Crearemos proyectos desde cero y conocer sus componentes básicos.

  • 3 Tips y aclaratorias

    Esta sección tiene como propósito introducir algunos consejos que pueden resultar útil antes de comenzar a crear nuestras apps en Vue Native, algunos problemas que puedes tener y su solución recomendada y como realizar algunos procesos estándar como crear emuladores.

  • 4 Primeros pasos con Vue Native

    En esta sección vamos a conocer los elementos básicos de Vue Native:

    1. Cómo preparar el entorno, y lanzar el mismo ya listo para desarrollar
    2. Vamos a conocer la estructura de una app en Vue Native
    3. Dar los primeros pasos con la misma creando nuestros primeros componentes

    Características como, ejecutar la aplicación, conocer nuestro entorno de trabajo, como lanzar y enlazar el emulador con la app que estamos creando.

  • 5 Componentes fundamentales

    En esta sección vamos a presentar cada uno de los componentes que podemos emplear en Vue Native; ya que NO podemos emplear etiquetas HTML si no tenemos que emplear alguno de los componentes dispuestos en React Native (Vue Native) como:

    1. Campo de texto
    2. Botones
    3. Inputs
    4. Diálogos
    5. Entre otros

    Inclusive podemos cargar otros tipos de componentes desde React Native, por ejemplo componentes de listados pero eso lo veremos un poco más adelante.

  • 6 Trabajando con los estilos

    En esta sección vamos a trabajar con los estilos, NO desde el punto de vista de crear interfaces bonitas; recuerda que esto NO es un curso de diseño y vamos a conocer los distintos mecanismos que tenemos para trabajar con los estilos:

    1. CSS mediante clases y locales (atributo style)
    2. JavaScript CSS: locales y globales
    3. Esto es un elemento que ya hable en más detalle en una entrada sobre los estilos locales y Globales a nivel de componentes

    Los estilos en Vue Native, cómo tratamos en la entrada de estilos locales y globales en componentes son de dos tipos.

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

    Ya en este punto, tenemos unos conocimientos básicos sobre como usar algunos elementos de Vue Native, sus componentes, manejo de errores, recargar y poco más, son conocimientos un poco dispares que no están muy relacionados pero nos pueden servir para hacer nuestra primer aplicación, y eso es lo que vamos a realizar!

  • 8 Primera app en Vue Native

    Vamos a crear nuestra primera aplicación con este framework, la cual tiene elementos IMPRESCINDIBLES en cualquier app:

    1. Ruteo: Cambiar de una página a otra
    2. Listado: Que forman parte de un CRUD y son la vista principal que debemos de definir, aquí vamos a empezar a utilizar algunos componentes que vimos anteriormente como, los view, botones, textos y el scrollview.
    3. Conexiones a Rest Api o Internet: Prácticamente todas las apps necesitan conectarse a Internet; la famosa nube y esto es algo que es todavía más necesario en las aplicaciones móviles, así que, vamos a conocer como hacer esa conexión.
  • 9 Aplicación de Anime: Adivina Quien

    Vamos a adaptar la aplicación de anime que creamos anteriormente para hacer un juego, de adivina el anime, para eso vamos a adaptar la app anterior, que logramos construir un listado y vista de detalle gracias al consumo de un recurso rest, vamos a aprovechar todo eso para practicar más en la creación de apps móviles con Vue Native y ver lo sencillo e interesante de emplear tecnologías como Vue para crear apps y lo fácil que resulta adaptar la misma para desarrollos similares.

  • 10 Introducción a las animaciones

    En esta sección vamos a presentar el uso de animaciones para hacer cambios suaves entre estados empleando las animaciones en CSS, que nos permiten asignar estos cambios en base a propiedades, pero en Vue Native esto se potencia ya que podemos asignarle propiedades y hacer operaciones en base a estilos más personalizables y adaptables en base a nuestras necesidades.

    Como explicamos en el curso, estas animaciones se basan en 4 pasos:

    1. Definir e inicializar el driver
    2. Establecer el driver en el template con las propiedades CSS a afectar
    3. Definir una interpolación (opcional)
    4. Animar mediante la librería y opciones correspondientes.

11 CRUD: Aplicación de citas

En esta app tiene el principal objetivo de crear un CRUD, conocer la entrada de datos mediante formularios y explorar más en detalle los campos de formularios que tenemos a nuestra disposición para ser operaciones CRUD, más adelante tomaremos parte de esta app para realizar una app más completa: veremos cómo:

  1. Crear campos de formulario: Campos de texto, textarea, selección, check entre otros
  2. Guardar datos de manera persistente con un paquete de React Native que podemos emplear con Vue Native

12 Operaciones CRUD sobre la data.

En esta sección que puede ser de las más tradicionales y por lo tanto aburridas del curso pero IMPORTANTES; vamos a crear una app o las partes funcionales mejor dicho que serían nuestros fascinantes CRUDs... la app va a ser de temática de citas, por lo tanto, son formularios para pedir información personal con lo típico, campos de textos, textarea, switch y campos de selección; aparte del CRUD básico, vamos a extender Vue Native de la siguiente forma:

  1. Definiendo nuevos campos que son solamente soportados en React Native o mediante plugins a este framework como en el caso del picker.
  2. Agregar validaciones con un plugin de Vue básico llamado Vuelidate
  3. Componentes de confirmación mediante alerts.

13 Componentes profesionales personalizados reutilizables para nuestras apps

En esta sección vamos a enfocarnos en crear algunos componentes mediante componentes de Vue que podamos utilizar fácilmente en nuestras apps que sean profesionales como:

  1. Burbujas: Vamos a crear un listado de burbujas animables que van subiendo poco a poco desde la parte inferior a el top de la pantalla que va a ir moviéndose lado a lado y variando la opacidad; además lo podemos personalizar en colores, tamaños e imágenes.
  2. Campos de textos: vamos a crear una animación sencilla para los campos de formularios variando el borde y tamaño.
  3. Botones: como gran elemento por excelencia que es empleado en cualquier interfaz; el componente por excelencia para que nuestro usuario interactúe, vamos a crear los botones típicos tipo flat, outline y modernos para que sean personalizables.

14 Navegación: Drawers y tabs

En esta sección que extenderé más adelante, en el tiempo, vamos a crear nuestro propio Drawer para experimentar con la tecnología y que nos ofrece Vue Native Router para la creación de nuestras aplicaciones.

En esta sección también mencionaremos cómo trabajar con Vue Router con el Drawer y con la navegación en base a tags o etiquetas.

 

Puedes ver el detalle del curso y TODO lo que ofrece en el link en la parte superior.


 

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


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!