Saltar al contenido

Tecnología · Apps para iOS y Android

Desarrollo de apps con React Native

React Native permite escribir la app una vez y publicarla en iPhone y en Android, con pantallas hechas de los componentes propios de cada sistema. Desarrollamos apps nuevas así, y también continuamos, actualizamos o rescatamos las que ya están hechas con React Native.

Se combina con

Fig. 01Banco de doble salida9:41Parte 0142UN CÓDIGO · DOS SISTEMAS9:41Parte 0142En bucle
Un cambio en la consola baja por el puente y llega a la vez a los dos teléfonos: la misma pantalla en iPhone y en Android, cada una con los controles de su sistema.

Situaciones

Qué puedes resolver con una app en React Native

React Native compensa cuando la app tiene que estar en los dos sistemas y no hay motivo para escribirla dos veces. La mayor parte del código es común; lo propio de cada teléfono se programa aparte, solo donde hace falta.

  • Una app para iPhone y Android a la vez

    Un solo equipo, un solo código y una sola lista de tareas pendientes. Las dos versiones salen juntas y hacen lo mismo, cada una con los gestos y controles de su sistema.

  • Una app que ya existe y nadie mantiene

    Quedó en una versión antigua, las tiendas piden actualizarla o falla en los teléfonos nuevos. Se pone al día por pasos, sin reescribirla, y se vuelve a publicar.

  • Una función que depende del teléfono

    Leer códigos con la cámara, imprimir por Bluetooth, cobrar con un terminal o seguir una ruta. Se programa como módulo nativo y el resto de la app lo usa como una pieza más.

  • La misma lógica en la app y en la web

    Si tu web ya está hecha en React, las reglas de negocio, la validación y la conexión con tu servidor se comparten en lugar de escribirse dos veces.

El puente: una línea de código que se reparte en dos salidas

Qué conviene revisar al empezar

  • En qué teléfonos y versiones de iOS y Android tiene que funcionar
  • Qué funciones del teléfono usa: cámara, ubicación, Bluetooth, avisos
  • Si existe ya una app o un código de partida, y en qué versión está
  • Quién tiene las cuentas de desarrollador de Apple y de Google

Servicios

Qué desarrollamos con React Native

Cuatro tipos de encargo. Una app nueva suele empezar por el primero y necesitar el segundo en algún punto.

  • Módulo 1 · Doble salida

    Apps para iPhone y Android

    La app completa desde una sola base de código: navegación, pantallas, formularios y conexión con tu servidor. Se prueba en teléfonos reales de los dos sistemas antes de cada entrega.

    Ejemplos de entregables

    • App de partes de trabajo
    • Área de clientes en el móvil
    • App de pedidos para comerciales
  • Módulo 2 · Módulo nativo

    Módulos nativos y hardware

    Cuando la app necesita algo que solo el teléfono sabe hacer, se escribe en el lenguaje de cada sistema, Swift o Kotlin, y se ofrece al resto de la app con una sola interfaz.

    Ejemplos de entregables

    • Lector de códigos con la cámara
    • Impresora o báscula por Bluetooth
    • Etiquetas NFC
  • Módulo 3 · Consola

    Mantenimiento y puesta al día

    Actualización de versiones de React Native y de sus dependencias, paso a la arquitectura actual, corrección de cierres inesperados y de rechazos de las tiendas.

    Ejemplos de entregables

    • Subida de versión por etapas
    • Cierres al abrir en teléfonos nuevos
    • Requisito nuevo de una tienda
  • Módulo 4 · Salida web

    Lógica compartida con tu web

    Las reglas de negocio, los tipos de datos y el cliente de tu API viven en un paquete común que usan la app y la web. Un cambio de regla se hace una vez.

    Ejemplos de entregables

    • Validación común de formularios
    • Cliente de API compartido
    • Mismos permisos en web y app

Un ejemplo en funcionamiento

Un parte de trabajo, dos teléfonos

Ejemplo ilustrativo con datos ficticios. Añade una tarea, márcala como hecha o cambia de técnico: los dos teléfonos responden a la vez porque ejecutan el mismo código. Fíjate también en lo que no es igual.

Ejemplo · datos de muestra

El código común

Lo que comparten

  • La lista de tareas y su estado
  • La regla: no se cierra con tareas pendientes
  • El técnico asignado y el guardado

Lo propio de cada sistema

  • La forma de la casilla y del botón
  • Cómo avisa de que algo falta
  • La barra inferior y el gesto de volver

Los dos teléfonos están dibujados en tu navegador: no hay ninguna app instalada ni se envía nada. Lo que enseña es el reparto real entre código común y piezas propias de cada sistema.

Integración

Cómo encaja con tus sistemas

