Creación de una aplicación de búsqueda de comercio electrónico con React Native

Vamos a repasar el proceso de construcción de una aplicación inicial de comercio electrónico móvil para la búsqueda a través de un almacén de datos de libros utilizando React nativo. Si nunca has trabajado con React Native antes, esto puede servir como punto de partida para tu viaje de desarrollo de aplicaciones móviles con Javascript!

Un poco de contexto primero! Es 2018 y JavaScript está creciendo más rápido que nunca. Toda la comunidad ha estado trabajando duro para que la web sea cada vez más accesible. Todo, desde las librerías y frameworks, hasta las herramientas de desarrollo necesarias para construir las aplicaciones, ha madurado con gracia. Claro, ha habido un cierto caos en medio de estas mejoras. Pero es fascinante que si conoces a JS hoy en día, puedes construir una aplicación web, un servidor backend e incluso aplicaciones para móviles.

React Native permite crear aplicaciones móviles nativas utilizando JavaScript y React. A diferencia de Cordova/Ionic/Phonegap que también le permite construir aplicaciones móviles usando JavaScript con WebViews, React Native compila completamente a una aplicación nativa y también permite escribir código nativo (Swift, Objective-C, Android) cuando sea necesario.

Cosas que debe saber antes de empezar

Usted debe tener alguna experiencia (si no mucha) escribiendo Reaccionar. Es bastante fácil de empezar y tiene buenos recursos disponibles en línea que pueden ayudar. Si eres nuevo en el tema, puedes empezar con el tutorial oficial. Y, si prefieres los videos antes que el texto, te recomiendo el curso gratuito de Kent C. Dodds sobre Egghead – The Beginners Guide to ReactJS (Cabeza de huevo – La guía para principiantes de ReactJS).

Lo mejor sería que también tuvieras un buen conocimiento de ES6+. Te tengo cubierto con eso. Escribí una guía de kickstarter para escribir ES6 que debería ponerte en camino en poco tiempo.

No necesariamente tienes que pasar mucho tiempo aprendiendo a reaccionar y construyendo aplicaciones web. (Aunque te recomendaría que lo hicieras) . Pero si quieres empezar rápidamente con React Native, familiarízate con los fundamentos básicos de React porque React Native y React comparten los mismos principios básicos para crear aplicaciones. Sólo se dirigen a dos clientes diferentes – web y nativo.

Aquí, quiero destacar el hecho de que si utilizas React y React Native en producción, puedes terminar con mucho código compartido en todas las plataformas (web, iOS y Android). Esto le permitirá mantener proyectos más grandes con menos tiempo de desarrollo y costos Esta es una de las razones por las que React Native está empezando a ser adoptado en toda la industria: Airbnb, Facebook, Instagram, Walmart, Tesla tienen sus aplicaciones móviles construidas usando RN.

Conceptos básicos

Comencemos discutiendo brevemente cómo funciona React Native y cómo el código JavaScript se traduce realmente en una aplicación móvil nativa de primera clase.

Cualquier aplicación React Native se ejecuta en dos subprocesos:

1. Rosca principal

Este hilo gestiona la interfaz de usuario de su aplicación y procesa todas las interacciones nativas, incluidos los gestos y el tacto. Dado que React Native también te permite añadir código nativo escrito en Android Java, Objective C o Swift, estos trozos de código se ejecutan en este hilo.

2. Hilo de JavaScript

Esto ejecuta el código JavaScript que se escribe en un motor JavaScript separado (que está presente en iOS por defecto y se envía a los dispositivos Android con la compilación).

Para que la aplicación funcione, estos dos hilos necesitan hablar entre sí, que es para lo que sirve Bridge .

Arquitectura del núcleo Native de React

Bridge, como su nombre indica, ayuda en las transacciones de datos (mensajes) entre el hilo JavaScript y el hilo Main Native. Estos mensajes pueden ser asincrónicos o por lotes. Bridge permite que el código JavaScript de uno hable con los módulos nativos e interactúe con las APIs de los dispositivos.

Ahora que tenemos los conocimientos básicos de la arquitectura nativa reactiva, vamos a entrar en los detalles de la implementación.

Configuración del entorno de desarrollo

Si ya tiene instalado React Native y está familiarizado con el ecosistema de desarrollo, puede pasar a la siguiente sección .

Para aquellos de ustedes que acaban de empezar, pueden seguir la guía oficial de configuración aquí (que es más detallada), o seguirme a mí aquí:

Asegúrese de que tiene instalado en su sistema el nodo .

Utilizaremos la herramienta de crear-reaccionar-nativo-app (CRNA) para configurar la caldera.

npm install -g create-react-native-app

A continuación, ejecute los siguientes comandos para crear un nuevo proyecto React Native, por ejemplo, HelloNative:

create-react-native-app HelloNative

cd HelloNative
npm inicio

> npm inicio

Esto iniciará un servidor de desarrollo para usted, e imprimirá un código QR en su terminal.

La única advertencia de usar create-react-native-app aquí es que puede que no use la última versión de react-native. Si eso te molesta, puedes usar Expo CLI o Expo XDE, que también son bastante fáciles de usar.

