を使用してビルドcrudアプリのガイドと

このチュートリアルを始める前にpart 1 ここでは、フレームワークとしてだけでなく、カスタムUIとメール認証を増幅設定を議論した.

APIを作成する

APIを作成し、データベースを接続するには、次のコマンドをターミナルウィンドウで実行します.

amplify add api

このCLI実行は、自動的に2、3のものをします.まず、データソース、クエリ、突然変異、およびサブスクリプションのための基本的なスキーマ構造を持つリゾルバを含む完全に機能的なGraphSQL APIを作成します.また、リクエストを送信することによってこれらの操作を実行するために必要なクライアント側のコードと設定ファイルをダウンロードします.上記のコマンドは、どのタイプのAPIを書き込みたいかを選択します.プロファイルAPI名を入力します.以下の場合、プロファイル名をデフォルトにします.

次に、どのようにAWS AppSync APIを認証したいかについて、2つのオプションを再度与えます.リアルタイムアプリケーションでは、我々は異なるユーザーがデータベースにアクセスし、それを要求している.オプションのAmazon Genoctoユーザープールを選択します.これはもっと実用的なアプローチです.認証モジュールを使用してAmazon Genoctoユーザープールを既に構成しているので、ここで設定する必要はありません.

次の2つの質問については、GraphSQL API *の詳細設定を設定します.*注釈付きのGraphSQLスキーマを使用しますか?答えはNまたは番号増幅され、後で変更することができます事前定義スキーマが付属しています.
プロンプトがスキーマテンプレートを選択すると、フィールドを指定して単一のオブジェクトを選択します.

進む前に、このプロセスによって作成されたGraphicsスキーマを編集しましょう.反応するネイティブプロジェクトに行き、ルートディレクトリからファイルを展開/バック/API/[ apistra name ]/schemaを開きます.グラフ.
AppSyncによって作成された既定のモデルは次のとおりです.

type Todo @model {
  id: ID!
  name: String!
  description: String
}

現在のところ、以下のように記述されたCLIのプロセスを終了したときに警告が出されていなければなりません.

The following types do not have '@auth' enabled. Consider using @auth with @model 
- Todo

認証モジュールが既に有効になっているので、追加できますthe@authdirectiveスキーマで.GraphSQLファイル.デフォルトでは、所有者認証を有効にすると、署名されたユーザーがレコードを作成できます.

type Todo @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  name: String!
  description: String
}

あなたがgraphqlモデルとそのタイプに精通していないならば、ここでは簡単な概要です.
TypeInは、データベースに格納されているデータの一部です.それぞれの型は異なるフィールドを持つことができます.JavaScriptの背景から来るオブジェクトの型を考えてください.たとえば、ToDoModelの上記のスキーマでは、id、nameandおよびdescriptionの3つのフィールドがあります.またthe@modelAmazonのダイナモで型を格納するためにディレクティブを使用します.これは、Amazonがアプリケーションデータを保存する際に使用するデータベースです.
感嘆符!データを格納するときにフィールドが必要であることを示します.上記のスキーマでは、2つの必須フィールドがあります.
このファイルを保存し、我々が作ったすべての変更は、現在ローカルに保存されます.

AWSクラウドへのAPIの発行

コマンドを実行すると、プロンプトとして、使用して変更または有効になったリソースに関する情報をテーブルに返します.これらのリソースの名前は、カテゴリの節で説明します.
上記のテーブルのリソース名は前のセクションで選択されたAPI名です.

Amplify CLIインターフェイスは、スキーマをチェックし、その後、雲に最終的な変更を発行する前に、任意のエラーをコンパイルします.
次の手順では、新しく作成したGraphSQL APIのコードを生成するかどうかを選択します.yを押します.次に、コード生成言語としてJavaScriptを選択します.

Yキーを押して、すべてのGraphSQL関連の操作を更新するように求めてください.また、最大文の深さをデフォルト値2とします.これは、AWSのクラウド上のリソースを更新するには、いくつかの瞬間かかりますし、成功したときに成功メッセージが表示されます.

反応ネイティブアプリケーションでの入力フィールドの追加

ユーザー入力をキャプチャするには、2つの状態変数を使用します.最初の状態変数はtodo項目の名前nameフィールドとtodosと呼ばれる配列です.この配列を使用して、GraphSQL APIからすべてのToDo項目を取得し、項目をUIに表示します.

const [name, setName] = useState(''); 
const [todos, setTodos] = useState([]);

次に、TextInputToとTouchableOpItItIfをインポートして、ネイティブフィールドの下にStylesheetReferenceオブジェクトで定義されているカスタムスタイリングを使用して入力フィールドとプレス可能ボタンを作成します.ここに家のための完全なコードです.js

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Button,
  ScrollView,
  Dimensions
} from 'react-native';
import { Auth } from 'aws-amplify';

const { width } = Dimensions.get('window');

