Plush 다운로드 - Plush 소스 코드 다운로드

Plush

기타 소스코드

1.0.0

다운로드

봉제

플러시는 사진 공유를위한 풀 스택 모바일 애플리케이션입니다. 엑스포 및 반응 기본을 프론트 엔드에 사용하고 AWS는 백엔드 서비스로 증폭되며 API 서비스는 GraphQL로 구축됩니다.

데모

여기에서 앱 기능의 데모 비디오.

개요

가입/로그인 후 사용자는 다음을 수행 할 수 있습니다.

헤더에서 카메라 아이콘을 눌러 모바일 장치 라이브러리에 액세스하십시오.
피드에 사진을 업로드하십시오.
좋아하고 다른 사용자와 자신의 사진과는 달리.
Pull-to-Refresh 또는 헤더의 새로 고침 버튼을 눌러 피드를 새로 고치십시오.
이미지 카드 바닥 글에서 옵션 아이콘을 눌러 부적절한 컨텐츠를 플래그하십시오.
피드에서 자신의 사진을 제거하십시오. 옵션 아이콘에서도 사용할 수 있습니다.

앱 흐름

사용자는 상자 밖에서 AWS가 인증 흐름을 증폭시키는 것을 사용하여 인증됩니다.
사용자는 앱의 유일한 화면 인 피드로 리디렉션되었습니다.
사용자가 사진을 업로드 할 때 :
- RNS3의 PUT 요청은 파일을 AWS-S3 버킷에 저장합니다.
- Apollo GraphQL 돌연변이는 DynamODB 사진 테이블에 기록을 저장합니다.
사용자가 부적절한 컨텐츠를 표시하는 경우 :
- AppSync 클라이언트 GraphQL 돌연변이는 DynamODB 플래그 테이블에 레코드를 저장합니다.
- 프론트 엔드는 사용자의 피드에서 해당 사진을 숨 깁니다.
사용자가 사진을 좋아하거나 좋아하지 않는 경우 :
- AppSync 클라이언트 GraphQL 돌연변이는 DynamODB와 같은 테이블에서 유사한 인스턴스를 생성합니다.
- AppSync 클라이언트 GraphQL 돌연변이는 DynamODB와 같은 인스턴스와 같은 인스턴스를 파괴합니다.
사용자가 사진을 삭제할 때 :
- Amplify Storage API를 사용하여 요청 제거는 AWS-S3 버킷에서 관련 파일을 삭제합니다.
- Apollo GraphQL 돌연변이는 DynamODB 사진 테이블에서 기록을 파괴합니다.
- 피드는 현재 사진을 표시하기 위해 새로 고침됩니다.
사용자가 피드를 새로 고침 할 때 :
- AppSync 클라이언트 GraphQL Query는 DynamODB 사진 테이블에 저장된 모든 현재 사진을 요청합니다.

전제 조건

로컬 컴퓨터 에서이 앱을 실행하려면 다음 도구가 필요합니다.

엑스포 클리
- npm install -g expo-cli
AWS 계정
NPM이있는 노드 JS
AWS는 CLI를 증폭시킵니다
- npm install -g @aws-amplify/cli
- amplify configure (단계별 비디오의 링크).

백엔드 구성

이 저장소를 로컬 컴퓨터에 복제하십시오.

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

cd plush

프로젝트에 AWS 증폭 의존성을 추가하십시오.

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

# or

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

AWS 증폭 프로젝트를 초기화하십시오.

 amplify init

아래와 동일한 지침을 따르십시오.

사용자 자격 증명을 저장하기 위해 Amazon Cognito 사용자 풀을 구성하십시오.

 amplify add auth

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

Amazon S3 버킷을 추가하여 사진을 저장하십시오.

 amplify add storage

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

프로젝트에 GraphQL API를 추가하십시오.

 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

SRC/GraphQL/Schema.graphQL에 위치한이 프로젝트의 스키마는 다음과 같습니다.

 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
}

그림, 좋아요 및 플래그는 모두 사용자 입력의 데이터를 저장하는 데 사용되는 DynamoDB 테이블입니다.

프로젝트를 클라우드에 배포 할 시간?.

 amplify push

Cloudformation

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

AWS 증폭 CLI는 Amazon Cognito User Pool 및 Identity Pool, 각 사용자 사진을 저장하는 Amazon S3 버킷 및 Amazon DynamoDB를 사용하여 그림에 대한 메타 데이터를 저장하는 AWS AppSync GraphQL API를 생성합니다 (예 : 버킷 이름, 좋아요, 소유자, 창조 날짜 등).

응용 프로그램 실행

클라이언트 종속성을 설치합니다.

 yarn

# or

npm install

S3 버킷에 액세스하려면 AWS IAM 자격 증명이 필요합니다.

프로젝트의 src/myKeys.js 파일에 액세스 및 비밀 키를 복사하십시오.

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

변경 사항을 저장하십시오.

이제 앱을 시작하고 테스트 할 준비가되었습니다.

 expo start --ios

# or

expo start --android

새 사용자를 만듭니다.

이 앱은 AWS Amplify의 HOC (High Order Component )를 사용하여 인증 흐름을 수행합니다. 가입, 가입 확인 및 가입자 사용자.

사진을 추가하고 표시합니다.

응용 프로그램이 성공적으로 실행되면 카메라 아이콘을 누르고 장치 라이브러리에 액세스 할 수 있고 장치에서 사진을 선택할 수 있어야합니다. 이렇게하면 그림을 S3에 업로드 한 다음 GraphQL 호출을 통해 레코드를 DynamODB에 입력합니다.
그런 다음 새로 고침 버튼을 눌러 화면에 그림을 표시 할 수 있습니다.
다른 사용자 사진을 좋아하거나 플래그하고 자신의 사진을 삭제할 수 있습니다.