LoginSignup
1
0

More than 1 year has passed since last update.

@baku2san(taka)

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

Last updated at Posted at 2022-11-03

背景

AWS Amplify を使って、GCP からのアプリ移植をやる必要に迫られてきたので学習とその記録

自身の状況

  • AWS ほぼ初心者。6年ぐらい前に C# でアプリ開発してた環境で少し触った程度
  • Web ほぼ初心者。10年ぐらい前に C# でバックエンドの開発に数年関わった程度。
    • 正直、blazor をやりたい・・
  • スマフォ 完全初心者

こんな状況でもなんとかするしかない、という危機的状況のおっさん :older_man_tone1:

把握

まずは、以下動画を見て、なんとなくわかった気になる

準備

AWS すら素人なので、無償環境を用意

カード入力が嫌だったのでこの手のは自宅ではやらない方針だったんだけど・・諦め :sob:

Windows Terminal インストール

CLI 動かすなら、便利なはず、と

Amplify でアプリ構築

試行を開始

image.png

  • Sample を作成？
    1. アプリタイプを選んで（といっても、二種類しかないが・・
    2. Flamework を選んで
    3. 作成

image.png

  • DataModel を作成？
    • ToDo 用だから、 Post 1-* Comment って関係もあって理解しやすいね
      image.png

Amplify CLI のインストール

image.png

Amplify CLI インストールの説明はここ

image.png

Windows 版のとこと一緒なので、どちらでもよいのでコピーをして、コマンドプロンプトでインストール
image.png

動作と version 確認

amplify -v

image.png

pull Data Model

amplify pull --sandboxId 8c682c7d-f6a9-4f51-85b5-13c351e96231

type は、android を選択して進めたのが以下

image.png

Install Amplify library and initialize