export default function Home({ updateAuthState }) {
  const [name, setName] = useState('');
  const [todos, setTodos] = useState([]);

  async function signOut() {
    try {
      await Auth.signOut();
      updateAuthState('loggedOut');
    } catch (error) {
      console.log('Error signing out: ', error);
    }
  }

  const addTodo = () => {};

  return (
    <View style={styles.container}>
      <Button title="Sign Out" color="tomato" onPress={signOut} />
      <ScrollView>
        <TextInput
          style={styles.input}
          value={name}
          onChangeText={text => setName(text)}
          placeholder="Add a Todo"
        />
        <TouchableOpacity onPress={addTodo} style={styles.buttonContainer}>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20
  },
  input: {
    height: 50,
    borderBottomWidth: 2,
    borderBottomColor: 'tomato',
    marginVertical: 10,
    width: width * 0.8,
    fontSize: 16
  },
  buttonContainer: {
    backgroundColor: 'tomato',
    marginVertical: 10,
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
    width: width * 0.8
  },
  buttonText: {
    color: '#fff',
    fontSize: 24
  }
});

このステップの結果を確認するには、ターミナルウィンドウでEXPO StartCommandを実行していることを確認してください.

GraphSQL APIを使用した突然変異の追加

GraphSQLの突然変異は、データの追加、削除、変更などの操作についてです.現在、反応ネイティブアプリケーションは基本的ですが、それはツールチェーンとそのプラットフォームのフレームワークとの統合として増幅することに精通しての目的を提供します.
項目を追加し、反応ネイティブアプリケーションで同じを取得するには、突然変異でGraphSQLバックエンドと通信するいくつかのビジネスロジックを追加しましょう.

/* eslint-disable */
// this is an auto generated file. This will be overwritten

export const createTodo = /* GraphQL */ `
  mutation CreateTodo(
    $input: CreateTodoInput!
    $condition: ModelTodoConditionInput
  ) {
    createTodo(input: $input, condition: $condition) {
      id
      name
      description
      createdAt
      updatedAt
      owner
    }
  }
`;
export const updateTodo = /* GraphQL */ `
  mutation UpdateTodo(
    $input: UpdateTodoInput!
    $condition: ModelTodoConditionInput
  ) {
    updateTodo(input: $input, condition: $condition) {
      id
      name
      description
      createdAt
      updatedAt
      owner
    }
  }
`;
export const deleteTodo = /* GraphQL */ `
  mutation DeleteTodo(
    $input: DeleteTodoInput!
    $condition: ModelTodoConditionInput
  ) {
    deleteTodo(input: $input, condition: $condition) {
      id
      name
      description
      createdAt
      updatedAt
      owner
    }
  }
`;

これは増幅して、上記の突然変異のどれかを使用することによってされます、我々は直接コンポーネントファイルでメソッドを輸入することができます.インホーム.JSファイル、インポートAPI、およびパッケージAWSからのGraphloperationを増幅します.APIはAWSリソースのためのカテゴリーです、そして、インポートされる第2の機能は突然変異か質問を走らせる方法です.また、GraphSQL/突然変異から突然変異CreateToDoをインポートします.jsファイル.

// ... 
import { Auth, API, graphqlOperation } from 'aws-amplify'; import { createTodo } from '../graphql/mutations';

前のセクションで定義されたAddTodoCustomHandlerメソッドの内部にロジックを追加しましょう.突然変異から結果を取って、todosArrayを更新する非同期機能であるでしょう.nameが項目のテキストである入力を受け取ります.

const addTodo = async () => {
  const input = { name };
  const result = await API.graphql(graphqlOperation(createTodo, { input }));

  const newTodo = result.data.createTodo;
  const updatedTodo = [newTodo, ...todos];
  setTodos(updatedTodo);
  setName('');
};

次のセクションに移動する前に、いくつかのデータを追加してみてください.

データを取得するクエリを実行する

データベースからデータを取得するには、クエリを実行する必要があります.突然変異と同様に、また、生成されたGraphSQLスキーマに基づいて初期のクエリを作成することに注意します.
すべての利用可能なクエリはsrc/graphql/queryにあります.js

/* eslint-disable */
// this is an auto generated file. This will be overwritten

export const getTodo = /* GraphQL */ `
  query GetTodo($id: ID!) {
    getTodo(id: $id) {
      id
      name
      description
      createdAt
      updatedAt
      owner
    }
  }
`;
export const listTodos = /* GraphQL */ `
  query ListTodos(
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        description
        createdAt
        updatedAt
        owner
      }
      nextToken
    }
  }
`;

GraphSQL APIからすべてのデータを取得し、デバイスの画面に表示するには、上記のファイルから問い合わせを使用します.家の中をインポートします.jsファイル

import { listTodos } from '../graphql/queries';

データベースからデータを取得するには、UseEffectフックを使用します.インポートライブラリをインポートするようにしてください.

import React, { useState, useEffect } from 'react';

次のような別のハンドラメソッドを定義しましょう.非同期メソッドになりますので、try/catchblockを使用してデータの取得時に初期エラーをキャッチしましょう.次のコードスニペットをホームコンポーネントに追加します

