La Guida API di riferimento AWS SDK for JavaScript V3 descrive in dettaglio tutte le API operazioni per la AWS SDK for 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 usando React Native. CLI

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 quanto segue per: SDK 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 SDK il 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 AWS Identity and Access Management (IAM) ruoli, uno per supportare gli utenti autenticati da un provider di identità e l'altro per supportare gli utenti ospiti 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. Sarà necessario aggiungere una policy IAM al ruolo. Per ulteriori informazioni sui IAM ruoli, consulta Creazione di un ruolo per delegare le autorizzazioni a un servizio nella Guida per l'utente. AWS IAM

Dopo aver creato il tuo pool di identità Amazon Cognito e aver aggiunto le autorizzazioni per Amazon S3 al tuo IAM ruolo per gli 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 for JavaScript, vedereInstalla il SDK modulo 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 React, React Native e AWS SDK le dipendenze.

All'interno della funzione App:

La JavaScript pagina completa è disponibile qui. GitHub

Fase 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 le varianti di questa applicazione che puoi utilizzare per esplorare ulteriormente l'utilizzo del SDK modulo JavaScript in un'app React Native.