アプリ開発記 第1回 FlutterとFirebaseで動くものを作る

こんにちは、木崎 誠です。

やりたいことの一つであるアプリ開発について記録していきます。

使用する技術はFlutter、Firebaseです。

Android、iOS、Webすべてを一つの言語で開発できるFlutterと、
プログラミング不要で簡単にデータベースやホスティング(Webへの公開)が行えるFirebase。

一度リリースまでの流れを経験すれば、自分が欲しいと思ったちょっとしたアプリをどんどん作ることができそうだと思い、この構成にしました。

Udemyでの学習開始

プログラミングの独学ということで、まずは基本的な部分を学びながらも、動くものを作ってしまおうと考えました。

取り組んだのは動画教材プラットフォームのUdemyで販売されている以下の教材2つです。

Flutter × Firebaseで開発するモバイルアプリ入門
メモアプリの作成を通してFirebaseと連携したアプリ開発を学習しよう!
Flutter × Firebaseで開発するWEBアプリ入門
タスク管理アプリの作成を通してFirebaseと連携したWEBアプリ開発・公開方法を学習しよう!

どちらも1時間ちょっとの動画時間で、てばやく動くものを作ることができました。

モバイルアプリではメモアプリを、WebアプリではTodoアプリとなります。

制作したもの

簡単ですがWebアプリの画面を動画に記録してみました。

非常にシンプルな作りですが、タスクの追加と編集と削除、完了と未完了の切り替えができます。

また、それらの変更はすべてリアルタイムでFirebaseに反映されています。
さらにFirebaseでホスティングを行っているため、実際にWebからアクセスすることができます。

ログイン機能などがなくセキュリティ面に不安があるため公開はできませんが…。

それでも動くものを早期に作ることができて満足です。

学習中に起きた問題や参考にしたサイト

Firebaseの導入がうまくいかなかったのか、Web画面でタスクを追加しようとしてもDBに反映されず、再起動すると既存タスクの読み込みもできなくなる現状がありました。

エラー内容は以下です。

Missing or insufficient permissions.

このエラーで検索したところ、以下の記事が発見できました。

firebaseのチュートリアルで、Error: Missing or insufficient permissions.と言われた時の解決法メモ - Qiita
firebaseのチュートリアルを行おうとしていたら、以下の部分でチュートリアル通りの画面がでなかった。codelabs開発ツールを開くと、以下のエラーが出ていた。Error: Missing…

記事によると、Firebase FireStoreのルールが悪さしているかもしれないと…。

ルールの状況を確認したところ、拒否数がカウントされていました。

ひとまず読み書きができれば問題なし、セキュリティ度外視だったので、全部OKというルールに置き換えました。

結果、無事FireStoreの内容の読み書きができるようになりました!

作った感想と次の目標

本当にこれでアプリが作れるんだ、と思うほど手軽にできました。

これでAndroid、iOS、Webすべてにリリースできるのは本当にすごいですね…。

Apple Watchのような特有の機能を要するものに関しては、iOS専用のswiftという言語で開発する必要があるらしいのですが、組み合わせることもできるそうです。

まずはFlutterでできるところまでを開発していきたいと思います。

次の目標は、今回作成したWebのTodoアプリのモバイル版を開発し、Webとモバイルで同じデータベースを利用することです。

Firebaseの機能でユーザーログイン機能などは容易に導入できるので、上記目標が突破できれば作りたいアプリに近づけると思っています。

動画教材を見返しながら、モバイル版Todoアプリを開発していきます!

コメント

タイトルとURLをコピーしました