Udemy

Platform

Español

Language

Mobile Apps

Category

React Native: Crea tu E-Commerce móvil para iOS y Android

Crea tienda online en una app movil para iOS y Android usando React Native, Strapi, Stripe, Node, MongoDB, Hooks, y mas

4.87 (78 reviews)

Students

21.5 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Serás capaz de crear cualquier App para Android y iOS

Aprenderás a crear un potente buscador de productos

Frameworks UI React Native Paper

Crear sistema de pago con Strapi

Creación de componentes, hooks personalizados y su reutilización

Aprenderás a usar Context, Ref, State, Effect, Memo, etc...

Aprenderás a usar React Navigation 5, sus Hooks y mucho más...

Consumir REST API

Aprenderás a Strapi y a modificarlo

Aprenderás a crear un sistema de login y registro de usuarios completo

Crearemos componentes para reutilizarlos en la aplicación

Aprenderás a controlar los datos que fluyen por React Native entre componentes

Crearás formularios completamente personalizados

Aprenderás a usar Formik y Yup en los formularios

Aprenderás a crear un sistema de favoritos

Generar .APK y .IPA

Subir la app a las stores


Description

Gracias a este curso aprenderás desde los conceptos básicos de React Native, hasta lo más avanzado para crear un E-Commerce app mobile completo y funciones en App.

Una vez terminado el curso serás capaz de crear cualquier tipo de aplicación móvil conectada a una base de datos, REST API, sin necesidad de ayuda.

Serás capaz de crear un panel de administrador para gestionar los datos de tu propia tienda y añadir la famosa pasarela de pago Stripe.


  • Serás capaz de crear cualquier App para Android y iOS

  • Aprenderás a crear un potente buscador de productos

  • Frameworks UI React Native Paper

  • Crear sistema de pago con Strapi

  • Creación de componentes, hooks personalizados y su reutilización

  • Aprenderás a usar Context, Ref, State, Effect, Memo, etc...

  • Aprenderás a usar React Navigation 5, sus Hooks y mucho más...

  • Consumir REST API

  • Aprenderás a Strapi y modificarlo

  • Aprenderás a crear un sistema de login y registro de usuarios completo

  • Crearemos componentes para reutilizarlos en la aplicación

  • Aprenderás a controlar los datos que fluyen por React Native entre componentes

  • Crearás formularios completamente personalizados

  • Aprenderás a usar Formik y Yup en los formularios

  • Aprenderás a crear un sistema de favoritos

  • Generar APK y IPA

  • Subir la app a las stores

Lo mejor de todo, es que este curso no acaba aquí, va a tener continuas actualizaciones para ir mejorando la aplicación cada vez mucho más.


Screenshots

React Native: Crea tu E-Commerce móvil para iOS y Android
React Native: Crea tu E-Commerce móvil para iOS y Android
React Native: Crea tu E-Commerce móvil para iOS y Android
React Native: Crea tu E-Commerce móvil para iOS y Android

Content

Introducción

Resultado final de la aplicación

Repositorio de la aplicación

Preparación del entorno de desarrollo

Descargando Editor de Código

Extensiones para Visual Studio Code

Instalando Node JS

Instalando Yarn

Instalando Expo CLI

Virtualización de un Sistema Android

Virtualización de un Sistema iOS

Ejecutando app. en un dispositivo real

Cuenta de EXPO y publicando nuestra app

Instalando Robo 3T

Conceptos básicos de React

¿Qué vamos hacer en esta sección?

Introducción a JSX

Conceptos básicos de React JS

Creando nuestra primera app en React JS

Estructura de React JS

Nuestro primer Componente en React JS

¿Que son los Props de React?

Pasando props básicos entre componentes

Pasando variables y objetos entre componentes por los props

Pasando funciones entre componente por los props

El uso de la Asignación por Destructuring

Props por defecto

Template Strings

Hook de estado - useState

Hook de efecto - useEffect

Generando aplicación

Creando la apelación de React Native

Creando la base de datos en Mongo Atlas

Creando el proyecto de Strapi

Añadiendo React Native Paper

Sistema de Auth

AuthScreen

Creando el formulario de registro

Manejando los datos del formulario de registro

Validando formulario de registro

Registrando usuario en Strapi

Feedback al usuario del registro

Formulario de login

Controlando y validando datos del formulario de login

Realizando el login contra Strapi

Creando el context Auth

Guardando token y seteando el auth

Recuperando datos del usuario

Botón de deslogeo

Sistema de Navegación

Instalando React Navigation

Configurando React Navigation

Añadiendo estilos y iconos al menú

Account

Creando el Stack de Account

Barra del buscador y StatusBar

Obteniendo los datos del usuario

Estructura de carpetas de account

Creando el ScreenLoading

Mostrando la información del usuario

