O Guia de API referência da AWS SDK for JavaScript V3 descreve detalhadamente todas as API operações da AWS SDK for JavaScript versão 3 (V3).

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Começando no React Native

Este tutorial mostra como você pode criar um aplicativo React Native usando o React Native CLI.

Este tutorial mostra:

O cenário

O Amazon S3 é um serviço em nuvem que permite que você armazene e recupere qualquer quantidade de dados a qualquer momento, de qualquer lugar na web. O React Native é uma estrutura de desenvolvimento que permite criar aplicativos móveis. Este tutorial mostra como você pode criar um aplicativo React Native que se conecta ao Amazon S3 para criar e excluir um bucket do Amazon S3.

O aplicativo usa o seguinte SDK para JavaScript APIs:

Tarefas de pré-requisito

Esta seção fornece a configuração mínima necessária para concluir este tutorial. Você não deve considerar isso como uma configuração completa. Para isso, consulte Configure o SDK para JavaScript.

Etapa 1: Criar um banco de identidades do Amazon Cognito

Neste exercício, você cria e usa um pool de identidade do Amazon Cognito para fornecer acesso não autenticado ao seu aplicativo para o serviço Amazon S3. A criação de um grupo de identidades também cria duas AWS Identity and Access Management (IAM) funções, uma para oferecer suporte a usuários autenticados por um provedor de identidade e outra para oferecer suporte a usuários convidados não autenticados.

Neste exercício, vamos trabalhar apenas com a função de usuário não autenticado para manter o enfoque na tarefa. Você poderá integrar o suporte para um provedor de identidade e os usuários autenticados depois.

Depois de criar seu pool de identidade do Amazon Cognito, você estará pronto para adicionar permissões para o Amazon S3 que são necessárias para seu aplicativo React Native.

Etapa 2: Adicionar uma política à função do IAM criada

Para permitir que o script do navegador acesse o Amazon S3 para criar e excluir um bucket do Amazon S3, use a função IAM não autenticada criada para seu pool de identidade do Amazon Cognito. Isso exige que você adicione uma política do IAM à função. Para obter mais informações sobre IAM funções, consulte Criação de uma função para delegar permissões a um AWS serviço no Guia do IAM usuário.

Depois de criar seu pool de identidade do Amazon Cognito e adicionar permissões para o Amazon S3 à IAM sua função para usuários não autenticados, você estará pronto para criar o aplicativo.

Etapa 3: criar um aplicativo usando create-react-native-app

Crie um aplicativo React Native executando o comando a seguir.

npx react-native init ReactNativeApp --npm

Etapa 4: instalar o pacote Amazon S3 e outras dependências

Dentro do diretório do projeto, execute os seguintes comandos para instalar o pacote Amazon S3.

npm install @aws-sdk/client-s3

Esse comando instala o pacote Amazon S3 em seu projeto e package.json atualiza para listar o Amazon S3 como uma dependência do projeto. Você pode encontrar informações sobre esse pacote pesquisando por "@aws -sdk” no site do https://www.npmjs.com/ npm.

Esses pacotes e os códigos associados são instalados no subdiretório node_modules do projeto.

Para obter mais informações sobre a instalação de pacotes Node.js, consulte Baixar e instalar pacotes localmente e Criar módulos Node.js no site npm (Node.js package manager). Para obter informações sobre como baixar e instalar o AWS SDK for JavaScript, consulteInstale o SDK para JavaScript.

Instale outras dependências necessárias para autenticação.

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

Etapa 5: escrever o código React Native

Adicione o código a seguir aoApp.tsx. Substitua identityPoolId e region pelo ID do grupo de identidades e pela região em que seu bucket do Amazon S3 será criado.

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;

O código primeiro importa o React, o React Native e as AWS SDK dependências necessários.

Dentro da função App:

A JavaScript página inteira está disponível aqui em GitHub.

Etapa 6: Execute o exemplo

Para executar o exemplo webios, execute ou android comande usando npm.

Aqui está um exemplo de saída da execução de um ios comando no 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  

Aqui está um exemplo de saída da execução de um android comando no 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 } 

Insira o nome do bucket que você deseja criar ou excluir e clique em Create Bucket ou Delete Bucket. O comando respectivo será enviado para o Amazon S3 e uma mensagem de sucesso ou erro será exibida.

Melhorias possíveis

Aqui estão as variações desse aplicativo que você pode usar para explorar ainda mais o uso do SDK for JavaScript em um aplicativo React Native.