Plush

Pelúcia

O Plush é um aplicativo móvel de pilha completa para compartilhamento de imagens. Ele usa a Expo e o React Native para o front-end, a AWS amplifica como o serviço de back-end e o serviço de API é construído com o GraphQL.

Demonstração

Vídeo de demonstração das funcionalidades do aplicativo aqui.

Visão geral

Após inscrição/login, os usuários podem executar o seguinte:

• Dê acesso à biblioteca de dispositivos móveis pressionando o ícone da câmera no cabeçalho.
• Carregue as fotos para o feed.
• Como e diferentemente das imagens (de outros usuários e suas).
• Atualize o feed pela retirada ou pressionando o botão Reload no cabeçalho.
• Sinalize conteúdo inadequado pressionando o ícone Opções no rodapé da carta de imagem.
• Remova suas próprias fotos do feed. Também disponível no ícone de opções.

Fluxo de aplicativos

• Os usuários são autenticados usando o fluxo de autenticação AWS da AWS.

• Usuários são redirecionados para a única tela do aplicativo: o feed.

• Quando um usuário envia uma imagem:

  • Uma solicitação de put com o RNS3 armazenará o arquivo em um balde AWS-S3.
  • Uma mutação Apollo GraphQL armazenará um registro em uma tabela de imagem do DynamoDB.

• Quando um usuário sinaliza conteúdo inadequado:

  • Uma mutação AppSync Client GraphQL armazenará um registro em uma tabela de sinalizador do DynamoDB.
  • O front-end ocultará essa imagem do feed do usuário.

• Quando um usuário gosta de/improvisora ​​uma foto:

  • Uma mutação AppSync Client GraphQL criará uma instância semelhante em um dynamoDB como a tabela.
  • Uma mutação do AppSync Client GraphQL destruirá essa instância como a tabela do DynamoDB.

• Quando um usuário exclui uma imagem:

  • Uma solicitação de remoção com a API de armazenamento Amplify excluirá o arquivo associado do balde AWS-S3.
  • Uma mutação Apollo GraphQL destruirá o registro da tabela de imagem do DynamoDB.
  • O feed é atualizado para exibir as imagens atuais.

• Quando um usuário atualiza o feed:

  • Uma consulta AppSync Client GraphQL solicitará todas as imagens atuais armazenadas na tabela de imagens do DynamoDB.

Pré -requisitos

Para executar este aplicativo em sua máquina local, você precisa das seguintes ferramentas:

• 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 back-end

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

 git clone https://github.com/yhenni1989/plush

cd plush

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

4. Siga as mesmas instruções abaixo.

5. 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.

6. 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.

7. Adicione a API GraphQL ao seu projeto.

 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

• O esquema para este projeto, localizado em SRC/GraphQL/schema.graphql, se parece com o seguinte:

 type Picture @model {
  id : ID !
  pictureOwnerId : String !
  pictureOwnerUsername : String !
  visibility : Visibility
  file : S3Object
  likes : [ Like ] @connection ( name : " PictureLikes " )
  flags : [ Flag ] @connection ( name : " PictureFlags " )
}

type Like @model {
  id : ID !
  likeOwnerId : String !
  likeOwnerUsername : String !
  picture : Picture @connection ( name : " PictureLikes " )
}

type Flag @model {
  id : ID !
  flagOwnerId : String !
  flagOwnerUsername : String !
  picture : Picture @connection ( name : " PictureFlags " )
}

type S3Object {
  bucket : String !
  region : String !
  key : String !
  uri : String !
}

enum Visibility {
  public
  private
}

• Imagem, curtir e sinalizador são todas as tabelas do DynamoDB usadas para armazenar os dados da entrada dos usuários.

8. Hora de implantar seu projeto na nuvem?.

 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 imagens de cada usuários e uma API APPSYNC APPSYNC que usa a Amazon DynamoDB para armazenar metadados sobre as imagens (nome do balde, curtidas, sinalizadores, proprietário, data da criação ... etc).

Executando o aplicativo

1. Instalar dependências do cliente.

 yarn

# or

npm install

2. Você precisará de suas credenciais da AWS IAM para acessar seu balde S3.

• 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

• Salve as alterações.

3. Agora você está pronto para lançar e testar o aplicativo.

 expo start --ios

# or

expo start --android

4. 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.

5. Adicione e exiba imagens.

• Se o aplicativo executar com sucesso, você poderá pressionar o ícone da câmera, permita o acesso à biblioteca do dispositivo 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.

• Você pode gostar/diferente de imagens de outros usuários e excluir suas próprias fotos.

Quer contribuir?

• Se você gosta deste projeto, ajude -me a crescer e melhorá -lo enviando solicitações de tração?