Windows から AWS Amplify で Android アプリの作成体験３

# 学習の方向性変更 

\<amplifyconfiguration.json> 関連のエラー解除が出来ないこともあり、
学習の方向性を見直す事にして、この試行は中止して、改めて以下を学習することにする

- 必要そうなサービスの利用方法の確認
    - Cognito
    - S3
    - DynamoDB

色々学習した上で、対処が分かったら継続出来るといいな

# はじめに

以下の続きとして、

https://qiita.com/baku2san/items/8f3771c4af5de9dced6f

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6ce31a7f-19f1-cc0d-1799-1b8f98fbf43d.png)

これを実施中。ただし以下理由で苦戦中
- 知識不足
- チュートリアルが古過ぎて、そのまま実行しても warning/error 有で、調査＆対処が必要

寝たら気付いたが・・Amplify の学習より以下を先にやった方がいいんじゃないか？と気が付いた
- React Native 
- Expo


今回は以下

https://aws.amazon.com/jp/getting-started/hands-on/build-android-app-amplify/module-three/


# 学習内容 モジュール３
## 認証サービスを作成する
- 認証を追加
    - 以降の選択肢は、チュートリアルでは Default となっているので気になったことだけ [以下](#公式ドキュメント) に追記しておく
> amplify add auth


- 設定は、Default のまま。 *Default configuration with Social Provider (Federation)* は後で試したいところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/240ebbd4-4374-1226-339e-dbd3c7a76bfb.png)

- Sing in も Default としておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/9ef56354-f057-853f-c514-8a4510db54ee.png)
- configure advanced settings は、No<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b1d6e2bb-3ae4-39aa-6467-cfbfb42907d7.png)
    - Yes とすると、[詳細設定用の選択がいくつか続く](#configure-advanced-settings)。利用する場合は設定も必要になるので、今は No の方がよさそう
- Domain Prefix. 'test' にしてみたが、GUID みたいなのが必要？<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/8ce13299-df1a-3a5a-87a2-7652dfda2351.png)

- SingIn/Out の Redirect URI は、```gettingstarted://``` を入力 <br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/5a2b63db-b75e-9286-1fcd-43f2e0214dfc.png)

:::note info
Federation を選択しないと、Domain Prefix と Redirect URI の入力は省略される 
:::

### 公式ドキュメント
#### 認証設定
認証追加のチュートリアル。詳細はこっちを見ながらかな

https://docs.amplify.aws/start/getting-started/auth/q/integration/react/

認証についてはここを確認

https://docs.amplify.aws/cli/auth/overview/

外部サービスとの連携をしたい場合は多分以下を選択すると思われ

> Default configuration with Social Provider (Federation)

https://docs.amplify.aws/lib/auth/social/q/platform/js/#oauth-and-federation-overview

#### configure advanced settings
操作方法は、質問の最後に書かれている。項目を進める為には Enter。＜ここは抜けてるけど分かるでしょ？って感じ

- Sing-up に必要なユーザー属性

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/94a62336-3fa0-c3e9-5487-1ba52998945c.png)
詳細は以下？

https://docs.amplify.aws/guides/authentication/managing-user-attributes/q/platform/js/

- 追加の認証設定<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/bf292366-50c0-5544-07eb-763d3ae12b53.png)
    - 試しに、reCaptcha を 選択した例<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6b834cfd-82d2-95ce-669a-9da9cbc9424b.png)
        - captcha-define-challenge.js の編集も


https://docs.amplify.aws/cli/usage/lambda-triggers/#set-up-lambda-triggers

## 認証サービスをデプロイする
前の処理を実施すると以下のように出てる。<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/fe482c10-ca69-d9f9-4379-3c86e9e882b6.png)

ということで、デプロイ

> amplify push

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/db50d77b-3dc0-7ef5-7724-a692badd4036.png)

一見上手くいったかに思えたが・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/64f47e87-b26d-c2f9-54b1-7824894e6190.png)



