Saltar al contenido principal

Uso de AWS con React Native

· 11 min de lectura
Richard Threlkeld
Richard Threlkeld
Gerente Senior de Producto Técnico en AWS Mobile
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

AWS es ampliamente reconocido en la industria tecnológica como proveedor de servicios en la nube. Estos incluyen tecnologías de computación, almacenamiento y bases de datos, así como ofertas serverless completamente gestionadas. El equipo de AWS Mobile ha estado colaborando estrechamente con clientes y miembros del ecosistema JavaScript para que las aplicaciones móviles y web conectadas a la nube sean más seguras, escalables y fáciles de desarrollar e implementar. Comenzamos con un kit de inicio completo, pero tenemos desarrollos más recientes.

Esta publicación de blog trata sobre aspectos interesantes para desarrolladores de React y React Native:

  • AWS Amplify, una biblioteca declarativa para aplicaciones JavaScript que utiliza servicios en la nube

  • AWS AppSync, un servicio GraphQL completamente gestionado con funciones offline y en tiempo real

AWS Amplify​

Las aplicaciones de React Native son muy fáciles de iniciar usando herramientas como Create React Native App y Expo. Sin embargo, conectarlas a la nube puede ser un desafío cuando intentas alinear un caso de uso con servicios de infraestructura. Por ejemplo, tu aplicación de React Native podría necesitar subir fotos. ¿Deberían protegerse por usuario? Eso probablemente signifique que necesitas algún tipo de registro o proceso de inicio de sesión. ¿Quieres tu propio directorio de usuarios o estás usando un proveedor de redes sociales? Tal vez tu aplicación también necesite llamar a una API con lógica de negocio personalizada después de que los usuarios inicien sesión.

Para ayudar a los desarrolladores JavaScript con estos problemas, lanzamos una biblioteca llamada AWS Amplify. Su diseño se organiza en "categorías" de tareas, en lugar de implementaciones específicas de AWS. Por ejemplo, si quisieras que los usuarios se registren, inicien sesión y luego suban fotos privadas, simplemente incorporarías las categorías Auth y Storage a tu aplicación:

import { Auth } from 'aws-amplify';

Auth.signIn(username, password)
    .then(user => console.log(user))
    .catch(err => console.log(err));

Auth.confirmSignIn(user, code)
    .then(data => console.log(data))
    .catch(err => console.log(err));

En el código anterior, puedes ver un ejemplo de tareas comunes que Amplify te ayuda a realizar, como usar códigos de autenticación multifactor (MFA) con correo electrónico o SMS. Las categorías admitidas actualmente son:

  • Auth: Proporciona automatización de credenciales. La implementación lista para usar emplea credenciales de AWS para firmas y tokens JWT OIDC de Amazon Cognito. Se admite funcionalidad común, como características MFA.

  • Analytics: Con una sola línea de código, obtén seguimiento para usuarios autenticados o no autenticados en Amazon Pinpoint. Extiéndelo para métricas o atributos personalizados según prefieras.

  • API: Proporciona interacción con APIs RESTful de manera segura, aprovechando AWS Signature Version 4. El módulo API funciona excelente en infraestructuras serverless con Amazon API Gateway.

  • Storage: Comandos simplificados para subir, descargar y listar contenido en Amazon S3. También puedes agrupar datos fácilmente en contenido público o privado por usuario.

  • Caching: Interfaz de caché LRU para aplicaciones web y React Native que utiliza persistencia específica de implementación.

  • i18n and Logging: Proporciona capacidades de internacionalización y localización, así como capacidades de depuración y registro.

Una ventaja de Amplify es que codifica "mejores prácticas" en el diseño para tu entorno de programación específico. Por ejemplo, descubrimos al trabajar con clientes y desarrolladores de React Native que los atajos tomados durante el desarrollo para hacer funcionar las cosas rápidamente llegaban a entornos de producción. Estos pueden comprometer la escalabilidad o la seguridad, y forzar una reestructuración de infraestructura y refactorización de código.