compileOptions build.gradle (Module: app)
    compileOptions {
        // Support for Java 8 features
        coreLibraryDesugaringEnabled true
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
dependencies build.gradle (Module: app)
    // Amplify plugins
    implementation 'com.amplifyframework:core:1.6.5'
    implementation 'com.amplifyframework:aws-api:1.6.5'
    implementation 'com.amplifyframework:aws-datastore:1.6.5'

    // Support for Java 8 features
    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.0.10'
AppCompatActivity (MainActivity.kt)
         try {
            //Amplify.addPlugin(AWSApiPlugin()) // UNCOMMENT this line once backend is deployed
            Amplify.addPlugin(AWSDataStorePlugin())
            Amplify.configure(applicationContext)
            Log.i("Amplify", "Initialized Amplify")
        } catch (e: AmplifyException) {
            Log.e("Amplify", "Could not initialize Amplify", e)
        }

image.png

test CRUD

Create
val item: Post = Post.builder()
    		.title("Lorem ipsum dolor sit amet")
		.comments([])
		.content("Lorem ipsum dolor sit amet")
                .build()
Amplify.DataStore.save(
        item,
        { success -> Log.i("Amplify", "Saved item: " + success.item().name) },
        { error -> Log.e("Amplify", "Could not save item to DataStore", error) }
)

image.png

で、Dploy o AWS へと進む

アプリの作成?

image.png

  • アプリケーション名を入力
  • リージョン選択
    で、Confirm Deployment
    image.png

こんな感じで進んでいって
image.png

暫し待つと完了
image.png

右上のアクションで、
image.png

  • アプリ設定
    • リポジトリの再接続
    • 環境の追加
  • 削除
    image.png

右下のアクションで
image.png

  • Studio を起動する
    image.png
  • 詳細を表示
    image.png
  • クローンを作成
  • 削除

この先 Authentication と UI を設定すると完成？

なんかよくわからないので、立ち止まったら、チュートリアル発見・・ :sob:

チュートリアルやり直してみよう

チュートリアル

image.png

前提条件が違うことを踏まえて・・

image.png

Windows でもだいたい同じでしょと信じて

項目は以下

Android プロジェクトを作成する

Android Studio インストール

やっぱり必要なのね、ということで、準備。

新規プロジェクト作成

チュートリアルの指示に従って
image.png
Basic Activityで
image.png
Default の Kotlin のままで、Project Nameをチュートリアルのままにつけて
Minimum SDK も指示通り 8.0 にして Finish
image.png
暫く待つと完了
image.png

IDE のエラー対処

起動直後以下エラーが出てるが、色々DLしてるので、暫く待機
image.png

Firewall 系は適宜対処

再起動したら、一応全部消えてたので良しとする

不要なファイルを削除して、プラグインを追加する

Kotlinのプラグイン追加だけ対処
image.png

UserData データクラスを作成する

チュートリアルに従って、新規Class File を追加
image.png
UserData として
image.png

Singleton として object 定義にしたので、以下のアイコン変化が出る
class 青アイコン ⇒　object 橙アイコン
image.png

リストの各セルにGUIを追加する

指示通り リソースファイルを content_note として作成

で、コードを貼り付けるとこんな感じ
image.png

NoteRecyclerViewAdapter も指示通り作成

Desing → Code View の変更はこことかで
image.png

ファイル名コピーの際に、半角空白等を入れると、以下のようなメッセージが出て作れない
image.png

メインアクティビティを更新する

指示通り MainActivity を更新すると・・以下のようにエラーになる
image.png
エラーは以下四件
image.png

MainActivity.kt のエラー：kotlinx.android.synthetic が廃止されている・・

チュートリアル放置されてるのね :laughing:

ってことで、回避策は、以下を使ってやればよさげ

具体的には

  1. build.gradle の修正
    image.png
  2. build.gradle(app)に追加した定義も削除
    image.png
  3. MainActivity.kt での参照方法の変更
    変更してみたのが以下
MainActivity.kt 改修版
package com.example.androidgettingstarted

import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Observer
import androidx.recyclerview.widget.ItemTouchHelper
import androidx.recyclerview.widget.RecyclerView
import com.example.androidgettingstarted.databinding.ActivityMainBinding
import com.example.androidgettingstarted.databinding.ContentMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var rootBinding: ActivityMainBinding
    private lateinit var contentMainBinding: ContentMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        rootBinding = ActivityMainBinding.inflate(layoutInflater)
        contentMainBinding = ContentMainBinding.inflate(layoutInflater)

        setSupportActionBar(rootBinding.toolbar)

        // prepare our List view and RecyclerView (cells)
        setupRecyclerView(contentMainBinding.itemList)
    }

    // recycler view is the list of cells
    private fun setupRecyclerView(recyclerView: RecyclerView) {

        // update individual cell when the Note data are modified
        UserData.notes().observe(this, Observer<MutableList<UserData.Note>> { notes ->
            Log.d(TAG, "Note observer received ${notes.size} notes")

            // let's create a RecyclerViewAdapter that manages the individual cells
            recyclerView.adapter = NoteRecyclerViewAdapter(notes)
        })
    }

    companion object {
        private const val TAG = "MainActivity"
    }
}

無事エラーは消去
image.png

ビルドの依存関係を検証する

ん－、チュートリアル自体が古いから、ここはパス

ビルドとテスト

Run (Shift + F10) で実行してみると・・
無事動いたけど、最初の段階なので全く面白みもない :sob:
image.png

あとがき

今日の収穫

  • Windows でもチュートリアルを進められそう
  • Android Studio を初めて使ってみて、VS 並みに使いやすそうだと実感
  • チュートリアルが古くても、広い意味で同じソフトウェアだし、公式ドキュメントが詳しいのでなんとかなる

また週末に、モジュール２をやろう

前提条件にあるものを何一つ満たしていないこともあったけど、10分じゃ初心者には出来ませんでした。
分かっててサクサク実施するならいけるんでしょうけど、初心者にとっては何故？っていう疑問が沢山あるので :laughing:
image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0