人生に迷子の30代エンジニアが奮闘するブログ

人生に迷子の30代が自分生き方について真剣に考え試行錯誤するさまを記載したブログです。

Amplify CLI の API（GraphQL）の記載方法について

いつも通り、やりたいことのメモ書きとなる。 今回も適当なところで終わってしまうことうけあいな為、もしご質問などあればコメント欄に記載いただければ回答する可能性も微レ存。

やりたいことと進め方

今回やりたいことは、Amplify CLIを使用し、DynamoDBとAppSyncをセッテングした後、現在作成中のアプリからPostできるようにすることである。
先ず以下のコマンドで、APIを追加しますよと、Amplifyにお知らせする。

amplify add api

実行が完了すると以下の通り、Apiが追加されている。

$amplify status
　Current Environment: production
　| Category | Resource name     | Operation | Provider plugin   |
　| -------- | ----------------- | --------- | ----------------- |
　| Api      | test              | Create    | awscloudformation |

ここではまだ、クラウドに作成されたわけではなく、cloudformationの定義ができただけだ。
実際にクラウド上にDB等を作成するためには、amplify pushを実行すればいいのだが、その前にすることがある。
それは、GraphQLのスキーマの定義である。自分がどういった用途で使用するかを以下のファイルに記載しなければ、 使いたい環境にあった構成にならないのは当たり前である。

先程実行したamplify addによってプロジェクト内のamplifyフォルダに、schema.graphqlというファイルができているはずである。
私の場合は以下のようになっていた。このファイルをガイドに基づき編集していく。

./amplify/backend/api/test/schema.graphql

API(GraphQL)のガイドはこちら

AWS AppSync に関するMEMO

AWS AppSyncに関するMEMOをいかに記載する。

 

AWS AppSyncとは、GraphQLのマネージドサービス。  

上記の内容を理解するために、先ずGraphQLとは何かを知る必要がある。  

  

### GraphQLとは

REST-APIに変わる新しい技術として登場した OSS QUERY言語である。  

定義に従いQUERYを書き、サーバーからJSON形式で情報を取得する。  

処理形態はシンプルで、取得(Query)・変更(Mutation)・購読(Subscription)の3つで構成されている。  

  

・GraphQL登場までの変遷

　HTMLによる静的Websiteの表示　⇨　RESTful APIによるクラスプラットフォームの動的なコンテンツ表示　⇨　Facebookが公開

　RESTを置き換えるのではなく、RESTを保管する目的でGraphQLが登場

 

・登場した理由

　RESTAPIの管理・運用が煩雑。

　サーバーとの接続がRequest/Respnseの形になってしまう問題。

 

・メリット

　インターフェースがクリーンになる

　サブスクリプションをしようしたリアルタイム処理

 

　・型指定されたスキーマ

　APIドキュメントを作成するのではなく、スキーマ定義からドキュメントが生成

  

### AWS AppSyncとは

　・GraphQLのマネージドサービス

　・アカウントのDataSourceに接続

　・データ同期/リアルタイム接続が可能

　・DyanamoDBとか色々なデータソースを指定可能  

  

・こんなアプリ開発の時に使おう

　　リアルタイム処理が必須

　　複数ユーザーの同時に利用するアプリ（コラボレーション）

　　ソーシャルメディア

 

データソースとAppSyncの接続はResolversというもので行われる。

 

・Resolverマッピングテンプレート

GraphQLのリクエストをデータソースへの命令に変換するためのテンプレート

何をするか

　アクセスコオトロール

　権限チェック

　ユーザーIDに基づいたレスポンスのフィルタリング

 

AWS Amplify CLI のインストールMEMO

ここでは、AWS Amplify CLIをインストールした際のMEMOを備忘として記載する。
早速、インストールを実施して行きたい。

前提条件の確認

先ず、Amplify CLIではNode.jsで10.x、npmでは6.x以降のバージョンが推奨されている。
加えて、Amplify MockingはOpenJDK 1.8 以降のJavaのランタイムを必要とするらしい。

ということで、ターミナル*1で、上記の設定が問題ないかを確認する。

 $ node -v; npm -v
   v12.16.1
   6.13.4
 $ 
 $ java -version
   java version "14" 2020-03-17
   Java(TM) SE Runtime Environment (build 14+36-1461)
   Java HotSpot(TM) 64-Bit Server VM (build 14+36-1461, mixed mode, sharing)
 $

あまり自分で設定した覚えはないのだが、 前提条件は問題ないようである。

AWS Amplify CLIのインストール

*1:ちなみに私の環境は、macOS Mojave のバージョン10.14.6である。

React.jsについてのMEMO

AWS Amplify での開発を実施していたところ、タイトルのReactにぶち当たったのでMEMO。
今更、Reactを知るなんてお恥ずかしい限りですが、言うは一時の恥の精神でしっかりメモを残しておきたい。