Una app es la parte visible de algo que ya existe: tus datos, tus usuarios y tus procesos. React Native se ocupa del teléfono; lo demás se conecta.

De dónde viene

React NativeApp en React Nativeun código, dos sistemas

A dónde llega

Dependencias que conviene revisar

  • Qué API existe hoy y si está pensada para una app o solo para la web
  • Cómo se identifican los usuarios y si la sesión debe durar días
  • Qué debe seguir funcionando sin cobertura
  • Qué bibliotecas de terceros usa la app y si siguen mantenidas

Cómo trabajamos y qué entregamos

Cómo trabajamos un encargo de React Native

  1. 01

    Revisión inicial

    Miramos lo que hay: el código si existe, las cuentas de las tiendas, los teléfonos del equipo y lo que la app tiene que hacer.

  2. 02

    Alcance

    Escribimos las pantallas, qué es común y qué necesita módulo nativo, y qué queda fuera de la primera versión.

  3. 03

    Primera entrega

    Una versión instalable en tus teléfonos, de los dos sistemas, con el recorrido principal funcionando contra datos reales.

  4. 04

    Validación

    La prueba quien va a usarla, en sus teléfonos y en su sitio de trabajo. Lo que falla ahí se corrige antes de publicar.

  5. 05

    Documentación

    Cómo se compila, cómo se publica una versión nueva y qué revisar cuando Apple o Google cambien sus requisitos.

Qué recibes al cerrar el encargo

  • El código en un repositorio a tu nombre
  • La app publicada desde tus cuentas de Apple y Google
  • Una guía para compilar y publicar versiones
  • La lista de lo que queda fuera y por qué

Preguntas

Preguntas sobre React Native

¿Falta la tuya? Escríbela a info@veodar.com y te respondemos con una pregunta concreta, no con un dossier.

¿La app queda igual de fluida que una nativa?

En las apps de gestión, con listas, formularios, mapas y cámara, la diferencia rara vez se aprecia: las pantallas son componentes del propio sistema. Donde sí conviene código nativo es en gráficos muy exigentes o en funciones muy pegadas al aparato, y eso se decide antes de empezar.

¿Sirve el mismo código para la web?

La interfaz no, la lógica sí. Las reglas de negocio, la validación y el acceso a tu API se pueden compartir con una web en React. Las pantallas se escriben para cada medio porque un teléfono y un navegador no se usan igual.

¿Podéis continuar una app React Native que empezó otro equipo?

Sí. Primero la compilamos y la revisamos: versión, dependencias sin mantenimiento y partes sin pruebas. Con eso delante te decimos qué se puede continuar tal cual y qué conviene rehacer, antes de comprometer nada.

¿Qué pasa cuando sale una versión nueva de iOS o de Android?

Cada año cambian requisitos y a veces comportamientos. La app se entrega con una nota de qué comprobar en cada versión nueva, y el mantenimiento, si lo contratas, incluye esas revisiones.

¿React Native o una app nativa en Swift y Kotlin?

Depende de cuánto de la app es común. Si casi todo son pantallas y datos, una base de código ahorra trabajo duplicado. Si la app vive de una función muy propia de un sistema, el reloj o un terminal de trabajo, por ejemplo, suele compensar hacerla nativa. Lo valoramos contigo con el caso concreto.

¿Hace falta Expo?

No es obligatorio, pero hoy es la forma recomendada de empezar un proyecto de React Native y simplifica compilar, publicar y actualizar. En una app existente sin Expo se puede seguir trabajando igual o incorporarlo por partes.

Actualizado:

Otras tecnologías

Con qué se combina

Todas las tecnologías
  • Desarrollo de apps con ExpoCompilación en la nube, publicación en las tiendas y actualizaciones sin esperar a una versión nueva. Montamos el proyecto o migramos el que ya tienes.
  • Datos sin conexión con SQLiteLa app guarda y consulta en el propio teléfono y sincroniza cuando vuelve la cobertura. Diseñamos el modelo local, la cola de cambios y el cifrado.
  • Desarrollo con ReactPaneles, buscadores y formularios complejos. Interfaces conectadas con tus datos para consultar información y realizar tareas desde el navegador.

Empezar

Cuéntanos qué app tienes en mente.

Con una frase de lo que debe hacer y en qué teléfonos nos basta para una primera respuesta. Si ya existe, mejor aún.

Qué ayuda a valorarlo

  • Qué debe hacer la app y quién la usará
  • Si existe ya una app o un código
  • Qué sistemas tuyos tiene que leer o escribir
  • Si tienes cuentas de desarrollador en Apple y Google

¿Antes de escribir? Mira cómo presupuestamos un proyecto o las soluciones por área de la empresa.

Fig. 07Manipulador MorseH · O · L · A