Topics

Reportreport

​​IT素人が作るチャットアプリpart1

「エンジニアが集まる・活躍する・成長する街、福岡」の実現を目指し、2019年8月に誕生したエンジニアカフェ。

エンジニアの育成・成長・交流を促進するさまざまなイベントを開催し、エンジニアが活躍できる環境づくりをサポートしています。

 

今回は、2021/10/02に開催されたエンジニアカフェ主催の「​​IT素人が作るチャットアプリ(part1)」をご紹介。イベント当日の模様をお届けします!

 

イベントで使用した機材・ソフトウェア

・MacBookAir(M1チップ搭載)

・Flutter(モバイルアプリフレームワーク)

Flutterの環境構築方法(M1mac)はこちら

How to make an application even for an IT amateur in just 1 hour!! (flutter) [Flutterの環境構築方法(M1mac)]

 

今回の内容

  1. Flutterの新規プロジェクト作成
  2. Firebaseの設定
  3. FlutterプロジェクトにFirebaseの設定を書き込む
  4. パッケージのインストール
  5. 認証機能を入れてみる

当日の流れ

細かい手順は記事の最後に貼ってある当日の動画内で説明していますので、興味のある方はそちらをご覧ください

新規プロジェクト作成

AndroidStudioを起動し、Flutterプロジェクトを作成していきましょう。今回はプロジェクト名をchatappとしています

Firebaseの設定

基本、チャットアプリはサーバーを介して人と人がコミュニケーションを取れるようにしています。ここでサーバーを用意する必要があるのですが、今からチャット用のサーバーを用意し、バックエンドをガチャガシャするのは気が遠くなります… そこでサーバーレス開発ができるFirebaseを利用します。Firebaseは認証機能、データベース機能、データストレージ機能などさまざまな機能を用意してくれています。Firebase を使えば爆速で最高なアプリを誕生させることができるでしょう!

Firebaseのプロジェクトを作っていきます。

プロジェクト名を設定…

全ての設定が終わったら、続いて認証設定・データベース設定を行なっていきます。

認証設定の設定(今回はメールアドレスを使用)

データベース設定

ここでFirebaseの設定は終了

 

FlutterプロジェクトにFirebaseの設定を書き込む

では作成したFlutterプロジェクトでFirebaseが動かせるように設定していきましょう!

Androidの設定

Firebaseホームページからgoogle-services.jsonファイル(FirebaseのAPI的なもの)をダウンロードし案内に従って挿入

上記のファイルを使用できるようにFirebaseホームページの案内に従って編集

iOSの設定

Firebaseホームページからgoogle-services-info.plistファイル(FirebaseのAPI的なもの)をダウンロードし案内に従って挿入

コマンドラインからpod install を実行

 

パッケージをインストール

pubspec.yamlにそれぞれのパッケージを以下のように記載

変更を保存したらflutter pub getをコマンドラインで走らせる。エラーが出なかったら成功!

 

 

認証機能を入れてみる

まずFirebaseとやりとりができるようにmain関数にFirebase.initializeApp()を加えます。

続いてログインボタンを以下のように作成

デバックすると以下のようにスマホ画面にログインボタンが生成されました!

このボタンを押してみましょう。すると以下のようにFirebaseのコンソールからログインされたことが確認できます。

 

今日はここまで

次回では認証認可の状態を管理する「Riverpod」について解説いたします。

このイベントの動画はこちら

 

※その他イベント参加などエンジニアカフェへのお問い合わせは以下まで

■Engineer Cafe 公式アカウント
webサイト
connpass
Facebook
Twitter
オンラインエンジニアカフェ(Discord)

■エンジニアカフェ運営事業者
特定非営利活動法人AIP(理事長 本田 敬吉·博多区博多駅東1-17-1 4F)
株式会社サイノウ(共同事業者)(代表取締役 村上 純志·福岡県福岡市中央区大名2-6-11 1F)

SHARE ON