La Guía de referencia de la API de AWS SDK for JavaScript V3 describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript.

Introducción a React Native

En este tutorial, se muestra cómo crear una aplicación React Native mediante la CLI de React Native.

Este tutorial muestra:

El escenario

Amazon S3 es un servicio en la nube que le permite almacenar y recuperar cualquier cantidad de datos en cualquier momento y desde cualquier lugar de la web. React Native es un marco de desarrollo que le permite crear aplicaciones móviles. En este tutorial, se muestra cómo crear una aplicación React Native que se conecte a Amazon S3 para crear y eliminar un bucket de Amazon S3.

La aplicación usa el siguiente SDK para las API de JavaScript:

Tareas previas necesarias

Esta sección proporciona la configuración mínima necesaria para completar este tutorial. No debería tomarse esto como una configuración completa. Para una configuración completa, vaya a Configuración del SDK para JavaScript.

Paso 1: Creación de un grupo de identidades en Amazon Cognito

En este ejercicio, deberá crear y utilizar un grupo de identidades de Amazon Cognito para proporcionar acceso sin autenticar a su aplicación para el servicio de Amazon S3. Al crear un grupo de identidades también creará dos roles de AWS Identity and Access Management (IAM), uno para admitir usuarios autenticados mediante un proveedor de identidades y otro para admitir usuarios invitados no autenticados.

En este ejercicio, vamos a trabajar con el rol de usuario sin autenticar para concentrarnos en la tarea. Puede integrar la compatibilidad con un proveedor de identidades y los usuarios autenticados más adelante.

Después de crear el grupo de identidades de Amazon Cognito, ya estará listo para añadir los permisos para Amazon S3 que necesita su aplicación React Native.

Paso 2: Añadir una política al rol de IAM creado

Para habilitar el acceso del script del navegador a Amazon S3 con el fin de crear y eliminar un bucket de Amazon S3, utilice el rol de IAM sin autenticar creado para su grupo de identidades de Amazon Cognito. Para ello tiene que añadir una política de IAM al rol. Para obtener más información acerca de los roles de IAM, consulte Creación de un rol para delegar permisos a un servicio de AWS en la Guía del usuario de IAM.

Tras crear su grupo de identidades de Amazon Cognito y añadir permisos para Amazon S3 a su rol de IAM para usuarios no autenticados, estará listo para crear la aplicación.

Paso 3: Creación de la aplicación con create-react-native-app

Cree una aplicación React Native ejecutando el siguiente comando.

npx react-native init ReactNativeApp --npm

Paso 4: Instalación del paquete de Amazon S3 y otras dependencias

En el directorio del proyecto, ejecute los siguientes comandos para instalar el paquete de Amazon S3.

npm install @aws-sdk/client-s3

Este comando instala el paquete de Amazon S3 en su proyecto y actualiza package.json para incluir Amazon S3 como dependencia del proyecto. Puede encontrar información sobre este paquete buscando “@aws-sdk” en el sitio web de npm https://www.npmjs.com/.

Estos paquetes y su código asociado se instalan en el subdirectorio node_modules del proyecto.

Para obtener más información acerca de la instalación de paquetes de Node.js, consulte las secciones Descarga e instalación de paquetes a nivel local y Creación de módulos de Node.js en el sitio web de npm (administrador de paquetes de Node.js). Para obtener información acerca del cómo descargar e instalar el AWS SDK para JavaScript, consulte Instalar el SDK para JavaScript..

Instale las demás dependencias necesarias para la autenticación.

npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity

Paso 5: Escritura del código de React Native

Añada el siguiente código al App.tsx. Sustituya identityPoolId y region por el ID del grupo de identidades y la región en la que se creará el bucket de Amazon S3.

import React, { useCallback, useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

import {
  S3Client,
  CreateBucketCommand,
  DeleteBucketCommand,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";

const client = new S3Client({
  // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region.
  region: "us-east-1",
  credentials: fromCognitoIdentityPool({
    // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region.
    identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492",
    // Replace the value of 'region' with your Amazon Cognito Region.
    clientConfig: { region: "us-east-1" },
  }),
});

enum MessageType {
  SUCCESS = 0,
  FAILURE = 1,
  EMPTY = 2,
}

const App = () => {
  const [bucketName, setBucketName] = useState("");
  const [msg, setMsg] = useState<{ message: string; type: MessageType }>({
    message: "",
    type: MessageType.EMPTY,
  });

  const createBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new CreateBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" created.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      console.error(e);
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  const deleteBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new DeleteBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" deleted.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  return (
    <View style={styles.container}>
      {msg.type !== MessageType.EMPTY && (
        <Text
          style={
            msg.type === MessageType.SUCCESS
              ? styles.successText
              : styles.failureText
          }
        >
          {msg.message}
        </Text>
      )}
      <View>
        <TextInput
          onChangeText={(text) => setBucketName(text)}
          autoCapitalize={"none"}
          value={bucketName}
          placeholder={"Enter Bucket Name"}
        />
        <Button color="#68a0cf" title="Create Bucket" onPress={createBucket} />
        <Button color="#68a0cf" title="Delete Bucket" onPress={deleteBucket} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  successText: {
    color: "green",
  },
  failureText: {
    color: "red",
  },
});

export default App;

El código importa primero las dependencias necesarias de React, React Native y AWS SDK.

Dentro de la aplicación de funciones:

La página completa de JavaScript está disponible aquí en GitHub.

Paso 6: Ejecución del ejemplo

Para ejecutar el ejemplo, ejecute el comando web, ios o android con npm.

A continuación, se muestra un ejemplo del resultado de ejecutar el comando ios comando en macOS.

$ npm run ios

> ReactNativeApp@0.0.1 ios /Users/trivikr/workspace/ReactNativeApp
> react-native run-ios

info Found Xcode workspace "ReactNativeApp.xcworkspace"
info Launching iPhone 11 (iOS 14.2)
info Building (using "xcodebuild -workspace ReactNativeApp.xcworkspace -configuration Debug -scheme ReactNativeApp -destination id=706C1A97-FA38-407D-AD77-CB4FCA9134E9")
success Successfully built the app
info Installing "/Users/trivikr/Library/Developer/Xcode/DerivedData/ReactNativeApp-cfhmsyhptwflqqejyspdqgjestra/Build/Products/Debug-iphonesimulator/ReactNativeApp.app"
info Launching "org.reactjs.native.example.ReactNativeApp"

success Successfully launched the app on the simulator  

A continuación, se muestra un ejemplo del resultado de ejecutar el comando android comando en macOS.

$ npm run android

> ReactNativeApp@0.0.1 android
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 970 file(s) to forward-jetify. Using 12 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...

> Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.

> Task :app:installDebug
02:18:38 V/ddms: execute: running am get-config
02:18:38 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
02:18:38 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_x86(AVD) - 11' for app:debug
02:18:38 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
02:18:38 D/Device: Uploading file onto device 'emulator-5554'
02:18:38 D/ddms: Reading file permission of /Users/trivikr/workspace/ReactNativeApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--
02:18:40 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
02:18:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 6s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.reactnativeapp/.MainActivity } 

Introduce el nombre del bucket que desea crear o eliminar y haga clic en Crear bucket o Eliminar bucket. El comando correspondiente se enviará a Amazon S3 y aparecerá un mensaje de confirmación o de error.

Mejoras posibles

A continuación, se muestran diversas variaciones de esta aplicación que puede utilizar para profundizar en el uso del SDK para JavaScript en una aplicación React Native.