### npm が install されていないエラーの対処
ということで、npm をまずは動かせるように

が、NVM for Windows で node.js のバージョン管理を出来るようにしたほうが良いかもってことで NVM を入れる

NVM: Node Version Manager
NPM: Node Package Manager
#### NVM for Windows のインストールから
https://github.com/coreybutler/nvm-windows

Install 方法は[ここ](https://github.com/coreybutler/nvm-windows/wiki#manual-installation)

特に拘りないなら、nvm-setup.zip を利用するのがよさげ。
[最新版](https://github.com/coreybutler/nvm-windows/releases) をダウンロードして実行するだけ。

但し、環境変数への反映の為、Terminal再起動か、Windowsの再起動を行い、nvm が動くか確認

> nvm 

で、オプションの説明が出ればOK

- 最新版のインストール

> nvm install latest

- 利用可能な一覧表示。available を付けると、install 可能一覧

> nvm list [available]

- 最新版の利用。latest の代わりに version 指定でもOK

> nvm use latest

- npm の version 確認。node.js が入ったことで、npm

> npm -v

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/31d2890e-acef-3d0c-53e0-f788a5d7b737.png)

で、完了

### npm 対処後に再度認証サービスをデプロイ
> amplify push

今度は無事成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6fc3f89c-e5bb-2a67-6dbf-279281a69049.png)

email 更新をサポートしたよ。コード生成も出来るよって言われたので Yes で進めようとしたけど
どこに出力すればよいのかピンとこなかったので、やっぱりやめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/e152d31a-ac61-f8fc-acf4-7397408c1c9c.png)

暫く待つと完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b7a6d9de-7ff5-38cc-ca75-4d6537ec33ff.png)


Update についての説明は以下にあるとのこと

https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/#managing-user-attributes

## Amplify 認証ライブラリをプロジェクトに追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/f15acfd0-2b8f-73a8-9f7d-f7f5de5ff804.png)

build.gradle(:app) に以下だけ追加して同期。特に問題なし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/1b4c6664-091a-96c1-040e-bcf685769f07.png)

## Amplify 認証ライブラリを実行時に設定する

> Amplify.addPlugin(AWSCognitoAuthPlugin())

以下のように追加するとエラーが出るので、エラーの場所（AWSCognitoAuthPlugin）で ALT + Enter(Context Actions) から、Import を追加
※VSだと、CTRL + . 的な動作

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/8b0f5154-9722-82bc-4a33-d8948f4f0f13.png)

で、build 確認 (CTRL + F9）をしたら、完了

## 認証を実行時にトリガーする
> 残りのコードを変更すると、ユーザーのステータスを追跡できます (サインインの有無)。また、ユーザーがロックアイコンをクリックすると、SignIn/SignUp のユーザーインターフェイスをトリガーします。

### a.signIn および signOut メソッドを追加する

> a.signIn および signOut メソッドを追加する
バックエンドクラスの任意の場所に下記の 4 つのメソッドを追加します。

Backend.kt にコードを追加すると、エラーが出るので、ALT + Enter で先ほどと同様に Import 追加
※メソッドが３つに見えるのは、とりあえず放置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/8917dd3f-09d3-580e-a72b-64f7a49ef72a.png)

で、以下のように追加される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/d5bd9503-0c23-056c-17c1-e34f486b90b2.png)

これで、Sing-in/out の User 操作をAmplify に繋げるってことかな？

### b.認証ハブのリスナーを追加する    
指示に従って、コードを追加して、例の如く、参照の対処を ALT + Enter で。

これで、以下の部分が実装されるってことね。

