react native appsync s3

Reaja o nativo appsync s3

Este aplicativo permite que o usuário faça o seguinte:

• Inscreva -se/entre na plataforma.
• Biblioteca de dispositivos de acesso usando a Expo.
• Carregue as fotos para a AWS S3.
• Armazene os registros de fotos no Amazon DynamoDB.
• Exiba as imagens na plataforma.

Pré -requisitos

• Expo cli

  • npm install -g expo-cli

• Conta da AWS

• Nó JS com NPM

• AWS Amplify CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (link para um vídeo passo a passo).

Configurando o projeto

1. Clone este repositório para sua máquina local.

 git clone https://github.com/yhenni1989/react-native-appsync-s3.git

cd react-native-appsync-s3

2. Adicione a AWS amplie as dependências ao seu projeto.

 yarn add aws-amplify aws-amplify-react-native

# or

npm install aws-amplify aws-amplify-react-native

3. Inicialize o projeto AWS Amplify.

 amplify init

Siga as mesmas instruções abaixo.

4. Configure um pool de usuários da Amazon Cognito para armazenar credenciais dos usuários.

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

5. Adicione um balde Amazon S3 para armazenar fotos.

 amplify add storage

# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.

6. Adicione a AWS AppSync API para usar o GraphQL e armazenar dados no dynammodb.

 amplify add api

# Choose GraphQL as the API service. 
# Choose an authorization type for the API: Amazon Cognito User Pool
# Do you have an annotated GraphQL schema? Yes
# Provide your schema file path: src/graphQL/schema.graphql

7. Implante seu projeto na AWS.

 amplify push

 Do you want to generate code for your newly created GraphQL API: No.

O AWS Amplify CLI criará um pool de usuários e pool de identidade do Amazon Cognito, um balde do Amazon S3 para armazenar fotos de cada usuário e uma API APPSYNC APPSYNC que usa a Amazon DynamoDB para armazenar dados.

Executando o aplicativo

1. Instalar dependências do cliente.

 yarn

# or

npm install

2. Você precisará das suas credenciais do AWS IAM antes de executar o aplicativo.

• Copie suas chaves de acesso e secreções no arquivo src/myKeys.js do seu projeto.

 const keys = {
 accessKey : 'blablabla' ,
 secretKey : 'blablabla' ,
}
export default keys ;

• Salvar alterações.

3. Inicie o aplicativo nativo do React em seu simulador a partir do terminal no diretório do projeto.

 expo start --ios

# or

expo start --android

3. Crie um novo usuário.

• O aplicativo usa o componente de ordem superior WithAuthenticator (HOC) da AWS Amplify para executar o fluxo de autenticação: inscreva -se, confirme a inscrição e entre os usuários.

4. Adicione e exiba imagens.

• Se o aplicativo executar com sucesso, você poderá pressionar o botão Adicionar, permitir o acesso à biblioteca de dispositivos e selecione uma imagem do seu dispositivo. Isso fará o upload da imagem para o S3 e fará uma chamada grafql para inserir o registro no DynamoDB.

• Você pode pressionar o botão Atualizar para exibir a imagem na tela.

Contribuir

• Este projeto precisa de muitas melhorias. Ajude -me a crescer e melhorá -lo?