Udemy

Platform

Español

Language

Mobile Apps

Category

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.66 (1371 reviews)

Students

20 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

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


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.


Screenshots

React Native Expo: Creando un TripAdvisor de Restaurantes
React Native Expo: Creando un TripAdvisor de Restaurantes
React Native Expo: Creando un TripAdvisor de Restaurantes
React Native Expo: Creando un TripAdvisor de Restaurantes

Content

Introducción

Presentación del curso

Antes de Empezar

Preparación del entorno de desarrollo

Descargar Editor de Código

Configurar Visual Studio más Instalación de Plugins

Instalando Node JS

Instalando Yarn

Instalando React Native con Expo

Virtualización de un Sistema Android

Virtualización de un Sistema iOS

Creando una cuenta en EXPO

Conceptos básicos

Componentes

Props

useState - Hook

useEffect - Hook

Iniciando App creado el sistema de rutas con React Navigation

Creando el proyecto de 5 Tenedores

React Native Elements libreria de componentes

Creando las 4 páginas principales de nuestra aplicación

Instalando dependencias para crear la navegación

1/2 - Creando la navegación para añadir el TabNavigation

2/2 - Creando la navegación para añadir el TabNavigation

React Navigation 5

Login y Registro de usuarios con Firebase

Creando cuenta y proyecto en Firebase

Añadiendo configuración de Firebase a nuestra app de React Native

Comprobando si el usuario ha iniciado sesión

Componentes Loading para mostrar que algo esta cargando

Creando screen UserGuest y UserLogged

Escribiendo la página de usuarios no logeados UserGuest

Creando la screen de Login

Escribiendo la página de login

Creando página de registro de usuarios y añadiendo un botón para entrar

Creando estructura de la página de registro de usuario

Creando formulario para poder registrar nuevos usuarios

Mostrando la contraseña cuando hagan click en el icono del ojo

Guardando los datos del formulario de registro en el estado

Validando formulario de registro

Configurando registro de email en Firebase y crean nuevos usuarios desde la App

Creando un toast para mostrar los mensajes del formulario de registro

Añadiendo Loading al registrar usuario y redireccionando al crear la cuenta

Creando el formulario de login

Guardando los datos del formulario en el estado del componente

Validando formulario de login y añadiendo el Loading y los Toast

Logeando el usuario contra Firebase y redireccionando la screen

Creando el componente LoginFacebook y su estructura

Creando un cuenta y configurando un proyecto en Facebook Developers

Activando la opción de login mediante Facebook en Firebase

Escribiendo la lógica para poder hacer login con una cuenta de Facebook

Creando Toasts y Loading para informar al usuario de lo que esta sucediendo

Cuenta del Usuario

Creando componente InfoUser y obteniendo los datos del usuario logeado

Mostrando los datos del usuario en el componente InfoUser

Activando y configurando el Storage en Firebase

Modificando las reglas del Storage

Solicitando permisos y accediendo a la galería de imágenes

Subiendo avatar de usuario al Storage de Firebase

Actualizando el avatar del usuario en su Información

Mejorando la experiencia de usuario al subir un avatar

Creando el menú de opciones del panel de usuario

Creando un componente que muestre un Overlay con un children

Renderizando el formulario seleccionado por el usuario en el modal

Creando el formulario para cambiar el nombre del usuario

Recuperando los props necesarios para poder actualizar el nombre del usuario

Escribiendo la logica para poder actualizar el nombre del usuario en Firebase

Creando la estructura del formulario de cambio de email

Escribiendo la logica para cambiar el email en Firebase y en nuestra App

1/2 - Creando la estructura del formulario para cambiar contraseña

2/2 - Creando la estructura del formulario para cambiar contraseña

Escribiendo la logia para cambiar la contraseña

Creación de restaurantes

Creando Screen de AddRestaurant y estructurando el Stack de Restaurantes

Creando un botón flotante para añadir nuevos restaurantes

Creando formulario para añadir restaurantes y añadiendo Toast y Loading

Creando estructura de la subida de imágenes para el restaurante

Seleccionando imágenes de la galería del teléfono

Mostraremos las imágenes seleccionas por el usuario en las miniaturas

Añadiendo funcionalidad para eliminar imágenes ya seleccionadas

Añadiendo foto principal del restaurante como portada

Creando los inputs de datos para el restaurante

Guardando valores de los inputs en el estado del componente

1/2 - Creando componente Map para visualizar el mapa

2/2 - Creando componente Map para visualizar el mapa

1/2 - Obteniendo la geolocalización del teléfono móvil del usuario

2/2 - Obteniendo la geolocalización del teléfono móvil del usuario

Guardando localización selecionada

Validando el formulario antes de subir el restaurante a Firebase

Subiendo imágenes del restaurante a Storage

Subiendo el restaurante a Firebase

Mostrando todos los restaurantes

Obteniendo restaurantes de Firebase y pasándolos al componente ListRestaurants

1/2 - Pintando lista de restaurantes

2/2 - Pintando lista de restaurantes

Creando el Footer del listado de restaurantes

Logica para cargar mas restaurantes

Mostrando el restaurante recién creado en el listado de restaurantes

Mostrando información del restaurante seleccionado

Creando página para mostrar información del restaurante seleccionado

Navegando desde el listado de restaurante ha la página del restaurante

Obteniendo todas las URL de las imágenes del restaurante

Creando el componente Carrousel y añadiendo a la página de restaurante

Mostrando la información del restaurante y la puntuación media

Añadiendo mapa de la localización del restaurante

Abrir Google Map / Maps para usar el GPS a la ubicación

Sistema de comentarios y puntuación

Component ListReview

Creando Screen AddReviewRestaurant y añadiéndola a la Navegación

Creando sistema de puntuación por estrellas

Creando el Formulario para añadir un comentario

Validando formulario de comentarios

Guardando comentario en Firebase

Actualizando restaurante con la puntuación media

Añadiendo un Loading en el envío del comentario

Recuperando comentarios del restaurante seleccionado

Actualizando puntuación media del restaurante al enviar un nuevo comentario

Mostrando todos los comentarios del restaurante

Validando que solo los usuarios logeados puedan mandar comentarios

Sistema de Favoritos

Añadiendo botón de favoritos en la Screen del Restaurante

Añadiendo Restaurante nuestra lista de Favoritos

Recuperando si el restaurante esta añadió a la lista de favoritos

Eliminando Restaurante de nuestra lista de Favoritos

Creando la página de favoritos y añadiéndola a la Navegación

Obteniendo todos IDs los Restaurantes marcados como favoritos por el usuario

Obteniendo la información de cada uno de los restaurantes

Añadiendo un FlatList para mostrar los restaurantes

Montando el componente para visualizar los restaurantes

Redireccionando a la información del restaurante

Añadiendo Toast, Loading y un ReloadRestaurants

Eliminando restaurantes de la lista de favoritos

Obtener los nuevos restaurantes que se han añadido a la lista de favoritos

Mostrar aviso cuando no hay restaurantes en la lista

Mostrar aviso cuando entramos como usuario no logeado

Validando que los usuario logeado no les de error el botón de favoritos

Sistema de Ranking de restaurantes

Obteniendo los cinco restaurantes más votados de Firebase

Añadiendo Toast a la Screen de Ranking

Creando el componente ListTopRestaurants

Obteniendo las imágenes de portada de los restaurantes obtenidos

Renderizandos todos los restaurantes

Añadiendo un Icono para que representen a los tops

Redireccionando página al hacer click en un restaurante

Buscador de Restaurantes

Creando el Componente SearchBar

Obteniendo los datos de los restaurantes encontrado de Firebase

Pintando la lista de restaurantes encontrados

Navegando al restaurante que realicemos click

Creando el componente NoFoundRestaurants

Solucionando Warning al buscar de una manera rápida

Cambios Extras

