React Native Expo: Creando un TripAdvisor de Restaurantes
4.6 (944 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,637 students enrolled

React Native Expo: Creando un TripAdvisor de Restaurantes

Crearemos una App similar a TripAdvisor con React Native Hooks, Expo y Firebase y un sistema de login completo
4.6 (944 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,637 students enrolled
Last updated 8/2020
Spanish
Spanish [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 20.5 hours on-demand video
  • 1 article
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Seras capaz de desarrollar cualquier aplicación móvil para Android y iOS
  • Aprenderás a desarrollar el sistema de navegación como un SideMenu, BottomMenu, entre otros componentes
  • Aprenderás a usar el sistema React Native para crear App
  • Conocerás Expo, todas sus herramientas y beneficios
  • Aprenderás a configurar y usar Firebase y Firestore para cualquier tipo de proyecto
  • Manejaremos distintos tipos de autenticación en tiempo real con Firebase
  • Virtualización un Sistema Android y iOS para hacer Debug
  • Utilizaremos la Geolocalización y los mapas de Apple Maps y Google Maps
  • Creación autenticaciones con Email, Facebook, etc...
  • Aprenderás a controlar los datos que fluyen por React Native entre componentes
  • Crearemos componentes para reutilizarlos en la aplicación
  • Aprenderás a usar React Navigation 5, sus Hooks y mucho más...
  • Crearás formularios completamente personalizados
  • Aprenderás a crear el sistema de Infinity Scroll
  • Aprenderás a crear un sistema de búsqueda de restaurantes
  • Aprenderás a crear un sistema de Favoritos con su propio listado
  • Añadiremos un Preloader para mostrarlos mientras cargan los componentes
  • Creación de Toasts compatibles con Android y iOS
  • Aprenderás a crear un sistema de rankings de restaurantes
  • Aprenderás a crear un sistema de votaciones y reviews sobre los restaurantes
  • Usaremos elementos interno del dispositivo como puede ser la Cámara, Galería, Geolocalización, etc...
  • Aprenderás a crear un sistema de login y registro de usuarios completo
  • Aprenderás a usar React Native Elements.
  • Generar .APK y .IPA
Course content
Expand all 173 lectures 20:31:02
+ Introducción
3 lectures 11:08

Información importante antes de empezar nuestra app.

Preview 03:39

Veremos la app terminada y todo lo que vamos a hacer y aprender durante el curso.

Preview 06:09

Dejare a tu disposición el repositorio del curso para que compares el código.

Repositorio de la aplicación
01:20
+ Preparación del entorno de desarrollo
8 lectures 43:53

Descargaremos el editor de código que vamos a utilizar durante todo el curso.

Descargando Editor de Código
01:36

Configuraremos Visual Studio y instalaremos todos los plugins que vamos a usar en el curso.

Extensiones para Visual Studio Code
14:40

Instalaremos Node JS en nuestro equipo de manera global.

Instalando Node JS
05:06

Instalaremos el gestor de paquetes Yarn para poder instalar todas las dependencias que usaremos durante el curso.

Instalando Yarn
05:20

Instalaremos Expo CLI de manera global para poder crear nuestra primera aplicación.

Instalando Expo CLI
03:07

Instalaremos Android Studio para crear un nuevo dispositivo móvil y poder cargar nuestra aplicación en un sistema Android.

Virtualización de un Sistema Android
05:17

Instalaremos Xcode para crear un nuevo dispositivo móvil y poder cargar nuestra aplicación en un sistema iOS.

Virtualización de un Sistema iOS
03:54

Crearemos una cuenta en la web de EXPO para tener todas nuestras aplicaciones sincronizadas.

Creando una cuenta de EXPO y asociándola al equipo
04:53
+ Conceptos básicos de React
15 lectures 01:21:01

Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.

¿Qué vamos hacer en esta sección?
02:14

Veremos que es el JSX de React y por que nos facilita mucho a la hora de programar.

Introducción a JSX
03:21

Veremos los conceptos básicos que tiene React para entender mejor como funciona.

Conceptos básicos de React JS
04:22

Crearemos nuestra primera app con el comando create-react-app.

Creando nuestra primera app en React JS
02:53

Veremos toda la estructura de una aplicación de React JS.

Estructura de React JS
07:45

Crearemos nuestro primer componente y veremos todas sus partes.

Nuestro primer Componente en React JS
11:27

Veremos una explicación de que son los PROPS de React y como funcionan.

¿Que son los Props de React?
03:57

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasando props básicos entre componentes
08:55

Pasaremos variables y objetos por los props de nuestros componentes.

Pasando variables y objetos entre componentes por los props
06:07

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Pasando funciones entre componente por los props
06:30

Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.

El uso de la Asignación por Destructuring
04:17

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Props por defecto
02:11

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Template Strings
03:15

Veremos el uso del hook de estado useState de React.

Hook de estado - useState
08:37

Veremos el uso del hook de efecto useEffect de React.

Hook de efecto - useEffect
05:10
+ Iniciando App
5 lectures 31:11

Usaremos el comando EXPO para crear nuestra aplicación.

Creando el proyecto de 5 Tenedores
02:47

Vamos a ver la estructura de un proyecto de React Native Expo.

Estructura de un proyecto
07:50
Subiendo la aplicación a Expo.io
05:35

Vamos a crear las páginas principales de nuestra aplicación por la que el menú va a navegar

Creando las 5 páginas principales de nuestra aplicación
07:55
+ Sistema de Navegación
5 lectures 50:13

Instalaremos todos los packages de react navigation para poder crear nuestro sistema de navegación.

Preview 10:58

Añadiremos el Tab Navigation a nuestra app.

Montando el Sistema de Navegación
11:19

Vamos a crear los stacks de navegación para poder navegar a páginas ocultas en cualquier momento.

Creando Stacks de Navegación
14:18

Vamos a instalar React Native Elementes para ampliar los componentes que se pueden usar en nuestra app.

Instalando React Native Elements
03:12

Usaremos los iconos de React Native Elements para añadir iconos a nuestro Tab Menu.

Añadiendo iconos al Tab Menu
10:26
+ Configurando Firebase
2 lectures 14:13

Vamos a crear un proyecto en Firebase para despues añadirlo a nuestra App.

Creando un proyecto en Firebase
03:31

Vamos a añadir el proyecto que hemos creado de Firebase a nuestra aplicación.

Añadiendo proyecto de Firebase a nuestra app
10:42
+ Sistema de registro y login de usuarios
27 lectures 03:10:55

Vamos a comprobar si el usuario esta logeado o no y dependiendo le mostraremos una screen u otra.

Mostrando Screen diferente si el usuario esta logeado o no
15:15

Crearemos un componente loading para mostrar en pantalla cunado estemos cargando algo.

Componente de Loading
11:20

Vamos a utilizar el componente Loading en la Screen de Account.

Añadiendo Loading a la Screen de Account
03:50
Screen de usuario no logeados
13:42

Vamos a crear la página para logear usuarios y la añadiremos al sistema de rutas.

Creando la Screen de login y añadiéndola al sistema de rutas
03:04

Añadiremos la funcionalidad de navegar a la screen de login al botón de ver tu perfil.

Añadiendo funcionalidad al botón de Ver tu Perfil
03:10

Vamos a escribir la estructura de la screen de login.

Estructura de la Screen de login
11:38

Vamos a crear la página para registrar nuevos usuarios y la añadiremos al sistema de rutas.

Creando Screen de Registro y añadiéndola al sistema de rutas
03:46

Añadiremos la funcionalidad onPress al Text de registro para poder navegar a la Screen Register.

Navegando a la Screen de Registro desde la Screen de Login
02:46

Vamos a escribir la estructura de la screen de registro de nuevos usuarios.

Estructura de la screen de registro
03:13

Vamos a crear un nuevo componente para añadir el formulario de registro de usuarios.

Creando el formulario de registro de usuarios
10:20

Instalaremos un package para evitar que el teclado del teléfono móvil oculte el input donde se está escribiendo.

Evitando que el teclado oculte el input
05:00

Vamos a añadir iconos a los inputs del formulario.

Añadiendo iconos a los inputs del formulario de registro
05:48

Le daremos el evento click al icono de las contraseñas para ocultar o mostrar la contraseña.

Mostrando y ocultando contraseña con el icono
06:43

Vamos a coger los datos del formularios y los guardaremos en un estado para después mandárselos a firebase.

Guardando los datos del formulario de registro un estado
10:59

Vamos a crear una función que se ocupe de validar cualquier email que le llegue.

Función para validar emails
05:05

Vamos a añadir las validaciones para que nuestro formulario de registro de usuario solo se envíe si es correcto.

Validando formulario de registro
11:58

Vamos a instalar un nuevo package para mostrar los mensajes de la validación al usuario con toast.

Mostrando los mensajes de la validación en un toast
09:38

Vamos a activar en Firebase el sistema de Autenticación por email.

Activando el sistema de Autenticación por email
03:40

Vamos a mandar los datos del usuario a Firebase para que registre el usuario en la aplicación.

Registrado usuario en Firebase
11:50

Vamos a añadir nuestro componente loading mientras nuestra app está registrado el usuario.

Añadiendo loading mientras se registra el usuario
04:26

Crearemos un componente para renderizar el formulario de login.

Formulario de login
07:06

Vamos a añadir los iconos a los inputs de formulario de login.

Añadiendo iconos a los inputs
02:33

Mostraremos y ocultaremos la contraseña del input cuando el usuario realice click en el icono.

Mostrando y ocultando contraseña con el icono
03:54

Vamos a coger los datos del formularios y los guardaremos en un estado para después mandárselos a firebase.

Guardando los datos del formulario de login un estado
06:29

Vamos a añadir las validaciones para que nuestro formulario de login de usuario solo se envíe si es correcto.

Validando formulario de login
05:54

Vamos a realizar el login contra firebase.

Realizando el login contra el firebase
07:48
+ Sistema de login con Facebook
4 lectures 35:51

Configuraremos una aplicación de Facebook Developer.

Preview 07:43

Vamos a añadir la aplicación de Facebook Developer a nuestra app de Firebase.

Activando el login con Facebook en Firebase
02:00

Vamos a añadir el botón para realizar login con una cuenta de facebook.

Creando el botón de login Facebook
04:15

Vamos a escribir la función para poder logear con facebook.

Logica para logear con Facebook
21:53
+ Panel de usuario
30 lectures 03:47:13

Vamos a pintar la estructura del panel del usuario.

Estructura del panel de usuario
10:48

Vamos a crear la estructura del componente InfoUser.

Estructura del componente InfoUser
12:01

Vamos a pintar todos los datos reales del usuario en nuestro componente.

Mostrando los datos reales del usuario en InfoUser
07:28

Vamos configurar el Storage de firebase para poder subir imagenes.

Configurando Storage en firebase
02:54

Instalaremos varias dependencias que necesitamos para poder acceder a la galería del teléfono.

Instalando Packages para poder acceder a la galería del teléfono
03:10

Pediremos permiso al usuario para poder abrir la galería y si acepta abriremos la galería.

Abriendo la galeria de imágenes
08:49

Vamos a añadir los permisos adecuados para que cuando compilemos nuestra app a .apk no tengamos problemas a la hora de pedir el permiso de la galería.

Añadiendo permisos para Android
02:18

Vamos a escribir la lógica para que el usuario pueda subir el avatar al Storage.

Subiendo el avatar el Storage
10:58

Vamos a solucionar el warning de timer for a long que genera las peticiones a firebase en Android.

Solucionar Warning "Setting a timer for a long period of time"
03:53

Vamos a actualizar la URL del avatar del usuario en firebase.

Actualizando el avatar del usuario en firebase
06:50

Le diremos al componente que se recargue para que muestre la nueva imagen cuando se suba.

Actualizando la imagen sin tener que recargar la app
05:01

Vamos a añadir la lista de opciones que tiene el usuario en su cuenta.

Lista de opciones disponibles en la cuenta del usuario
09:11

Vamos a añadir todas las propiedades para que nuestro menú se vea correctamente.

Completando el menu ListItem
10:11

Crearemos un componente que renderice un modal y poder mostrar contenido dinámico.

Componente Modal
11:50

Cuando el usuario haga click en una opción del menú le pasaremos los datos al modal para que renderice lo que ha pedido el usuario.

Cambiando el contenido del modal dependiendo el menú haga click el usuario
07:11

Vamos a crear un componente donde renderice un formulario para poder cambiar el nombre y los apellidos del usuario.

Formulario para cambiar nombre y apellidos
10:20

Vamos a guardar los datos que le usuario añada en el input en un estado.

Guardando los datos del formulario en un estado
03:08

Vamos a validar le formulario para que le usuario no puedo enviar el mismo nombre y un nombre vacío.

Validando formulario de cambio de nombre
03:50

Vamos a mandar los datos a firebase para actualizarlos.

Actualizando el nombre y apellido en firebase
11:31

Vamos a crear un componente donde renderice un formulario para poder cambiar el email del usuario.

Formulario para cambiar el email
11:41

Vamos a guardar los datos que le usuario añada en el input en un estado.

Guardando los datos del formulario en un estado
06:16

Vamos a activar el evento click en el icono del input de la contraseña para poder mostrar y ocultarla.

Mostrando y ocultando contraseña con el icono
02:41

Vamos a validar le formulario para que le usuario no puedo enviar el mismo email o este vacío.

Validando formulario de cambio de email
05:35

Vamos a reautenticar el usuario para poder cambiar el email.

Reutilizando usuario para poder cambiar el email
05:31

Vamos a mandar los datos a firebase para que actualice el email del usuario.

Cambiando email en firebase
06:21

Vamos a crear un componente donde renderice un formulario para poder cambiar la contraseña del usuario.

Formulario para cambiar la contraseña
09:16

Vamos a añadir la funcionalidad para mostrar y ocultar las contraseñas realizando click en el icono.

Mostrando y ocultando las contraseñas
04:21

Vamos a guardar las contraseñas en un estado para reutilizarlas después.

Guardando contraseñas en un estado
07:01

Validaremos que los datos para cambiar la contraseña sean correctos.

Validando formulario de cambio de contraseña
10:58

Vamos a mandar los datos para cambiar la contraseña del usuario en firebase.

Cambiando la contraseña del usuario en firebase
16:10
+ Creación de restaurantes
21 lectures 03:02:49

Vamos a añadir un boton en la screen de Restaurantes pata poder acceder a al formulario de creación de restaurantes.

Añadiendo un botón para ir al formulario para crear restaurantes
06:33

Mostrando el icono para crear nuevos restaurantes solo a usuarios logeados.

Mostrando icono de crear restaurante solo a usuario logeados
04:53

Vamos a crear la Screen para crear restaurantes y navegaremos a ella.

Creando la Screen para crear restaurantes
05:00

Vamos a añadir un formulario para poder crear nuevos restaurantes.

Formulario de alta de restaurantes
11:55

Vamos a guardar los datos del restaurante en estados.

Guardando los datos del restaurante en el estado
08:34

Vamos a crear un componente para subir imagenes del restaurante

Componente para subir imágenes del restaurante
04:50

Vamos a pedir permiso al usuario para acceder a su galería y que pueda seleccionar varias imágenes.

Selecionando imágenes de la galeria
13:07

Vamos a mostrar una preview de las imágenes que ha seleccionado el usuario para el restaurante.

Mostrando las imágenes seleccionados
06:35

Vamos a crear una función que nos permite eliminar cualquier imagen que hemos seleccionado para subir.

Eliminar cualquier imagen seleccionada
09:22

Vamos a crear un banner donde mostraremos la imagen principal del restaurante.

Mostrando la imagen principal del restaurante
07:43

Vamos a añadir un icono para que el usuario haga click y pueda abrir un modal donde seleccione en el mapa la localización del restaurante.

Icono para abrir el mapa y seleccionar la localización del restaurante
06:09

Veremos que es MapView y que necesitamos saber para que funcione bien.

Instalando y explicando Expo MapView y Location
05:04

Vamos a pedir permisos al usuario para obtener tu localizacion y la guardaremos en un estado.

Obteniendo la localización del dispositivo
13:49

Vamos a usar el componente MapView para abrir google maps con la posición del usuario.

Abriendo Google Map con la localización del usuario
09:45

Vamos a crear dos botones uno para guardar la localización del restaurante y otro para salir sin guardar.

Guardando localización del restaurante
09:18

Vamos a validar el formulario para que no puedan subir restaurantes donde les falten datos.

Validando formulario para subir restaurantes
04:49

Vamos a cambiar de color el icono del mapa cuando el usuario le asigne una localización al restaurante.

Activando icono del mapa cuando el restaurante tenga localizacion
02:28

Vamos a subir todas la imagen que el usuario ha seleccionado para el restaurante al storage.

Subiendo las imágenes del restaurante al Storage
18:57

Vamos a configurar nuestra base de datos firestore en firebase.

Configurando Firestore
03:15

Vamos a guardar toda la información del restaurante en Firestore.

Guardando el restaurante en firestore
11:03

Creando y configurando la API de Google Maps para Android.

Configuran API Google Maps
19:40
Requirements
  • Conocimientos mínimos de Html
  • Conocimientos de Javascript y del ES6
  • Ganas de crear App movil con React Native
Description

Gracias a este curso aprenderás desde los conceptos básicos de React Native, hasta lo más avanzados para crear una APP completa desde cero como la de TripAdvisor.

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

Aprenderemos desde las bases de React Native al uso de elementos nativos del móvil, como puede ser la cámara o el sistema de ficheros de fotos.

Gracias al uso de Expo con React Native aprenderemos a configurar los elementos nativos del dispositivo de una manera muy fácil.


  • Seras capaz de desarrollar cualquier aplicación móvil para Android y iOS

  • Aprenderás a desarrollar el sistema de navegación como un SideMenu, BottomMenu, entre otros componentes

  • Aprenderás a usar el sistema React Native para crear App

  • Conocerás Expo, todas sus herramientas y beneficios

  • Aprenderás a configurar y usar Firebase y Firestore para cualquier tipo de proyecto

  • Manejaremos distintos tipos de autenticación en tiempo real con Firebase

  • Virtualización un Sistema Android y iOS para hacer Debug

  • Utilizaremos la Geolocalización y los mapas de Apple Maps y Google Maps

  • Creación autenticaciones con Email, Facebook, etc...

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

  • Crearemos componentes para reutilizarlos en la aplicación

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

  • Crearás formularios completamente personalizados

  • Aprenderás a crear el sistema de Infinity Scroll

  • Aprenderás a crear un sistema de búsqueda de restaurantes

  • Aprenderás a crear un sistema de Favoritos con su propio listado

  • Añadiremos un Preloader para mostrarlos mientras cargan los componentes

  • Creación de Toasts compatibles con Android y iOS

  • Aprenderás a crear un sistema de rankings de restaurantes

  • Aprenderás a crear un sistema de votaciones y reviews sobre los restaurantes

  • Usaremos elementos interno del dispositivo como puede ser la Cámara, Galería, Geolocalización, etc...

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

  • Aprenderás a usar React Native Elements.

  • Generar .APK y .IPA

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.

Who this course is for:
  • Desarrolladores Web
  • Programadores de aplicaciones móviles
  • Programadores de JavaScript
  • Programadores Frontend