Estructura del menu de usuario

Funcionalidad para cerrar sesión

Screen de cambio de nombre

Formulario para cambiar nombre y apellidos

Integrando formik y yup en el formulario

Obteniendo y seteando los valores default

Actualizando el nombre y apellido en strapi

Formulario para cambiar email

Validando formulario y cargando email

Actualizando el email

Formulario cambiar el username

Validando formulario y cargando username

Actualizando el username

Formulario cambiar la contraseña

Validando formulario de cambio de contraseña

Actualizando contraseña

Sistema de direcciones

Creando la screen de direcciones

Crenado la colección de direcciones

Obteniendo las direcciones del usuario

Loading y mensaje de que no tiene direcciones

Formulario para crear direcciones

Validando formulario y controlando los datos

Creando una nueva direccion

Listando direcciones

Eliminando direcciones

Refrescando direcciones al eliminar

Reutilizando formulario para actualizar direciones

Seteando todos los datos

Actualizar dirección

Sistema de productos

Creando la colección de los productos

Creando el Stack de productos

Añadiendo StatusBar y Search en la home

Obteniendo los últimos productos añadidos

Listando productos

Screen del producto

Obteniendo los datos del producto visitado

Sistema de loading

Carrousel de imágenes

Mejorando carrousel

Añadiendo dots al carousel

Precio del producto

Desplegable de cantidad

Botón para añadir productos al carrito

Botón para añadir productos a la lista de favoritos

Android - Fix error selector de cantidad

Home Slider

Creando la colección de los sliders

Obteniendo todos los banners

Pintando el slider

Añadiendo los dots

Viajando al producto

Sistema de búsqueda

Animación del buscador

Terminando animaciones del input

Añadiendo animacion al icono del buscador

Screen de search

Creando el historia de búsquedas

Calculando el alto del buscador

Guardando búsquedas en el historial

Obteniendo historial de búsqueda

Pintando historial de búsqueda

Limitando historial

Ordenando historial

Realizando búsquedas desde el historial

Obteniendo los datos de la búsqueda

Añadiendo la cabecera y el loading

Listando productos encontrados

Mostrando cada uno de los productos

Buscando desde otras screens

Sistema de favoritos

Creando la colección de favoritos

Header y buscador

Comprobando si el producto esta en favoritos

Añadir producto a favorito

Refrescar botón y validar función de añadir a favoritos

Eliminando producto del favoritos

Obteniendo producto añadidos a favoritos

Comprobando la carga de la lista

Renderizando la lista de favoritos

Terminando de renderizar la lista

Navegando al producto

Eliminando productos de la lista

Sistema de carrito

Añadiendo productos al carrito

Obteniendo los productos del carrito

Mostrando la carga del carrito

Componente NotProducts

Obteniendo los datos de cada producto

Listado productos

Pintando productos

Eliminando producto del carrito

Incrementando cantidad

Decrementando cantidad

Obteniendo las direcciones de envio

Listado las direcciones

Loading para la cargar de direcciones

Selecionando una dirección

Formulario de pago

Obteniendo el total del carrito

Controlado los datos del formulario de pago

Sistema de pago con Stripe

Creando una cuenta de Stripe

Flujo de un pago con stripe

Creando la acuerdo de cobro con Stripe

Crenado la colección de pedidos

Override del endpoint create order

Realizando el pago en Stripe

Generando pedido

Borrando carrito

Carrito vacío y Screen de pedidos

Mis pedidos

Obteniendo todos los pedidos del usuario

Listando pedidos

Renderizar pedidos

Pre Deployment

Añadiendo la Splash Screen

Añadiendo el Icono de la app

Añadir el package para Android

Deployment Backend

Crenado una cuenta en Heroku

Desplegando aplicación de Strapi

Conectando nuestra App con Heroku

Deployment Android

Creando el .APK

Instalando APK en un dispositivo android

Creando al .AAB

Creando una cuenta en Google Play Console

Subiendo App a Google Play Console

Deployment iOS

Creando la cuenta de desarrollador de Apple

Subir la app al Apple Store

Despedida

Clase Extra


Reviews

N
Nicolas27 March 2021

Un excelente profesor, atento a todas las consultas y explicando detalladamente todo lo que entrega en el curso, gracias a el puedo hoy en dia empezar un mini negocio para subsistir en esta pandemia


Coupons

DateDiscountStatus
3/7/202150% OFFExpired
3/15/202150% OFFExpired
3/25/202150% OFFExpired
4/2/202150% OFFExpired
4/23/202150% OFFExpired
5/3/202150% OFFExpired
5/21/202150% OFFExpired
6/8/202150% OFFExpired
6/15/202150% OFFExpired

3820862

Udemy ID

2/2/2021

Course created date

3/7/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram