Flutter
Parse SDK (REST)
FlutterでBack4AppのParseオブジェクトの基本CRUD操作ガイド
10 分
このガイドでは、flutterプラグインを使用してback4app上でparseオブジェクトを管理する方法を示します。基本的なcrud操作、すなわち作成、読み取り、更新、削除を学びます。このチュートリアルでは、これらの操作を説明するためにシンプルなtodoアプリを使用します。 back4appのバックエンドデータストレージは、 parseobject に基づいており、json互換データのキーと値のペアを保持します。back4appデータストレージは、文字列、数値、ブール値、datetime、geopoints、ポインタ、リレーション、リストおよびオブジェクトを含む、さまざまな一般的なデータ型をサポートしています。基本的に、json形式でエンコードできる任意のデータをサポートし、さまざまなデータストレージニーズに対して柔軟で堅牢なソリューションを提供します。 前提条件 このチュートリアルを完了するには、次のものが必要です flutter バージョン 3 x x 以上 android studio https //developer android com/studio または vs code をインストール ( プラグイン dart と flutter) back4app 上で 作成された アプリ 注意 新しい parse アプリのチュートリアル を参照して、back4app で parse アプリを作成する方法を学んでください。 back4app に接続された flutter アプリ。 注意 flutter プロジェクトに parse sdk をインストール して、back4app に接続された flutter プロジェクトを作成してください。 android または ios を実行しているデバイス(または仮想デバイス)。 1\ オブジェクトを作成する その savetodo 関数は、タイトルと done ステータスが false に設定された新しいタスクを作成します。動作は次のとおりです parse オブジェクトを初期化し、その属性を設定する parseobject のインスタンスを作成します(例:'todo')。 set メソッドを使用してキーと値のペアを定義します。 オブジェクトを保存する save メソッドを呼び出して、オブジェクトをデータベースに保存します。 future\<void> savetodo(string title) async { final todo = parseobject('todo') set('title', title) set('done', false); await todo save(); } 2\ オブジェクトを読む この gettodo 関数はデータベースをクエリし、タスクのリストを返します。動作は以下の通りです クエリを初期化する あなたのクラスのために querybuilder のインスタンスを作成します。 クエリを実行する query メソッドを使用してデータを取得します。 レスポンスを処理する クエリが成功したかどうかを確認し、結果を処理します。 future\<list\<parseobject>> gettodo() async { querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final parseresponse apiresponse = await querytodo query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<parseobject>; } else { return \[]; } } 次に、 listview\ builder 関数を更新して、parseオブジェクトの値を抽出して表示します // get parse object values final vartodo = snapshot data!\[index]; final vartitle = vartodo get\<string>('title')!; final vardone = vartodo get\<bool>('done')!; 3\ オブジェクトを更新する その updatetodo 関数は、既存のタスクのステータスを更新します。動作は次のとおりです parseオブジェクトを初期化し、属性を設定する parseobject のインスタンスを作成し、その objectid を設定します。 set メソッドを使用して、キーと値のペアを更新します。 オブジェクトを保存する save メソッドを呼び出して、データベース内のオブジェクトを更新します。 future\<void> updatetodo(string id, bool done) async { var todo = parseobject('todo') objectid = id set('done', done); await todo save(); } 4\ オブジェクトを削除する その deletetodo 関数は、データベースから既存のタスクを削除します。動作は次のとおりです parseオブジェクトを初期化する parseobject のインスタンスを作成し、その objectid を設定します。 オブジェクトを削除する delete メソッドを呼び出して、データベースからオブジェクトを削除します。 future\<void> deletetodo(string id) async { var todo = parseobject('todo') objectid = id; await todo delete(); } 完全な例コード こちらがback4appバックエンドと統合されたシンプルなtodoアプリの完全なコードです。 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id here'; const keyclientkey = 'your client key here'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(const materialapp(home todoapp())); } class todoapp extends statefulwidget { const todoapp({super key}); @override // ignore library private types in public api todoappstate createstate() => todoappstate(); } class todoappstate extends state\<todoapp> { list\<parseobject> tasks = \[]; texteditingcontroller taskcontroller = texteditingcontroller(); @override void initstate() { super initstate(); gettodo(); } @override widget build(buildcontext context) { return materialapp( debugshowcheckedmodebanner false, theme themedata( primarycolor colors white, hintcolor colors black, scaffoldbackgroundcolor colors white, appbartheme appbartheme(backgroundcolor color fromargb(255, 68, 122, 246))), home scaffold( appbar appbar( title const text('todo list'), ), body container( decoration boxdecoration( border border all(color colors black), ), child column( children \[ const sizedbox(height 20), buildtaskinput(), const sizedbox(height 20), expanded(child buildtasklist()), ], ), ), ), ); } widget buildtaskinput() { return padding( padding const edgeinsets symmetric(horizontal 20), child row( children \[ expanded( child textfield( controller taskcontroller, decoration inputdecoration( hinttext 'enter tasks', filled true, fillcolor colors grey\[200], border outlineinputborder( borderradius borderradius circular(8), borderside borderside none, ), ), ), ), const sizedbox(width 10), elevatedbutton( onpressed addtodo, style buttonstyle( foregroundcolor materialstateproperty all\<color>(colors black)), child const text('add'), ), ], ), ); } widget buildtasklist() { return listview\ builder( itemcount tasks length, itembuilder (context, index) { final vartodo = tasks\[index]; final vartitle = vartodo get\<string>('title') ?? ''; bool done = vartodo get\<bool>('done') ?? false; return listtile( title row( children \[ checkbox( value done, onchanged (newvalue) { updatetodo(index, newvalue!); }, ), expanded(child text(vartitle)), ], ), trailing iconbutton( icon const icon(icons delete), onpressed () { deletetodo(index, vartodo objectid!); }, ), ); }, ); } future\<void> addtodo() async { string task = taskcontroller text trim(); if (task isnotempty) { var todo = parseobject('todo') set('title', task) set('done', false); var response = await todo save(); if (response success) { setstate(() { tasks add(todo); }); taskcontroller clear(); } else { // handle error } } } future\<void> updatetodo(int index, bool done) async { final vartodo = tasks\[index]; final string id = vartodo objectid tostring(); var todo = parseobject('todo') objectid = id set('done', done); var response = await todo save(); if (response success) { setstate(() { tasks\[index] = todo; }); } else { // handle error } } future\<void> gettodo() async { var querybuilder = querybuilder\<parseobject>(parseobject('todo')); var apiresponse = await querybuilder query(); if (apiresponse success && apiresponse results != null) { setstate(() { tasks = apiresponse results as list\<parseobject>; }); } else { // handle error } } future\<void> deletetodo(int index, string id) async { var todo = parseobject('todo') objectid = id; var response = await todo delete(); if (response success) { setstate(() { tasks removeat(index); }); } else { // handle error } } } あなたのアプリは次のように見えるべきです 結論 あなたは今、back4app上のparseを使用してflutterアプリで基本的なcrud操作を実装しました。このチュートリアルでは、todoアプリでタスクを追加、取得、更新、削除する方法を示しました。