useEffect(() => {
  fetchTodos();
}, []);

async function fetchTodos() {
  try {
    const todoData = await API.graphql(graphqlOperation(listTodos));
    const todos = todoData.data.listTodos.items;
    console.log(todos);
    setTodos(todos);
  } catch (err) {
    console.log('Error fetching data');
  }
}

データベースから返されるデータの配列は次のようになります.

return (
  <View style={styles.container}>
    <Button title="Sign Out" color="tomato" onPress={signOut} />
    <ScrollView>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={text => setName(text)}
        placeholder="Add a Todo"
      />
      <TouchableOpacity onPress={addTodo} style={styles.buttonContainer}>
        <Text style={styles.buttonText}>Add</Text>
      </TouchableOpacity>
      {todos.map((todo, index) => (
        <View key={index} style={styles.itemContainer}>
          <Text style={styles.itemName}>{todo.name}</Text>
        </View>
      ))}
    </ScrollView>
  </View>
);

また、対応するスタイルを更新します.

const styles = StyleSheet.create({
  // ...
  itemContainer: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    paddingVertical: 10,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  itemName: {
    fontSize: 18
  }
});

以下に結果をあげる

クエリがデータを取得している間に読み込みインジケータを追加する

たった今、アプリケーションが更新されるとき、または、ユーザーがログインするとき、それはデータをロードするためにネットワークコールをするために時間がかかります、したがって、リストリスト項目のわずかな遅れがあります.ActivityIndicatorを使用してローディングインディケータを追加します.

// modify the following import statement
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Button,
  ScrollView,
  Dimensions,
  ActivityIndicator
} from 'react-native';

クエリが実行されているときにローディングインジケーターを表示するときに知っているためには、LoomingFontという新しい状態変数を、ホームコンポーネントにBoolean Falseの初期値を追加します.データを取得するとき、最初にこの値はtrueになります、そして、データがAPIから取り出されるときだけ、その値は再びfalseにセットされます.

export default function Home({ updateAuthState }) {
// ...
const [loading, setLoading] = useState(false);

// modify the fetchTodos method
 async function fetchTodos() {
    try {
      setLoading(true);
      const todoData = await API.graphql(graphqlOperation(listTodos));
      const todos = todoData.data.listTodos.items;
      console.log(todos);
      setTodos(todos);
      setLoading(false);
    } catch (err) {
      setLoading(false);
      console.log('Error fetching data');
    }
  }

  // then modify the JSX contents

  return (
    {/* rest remains same */}
    <ScrollView>
        {/* rest remains same */}
        {loading && (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="tomato" />
          </View>
        )}
        {todos.map((todo, index) => (
          <View key={index} style={styles.itemContainer}>
            <Text style={styles.itemName}>{todo.name}</Text>
          </View>
        ))}
      </ScrollView>
  )
}

// also modify the styles

const styles = StyleSheet.create({
  // ...
  loadingContainer: {
    marginVertical: 10
  }
});

出力は以下の通りです.

削除突然変異を実行して項目を削除する

TodosArrayから項目を削除するには、Exampleを削除します.ボタンをAで使いましょうTouchableOpacityand@expo/ベクトルiconistリスト内の各項目.家で.JSコンポーネントファイルは、アイコンと突然変異をインポートして起動します.

// ...
 import { Feather as Icon } from '@expo/vector-icons'; 
import { createTodo, deleteTodo } from '../graphql/mutations';

次に、TodosArrayからToDo項目を削除し、その上にFilterMethodを使用して配列を更新するRemoveToDoというハンドラーメソッドを定義します.今回の突然変異の入力はtodo項目のIDになります.

const removeTodo = async id => {
  try {
    const input = { id };
    const result = await API.graphql(
      graphqlOperation(deleteTodo, {
        input
      })
    );
    const deletedTodoId = result.data.deleteTodo.id;
    const updatedTodo = todos.filter(todo => todo.id !== deletedTodoId);
    setTodos(updatedTodo);
  } catch (err) {
    console.log(err);
  }
};

次に、ToDoリスト項目が表示されているボタンを追加します.

{
  todos.map((todo, index) => {
    return (
      <View key={index} style={styles.itemContainer}>
        <Text style={styles.itemName}>{todo.name}</Text>
        <TouchableOpacity onPress={() => removeTodo(todo.id)}>
          <Icon name="trash-2" size={18} color="tomato" />
        </TouchableOpacity>
      </View>
    );
  });
}

ここでは、このステップの後に得られる出力です.

概要

このチュートリアルを完了するには、Any AppSyncとAmplifyを使用してGraphSQL APIを作成するために開始する方法を簡単に確認できます.
アットInstamobile , 我々は、開発者がはるかに迅速に自分の携帯アプリを作るのを助けるために、AWSの増幅やFireBaseのような様々なバックエンドによってバックアップされた反応のネイティブアプリを使用する準備ができている.
当初公開https://www.instamobile.io 2020年10月5日