> 認証イベントを受信したら、updateUserData() メソッドを呼び出します。このメソッドによって UserData オブジェクトの同期が維持されます。UserData.isSignedIn プロパティの LiveData<Boolean> は、値が変わると、このプロパティにサブスクライブされたオブザーバーに通知されることを意味します。このメカニズムは、ユーザーインターフェイスの自動リフレッシュに使用します。詳細は、Android ドキュメントの LiveData に関するセクションを参照してください。
>
> また、アプリケーションの起動時に以前の認証ステータスを確認するコードも追加します。アプリケーションは起動すると、Cognito セッションが既に存在するかどうかを確認し、それに応じて UserData を更新します。

#### when expression
文法勉強・・。言語学習もこういうコード見ながら理解していかないと・・

https://kotlinlang.org/docs/control-flow.html#when-expression

### c.ユーザーインターフェイスコードを更新する
> res/layout で activity_main.xml を開き、既存の FloatingActionButton を以下に置き換えます。

ここで出たエラーを、次で解消

> res/drawable にロックアイコンを追加します。[drawable] を右クリックし、[New (新規)] を選択し、次に [Vector Asset (ベクターアセット)] を選択します。clipart から [Lock] アイコンを選択して、名前として ic_baseline_lock (_24 は不要) と入力し、Clip Art から閉じたロックアイコンを選択します。[Next (次へ)]、[Finish (終了)] の順にクリックします。

- ic_baseline_lock は、上記をそのまま追従で完了
- ic_baseline_lock_open は、Clip Art を "open" で検索して、完了させる<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/ea324034-f14c-fd02-8f6e-603f0e92abf6.png)

これで、FloatingActionButton のアイコンも修正完了

- MainActivity.kt に FloatingActionButton の処理を二点追加

ただ、チュートリアルのままだと以下のように fabAuth についてエラーが残存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/0aa24bc0-eb18-98be-a906-251fc2ab0726.png)

#### fabAuth のエラーを解消する
[viewBinding](https://developer.android.com/topic/libraries/view-binding?hl=ja) を利用して fabAuth を用意してやる

チュートリアルの意図としては分からないけど・・昔のBindingだと自動だったのかな？

- まずは変数の用意<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/bd8440fa-ab74-9997-3a60-044158b34cbc.png)

- で、FloatingActionButton を取得![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b3e83bbf-8025-1e4f-4951-dd3683f44330.png)

無事エラーも消えてるはずなので、CTRL + F9 等で確認

### d.AndroidManifest.xml と MainActivity を更新する
指示通りに追加していくと・・既に廃止とか・・
とりあえず、エラーではないので、後回し（忘れそうなので、todo いれておいて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/73c4b689-7769-b4f9-51a3-f38b319d7cbb.png)

### e.ビルドとテスト
一通りBuildが通るようになったので、最後に動作確認って話だけど・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/f0b965fb-cf0e-2b4d-5ffb-c97bd9f74d01.png)

案の定エラー発生

https://docs.amplify.aws/lib/auth/signin_web_ui/q/platform/android/#update-androidmanifestxml

#### エラー対処
- amplifyconfiguration.json が無い。
    - とはいえ、手動で作るものではなさそう
        - Amplify init とか add auth 辺りで失敗してる？
            - amplify env add で別の environment を追加して、amplify push で更新に期待してみるが、ダメ
    - そもそもどこに出来るん？
        - [GitHub](https://github.com/aws-amplify/amplify-android/discussions/1005) によると、app/src/main/res/raw/amplifyconfiguration.json にあるらしいが、無い。
    - いつ作られるのか？
        - そもそも自動生成っぽくて・・調べたけど、よくわからず。

業務上・・Amplify 自体は今回必須ではないということが見えてきたので、
一旦諦めて、必要なサービスの利用を先に試行することに。

## 知ったこと
- AndroidManifest.xml に Activity は複数付けられる
- アプリケーション起動時に開始する Activity は以下のようにする
```xml: Main Activity
<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter></code>
```

- 進化が速いので、チュートリアルやSample探すときは一年以内のものを利用した方がよさげ。

# Kotlin 公式ドキュメント
kotlin の文法とかを調べる際には、以下から。

https://kotlinlang.org/docs/home.html