Autoplay
Autocompletar
Lección previa
Completar y continuar
React Native MVVM: App Delivery NodeJS MySQL Pasarelas Pagos
Instalacion de herramientas en Windows
Instalacion de visual studio code (4:01)
Instalando Android Studio (2:40)
Instalacion de NodeJs (1:37)
Instalacion de Postman (1:06)
Creando un emulador (6:43)
Instalando Expo CLI (1:43)
Instalaciones en MacOSX
Requisitos para tomar esta seccion (0:32)
Instalacion de visual studio code (3:14)
Instalacion de NodeJS en MacOSX (2:06)
Instalacion de Postman (1:56)
Crear un emulador en iOS (4:14)
Instalar Expo CLI en MacOSX (1:38)
Iniciando con el proyecto
Creando el proyecto App Delivery (4:15)
Corriendo la aplicacion en un emulador (2:33)
Correr la aplicacion en un dispositivo fisico (Android y iOS) (6:19)
Core components (5:28)
Diseño de la pantalla principal (parte 1) (16:12)
Diseño de la pantalla principal (parte 2) (6:35)
Diseño de la pantalla principal (parte 3) (23:50)
Crear componentes personalizados (Boton redondeado) (12:04)
Color global de la aplicacion (8:36)
Stack de navegacion entre pantallas
Navigation Stack (Navegar entre pantalla) (16:38)
Navegar a la pantalla de registro (13:19)
Diseño de la pantalla de registro (10:20)
Estado de la aplicacion
Capturar los valores de los TextInput (7:43)
Implementando los setState en el ViewModel (17:44)
Componente personalizado para el TextInput (13:24)
Trabajando con los campos del formulario de registro (12:44)
Trabajar con los estilos en archivos independientes (5:07)
Configurando el Backend con NodeJS
Crear servidor en Node JS (11:54)
Probando rutas del servidor (11:13)
Conexion del backend con la Base de datos SQL
Instalacion de MYSQL en Windows (7:28)
(VIDEO OPCIONAL) Instalar MySQL en MacOSX (5:22)
Creacion de la tabla Usuarios en MYSQL (7:05)
Conectarse a la base de datos MYSQL desde NodeJS (31:30)
Creando un usuario desde la app (17:31)
Clean Architecture + MVVM
Creando un usuario con Clean Architecture junto con MVVM (32:16)
Afinando detalles de tipado de datos (13:29)
Validaciones para el formulario y uso del UseEffect (10:00)
Validaciones en NodeJS y JSON WEB TOKENS ( JWT )
Encriptar password (3:47)
Configurando JSON WEB TOKEN en el Backend (32:50)
Async Storage (Persistencia de datos) y Hooks
Enviando peticion de login desde la app MVVM junto con Clean Architecture (13:25)
Guardar y obtener el usuario de sesion (23:01)
Custom Hook para la sesion del usuario (7:18)
Pasar a la siguiente pantalla una vez el usuario este logeado (9:03)
Cerrar sesion del usuario (11:29)
Revisando algunos detalles de la aplicacion (7:47)
Manejo de imagenes
Seleccionar imagen de galeria (9:48)
Modal - Mostrar opciones camara o fotografia (17:19)
Preparando el backend para subir una imagen (17:02)
Subir la imagen al servidor (19:51)
Modulo de Roles de Usuario
Registrar usuario y almacenar la sesion (13:26)
Creando los roles del usuario en la base de datos (9:33)
Crear usuarios con el rol de cliente por defecto (YA EDITADO) (9:39)
Listar los roles asignados de un usuario (12:01)
Mostrar los roles del usuario en la app (15:26)
Diseño de las tarjetas para mostrar los Roles (16:28)
Carousel de imagenes (18:06)
Bottom Tabs Navigator (21:29)
Colocar titulos y iconos en los tabs (6:51)
Modulo de perfil de usuario
Diseño de la pantalla de perfil (24:24)
Creando el formulario para actualizar un usuario (19:52)
Actualizando la informacion del usuario (28:51)
Context API - Propagando informacion entre diferentes componentes (35:19)
Mostrar mensaje de peticion exitosa (2:55)
Enviar peticiones con JSON WEB TOKEN (13:25)
Modulo de Categorias
Nueva Tabla categorias y metodo create (15:18)
Crear una accion dentro de un Toolbar (11:02)
Formulario para crear una nueva categoria (15:42)
Crear nueva categoria desde la app (Clean Architecture y MVVM) (22:15)
Limpiar el formulario despues de crear categoria (2:20)
Backend para listar las categorias (6:54)
Listar las categorias en la app (17:57)
diseño para mostrar la informacion de una categoria (15:08)
Backend para eliminar una categoria por id (5:09)
Eliminar una categoria desde la app (10:20)
Pantalla para actualizar una categoria (7:17)
Backend para actualizar una categoria (5:32)
Actualizar una categoria desde la app (14:25)
Context Api para propagar informacion entre pantallas de categoria(listar (42:31)
Modulo de productos
Backend para crear un producto (25:17)
Pasar parametros desde un Stack Navigator a un Screen (14:11)
Formulario para crear un nuevo producto (17:25)
Terminando el formulario para crear productos (13:10)
Creando un producto con tres imagenes desde la app (23:07)
Backend para listar productos por categoria (7:32)
Listar los productos por categoria en la app (16:40)
Diseñando el item para mostrar la informacion del producto (5:24)
Backend para eliminar un producto por id (4:17)
Eliminar un producto desde la app (11:17)
Formulario de actualizacion de un producto (10:12)
Backend para actualizar productos (4:23)
Actualizar producto con o sin imagenes desde la app (18:28)
Listar las categorias para el cliente (19:46)
Listar los producttos por categoria para el cliente (10:52)
Diseño del item de producto para el cliente (4:52)
Pantalla de detalle del producto (33:55)
Mostrar la cantidad y el precio a pagar por el producto (10:14)
Modulo de Bolsa de compras
Agregando elementos a la bolsa de compras (31:57)
Creando la pantalla de Mi Orden (6:56)
Diseño del item para mostrar los productos de la bolsa de compras (25:38)
Funciones (agregar, quitar, eliminar) de la bolsa de compras (12:18)
Modulo de direcciones
Formulario para crear una nueva direccion (11:45)
Backend para crear una nueva direccion (19:26)
Convertiir un TextInput en no editable y colocarle un evento (6:22)
Implementar mapa en la app (14:09)
Obtener la ubicacion actual en la que nos encontramos (19:15)
Colocar componentes dentro del mapa (12:17)
Obtener la direccion cuando nos movemos a traves del mapa (8:22)
Compartir informacion desde un componente hijo a un componente padre (6:52)
Crear una nueva direccion desde la app (20:33)
Backend para listar las direcciones (7:13)
Listar las direcciones en la app (9:10)
Diseño del item para mostrar las direcciones (14:03)
Guardar Direccion seleccionada en sesion (13:57)
Actualizar lista de direcciones cuando creamos una nueva (3:10)
Modulo de ordenes
Creando la tabla Orders (12:17)
Creando registro en la tabla orders con productos (17:08)
Creando una orden con productos desde la app (16:02)
Consulta para listar las ordenes con sus productos (18:29)
Backend para listar las ordenes (7:41)
Listar la informacion de las ordenes desde el app (10:39)
(Tab View) Mostrar las ordenes por estado (17:03)
Diseño del item para mostrar la informacion de la orden (12:41)
Stack navigator para pedidos (9:42)
Mostrando el detalle de la orden (31:25)
Backend para listar los repartidores (7:30)
Obteniendo los repartidores en la app (7:02)
DropDown para seleccionar un repartidor (11:02)
Backend para actualizar el estado de la orden a DESPACHADO (6:37)
Actualizando el estado de la orden a DESPACHADO desde la app (14:06)
Actualizar la lista de las ordenes cuando se cambia el estado (20:59)
Backend para obtener las ordenes asignadas a un repartidor (10:59)
Mostrar las ordenes asignadas a un repartidor en la app (21:02)
Backend para actualizar el estado de la orden a EN CAMINO (1:46)
Actualizar el estado de la orden a en CAMINO desde la app (15:08)
Mostrando la pantalla de mapa de la orden (19:37)
Obtener la ubicacion del GPS en tiempo real (19:44)
Trazar ruta desde la posicion del delivery hasta la direccion de entrega (23:56)
Backend para actualizar el estado de la orden a ENTREGADO (1:24)
Actualizar el estado de la orden a entregado desde la app (9:02)
Backend para listar las ordenes del cliente (2:50)
Mostrar las ordenes asignadas a un cliente en la app (15:29)
Socket IO Tiempo Real
Socket IO Tiempo real para nuestra app (11:21)
Emitiendo posicion en tiempo real del repartidor (8:22)
Permitirle al cliente observar la posicion en tiempo real del repartidor (16:15)
Preparando la app para recibir pagos
Diseño del formulario para crear pagos (22:50)
Mercado Pago
Obteniendo los tipos de identificacion disponibles de mercado pago (40:55)
Generando token de pagos (27:12)
Obtener el numero de coutas para efectuar el pago (22:04)
Mostrando el numero de coutas disponibles (16:51)
Backend para crear un pago (14:41)
Efectuando una transaccion desde la app (parte 1) (21:59)
Visualizando el estado de la transaccion (25:46)
Stripe
Generar token de pagos en STRIPE (11:17)
Efectuando transaccion (Backend y app) (30:10)
Crear la orden cuando se efectua la transaccion (6:02)
Notificaciones Push
Configurando Push notifications (26:12)
Enviar notificaciones push de dispositivo a dispositivo (10:29)
Ultimos detalles de la app
Colocar icono de volver al screen de roles (2:58)
Trazar la ruta desde la posicion del repartidor hasta el lugar de entr (14:31)
Codigo de la aplicacion
App React Native
Backend NodeJS
Trazar la ruta desde la posicion del repartidor hasta el lugar de entr
Contenido bloqueado
Si ya estás inscrito,
deberás iniciar sesión
.
Inscríbase en el curso para desbloquear