How to Develop a Basic CRUD Application with SwiftUI?

概要 このガイドでは、swiftuiを使用して完全に機能するcrud（作成、読み取り、更新、削除）アプリケーションを開発する方法を学びます。 swiftuiは、ios、ipados、watchos、tvos、visionos、およびmacosのユーザーインターフェースを構築するためのフレームワークです。 私たちは、データを管理するためにback4appをバックエンドサービスとして使用します。このチュートリアルでは、back4appプロジェクトの設定、データベーススキーマの設計、api呼び出しを使用したswiftuiとの統合、およびバックエンドのセキュリティについて説明します。 学べること データ操作をシームレスに処理するcrudアプリの構築方法。 堅牢でスケーラブルなバックエンドを設計するための技術。 rest apiを使用してswiftuiインターフェースをback4appに接続する方法。 高度なアクセス制御を使用してデータを安全に管理する方法。 前提条件 back4appアカウント： back4appにサインアップし、新しいプロジェクトを設定していることを確認してください。 助けが必要な場合は、 back4appクイックスタート https //www back4app com/docs/get started/new parse app を参照してください。 swiftui環境： xcodeがインストールされており、基本的なswiftuiプロジェクトが作成されていることを確認してください。 知識： swift、swiftui、およびrestful apiの基本的な知識が役立ちます。 始める前に： ステップ 1 – back4app プロジェクトの設定 back4app で新しいプロジェクトを開始する back4app ダッシュボードにアクセスする アカウントにログインして。 「新しいアプリ」を選択する 新しいプロジェクトを開始するために。 プロジェクトに名前を付ける 例えば、 basic crud app swiftui , 画面の指示に従って設定を完了してください。 新しいプロジェクトを作成 プロジェクトが作成されると、ダッシュボードに表示され、バックエンド操作の設定ができるようになります。 ステップ 2 – データベーススキーマの作成 データモデルの定義 この crud アプリケーションでは、いくつかのコレクション（クラス）を定義する必要があります。以下は、主要なコレクションとそのフィールドおよびタイプを概説する例です。 1\ コレクション アイテム このコレクションは各エントリの詳細を保存します。 フィールド タイプ 目的 id オブジェクトid 自動生成された主キー。 タイトル 文字列 アイテムの名前またはタイトル。 説明 文字列 アイテムについての簡単な説明。 作成日時 日付 作成を示すタイムスタンプ。 更新日時 日付 最新の更新のタイムスタンプ。 2\ コレクション ユーザー このコレクションにはユーザーの資格情報とプロフィールの詳細が含まれています。 フィールド タイプ 目的 id オブジェクトid 自動生成された一意の識別子。 ユーザー名 文字列 ログイン用のユニークなユーザー名。 メール 文字列 ユーザーのユニークなメールアドレス。 パスワードハッシュ 文字列 認証のための暗号化されたパスワード。 作成日時 日付 アカウント作成のタイムスタンプ。 更新日時 日付 最後のアカウント変更のタイムスタンプ。 これらのクラスは、back4appダッシュボードを介して手動で構成することができ、新しいクラスを作成し、各フィールドの列を追加します。 新しいクラスを作成 ダッシュボードツールを利用して、フィールド名、タイプ、デフォルト値、および必須ステータスを定義します。 列を作成 back4app aiエージェントの活用 back4app aiエージェントは、スキーマ生成のプロセスを効率化します。テキストプロンプトに基づいて、データベーススキーマを自動的に生成できます。 aiエージェントの利用方法 aiエージェントを見つける サインインして、プロジェクト設定のaiエージェントセクションに移動します。 スキーマの説明を提出する 希望するコレクションとフィールドを概説する詳細なプロンプトを入力します。 レビューと実装 生成後、スキーマを確認し、変更を適用します。 サンプルプロンプト create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) この機能は時間を節約し、データベース設定の一貫性を確保します。 ステップ3 – 管理インターフェースを使用したデータ管理 管理インターフェースの概要 back4app管理アプリは、データ管理を簡素化するノーコードツールです。直感的なドラッグアンドドロップインターフェースにより、crud操作を簡単に実行できます。 管理インターフェースの有効化 「その他」メニューに移動 あなたのback4appダッシュボードで。 「管理アプリ」を選択 そして次に選択します 「管理アプリを有効にする」。 資格情報の設定： 初期の管理ユーザーを作成し、システムロールを自動的に構成します。 管理アプリを有効にする 有効化後、管理アプリにログインしてコレクションを管理します。 管理アプリダッシュボード 管理インターフェースでのcrud操作 作成： 任意のコレクション（例：アイテム）で「レコードを追加」オプションを使用して新しいデータを追加します。 読み取り/更新： レコードをクリックして詳細を表示し、フィールドを修正します。 削除： もはや必要ないレコードを削除機能を使用して削除します。 このインターフェースは使いやすさを向上させ、日常のデータ操作を簡素化します。 ステップ4 – swiftuiとback4appの統合 バックエンドが整ったら、swiftuiアプリケーションをback4appに接続する時です。 swiftuiでのrest api呼び出しの使用 sdkに依存するのではなく、swiftuiアプリからback4appと対話するためにrest api呼び出しを使用します。 例：アイテムの取得 新しいswiftuiビューを作成します（例： itemslistview\ swift ) そして次のコードを追加します import swiftui import combine struct item identifiable, codable { let id string let title string let description string } class itemsviewmodel observableobject { @published var items \[item] = \[] private var cancellables = set\<anycancellable>() func fetchitems() { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") urlsession shared datataskpublisher(for request) map { $0 data } decode(type itemsresponse self, decoder jsondecoder()) receive(on dispatchqueue main) sink(receivecompletion { completion in if case let failure(error) = completion { print("error fetching items \\(error)") } }, receivevalue { response in self items = response results }) store(in \&cancellables) } } struct itemsresponse codable { let results \[item] } struct itemslistview view { @stateobject private var viewmodel = itemsviewmodel() var body some view { navigationview { list(viewmodel items) { item in vstack(alignment leading) { text(item title) font( headline) text(item description) font( subheadline) } } navigationtitle("items") onappear { viewmodel fetchitems() } } } } struct itemslistview previews previewprovider { static var previews some view { itemslistview() } } このビューは、restを介してback4appからデータを取得し、リストに表示します。 さらなるapi操作 新しいアイテムの作成： urlsession を使用して、postリクエストで新しいエントリを追加します。 アイテムの更新： 既存のデータを変更するためにputリクエストを実装します。 アイテムの削除： データを削除するためにdeleteリクエストを利用します。 必要に応じて、これらのネットワーク操作をswiftuiビューに統合します。 ステップ 5 – バックエンドのセキュリティ アクセス制御の実装 オブジェクトのアクセス制御リスト (acl) を設定してデータを保護します。たとえば、安全なアイテムレコードを作成するには func createsecureitem(title string, description string, ownerid string) { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let itemdata \[string any] = \[ "title" title, "description" description, "acl" \[ ownerid \["read" true, "write" true], " " \["read" false, "write" false] ] ] request httpbody = try? jsonserialization data(withjsonobject itemdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("error creating item \\(error)") } } resume() } クラスレベルの権限の設定 back4app ダッシュボード内で、各コレクションのクラスレベルの権限 (clp) を調整して、デフォルトで誰がデータを読み書きできるかを強制します。 ステップ 6 – ユーザー認証の実装 ユーザーアカウントの確立 back4app は、認証を処理するためにユーザークラスを活用します。swiftui アプリ内で、rest api 呼び出しを介して登録とログインを管理します。 例 ユーザー登録 func signupuser(username string, password string, email string) { guard let url = url(string "https //parseapi back4app com/users") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let userdata \[string any] = \[ "username" username, "password" password, "email" email ] request httpbody = try? jsonserialization data(withjsonobject userdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("sign up error \\(error)") } else { print("user registered successfully") } } resume() } このアプローチは、ユーザーログインとセッション管理に拡張できます。 ステップ7 – 結論と今後の改善点 素晴らしい仕事です！あなたはswiftuiとback4appを使用して基本的なcrudアプリケーションを成功裏に構築しました。 あなたは「 basic crud app swiftui 」というプロジェクトを作成し、アイテムとユーザーのためのデータベーススキーマを設計し、swiftuiフロントエンドをrest api呼び出しを介してバックエンドに接続しました。 さらに、aclを使用してデータを保護し、ユーザー認証を実装する方法を学びました。 次は何ですか？ uiを拡張する： 詳細ビュー、アニメーション、インタラクティブ要素でswiftuiインターフェースを強化します。 高度な機能： cloud functionsやリアルタイムデータ更新など、追加のバックエンドロジックを組み込みます。 さらに探求する： back4appのドキュメント https //www back4app com/docs を訪れて、アプリの最適化やより高度な機能の統合に関するさらなる洞察を得てください。 このガイドに従うことで、back4appを使用してswiftuiアプリケーションの堅牢でスケーラブルなcrudバックエンドを作成するための基本的なスキルを身につけました。構築と革新を楽しんでください！