まあ、出典は公式ページとWikipediaなんで、それの要約という感じで軽く見ていただければ幸いです。

React.jsとは

React.jsはUIのパーツ（構成部品）を作るためのライブラリ。
FacebookがOSSとして公開している。

随時更新中。

AWS AmplifyについてのMEMO

技術系

バックエンドをAWSとしたAndroidの作成を目標とし、勉強していきたい。
今回のテーマは、AWS Amplifyについて。
なんでも、Amplifyを使用すればバックエンド構築が簡単に行えるとか。

早速、公式ドキュメントを読んでみよう。以下が公式ドキュメントへのリンクである。

公式ドキュメントへのリンク

いきなり、AWS Amplify コンソールとなっている。コンソール？どういうことなの。
もうちょっと探してみると、CLIのドキュメントを見つけた。ガイドとしてそれぞれ存在しているようである。

Amplify CLI ← こっちがCLI

いきなり躓きそうになったが、気を取り直して学習を進めていく。
今回したいのはCLIを使っての開発なのだが、ドキュメントが英語しかないので、コンソールのガイドを読み概要を把握してから、使いたいコマンドの部分をCLIのドキュメントで確認するという流れで進める。と思ったのだが。。。。

なるほど。わからん。

ということで、実際にCLIコマンドを実行してみて学習していく作戦に切り替えることとする。
CLIのインストールについてはこちら。⇨AWS Amplify CLI のインストールMEMO

WEBアプリのひな形作成

以下のコマンドで、WEBアプリのひな形が自動で作成される。 コマンド実行してからしばらく待つ。testはフォルダ名。

npx create-react-app test

作成されたtestフォルダに移動し、以下のコマンドを実行する。 すると、 カレントディレクトリがAmplifyコンソールとも連携され、アプリが起動可能な状態となる。

cd test
amplify init

エラーなく上記のコマンドが完了したら以下のコマンドを実行してほしい。

npm start

すると自動で次の画面が表示される。すごい。簡単だ。 f:id:TakaujiEngine:20200505195943p:plain:w600

初めてのAndroidアプリ作成

技術系

頑張ってお勉強するぞということで、Androidアプリの開発をしてみようと思う。
Androidアプリ作成からのAWS AmplifyとAWS AppSyncの使用で学習効率を高めようという作戦だ。

とにもかくにも、Hello Worldを表示しないことには始まらない。
以下の公式ドキュメントを参考にHello World画面出力まで実施してみる。

チュートリアル：初めてのアプリを作成する

ドキュメントによると、2つの基本的なコンセプトを理解して欲しいとのこと。
先ず、1つ目は「アプリの持つ複数のエントリ ポイント」について。
要するにアプリをタップした時に表示されるメイン画面以外にも、色々呼ばれる仕組みがありますよということ。

次に、2つ目は「アプリは様々なデバイスに対応可能」について。
これはそのままですね。どんな端末でも対応できる仕組みがありますよということ。

非常にざっくりではあるが一旦これだけ押さえておけばいいだろう。

早速チュートリアルに移っていこう。
チュートリアルの手順通り[Empty Activity] を選択し、プロジェクトを開始すると、
コードに一切手を加えることなくアプリの起動が完了した。結果は以下の通り。

f:id:TakaujiEngine:20200504095541p:plain:w200
HelloWorld

う〜ん。実に簡単である。

MACを使うときのMEMO

技術系


最近、初めてmacを使い出した。Windowsとは勝手が違う部分も多いので、
初めて知ったことは適当にメモとして記載していく。

 

・ターミナルからFinderを開く
ターミナルで以下のコマンドを入力するだけ。

$ open /usr/local/bin/

ターミナルログを出力するための設定

設定したbashrcとbash_profileの設定を記載する。

$ cat ~/.bashrc
  PS1="\d \t \W${LogMode} $"
$ cat ~/.bash_profile 
  LogMode=" NoLogMode"
  DATE=`date +%Y-%m-%d-%H:%M:%S`
  logpath=~/scriptlogs/script_${DATE}.txt
  script ${logpath}

  source ~/.bashrc

Profileに記載しているDATEはスクリプトの為。
LogModeをProfileで定義することで、ログ取得していない場合に、ターミナルにNoLogModeと表示される。こんな感じ。割と便利。

Last login: Tue May  5 16:16:43 on ttys001
Script started, output file is /Users/~/scriptlogs/script_2020-05-05-16:18:52.txt
2020/05/05 16:18:52 ~ $
2020/05/05 16:18:52 ~ $exit
exit

Script done, output file is /Users/kubokazu/scriptlogs/script_2020-05-05-16:18:52.txt
2020/05/05 16:27:19 ~ NoLogMode $
2020/05/05 16:27:19 ~ NoLogMode $