FlutterでKintoneにデータを記録してみる #iOS

Flutterのデフォルトのカウンターアプリで増えた数だけKintoneにデータを送って記録してみました。
まずは環境構築からしていきます。FlutterのSDKをインストールしPATHを通したらflutterコマンドを入力できるか確認します。

flutter --version

Flutter 3.3.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4f9d92fbbd (5 days ago) • 2022-09-06 17:54:53 -0700
Engine • revision 3efdf03e73
Tools • Dart 2.18.0 • DevTools 2.15.0

VSCodeのターミナルから、command + shift + PでFlutter: New Projectを選択。

Applicationを選択して

プロジェクトネームを入力してEnter

generatorが走ってデフォルトのアプリが立ち上がります。

iOSのシュミレーターを設定して、

ターミナルのコマンドでflutter runしましょう。

上手くビルドされれば、下記のようなメッセージと共にアプリが起動します。

デフォルトの`main.dart`のコードはこちらになります。

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

書き換える前にまずは、

.envを使用するのでGitHubに上がらないよう.gitignoreに.envを追加します。

ルート直下に.envを作成し、Kintoneよりドメインなどを取得してきてXXXXXXの部分を修正して下さい。

このXXXXXXがドメインとURLに入ります。
APIトークンはこちらの取得方法をご確認ください。ちなみにAPIトークンでREST APIを実行する際にはユーザIDとパスワードは必要ありません。

IDはURLの最後の数字になります。lib内にenb.dartファイルを作成して.envからmain.dartに繋ぐ実装を書きます。

lib/env.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';

String? domain = dotenv.env['KINTONE_DOMAIN'];
String? baseUrl = dotenv.env['KINTONE_BASE_URL'];
String? apiToken = dotenv.env['KINTONE_APITOKEN'];
String? id = dotenv.env['KINTONE_ID'];

そして`main.dart`にKintoneにデータを送るAPIの実装を追加します。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:kintone_flutter/env.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

Future main() async {
  runApp(const MyApp());
  await dotenv.load(fileName: ".env");
}

final Map<String, String> postHeader = {
  'X-Cybozu-API-Token': apiToken!,
  'Content-Type': 'application/json'
};

final Map<String, String> getHeader = {
  'X-Cybozu-API-Token': apiToken!,
};

Future<Map<String, dynamic>> postRecord(int number) async {
  final Map<String, dynamic> postRecord = {
    'app': id,
    'record': {
      'number': {'value': number},
    }
  };

  return await http
      .post(Uri.parse('$baseUrl/record.json'),
          headers: postHeader, body: jsonEncode(postRecord))
      .then(((response) {
    Map<String, dynamic> rec = jsonDecode(response.body);
    return rec;
  }));
}

Future<Map<String, dynamic>> fetchRecords(String query) async {
  String encodedQuery = Uri.encodeFull(query);
  return await http
      .get(
          Uri.parse(
            '$baseUrl/records.json?app=$id&query=$encodedQuery',
          ),
          headers: getHeader)
      .then(((response) {
    Map<String, dynamic> rec = jsonDecode(response.body);
    return rec;
  }));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
      fetchRecords('');
      postRecord(_counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

pubspec.yaml内にhttp:とflutter_dotenv:を最新版で追記して、flutter pub getすれば、main.dartでimportが呼ばれるようになりerrorが消えます。

Kintone側では、カウンターを受ける数値を入れる変数(文字列)を用意します。

フィールド名を数値にしてフィールドコード(変数名）をnumberにしてアプリを作成したら、iOSシュミレーターを立ち上げて、カウンターを増やしてみましょう。

Kintoneにカウントした数だけデータが記録されているのを確認できました。