Cambiar el icono de la aplicación

Cambiar la Splash Screen que carga cuando iniciamos la App

Deployment

Subiendo nuestra App a Expo.io

Creando .IPA para iOS

Creando .APK para Android

Creando App Android de bajo peso con app-bundle

Despedida

Hasta luego

Clase Extra


Reviews

A
Anderson10 October 2020

Buen curso para las personas que quieran comenzar en el mundo del desarrollo móvil utilizando React Native y con énfasis en Expo.

J
Jose22 September 2020

La verdad que me ha gustado mucho el curso, muy completo en el que he podido aprender bastantes cosas sobre React Native y asÍ poder ya adentrarme por mÍ mismo en la creación de nuevas apps.

J
Josep21 September 2020

Excepcional. El curso, es completisimo y el proyecto que en él se desarrolla, muy atractivo y funciona perfectamente. Se puede trabajar en mejoras sobre el mismo, pero la verdad es que todo lo que expone en la presentación del curso, se lleva a cabo y el resultado y la experiencia, valen mucho la pena. Lo recomiendo mucho, sin duda.

C
Carlos17 September 2020

El curso superó mis espectativas, soy nuevo en leguajes de programación modernos, vendo de aplicaciones encapsuladas y empresariales, el surco me ayudó muchísimo a avanzar en mi constante aprendisaje. Felcitaciones al Instructor

C
César12 September 2020

Me agradó que explicara que el desarrollo puede variar dependiendo de la vesión de los repositorios y que haya enseñado como bajar la versión en donde si va a funcionar.

C
Carlos26 February 2020

voy en 70% del curso y la verdad me doy por bien servido, el conocimiento , la forma de explicar del profesor son excelentes, es un curso completo para realizar que terminando puedas realizar un App de cualquier nivel sin problemas. Si tuviera un modulo de push notification sera 100% completo este curso, sin embargo no es razón para tener menos de 5 estrellas.

W
Walter26 February 2020

Buena elección, gracias por tus servicios, pondré en practica inmediatamente lo que amablemente me has compartido, éxitos y bendiciones.

A
Alvarez25 February 2020

Excelente el curso, todos los temas bien explicados y con ejemplos de la vida real. Muy bien el profe respondiendo todas las dudas.

R
Ricardo17 February 2020

En las nuevas versiones de las librerias que está usando las cosas se hacen de diferente manera, el curso se ha quedado algo obsoleto, eso no quiere decir que el curso sea malo, las explicaciones son bastante buenas y Agustín (el profesor) te ayuda en todas las dudas que tengas.

S
Sebastián10 February 2020

Excelente curso!!! detalle todo muy bien, desde lo básico hasta lo más complejo. se agradecen las respuesta a las consultas.

P
Pablo7 February 2020

Excelente curso. Muy bien explicado y siempre atento a las dudas, respondiendo lo más rápido posible. Muy recomendable.

A
Anibal2 February 2020

Muchas expectativas... explicaciones completamente claras, tiempo de respuesta a las dudas inmejorable... excelente instructor Agustin...

J
Jorge21 January 2020

Excelente inversión! Bien explicado todo y a excelente ritmo. El maestro fomenta la práctica constante, no solo copy paste. Gracias! Gracias! Gracias!

A
Alex18 January 2020

Agustin me ha bridando sus conocimientos y siempre fue muy amable al aexplicarme..empece desde cero en react, pero estoy aprendiendo mucho, gracias.

E
Elias13 January 2020

Es un buen curso, enseña de forma explicita, aunque creo que le falto quizá explicar algunas otras, pero en general es un buen curso, aprendí bastante. Muchas gracias.


Coupons

DateDiscountStatus
3/7/202095% OFFExpired
5/12/202045% OFFExpired
9/1/202050% OFFExpired
10/16/202050% OFFExpired
1/5/202150% OFFExpired
6/18/202150% OFFExpired

2351504

Udemy ID

5/3/2019

Course created date

11/6/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram