iOS – Firebaseを使ってメッセージアプリを作ってみた1

  • Posted date :
  • 2017 / 04 / 29
  • Category :
  • app

FirebaseはGoogleが運営しているBaaSです。
多機能で開発の助けになる事間違いなしです。

どんな機能があるかはこちらをご覧ください。

Firebaseを使って2文字しばりのメッセージアプリを作ってようと思います


画面の構成図です。
主な機能です。
・ユーザー登録
・ログイン
・メッセージ
今回はサンプルなので友達の追加などはなく全ユーザーでメッセージを交換するような形です。(それはそれでおもしろそう)

Firebase導入

こちらにアクセスします。
このような画面が表示されると思うのでコンソールへ移動をクリックします。 プロジェクトを追加を選択します。
プロジェクト名を入力して国を選択します。
入力と選択が完了したらプロジェクトを作成をクリックします。 僕は今回 「Nimoji」という名前にしました 🙂
プロジェクトの作成が完了すると↑のような画面が表示されます。こちらがプロジェクトの管理画面になります。

iOSにFirebaseを組み込む

iOSアプリにFirebaseを追加をクリックします。 xcodeでiOSプロジェクトを作成しbundle identifierを入力します。 bundle identifierは下の画像のところから参照できます。 入力が完了したらアプリの登録をクリックします。
GoogleService-Info.plistをダウンロードします。
GoogleService-Info.plistをドラッグ・アンド・ドロップでxcodeに追加します。
Copy items if neededにチェックを入れます。 podでFirebaseをインストールします。 インストールが終わりましたらAppDelegateに記述をします。 これでiOSへの導入は完了です。
導入が完了するとこのような画面になっていると思います。

ユーザー登録

ユーザー登録の処理を実装していきます。Firebaseを使うと簡単にできます。

Firebaseの管理画面でメールアドレスとパスワードでの認証を許可します

Authentication > メールアドレス > ログイン方法と進み、メール/パスワードをクリックします。
有効にして保存します
これでEmail/passwordでユーザー登録とログインすることができます。
Databaseのセキュリティが下記のコードのようになっているか確認しましょう。 もし、”.read”: true, “.write”: true, になっていたら誰でもデータベースの読み込みと書き込みができてしまいますので変更しましょう。

iOS側の実装

画面はこんな感じです。
‘Firebase/Auth’をpodでインストールします。 ついでに’Firebase/Database’と’SVProgressHUD’もインストールしておきます。 ユーザーの作成は FIRAuth.auth()?.createUser で行います。
以下のようなコードになるでしょうか。
ユーザーを作成した後にdisplayname(username)を変更しています。 では実際に試してみます。 成功したようです 🙂 Firebaseのコンソールにも追加されています。
これでユーザー登録の処理は完成です。簡単ですね 😉

ユーザーログイン

では、次にログインの処理です。
画面はこんな感じです。
FIRAuth.auth()?.signInでログインします。
では実際に試してみます。 先程登録したメールアドレスとパスワードを入力すると成功するはずです 🙂

ログインしていたらログイン画面を表示させない

ログインしていたらログイン画面を表示させずトップの画面に遷移させます。
AppeDelegateに以下のように記述すればログイン状態を確認し任意のViewControllerを表示させる事ができます。
ここまでがユーザー登録 / ログインまでの処理です 🙂
メッセージの処理は次回に続きます 🙂
ソースコードはこちらからダウンロードできます。

SHARE THIS POST

LIKE US! :)

  • FACEBOOK PAGE
  • TWITTER FOLLOW
  • FEEDLY

BLOG CATEGORY

WRITER PROF.

  • NAME :
  • Katsukawa
  • POSITION :
  • 代表
  • COMMENT :
  • 横浜生まれ。大分育ち。 高校卒業後、小売業の世界に進む。その後、デザイナーになるべく専門学校に入学し大分のソフトウェアの会社に入社。 デザイナーよりもエンジニアが向いていると自覚しエンジニアに転向。 2018年9月、バスケのインフラを整える為にバスケットボール会社、All Court Crossing合同会社を設立。

関連記事

WRITER PROF.

  • NAME :
  • Katsukawa
  • POSITION :
  • 代表
  • COMMENT :
  • 横浜生まれ。大分育ち。 高校卒業後、小売業の世界に進む。その後、デザイナーになるべく専門学校に入学し大分のソフトウェアの会社に入社。 デザイナーよりもエンジニアが向いていると自覚しエンジニアに転向。 2018年9月、バスケのインフラを整える為にバスケットボール会社、All Court Crossing合同会社を設立。

OTHER CONTENTS

その他のコンテンツ
  • SYSTEM
  • システム開発
  • FLYER DESIGN
  • チラシ / フライヤー デザイン