Flutterって最近話題ですよね。
軽く触ってみたんですけど、コードでUIを書けることや、すべての部品がウィジェットという単位でできているところなんかが好みです。
ニフクラ mobile backendのエバンジェリストである中津川氏が、そんなFlutterと連携できるのニフクラ mobile backend Flutter SDKを開発してくれたので、早速使ってみました。
必要物
- Android Studio
- Flutter SDK
- ニフクラ mobile backendアカウント
ちなみに、ニフクラ mobile backendとは、スマートフォンアプリに特化したBaaS(Backend as a Service)です。
SDKを導入いただくことで、ユーザー認証／クラウドデータベース／ファイルストレージなどを使ったスマートフォンアプリを簡単に開発することができます。
プロジェクト作成
まずFlutterのプロジェクトを作成いただき、main.dartの中身を空っぽにしておいてください。
Flutterの環境構築方法が分からない方はこちら
https://flutter.dev/docs/get-started/install
基本的にFlutter SDKをインストールして、Android Studio上でFlutter SDKのパスを指定していただければOKです。
SDKの導入
pubspec.yamlを開き、19行目くらいにある以下の記述を探してください。
dependencies:
flutter:
sdk: flutter
ここに、次のように加筆してください。
dependencies:
flutter:
sdk: flutter
ncmb: ^2.6.6
ここで指定しているncmbの 0.1.2は、執筆時のニフクラ mobile backend Flutter SDK最新バージョンです。
下記ページからニフクラ mobile backend Flutter SDK最新バージョンを確認いただき、その時の最新に置き換えていただければと思います。
ニフクラ mobile backendの用意
アカウント登録
ニフクラ mobile backend側の用意をします。
すでにアカウントをお持ちの方は以下からログインしてください。
https://console.mbaas.nifcloud.com/login
まだアカウントを持っていないという方は、以下から新規アカウントを登録してください。
(Google, Facebook, Twitterアカウントで登録できます)
https://mbaas.nifcloud.com/signup.htm
アプリ作成
ニフクラ mobile backendは、「アプリ」という単位でプロジェクトを管理します。
アプリを作成していきましょう。
ニフクラ mobile backendに登録して利用規約の同意やらを済ませると、一番最初にこの画面が出てくるかと思います。
今回は、「flutter_demo」と入力して、「新規作成」をクリックしてください。
※もうすでに登録していてダッシュボードが出ている人は、管理画面左上にある「+新しいアプリ」をクリックすると同じ画面に遷移します。
すると、こういう画面が出てくるかなと思います。
この画面は後ほど使いますので、 まだ「OK」は押さないでください 。
一旦ニフクラ mobile backendでの作業は終了したので、このタブは消さずに最小化しておいてください。
main.dartの編集
Android Studioに戻り、main.dartを編集します。
以下をそのままコピーして貼り付けてください。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ncmb/ncmb.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// TextEditingControllerの生成(TextFieldに入力された値を取得するために必要)
final Value = TextEditingController();
@override
void initState() {
super.initState();
// ncmbの初期化
new NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY');
}
Widget build(BuildContext context) => MaterialApp(
title: 'NCMB Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TextField(
obscureText: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Text',
),
controller: Value,
),
FlatButton(
onPressed: pushedButton,
child: Text(
'Send'
),
),
],
)
),
)
);
void pushedButton() async {
var text = new NCMBObject('Text');
text.set('msg', Value.text);
await text.save();
}
}
new NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY'); の YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY の部分に、先程ニフクラ mobile backendのアプリ作成を完了したところに表示されていたアプリケーションキーとクライアントキーを入力します。
※文字列として入力するので、必ずシングルコーテーションで囲うようにしてください
また、アプリケーションキーとクライアントキーは非常に長いので、コピペミスを防ぐために、テキストボックスの右にある「コピー」ボタンをおしてコピーいただくと確実です。
先程の手順で誤って「OK」を押して閉じちゃったという方は右上にある管理画面右上の「アプリ設定」ボタンを押していただくと、中段の「APIキー」より同様の情報がご確認いただけます。
完成
完成です。
あっという間でしたね。
では、早速実機かエミュレータで実行してみましょう。
テキストボックスと「Send!」というボタンが表示されているだけのシンプルなアプリができたかと思います。
テキストボックスを選択いただき、任意のテキストを入力した後に「Send!」ボタンを押してみてください。
特に反応が帰ってこず不安になるかもしれませんが、もうこれでニフクラ mobile backendにデータは送信されています。
確認してみましょう。
確認
今回テキストボックスに入力されたデータは、ニフクラ mobile backendの「データストア」という機能の中に格納されています。
下の画像のようにクリック頂き、データストア内の「Text」クラスの中身を見てください。
すると、msgというフィールド(列)に入力したデータがずらりと並んでいることがわかると思います。
まとめ
このように、Flutterでも非常に簡単にニフクラ mobile backendと連携するアプリを作成できます。
今回は一例としてデータストアへのデータ送信でしたが、ニフクラ mobile backendのFlutter SDKを使うと、データストアのデータを取得する、ファイルストアにファイルをアップロードするなど、様々な処理をクラウドと連携する形で実行できます。
その他の機能の使い方はこちらをご覧ください。
https://blog.mbaas.nifcloud.com/archive/category/flutter
是非一度お試しいただければと思います！