Un ejemplo de cómo ayudamos a los desarrolladores a evitar esto son las Arquitecturas de Referencia Serverless con AWS Lambda. Estas muestran las mejores prácticas para usar Amazon API Gateway y AWS Lambda juntos al construir tu backend. Este patrón está integrado en la categoría API de Amplify. Puedes usar este patrón para interactuar con varios endpoints REST diferentes y pasar cabeceras directamente a tu función Lambda para lógica de negocio personalizada. También hemos lanzado una CLI de AWS Mobile para iniciar nuevos proyectos de React Native o integrarlo en existentes con estas características. Para comenzar, simplemente instala mediante npm y sigue las indicaciones de configuración:

npm install --global awsmobile-cli
awsmobile configure

Otro ejemplo de mejores prácticas integradas específicas para el ecosistema móvil es la seguridad de contraseñas. La implementación predeterminada de la categoría Auth aprovecha los grupos de usuarios de Amazon Cognito para registro e inicio de sesión. Este servicio implementa el protocolo Secure Remote Password para proteger a los usuarios durante los intentos de autenticación. Si te interesa leer sobre las matemáticas del protocolo, notarás que debes usar un número primo grande al calcular el verificador de contraseña sobre una raíz primitiva para generar un Grupo. En entornos React Native, JIT está deshabilitado. Esto hace que los cálculos BigInteger para operaciones de seguridad como esta sean menos eficientes. Para solucionarlo, hemos lanzado puentes nativos en Android e iOS que puedes vincular en tu proyecto:

npm install --save aws-amplify-react-native
react-native link amazon-cognito-identity-js

También nos emociona ver que el equipo de Expo ha incluido esto en su último SDK para que puedas usar Amplify sin necesidad de ejectar.

Finalmente, específico para desarrollo en React Native (y React), Amplify incluye componentes de orden superior (HOCs) para envolver fácilmente funcionalidades, como registro e inicio de sesión en tu aplicación:

