Flutter、サーバーレスフレームワーク、Upstash（REDIS）を備えたフルスタックサーバーレスアプリ-パート2

アプリケーションのホーム画面には、作成されたすべての投稿のリストが表示されます。

このようなもの

ストレスのない方法ですべての投稿を取得するには、最初にカスタムダーツオブジェクトを作成する必要があります。単一の投稿を表します。

class Post {
  String? postText;
  String? userId;
  String? createdOn;
  String? id;
  String? postImage;
  PostAdmin? postAdmin;

  Post(
      {this.postText,
      this.userId,
      this.createdOn,
      this.id,
      this.postImage,
      this.postAdmin});

  Post.fromJson(Map<String, dynamic> json) {
    postText = json['postText'];
    userId = json['userId'];
    createdOn = json['createdOn'];
    id = json['id'];
    postImage = json['postImage'];
    postAdmin = json['postAdmin'] != null
        ? PostAdmin.fromJson(json['postAdmin'])
        : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['postText'] = this.postText;
    data['userId'] = this.userId;
    data['createdOn'] = this.createdOn;
    data['id'] = this.id;
    data['postImage'] = this.postImage;
    if (this.postAdmin != null) {
      data['postAdmin'] = this.postAdmin!.toJson();
    }
    return data;
  }
}

class PostAdmin {
  String? timestamp;
  String? userId;
  String? username;
  String? firstName;
  String? lastName;
  String? profilePic;

  PostAdmin(
      {this.timestamp,
      this.userId,
      this.username,
      this.firstName,
      this.lastName,
      this.profilePic});

  PostAdmin.fromJson(Map<String, dynamic> json) {
    timestamp = json['timestamp'];
    userId = json['userId'];
    username = json['username'];
    firstName = json['firstName'];
    lastName = json['lastName'];
    profilePic = json['profilePic'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['timestamp'] = this.timestamp;
    data['userId'] = this.userId;
    data['username'] = this.username;
    data['firstName'] = this.firstName;
    data['lastName'] = this.lastName;
    data['profilePic'] = this.profilePic;
    return data;
  }
}

次に、http.Responseを変換します そのカスタムDartオブジェクトに。

List<Post> parsePosts(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Post>((json) => Post.fromJson(json)).toList();
}

Future<List<Post>> fetchPosts(http.Client client) async {
  final response = await client
      .get(Uri.parse(GET_POSTS));

  return compute(parsePosts,response.body);
}

fetchPostsの戻りタイプ メソッドはFuture<List<Post>>です 。

低速のデバイスでfetchPosts（）関数を実行すると、JSONを解析して変換するときに、アプリが一時的にフリーズすることに気付く場合があります。これはジャンクです、そしてあなたはそれを取り除きたいです。

computeを使用して解析と変換をバックグラウンドに移動することにより、ジャンクを削除します 関数

compute(parsePosts, response.body);

Compute（）関数は、バックグラウンド分離で高価な関数を実行し、結果を返します

ホーム画面ファイルでは、FutureBuilderウィジェットを使用して、データベースからすべての投稿をリストとして非同期的に取得します。

2つのパラメータを提供する必要があります：

• 一緒に働きたい未来。この場合、futureはfetchPosts（）関数から返されます。

将来の状態（読み込み、成功、エラー）に応じて、Flutterに何をレンダリングするかを指示するビルダー関数。

snapshot.hasDataは、スナップショットにnull以外のデータ値が含まれている場合にのみtrueを返すことに注意してください。

fetchPostsはnull以外の値しか返すことができないため、「404 Not Found」サーバー応答の場合でも、関数は例外をスローする必要があります。例外をスローすると、snapshot.hasErrorがtrueに設定され、エラーメッセージの表示に使用できます。

それ以外の場合は、スピナーが表示されます。

Expanded(child: FutureBuilder<List<Post>>(
              future: _posts,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  List<Post>? posts = snapshot.data;
                  if(posts != null){
                    return ListView.builder(itemBuilder: (context,index){
                      return  Card(
                        child: Container(
                          padding: EdgeInsets.all(10),
                          child: Row(
                           crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                          ClipRRect(
                          borderRadius: BorderRadius.circular(1000),
                          child: Image.network(
                            posts[index].postAdmin!.profilePic!,
                            fit: BoxFit.cover,
                            height: 40,
                            width: 40,
                          ),
                      ),
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.only(left: 10),
                              child: Column(
                               mainAxisAlignment: MainAxisAlignment.start,
                               crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                              Text(posts[index].postAdmin!.username!,style: TextStyle(fontWeight: FontWeight.bold,fontSize: 16),),
                              Text(posts[index].postText!),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.network(
                                      posts[index].postImage!,
                                      fit: BoxFit.cover,
                                      height: 150,
                                      width: size.width,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                            ],
                          ),
                        ),
                      );
                    },itemCount: posts.length,);
                  }

                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }

                // By default, show a loading spinner.
                return Container(
                    height: 40,
                    width: 40,

                    child: Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).colorScheme.secondary))));
              },
            ))

initStateメソッドでは、fetchPosts

late Future<List<Post>> _posts;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _posts = fetchPosts(http.Client());

  }

buildメソッドの代わりにinitStateでfetchPostsを呼び出す理由は、ビュー内の何かを変更する必要があるたびにflutterがbuild（）メソッドを呼び出すためです。これは、驚くほど頻繁に発生します。 build（）メソッドにfetch呼び出しを残すと、APIが不要な呼び出しで溢れ、アプリの速度が低下します。

完全なソースコードを自由に確認してください

インターフェースを作成するためのエンドポイントはまだいくつかありますが、演習なしの優れたチュートリアルは何ですか？😂