O [Guia de referência da API do AWS SDK para JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) descreve em detalhes todas as operações da API para o AWS SDK para 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á. # Conceitos básicos do React Native Este tutorial mostra como você pode criar um aplicativo React Native usando a [CLI do React Native](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Este tutorial mostra:** + Como instalar e incluir o AWS SDK para os módulos da JavaScript versão 3 (V3) que seu projeto usa. + Como escrever código que se conecta ao Amazon Simple Storage Service (Amazon S3) para criar e excluir um bucket do Amazon S3. ## O cenário O Amazon S3 é um serviço em nuvem que permite que você armazene e recupere qualquer volume 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 AWS SDK para JavaScript APIs: + Construtor [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) + Construtor [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) ## Tarefas de pré-requisito **nota** Se você já tiver concluído qualquer uma das etapas a seguir por meio de outros tutoriais ou de uma configuração existente, ignore essas etapas. 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](setting-up.md). + Instale as seguintes ferramentas: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) se você estiver testando no iOS + [Android Studio](https://developer.android.com/studio/) se você estiver testando no Android + Configurar seu [ambiente de desenvolvimento React Native](https://reactnative.dev/docs/environment-setup) + Configure o ambiente do projeto para executar esses TypeScript exemplos do Node e instale o AWS SDK necessário para módulos de terceiros JavaScript e para eles. Siga as instruções em [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Você deve estabelecer como seu código é autenticado AWS ao desenvolver com AWS serviços. Para obter mais informações, consulte [Autenticação do SDK com AWS](getting-your-credentials.md). **nota** A função do IAM para este exemplo deve ser definida para usar as permissões do **AmazonS3 FullAccess**. ## Etapa 1: Criar um banco de identidades do Amazon Cognito Neste exercício, você cria e usa um banco de identidades do Amazon Cognito para fornecer acesso não autenticado ao aplicativo do serviço Amazon S3. A criação de um grupo de identidades também cria duas funções AWS Identity and Access Management (IAM), 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. **Como criar um banco de identidades do Amazon Cognito** 1. Faça login Console de gerenciamento da AWS e abra o console do Amazon Cognito no [Amazon Web Services](https://console.aws.amazon.com/cognito/) Console. 1. Na página de abertura do console, selecione **Banco de identidades**. 1. Na página seguinte, escolha **Create new identity pool (Criar novo grupo de identidades)**. **nota** Se não houver outros bancos de identidades, o console do Amazon Cognito vai ignorar esta página e abrir a próxima página. 1. Em **Configurar confiança do grupo de identidades**, escolha **Acesso de convidado** para autenticação do usuário. 1. Em **Configurar permissões**, escolha **Criar uma nova função do IAM** e insira um nome (por exemplo, *getStartedReactfunção*) no **nome da função do IAM**. 1. Em **Configurar propriedades**, insira um nome (por exemplo, *getStartedReactPool*) em **Nome do pool de identidades**. 1. Em **Revisar e criar**, confirme as seleções que você fez para o novo banco de identidades. Selecione **Editar** para retornar ao assistente e alterar as configurações. Quando terminar, selecione **Criar banco de identidades**. 1. Observe o ID do grupo de identidades e a região do banco de identidades recém-criado. Você precisa desses valores para substituir *region* e *identityPoolId* no script do seu navegador. Após criar o banco de identidades do Amazon Cognito, será possível adicionar permissões do Amazon S3 necessárias para o aplicativo React Native. ## Etapa 2: Adicionar uma política ao perfil do IAM criado Para habilitar o acesso do script de navegador ao Amazon S3 para criar e excluir um bucket do S3, use um perfil do IAM não autenticado criado para o banco de identidades do Amazon Cognito. Isso exige que você adicione uma política do IAM à função. Para obter mais informações sobre as funções do IAM, consulte [Como criar uma função para delegar permissões a um AWS serviço](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) no *Guia do usuário do IAM*. **Para adicionar uma política do Amazon S3 ao perfil do IAM associado a usuários não autenticados** 1. Faça login no Console de gerenciamento da AWS e abra o console do IAM em [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/). 1. No painel de navegação à esquerda, selecione **Perfis**. 1. Escolha o nome da função que você deseja modificar (por exemplo, *getStartedRole*) e, em seguida, escolha a guia **Permissões**. 1. Escolha **Adicionar permissões** e depois **Anexar políticas**. 1. Na página **Adicionar permissões** para essa função, localize e marque a caixa de seleção do **ReadOnlyAccessAmazonS3**. **nota** Você pode usar esse processo para permitir o acesso a qualquer AWS serviço. 1. Escolha **Adicionar permissões**. Após criar o banco de identidades do Amazon Cognito e adicionar permissões do Amazon S3 ao perfil do IAM para usuários não autenticados, será possível criar a página da web e o script de navegador. ## Etapa 3: criar um aplicativo usando create-react-native-app Crie um app React Native executando o comando a seguir. ``` npx react-native init ReactNativeApp --npm ``` ## Etapa 4: Instalar o pacote do Amazon S3 e outras dependências Dentro do diretório do projeto, execute os comandos a seguir para instalar o pacote do Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Esse comando instala o pacote do Amazon S3 no projeto e atualiza `package.json` para listar o S3 como uma dependência de projeto. Você pode encontrar informações sobre esse pacote procurando “@aws-sdk” no [https://www.npmjs.com/](https://www.npmjs.com/)site do npm. Esses pacotes e os códigos associados são instalados no subdiretório `node_modules` do projeto. Para obter mais informações sobre como instalar pacotes Node.js, consulte [Downloading and installing packages locally](https://docs.npmjs.com/downloading-and-installing-packages-locally) e [Creating Node.js modules](https://docs.npmjs.com/creating-node-js-modules) no [site do npm (gerenciador de pacotes do Node.js)](https://www.npmjs.com/). Para obter informações sobre como baixar e instalar o AWS SDK para JavaScript, consulte[Instale o SDK para JavaScript](setting-up.md#installing-jssdk). 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 do React Native Adicione o código a seguir a `App.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 ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />