La AWS SDK per JavaScript V3 API Reference Guide descrive in dettaglio tutte le operazioni API per la AWS SDK per JavaScript versione 3 (V3).

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Guida introduttiva a React Native

Questo tutorial mostra come creare un'app React Native utilizzando la CLI React Native.

Questo tutorial ti mostra:

Lo scenario

Amazon S3 è un servizio cloud che consente di archiviare e recuperare qualsiasi quantità di dati in qualsiasi momento, da qualsiasi punto del Web. React Native è un framework di sviluppo che consente di creare applicazioni mobili. Questo tutorial mostra come creare un'app React Native che si connette ad Amazon S3 per creare ed eliminare un bucket Amazon S3.

L'app utilizza il seguente SDK per: JavaScript APIs

Attività prerequisite

Questa sezione fornisce la configurazione minima necessaria per completare questo tutorial. Non la considerare come una configurazione completa. Per la configurazione completa, vedi Configura l'SDK per JavaScript.

Fase 1: creare un pool di identità di Amazon Cognito

In questo esercizio, crei e utilizzi un pool di identità Amazon Cognito per fornire un accesso non autenticato alla tua app per il servizio Amazon S3. La creazione di un pool di identità crea anche due ruoli AWS Identity and Access Management (IAM), uno per supportare gli utenti autenticati da un provider di identità e l'altro per supportare gli utenti guest non autenticati.

In questo esercizio, lavoreremo solo con il ruolo degli utenti non autenticati in modo che l'attività risulti mirata. È possibile integrare il supporto per un provider di identità e per gli utenti autenticati in un secondo momento.

Dopo aver creato il tuo pool di identità Amazon Cognito, sei pronto per aggiungere le autorizzazioni per Amazon S3 necessarie alla tua app React Native.

Fase 2: aggiungere una policy al ruolo IAM creato

Per consentire l'accesso tramite script del browser ad Amazon S3 per creare ed eliminare un bucket Amazon S3, utilizza il ruolo IAM non autenticato creato per il tuo pool di identità Amazon Cognito. Ciò richiede l'aggiunta di una policy IAM al ruolo. Per ulteriori informazioni sui ruoli IAM, consulta Creating a Role to Delegate Permissions to an AWS Service nella IAM User Guide.

Dopo aver creato il tuo pool di identità Amazon Cognito e aggiunto le autorizzazioni per Amazon S3 al tuo ruolo IAM per utenti non autenticati, sei pronto per creare l'app.

Passaggio 3: crea l'app utilizzando create-react-native-app

Crea un'app React Native eseguendo il seguente comando.

npx react-native init ReactNativeApp --npm

Fase 4: Installare il pacchetto Amazon S3 e altre dipendenze

All'interno della directory del progetto, esegui i seguenti comandi per installare il pacchetto Amazon S3.

npm install @aws-sdk/client-s3

Questo comando installa il pacchetto Amazon S3 nel progetto e lo package.json aggiorna per elencare Amazon S3 come dipendenza del progetto. Puoi trovare informazioni su questo pacchetto cercando "@aws -sdk» sul sito web di npm. https://www.npmjs.com/

Questi pacchetti e il relativo codice vengono installati nella sottodirectory node_modules del progetto.

Per ulteriori informazioni sull'installazione dei pacchetti Node.js, consulta Scaricamento e installazione dei pacchetti localmente e Creazione dei moduli Node.js sul sito web di npm (Node.js package manager). Per informazioni sul download e l'installazione di AWS SDK per JavaScript, vedereInstalla l'SDK per JavaScript.

Installa le altre dipendenze necessarie per l'autenticazione.

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

Passaggio 5: scrivere il codice React Native

Aggiungi il codice seguente aApp.tsx. Sostituisci identityPoolId e region con l'ID del pool di identità e la regione in cui verrà creato il bucket 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;

Le prime importazioni di codice richiedevano le dipendenze React, React Native e AWS SDK.

All'interno della funzione App:

La JavaScript pagina completa è disponibile qui. GitHub

Passaggio 6: Esegui l'esempio

Per eseguire l'esempio webios, esegui o android comanda utilizzando npm.

Ecco un esempio di output del ios comando in esecuzione su 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  

Ecco un esempio di output del android comando in esecuzione su 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 } 

Inserisci il nome del bucket che desideri creare o eliminare e fai clic su Crea bucket o Elimina bucket. Il rispettivo comando verrà inviato ad Amazon S3 e verrà visualizzato un messaggio di successo o di errore.

Possibili miglioramenti

Ecco alcune varianti di questa applicazione che puoi utilizzare per esplorare ulteriormente l'utilizzo dell'SDK JavaScript in un'app React Native.