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
Obteniendo los tipos de identificacion disponibles de mercado pago
Contenido bloqueado
Si ya estás inscrito,
deberás iniciar sesión
.
Inscríbase en el curso para desbloquear