El siguiente paso es instalar la aplicación cliente Expo en su teléfono iOS o Android y conectarse a la misma red inalámbrica que su ordenador. Utilizando la aplicación Expo, puede escanear el código QR generado anteriormente desde su terminal y abrir el proyecto directamente en su teléfono. ¡Qué guay es eso!

En este punto, tu aplicación debería tener este aspecto:

Reaccionar aplicación nativa

Si deseas ejecutar esta aplicación en un emulador, puedes hacerlo:

npm ejecutar ios para iOS y,

npm run android para el emulador de Android.

Esto instalará el cliente Expo en el emulador y ejecutará su aplicación nativa reactiva.

Si ahora abre el menú de desarrollador en la aplicación, verá opciones para habilitar Hot Reloading y Live Reload . Esto te permite recargar tu aplicación instantáneamente, lo que es una gran ventaja si vienes de un entorno de desarrollo Android en el que tardas años en terminar de construirla.

Una mirada más cercana a las opciones del desarrollador

Las opciones para desarrolladores también incluyen funciones de depuración. Hablaremos de ello en detalle en la siguiente sección.

Depuración y resolución de problemas ⚒

La función de depuración de Remote JS en el menú del desarrollador nos permite navegar a través de cualquier mensaje de consola o error en el navegador. Esto es muy útil mientras construyes aplicaciones.

Además, es posible que quieras instalar el depurador de React Native mientras estás en él.

Depurador nativo de reacciones en acción

Esta es una herramienta ingeniosa que nos permite navegar a través del estado de los componentes y el árbol de utilería en las aplicaciones React Native. También le permite navegar y editar los estilos que se están aplicando a los componentes presentes en su aplicación, sirviendo como reemplazo de las herramientas de desarrollo de cromo aquí.

Pilas incluidas

React Native viene con una gama de componentes incorporados que puedes usar para crear aplicaciones. Puede navegar a través de la lista de componentes disponibles aquí, donde encontrará algunos de estos componentes específicos de la plataforma, en las secciones específicas de Android e iOS.

Estos componentes le ayudarán a crear interfaces de usuario sencillas para su aplicación. Similar a la web, React Native soporta fetch que le permite hacer peticiones http y obtener datos de su servidor.

Para nuestra aplicación de búsqueda de libros , usaremos Elasticsearch, que es una base de datos NoSQL que puede buscar en grandes cantidades de datos en poco tiempo. Realiza una búsqueda de texto completo de los datos que se almacenan en forma de documentos (que son objetos JSON) examinando todas las palabras de cada documento.

Incluso si nunca ha utilizado Elasticsearch antes, debería poder seguir con este tutorial.

La búsqueda elástica puede no parecer algo fácil de comenzar. La configuración, la adición o visualización de datos y la generación de consultas puede parecer un poco abrumadora si usted es un principiante. Es por eso que nosotros, en Appbase, hemos construido algunas herramientas de código abierto para ayudarle a hacer todas estas cosas con el asunto de algunos clics

  • Herramienta para añadir datos en Elasticsearch – Importador
  • Herramienta para ver los datos de Elasticsearch como una hoja de Excel – Data Browser
  • Herramienta para generar consultas Elasticsearch relevantes – Query Builder

En este post de blog, con la ayuda de algunas de estas herramientas, utilizaremos las fortalezas de Elasticsearch ⚡️ con React Native para construir una aplicación para librerías móviles.

Puede configurar e instalar un servidor de Elasticsearch siguiendo la guía de instalación oficial, o puede crear una cuenta gratuita en appbase.io que proporciona alojamiento Elasticsearch como un servicio y es fácil de usar. Para simplificar, usaremos el servicio appbase.io para empezar.

Ya he creado una aplicación de base de datos con conjuntos de datos de libros para simplificar. Puedes ver el conjunto de datos aquí.

Conjunto de datos de los libros

Puede clonar este conjunto de datos y generar credenciales para su propia aplicación haciendo clic en el botón Clonar esta aplicación en la parte inferior izquierda.

Estas credenciales se utilizarán para conectar nuestra interfaz de usuario con esta aplicación. Las credenciales de la aplicación anterior que usaremos en este tutorial son:

>

Saluda a a Reactivesearch

Usaremos ReactiveSearch , una biblioteca de componentes de interfaz de usuario nativa de código abierto React and React para Elasticsearch de la que soy colaborador. Ofrece una gama de componentes de interfaz de usuario altamente personalizables que pueden conectarse con cualquier servidor Elasticsearch y le proporcionan una configuración predeterminada adecuada para todos los casos de uso genéricos (como E-commerce, Yelp, Meetups, etc.) que se incluyen en estos componentes.

Espera, ¿por qué necesito ReactiveSearch ahora?

ReactiveSearch simplifica todo el proceso de conexión a un índice de Elasticsearch, haciendo consultas, obteniendo y renderizando resultados en una interfaz de usuario elegante, no sólo eso, sino que también le permite hacer que sus componentes se comuniquen entre sí, es decir, si el Componente A se actualiza, el Componente B se entera y puede actualizarse sin necesidad de ninguna interacción manual.