import Amplify, { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

class App extends React.Component {
...
}

export default withAuthenticator(App);

El componente subyacente también se proporciona como <Authenticator />, que te da control total para personalizar la UI. También ofrece propiedades para gestionar el estado del usuario, como si ha iniciado sesión o está esperando confirmación MFA, y callbacks que puedes activar cuando cambia el estado.

De manera similar, encontrarás componentes React genéricos para diferentes casos de uso. Puedes personalizarlos según tus necesidades, por ejemplo, para mostrar todas las imágenes privadas de Amazon S3 en el módulo Storage:

<S3Album
  level="private"
  path={path}
  filter={(item) => /jpg/i.test(item.path)}/>

Puedes controlar muchas características de los componentes mediante props, como se mostró anteriormente con opciones de almacenamiento público o privado. Incluso hay capacidades para recopilar automáticamente análisis cuando los usuarios interactúan con ciertos componentes de UI:

return <S3Album track/>

AWS Amplify favorece un estilo de desarrollo de convención sobre configuración, con rutinas de inicialización global o por categoría. La forma más rápida de comenzar es con un archivo aws-exports. Sin embargo, los desarrolladores también pueden usar la biblioteca independientemente con recursos existentes.

Para un análisis profundo de la filosofía y ver una demo completa, mira el video de AWS re:Invent.

AWS AppSync​

Poco después del lanzamiento de AWS Amplify, también lanzamos AWS AppSync. Este es un servicio GraphQL completamente administrado con capacidades tanto fuera de línea como en tiempo real. Aunque puedes usar GraphQL en diferentes lenguajes de programación cliente (incluyendo Android e iOS nativos), es muy popular entre los desarrolladores de React Native. Esto se debe a que el modelo de datos encaja perfectamente en un flujo de datos unidireccional y jerarquía de componentes.

AWS AppSync te permite conectar con recursos en tu propia cuenta de AWS, lo que significa que eres dueño y controlas tus datos. Esto se logra mediante fuentes de datos, y el servicio admite Amazon DynamoDB, Amazon Elasticsearch y AWS Lambda. Esto te permite combinar funcionalidades (como bases de datos NoSQL y búsqueda de texto completo) en una única API GraphQL como esquema. AppSync también puede aprovisionar recursos desde un esquema, así que si no estás familiarizado con los servicios de AWS, puedes escribir SDL de GraphQL, hacer clic en un botón y comenzar a operar automáticamente.

La funcionalidad en tiempo real de AWS AppSync se controla mediante suscripciones GraphQL con un patrón basado en eventos bien conocido. Como las suscripciones en AWS AppSync se controlan en el esquema con una directiva GraphQL, y un esquema puede usar cualquier fuente de datos, esto significa que puedes activar notificaciones desde operaciones de bases de datos con Amazon DynamoDB y Amazon Elasticsearch Service, o desde otras partes de tu infraestructura con AWS Lambda.

De manera similar a AWS Amplify, puedes usar funciones de seguridad empresarial en tu API GraphQL con AWS AppSync. El servicio te permite comenzar rápidamente con claves de API. Sin embargo, al pasar a producción puedes migrar a AWS Identity and Access Management (IAM) o tokens OIDC de grupos de usuarios de Amazon Cognito. Puedes controlar el acceso a nivel de resolutor con políticas en tipos. Incluso puedes usar verificaciones lógicas para control de acceso granular en tiempo de ejecución, como detectar si un usuario es propietario de un recurso específico de base de datos. También existen capacidades para verificar membresía en grupos al ejecutar resolutores o acceder a registros individuales de bases de datos.

Para ayudar a los desarrolladores de React Native a aprender sobre estas tecnologías, existe un esquema GraphQL de muestra integrado que puedes lanzar desde la página de inicio de la consola de AWS AppSync. Esta muestra implementa un esquema GraphQL, aprovisiona tablas de bases de datos y conecta automáticamente consultas, mutaciones y suscripciones. También hay un ejemplo funcional para React Native de AWS AppSync que aprovecha este esquema integrado (así como un ejemplo para React), que te permite tener tus componentes cliente y en la nube funcionando en minutos.

Comenzar es sencillo cuando usas AWSAppSyncClient, que se integra con Apollo Client. El AWSAppSyncClient maneja seguridad y firmas para tu API GraphQL, funcionalidad offline, y el proceso de handshake y negociación de suscripciones:

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";

const client = new AWSAppSyncClient({
  url: awsconfig.graphqlEndpoint,
  region: awsconfig.region,
  auth: {type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey}
});

La consola de AppSync proporciona un archivo de configuración descargable que contiene tu endpoint GraphQL, región de AWS y clave de API. Luego puedes usar el cliente con React Apollo:

const WithProvider = () => (
  <ApolloProvider client={client}>
      <Rehydrated>
          <App />
      </Rehydrated>
  </ApolloProvider>
);

En este punto, puedes usar consultas GraphQL estándar:

query ListEvents {
    listEvents{
      items{
        __typename
        id
        name
        where
        when
        description
        comments{
          __typename
          items{
            __typename
            eventId
            commentId
            content
            createdAt
          }
          nextToken
        }
      }
    }
}

El ejemplo anterior muestra una consulta con el esquema de aplicación de muestra aprovisionado por AppSync. No solo demuestra interacción con DynamoDB, sino que también incluye paginación de datos (incluyendo tokens cifrados) y relaciones entre tipos como Events y Comments. Como la aplicación está configurada con AWSAppSyncClient, los datos se persisten automáticamente offline y se sincronizan cuando los dispositivos se reconectan.

Puedes ver un análisis profundo de la tecnología del cliente detrás de esto y una demostración de React Native en este video.

Comentarios​

El equipo detrás de estas bibliotecas está deseando conocer cómo funcionan estas herramientas y servicios para ustedes. También quieren escuchar qué más podemos hacer para facilitar el desarrollo con React y React Native utilizando servicios en la nube. Pueden contactar al equipo de AWS Mobile en GitHub para AWS Amplify o AWS AppSync.