AWS の開始方法

iOS アプリケーションを構築する

AWS Amplify を使用してシンプルな iOS アプリケーションを作成する

モジュール 1: iOS アプリを作成してデプロイする

このモジュールでは、iOS アプリケーションを作成し、AWS Amplify のウェブホスティングサービスを使用してクラウドにデプロイします。

はじめに

AWS Amplify では、ウェブおよびモバイルアプリケーションのサーバーレスバックエンドを作成、管理、統合、デプロイするための Git ベースのワークフローを利用できます。Amplify CLI は、アプリケーションのユーザー認証や REST または GraphQL API などのバックエンドサービスをプロビジョンおよび管理するための、テキストベースのシンプルなユーザーインターフェイスです。Amplify ライブラリを使用すれば、数行のコードで、これらのバックエンドサービスをアプリケーション内で簡単に統合できます。

このモジュールではまず、旅行メモを作るための新しい iOS アプリケーションを作成します。メモは、タイトル、説明、写真で構成されます。後のモジュールでは、このアプリケーションを強化していきます。

学習内容

  • iOS アプリケーションの作成
  • メインビューの更新
  • アプリケーションの構築とテスト

主要な概念

SwiftUISwiftUI は、Swift プログラミング言語を使用して、あらゆる Apple プラットフォームでユーザーインターフェイスを構築できるシンプルなフレームワークです。

 所要時間

10 分

 使用するサービス

実装

  • iOS アプリケーションを作成する

    Xcode を起動し、スプラッシュ画面で [Create a new Xcode project (新しい Xcode プロジェクトを作成する)] を選択します。

    iOSTutorial-Module1-Step1

    [iOS] の [Application (アプリケーション)] で [Single View App (単一ビューアプリ)] を選択し、[Next (次へ)] をクリックします。

    iOSTutorial-Module1-Step2

    プロジェクトの名前を入力します (例: iOS Getting Started)。[Language (言語)] が [Swift] に、[User Interface (ユーザーインターフェイス)] が [SwiftUI] に設定されていることを確認してから、[Next (次へ)] をクリックします。

    iOSTutorial-Module1-Step3

    最後に、ディレクトリを選択し、[Create (作成)] をクリックしてプロジェクトを作成します。

  • メインビューを更新する

    Xcode の左側にあるファイル一覧から ContentView.swift を開き、コードを次のコンテンツに置き換えます。

    import SwiftUI
    
    // singleton object to store user data
    class UserData : ObservableObject {
        private init() {}
        static let shared = UserData()
    
        @Published var notes : [Note] = []
        @Published var isSignedIn : Bool = false
    }
    
    // the data class to represents Notes
    class Note : Identifiable, ObservableObject {
        var id : String
        var name : String
        var description : String?
        var imageName : String?
        @Published var image : Image?
    
        init(id: String, name: String, description: String? = nil, image: String? = nil ) {
            self.id = id
            self.name = name
            self.description = description
            self.imageName = image
        }
    }
    
    // a view to represent a single list item
    struct ListRow: View {
        @ObservedObject var note : Note
        var body: some View {
    
            return HStack(alignment: .center, spacing: 5.0) {
    
                // if there is an image, display it on the left
                if (note.image != nil) {
                    note.image!
                    .resizable()
                    .frame(width: 50, height: 50)
                }
    
                // the right part is a vertical stack with the title and description
                VStack(alignment: .leading, spacing: 5.0) {
                    Text(note.name)
                    .bold()
    
                    if ((note.description) != nil) {
                        Text(note.description!)
                    }
                }
            }
        }
    }
    
    // this is the main view of our app, 
    // it is made of a Table with one line per Note
    struct ContentView: View {
        @ObservedObject private var userData: UserData = .shared
    
        var body: some View {
            List {
                ForEach(userData.notes) { note in
                    ListRow(note: note)
                }
            }
        }
    }
    
    // this is use to preview the UI in Xcode
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
    
            let _ = prepareTestData()
    
            return ContentView()
        }
    }
    
    // this is a test data set to preview the UI in Xcode
    func prepareTestData() -> UserData {
        let userData = UserData.shared
        userData.isSignedIn = true
        let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
    
        let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
        let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
    
        n1.image = Image(systemName: n1.imageName!)
        n2.image = Image(systemName: n2.imageName!)
    
        userData.notes = [ n1, n2 ]
    
        return userData
    }

    ここで追加したもの

    • メモのデータを保存する Note クラスを作成しました。ImageName と Image に 2 つの異なるプロパティを使用しました。Image については、後の「ストレージを追加する」セクションで取り上げます。
    • 特定のユーザーのデータを保持する UserData クラスを作成しました。この段階では、Note オブジェクトの一覧のみを作成しています。
    • メインビューの ContentView には、ListRow の一覧が含まれています。
    • 各行は、画像とテキストが水平にスタックされる ListRow によってレンダリングされます。テキストは、太字のメモ名と、メモの説明とが垂直にスタックされます。
    • 最後に、ContentView_Previews を調整し、prepareTestData() を追加して、キャンバスでプレビューをレンダリングできるようにしました。
  • 構築およびテストする

    キャンバスをチェックして、想定どおりのレイアウトになっていることを確認します。キャンバスが表示されない場合は、[Editor (エディタ)] メニューで有効にしてから、[Canvas (キャンバス)] をクリックします。レイアウトのプレビューを生成するには、キャンバスの [resume (再開)] ボタンのクリックが必要な場合もあります。

    iOSTutorial-Module1-Step4

    プレビューのデータはコードで生成され (70 行目から開始)、実行時には表示されないことに注意してください。すべてが問題ないようであれば、シミュレーターでアプリを構築して起動します。[Product (製品)] メニューをクリックして [Run (実行)] を選択するか、または を押します。他に、ツールバーの [Play (再生)] ▶️ ボタンをクリックする方法もあります。

    iOSTutorial-Module1-Step5

    しばらくすると、iOS Simulator でアプリが起動します。最初の画面は空白です。 プレビューデータは実行時にレンダリングされません。Xcode 内のプレビューのみを目的としています。

    iOSTutorial-Module1-step6

まとめ

iOS アプリを正常に作成できました。これで、Amplify で構築を開始する準備が整いました。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
閉じる
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。
閉じる

Amplify を初期化する