Esta suscripción de componente a componente es muy útil cuando tiene filtros dinámicos presentes en su pantalla, como en el caso de aplicaciones de comercio electrónico en las que la selección de una categoría de dispositivos también cambia las subcategorías disponibles, sus precios y lo que no.

ReactiveSearch te ayuda a crear aplicaciones significativamente más inteligentes de forma fácil y declarativa.

Reactivesearch-native agrupa una gama de componentes nativos de interfaz de usuario que le permite crear interfaces de usuario como Airbnb, meetups, etc. sin problemas. Aquí encontrará la lista completa de los componentes disponibles.

Investigación reactiva Componentes nativos

Creación de la aplicación BookSearch de

Lo primero es lo primero, necesitamos instalar reactivesearch-native en nuestro proyecto React Native ejecutándolo:

npm install @appbaseio/reactivesearch-native

Todos los componentes de ReactiveSearch están envueltos alrededor de un componente de contenedor llamado ReactiveBase que conecta nuestros componentes de interfaz de usuario con el cluster Elasticsearch.

Usaremos esto en App.js:

Observe cómo hemos utilizado el estilo basado en Flex aquí. El estilo en React Native es muy similar al de la web. Si no tiene experiencia en el uso de flex, le recomiendo FlexBox Froggy para empezar.

Además de Stylesheet , hemos utilizado otros dos componentes de React Native en nuestro fragmento de código:

  • Ver – Esto es similar a un elemento html div en el ecosistema React Native. Es un contenedor que soporta el diseño con flexbox, estilo, algo de manejo táctil y controles de accesibilidad.
  • Texto – Este es un componente nativo simple para mostrar texto. Puedes leer más sobre ello aquí.

Para nuestra aplicación BookSearch, necesitaremos dos componentes de reactivesearch-native en nuestro diseño:

1. Casilla de búsqueda para buscar en los libros:

Aquí usaremos el componente DataSearch de reactivesearch-native. Crea un componente de interfaz de usuario de búsqueda y nos permite buscar en uno o más campos de nuestro conjunto de datos fácilmente. Se parece a esto:

componentId=»searchbox «dataField={[original_title,original_title.search,authors,authors.search,]}placeholder=»Buscar libros «autosuggest={false}/>>.

Este componente DataSearch consulta los dataField(s) dados en el conjunto de datos. Este componente va dentro del componente ReactiveBase y recibe de él todos los datos necesarios para que no tengamos que escribir nosotros mismos las consultas de Elasticsearch.

Observe cómo hemos utilizado los campos.search en nuestro dataField prop aquí. authors.search es un campo múltiple del campo de autores. Elasticsearch puede indexar los mismos datos de diferentes maneras para diferentes propósitos, que podemos utilizar para obtener mejores resultados de búsqueda.

2. Vista de lista de resultados para mostrar los resultados de la búsqueda:

Para mostrar los resultados, utilizaremos el componente ReactiveList de reactivesearch-native. Esto es lo que parece:

( style={styles.result}>source={uri:res.image}}style={styles.image}/>style={styles.item}>style={styles.title}>{res.original_title}>{res.authors}>>>>{res.authors}>>. )} /> Así es como funcionan sus accesorios:

  • dataField: ordena los resultados usando el campo nombre aquí.
  • reaccionar: especifica que debe construir una consulta basada en los valores actuales seleccionados del componente del cuadro de búsqueda. Cada vez que el usuario cambia el valor de entrada en el cuadro de búsqueda, se dispara una nueva consulta – no es necesario escribir una consulta manual para ninguno de los componentes de la interfaz de usuario aquí, están preestablecidos con una configuración predeterminada para cumplir con todos los casos de uso genérico, pero si lo desea, puede anularla mediante customQuery prop.
  • onData: acepta una función que debe devolver un JSX válido que represente un elemento de la lista en la lista de resultados. Este prop se usará para mostrar la lista de resultados.

Puedes leer todo sobre el uso de la hélice aquí.

Reactivesearch se construye sobre la base nativa que utiliza algunas fuentes que se pueden incluir añadiendo:

async componenteWillMount() {)
  esperar a que Expo.Font.loadAsync({ { Font.loadAsync
    Roboto: require(nativo-base/Fuentes/Roboto.ttf),
    Roboto_medium: require(nativo-base/Fuentes/Roboto_medium.ttf),
    Ionicons: require(@expo/vector-icons/fonts/Ionicons.ttf),
  });
}

>

Con estos componentes y un poco de magia de estilo , así es como se ve nuestra aplicación:

¡Voilà! Tiene una aplicación BookSearch que se ejecuta en Android e iOS

Si quieres jugar con esta aplicación sobre la marcha, prueba este snack aquí

Enlaces útiles

  1. ReactiveSearch GitHub repo
  2. ReactiveBuscar documentos

Espero que hayan disfrutado de este tutorial. Si tienes alguna idea o sugerencia, por favor házmelo saber y comparte tu versión de la aplicación en los comentarios

Reaccionar NativeCodingEcommerce Buscar AppReactJavascriptContinuar la discusión