Le guide de API référence AWS SDK for JavaScript V3 décrit en détail toutes les API opérations de la AWS SDK for JavaScript version 3 (V3).

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Commencer à utiliser React Native

Ce didacticiel vous montre comment créer une application React Native à l'aide de React Native CLI.

Ce didacticiel vous montre :

Scénario

Amazon S3 est un service cloud qui vous permet de stocker et de récupérer n'importe quel volume de données à tout moment, où que vous soyez sur le Web. React Native est un framework de développement qui permet de créer des applications mobiles. Ce didacticiel explique comment créer une application React Native qui se connecte à Amazon S3 pour créer et supprimer un compartiment Amazon S3.

L'application utilise les éléments suivants SDK pour JavaScript APIs :

Tâches préalables

Cette section fournit la configuration minimale nécessaire pour effectuer ce didacticiel. Vous ne devez pas considérer cela comme une configuration complète. Pour cela, consultez Configurez le SDK pour JavaScript.

Étape 1 : créer un pool d'identités Amazon Cognito

Dans cet exercice, vous allez créer et utiliser un pool d'identités Amazon Cognito afin de fournir un accès non authentifié à votre application pour le service Amazon S3. La création d'un pool d'identités crée également deux AWS Identity and Access Management (IAM) rôles, l'un pour prendre en charge les utilisateurs authentifiés par un fournisseur d'identité et l'autre pour prendre en charge les utilisateurs invités non authentifiés.

Dans cet exercice, nous allons uniquement avoir recours à un rôle utilisateur non authentifié afin de rester concentré sur la tâche. Vous pouvez vous former à la prise en charge d'un fournisseur d'identité et des utilisateurs authentifiés ultérieurement.

Après avoir créé votre pool d'identités Amazon Cognito, vous êtes prêt à ajouter les autorisations nécessaires à votre application React Native pour Amazon S3.

Étape 2 : Ajouter une stratégie au rôle IAM créé

Pour permettre l'accès par script de navigateur à Amazon S3 afin de créer et de supprimer un compartiment Amazon S3, utilisez le IAM rôle non authentifié créé pour votre pool d'identités Amazon Cognito. Pour cela, vous devez ajouter une stratégie IAM au rôle. Pour plus d'informations sur IAM les rôles, voir Création d'un rôle pour déléguer des autorisations à un AWS service dans le Guide de IAM l'utilisateur.

Après avoir créé votre pool d'identités Amazon Cognito et ajouté des autorisations pour Amazon S3 à votre IAM rôle pour les utilisateurs non authentifiés, vous êtes prêt à créer l'application.

Étape 3 : créer une application à l'aide de create-react-native-app

Créez une application React Native en exécutant la commande suivante.

npx react-native init ReactNativeApp --npm

Étape 4 : Installation du package Amazon S3 et des autres dépendances

Dans le répertoire du projet, exécutez les commandes suivantes pour installer le package Amazon S3.

npm install @aws-sdk/client-s3

Cette commande installe le package Amazon S3 dans votre projet et est mise à jour package.json pour répertorier Amazon S3 en tant que dépendance du projet. Vous pouvez trouver des informations sur ce package en recherchant "@aws -sdk » sur le site Web de https://www.npmjs.com/ npm.

Ces packages et le code associé sont installés dans le sous-répertoire node_modules de votre projet.

Pour plus d'informations sur l'installation des packages Node.js, voir Téléchargement et installation de packages localement et Création de modules Node.js sur le site Web npm (Node.js package manager). Pour plus d'informations sur le téléchargement et l'installation du AWS SDK for JavaScript, consultezInstallez le SDK pour JavaScript.

Installez les autres dépendances requises pour l'authentification.

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

Étape 5 : Écrire le code React Native

Ajoutez le code suivant auApp.tsx. Remplacez identityPoolId et region par l'ID du pool d'identités et la région dans lesquels votre compartiment Amazon S3 sera créé.

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;

Le code importe d'abord React, React Native et les AWS SDK dépendances requises.

Dans la fonction App :

La JavaScript page complète est disponible ici GitHub.

Étape 6 : Exécuter l'exemple

Pour exécuter l'exemple webios, exécutez ou android commandez à l'aide de npm.

Voici un exemple de sortie d'exécution d'une ios commande sur 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  

Voici un exemple de sortie d'exécution d'une android commande sur 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 } 

Entrez le nom du bucket que vous souhaitez créer ou supprimer et cliquez sur Create Bucket ou Delete Bucket. La commande correspondante sera envoyée à Amazon S3 et un message de réussite ou d'erreur s'affichera.

Améliorations possibles

Voici des variantes de cette application que vous pouvez utiliser pour explorer plus en détail l'utilisation du SDK for JavaScript dans une application React Native.