En este curso vamos a dar los primeros pasos con Vue Native para la creación de aplicaciones nativas para Android e iOS.
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.
Vamos a evaluar uno a uno cada una de las secciones que veremos en el curso:
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:
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:
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:
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:
Vamos a preparar nuestro ambiente de trabajo instalando el framework.
Vamos a preparar nuestro ambiente de trabajo instalando el framework.
Tipos de datos en JavaScript.
Definir funciones en JavaScript.
Cómo usar los arrays en JavaScript.
Cómo usar los objetos en JavaScript.
Uso básico de los condicionales en JavaScript.
Vamos a aprender el uso de los ciclos en JavaScript; sobre todo el de for y sus variantes.
Vamos a conocer los tres mecanismos que tenemos para almacenar datos mediante variables.
Vamos a conocer esta fascinante característica para poder dividir un objeto en variables o constantes.
Vamos a hacer lo mismo que la clase anterior, pero con arrays.
Conoce cómo emplear este famoso operador en JavaScript.
Vamos a explicar el mecanismo por excelencia y básico para crear procesos asíncronos en JavaScript, las promesas.
Vamos a conocer como realizar peticiones asíncronas mediante HTTP y el uso de los JSON así como su estructura.
Vamos a explicar el uso de esta peculiar función.
Mostramos cómo crear un emulador en Android con Android Studio.
Te presento las formas que uso para ejecutar un emulador de Android.
Tips que te dejo en caso de que el emulador te de problemas.
Tips que de dejo cuando la terminal no termina de ejecutarse al momento de lanzar la app al emulador.
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.
Vamos a hablar sobre ambas tecnologías que son empleadas internamente por Vue Native.
Hablemos sobre como funciona el framework, que nos ofrece, como funciona y que podemos hacer.
Vamos a dar algunos puntos que pueden resultar de interés para entender más a fondo esta herramienta.
Vamos a crear un proyecto y ejecutarlo en el emulador.
Vamos a presentar la composición de archivos y carpetas del proyecto.
Vamos a preparar el entorno de trabajo, junto con nuestro editor.
Vamos a realizar las primeras pruebas y conocer de manera básica como funciona y que nos ofrece Vue Native.
Demo: Mensajes de debug
Vamos a crear una app en base a rutas.
Vamos a navegar entre pantallas de manera programática con un botón.
Vamos a crear nuestra aplicación de ejemplo que incluye el componente de navegación.
Vamos a conocer el componente de view, para embeber elementos, el div de nuestro HTML.
Vamos a conocer el componente de texto, para colocar textos en cualquier nivel.
Vamos a conocer el componente de input, para ingresar data de nuestro usuario.
Vamos a conocer el componente de botón, para los eventos click.
Vamos a conocer el componente para visualizar imágenes.
Vas a hacer una tarea de mostrar una imagen que tienes que importar al proyecto.
Vamos a conocer el componente de alerta, para mostrar diálogos.
Vamos a conocer el componente para permitir el scroll en nuestra app, ya sea horizontal o vertical.
Vas a realizar un experimento con el componente de scroll.
Vamos a conocer el componente que nos permite crear listados pero más potentes que con scrollview.
Vamos a conocer el componente que nos permite crear listados pero más potentes que con scrollview.
Vamos a crear una aplicación nueva para esta sección.
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
Vamos a salvar el trabajo en Github, para poder utilizar este esquema más adelante.
Vamos a aplicar la navegación entre pantallas de manera programática.
Vamos a crear un estilo en base a bloques con la etiqueta de estilos particular para cada componente.
Vamos a repasar el estilo en base a atributos por componentes.
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.
Vamos a combinar los estilos globales con los estilos locales.
Vamos a crear una aplicación nueva para esta sección colocando la app de nuestro repositorio en github.
Vamos a conocer la web con la que vamos a obtener nuestros datos.
Vamos a obtener los datos mediante un fetch en la app de Vue Native.
Vamos a crear el componente que nos permitirá mapear de la respuesta devuelta por la Api Rest a un array de objetos.
Vas a generar el listado con scroll para nuestros items.
Vamos a conocer la web con la que vamos a obtener nuestros datos.
Vamos a navegar hacia otra pantalla pasando parámetros.
Vamos a crear una página de detalle con el ítem seleccionado.
Vamos a aplicar pequeños cambios de estilo.
Vamos a aplicar estilos globales a la app, de tal manera que vamos a determinar qué estilos son locales y que estilos son globales.
Vamos a colocar un indicador de carga al momento de hacer el loading de la data.
Vamos a crear una aplicación nueva para esta sección.
Vamos a crear un archivo que se encargue de generar estos registró de manera aleatoria.
Vamos a evitar realizar peticiones vía fetch cada vez que recargamos el listado.
Vamos a corregir un pequeño detalle para corregir un bug en la ordenación.
Vamos a generar un número aleatorio para el anime a adivinar.
Vamos a mostrar la imagen de anime en el componente correspondiente.
Vamos a guardar nuestro trabajo en nuestro repositorio en git.
Vamos a crear un tag antes de subir el trabajo antes de hacer los retos.
Vas a mostrar la opción de ver cuando el usuario seleccione una opción.
Vas a crear un componente de botón para los botones de opciones.
Vas a migrar de tus props a un evento.
Vamos a crear la app para esta sección.
Una consideración que te dejo antes de seguir el resto de la sección.
Vamos a crear nuestra primera animación, que será una esfera creciente.
Vas a hacer la animación inversa (decrecer).
Vamos a ver una variante de la función que se encarga de animar.
Vamos a conocer el uso de las interpolaciones para crear puntos específicos en la animación.
Vamos a mostrar como podemos realizar animaciones de manera paralela.
Vamos a rotar un cuadrado con las interpolaciones.
Vamos a crear la app para esta sección.
Vamos a crear algunos campos básicos para crear y editar datos en nuestra app.
Vamos a aplicar algo de CSS local.
Vamos a establecer el teclado de tipo numéricos para la edad.
Vamos a crear un campo de tipo textarea para el formulario.
Vamos a agrupar las propiedades del formulario en un objeto.
Vamos a crear un campo de selección para el estado.
Vamos a instalar un paquete para manejar el campo de selección.
Vamos a crear un campo switch para el sexo.
Vamos a emplear la versión actual de React para manejar el storage
Vamos a probar las operaciones set y get que definimos anteriormente.
Vamos a realizar una migración del AsyncStorage a la versión comunitaria.
Vamos a adaptar las funciones de get y set para que trabajen con un array de objetos.
Vamos a crear la página de listado de todas las citas.
Vamos a aplicar cierta estructura y estilo para definir un ítem y sus opciones.
Vamos a generar unos datos de ayuda de manera automática.
Vamos a establecer los datos en la propiedad form cuando vamos a editar.
Vamos a actualizar los datos en nuestro store.
Vamos a conocer un mecanismo para detectar cuando volvemos a una página anterior que ya estaba en el stack de navegación.
Vamos a recargar el listado y ver una consideración en el uso de parámetros al retornar a una vista anterior.
Vamos a crear un botón flotante para mandar al formulario de creación.
Vamos a eliminar una tarea existente.
Vamos a hablar de lo que logramos hasta este vídeo y que vamos a hacer a partir de esta sección.
Vas a crear un componente personalizado para el botón flotante.
Vamos a hablar sobre cómo puedes emplear plugins nativos de Vue.
Vamos a instalar un plugin bastante famoso para validar formularios en Vue.
Vamos a aplicar validaciones sobre el campo de formulario y mostrar los errores en el template.
Vas a validar el resto de los campos de tipo input text.
Vamos a aplicar algunas validaciones sobre un componente que no tiene asignado un v-model, el picker.
Vamos a verificar mediante una operación si el formulario es válido o no.
Vamos a deshabilitar el botón al momento de hacer un submit.
Vamos a instalar un paquete para el envío de mensajes en la app y hacer una demostración.
Vamos a mostrar un mensaje al momento de crear o editar una cita y crear un contenido bloqueante.
Vamos a mostrar un mensaje al momento de eliminar una cita.
Vas a crear un componente extra para mostrar los errores del formulario.
Vas a crear un dialogo de confirmación que se muestre cuando queremos eliminar un registro.
Vamos a crear la app para esta sección.
Vamos a crear la app para esta sección.
Vamos a comenzar el proyecto, creando un círculo en un componente aparte.
Vamos a crear una animación de desplazamiento en el eje de las Y para el círculo/burbuja.
Vamos a crear la animación anterior con las interpolaciones.
Vamos a detectar el tamaño de la pantalla del dispositivo.
Vamos a crear un desplazamiento leve en el eje de las X de derecha a izquierda y viceversa.
Vamos a aplicar algunas refactorizaciones para tener mas organizado nuestro componente.
Vamos a crear un componente para manejar varias burbujas.
Vamos a mostrar algunas imágenes en nuestras burbujas.
Vamos a hacer un acomodo para poder alinear las burbujas de la manera correcta.
Vamos a crear una animación para variar la opacidad.
Vamos a trabajar en el evento click para nuestras burbujas y que hagan alguna acción.
Vamos a crear un componente nuevo, aplicar un estilo básico en los campos.
Vamos a crear un efecto en el cual vamos a animar el color de los bordes del input.
Vamos a conocer un props o evento que se dispara cuando el elemento gana el foco.
Vamos a crear otro efecto de animación.
Vamos a crear un efecto en el cual vamos a animar el color de los bordes del input.
Vamos a enviar los valores de los campos al componente padre vía eventos.
Crearemos botones típicos modernos con color sólido y bordes redondeados.
Crearemos un botón de tipo plano o flat.
Vamos a crear nuestros componentes de botón adaptables para nuestros desarrollos.
Vamos a definir un prop para variar el color de fondo.
Vamos a definir el props para el título del botón.
Vamos a crear un botón de tipo outline.
Border radius, tipográfica, color de texto.
Vamos a crear el componente base para crear nuestro nuevo componente.
Vamos a implementar la animación de expansión para una circunferencia.
Vamos a activar el evento click para expandir nuestros elementos.
Vamos a mostrar el contenido cuando expandamos el elemento.
Vamos a definir un poco más de estilo para nuestro componente.
Vamos a colocar un icono de una imagen en nuestra burbuja y ocultarla cuando mostremos el contenido, y viceversa.
Vamos a hablar sobre el esquema de navegación que nos permite usar Vue Native Router y sus limitaciones o inconvenientes actualmente.
Vamos a crear una aplicación con la cual vamos a trabajar.
Vamos a crear el contenedor del menú lateral.
Vamos a aplicar una animación para cerrar y abrir el menú lateral.
Vamos a crear una opción para abrir o cerrar el drawer bajo demanda.
Vamos a crear un item para nuestra app.
Vamos a crear una app modular para nuestra aplicación.
Vamos a reorganizar los .vue de la aplicación en un solo lugar.
Vamos a realizar algunas pruebas con los eventos clicks sobre los ítems del menú lateral.
Vamos a crear una adaptación para oscurecer y/o bloquear la pantalla al abrir el menú.
Vamos a cerrar el menú desde el menú.
Crearemos un proyecto limpio para esta sección.
Vamos a instalar las dependencias y configurar el proyecto.
Vamos a hablar sobre esta tecnología, que nos ofrece y que vamos a hacer en los siguientes videos.
Vamos a presentar el uso de los botones de NB.
Vamos a presentar el uso de los iconos de NB.
Vamos a presentar el uso de los contenedores y el componente de header.
Conoceremos un poco mas el uso del header.
Vamos a realizar algunas pruebas con las cartas.
Vamos a presentar el uso de los formularios en NB.
Vamos a conocer los botones flotantes, sus posiciones y el tipo extendido.
Depedida del curso
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
10$
En Udemy
Quedan 1d 03:37!
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros