FlutterとReactとOptiWeb

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

APIの標準化とFlutter/React開発 †

↑

APIの重要性 †

アプリケーションのフロントエンド（FlutterやReact）とバックエンドの間のインターフェース
データの構造と形式を定義
クライアントとサーバー間の通信プロトコルを規定

↑

共通API定義のメリット †

フロントエンドの技術（FlutterやReact）に依存しない一貫したデータアクセス
バックエンド開発とフロントエンド開発の並行作業が可能
テスト容易性の向上
ドキュメンテーションの統一

↑

API定義の方法 †

RESTful API
GraphQL
gRPC のいずれかを選択し、一貫して使用

↑

FlutterとReactでのAPI利用 †

↑

Flutter †

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<Data> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    return Data.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load data');
  }
}

↑

React †

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

↑