react native appsync s3

Reagieren Sie native AppSync S3

Mit dieser App kann der Benutzer Folgendes machen:

• Melden Sie sich an der Plattform an.
• Zugangsgerätebibliothek über Expo.
• Laden Sie Bilder in AWS S3 hoch.
• Speichern Sie die Bilderaufzeichnungen in Amazon DynamoDB.
• Zeigen Sie die Bilder in der Plattform an.

Voraussetzungen

• Expo Cli

  • npm install -g expo-cli

• AWS -Konto

• Knoten JS mit NPM

• AWS verstärkt CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (Link für einen Schritt -für -Schritt -Video).

Konfigurieren des Projekts

1. Klonen Sie dieses Repo zu Ihrer lokalen Maschine.

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

cd react-native-appsync-s3

2. Fügen Sie AWS -Verstärkungs -Abhängigkeiten zu Ihrem Projekt hinzu.

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

# or

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

3. Initialisiere das AWS -Verstärkungsprojekt.

 amplify init

Befolgen Sie die gleichen Anweisungen wie unten.

4. Konfigurieren Sie einen Amazon Cognito -Benutzerpool, um Benutzer -Anmeldeinformationen zu speichern.

 amplify add auth

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

5. Fügen Sie einen Amazon S3 -Bucket hinzu, um Bilder zu speichern.

 amplify add storage

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

6. Fügen Sie die AWS AppSync -API hinzu, um GraphQL zu verwenden und Daten in Dynammodb zu speichern.

 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. Stellen Sie Ihr Projekt in den AWS ein.

 amplify push

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

Die AWS -Amplify CLI erstellt einen Amazon Cognito -Benutzerpool und einen Identitätspool, einen Amazon S3 -Bucket, mit dem alle Benutzerfotos und eine AWS AppSync GraphQL -API gespeichert werden können, die Amazon DynamoDB zum Speichern von Daten verwendet.

Ausführen der Anwendung

1. Installieren Sie Clientabhängigkeiten.

 yarn

# or

npm install

2. Sie benötigen Ihre AWS -IAM -Anmeldeinformationen, bevor Sie die Bewerbung ausführen.

• Kopieren Sie Ihre Zugriffs- und Geheimschlüssel in der Datei src/myKeys.js Ihres Projekts.

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

• Änderungen speichern.

3. Starten Sie die React Native App in Ihrem Simulator aus dem Terminal unter Ihrem Projektverzeichnis.

 expo start --ios

# or

expo start --android

3. Erstellen Sie einen neuen Benutzer.

• Die App verwendet die Komponente höherer Ordnung mit dem Authenticator (HOC) von AWS Amplify, um den Authentifizierungsfluss durchzuführen: Anmelden, Anmeldung bestätigen und in Benutzern anmelden.

4. Fügen Sie Bilder hinzu und zeigen Sie Bilder an.

• Wenn die Anwendung erfolgreich ausgeführt wird, sollten Sie in der Lage sein, die Taste hinzuzufügen, den Zugriff auf die Gerätebibliothek zu ermöglichen und ein Bild von Ihrem Gerät auszuwählen. Dadurch wird das Bild in S3 hochgeladen und dann einen GraphQL -Anruf tätigen, um den Datensatz in DynamoDB einzugeben.

• Sie können dann die Taste für Aktualisierung drücken, um das Bild auf dem Bildschirm anzuzeigen.

Beitragen

• Dieses Projekt braucht viel Verbesserung. Hilf mir zu wachsen und zu verbessern?