umetaberu

umetaberu

プログラミング技術に関するメモ書き

FirebaseにBMIデータを登録するIOSアプリを作る(Part.5-1)

やること
少し間が空いてしまいましたが、FirebaseにBMIデータを登録するアプリを完結させたいと思います。

 

...はい。申し訳ありません。

テキスト形式で説明するといつの間にかブログが長くなってしまうことに気付きました。

なので、今回からもう少し章を小分けにしたいと思います。

このままだと、説明を大きく省略してしまいそうなので目次を更新しました。

更新した目次は以下のとおりです。


目次
Part1. 全体図を把握するのとプロジェクト作成まで
Part2. 画面周りを作成する
Part3. Firebase連携準備
Part.4 コードと画面を接続させる

Part.5 Firebaseへデータを登録する

 Part.5-1 ボタンとラベルをコードと紐付ける 追記

 Part.5-2 データ登録処理① 追記

 Part.5-3 データ登録処理② 追記

Part.6 Firebaseからデータを取得する 追記

 Part.6-1 ボタンとラベルをコードと紐付ける(Get編) 追記

 Part.6-2 データ取得処理① 追記

Part.7 完成・動作確認 追記

 

環境
Xcode: ver12.0.1
Swift5
MacOS: MacOS Catalina 10.15.7

 

それではFirebaseにデータを登録し、取得していきましょう。

とは言いましたが、まずFirebaseにBMIデータを登録しないとそもそも取得できません。

データを登録するところから始めます。

Firebaseへデータを登録する(Post)

ViewControllerのボタン「BMIを登録する」より[Ctrl]キーを押下しながらD&D(ドラッグアンドドロップ)で PostViewControllerへ接続しましょう。

f:id:bangbang400cc:20201213173942p:plain「Show」で紐付けます。

f:id:bangbang400cc:20201213174153p:plain

このような感じになると思います。この状態で既にボタンを押下した際に画面遷移ができると思います。

f:id:bangbang400cc:20201213174740p:plain
 右側の「ユーティリティーエリア」と呼ばれるメニューから「Presentation」の部分を「FullScreen」に変更すると画面遷移後に遷移先の画面が全画面表示になります。f:id:bangbang400cc:20201213175240p:plain

画面を確認すると、全画面表示になっていると思います。

が、今回は「Automatic」のままで進めたいと思います。

f:id:bangbang400cc:20201213175955p:plain

次は「PostViewController.swift」へコードを記述していきます。

下記画像はコメントアウトを消した状態の画面になります。

f:id:bangbang400cc:20201213180534p:plain

2画面表示にしてからボタンとラベルの紐付けを行います。

既に1つのテキストラベルの紐付けが完了しています。

f:id:bangbang400cc:20201213181517p:plain

次はボタンを紐づけていきます。同じようにD&Dです。

名前はそれぞれ

身長を入力するラベル:heightTextLabel

体重を入力するラベル:boundsTextLabel

登録ボタンの名前:registerBtn

としています。ネーミングセンスは悪いですね。実施する方は、もう少しわかり安いネームにしてください。

f:id:bangbang400cc:20201213183746p:plain

最後に登録ボタンを押下した際の動きを記述するメソッドも生成しましょう。

今度はviewDidLoadの下あたりにD&Dしましょう。

「Connection」の部分が「Action」になっていればOKです。

f:id:bangbang400cc:20201213184647p:plain

下図のようになっていれば紐付けができています。

f:id:bangbang400cc:20201213185005p:plain

今回はこんなところでしょうか? 

ブログで説明する大変さがわかりました。とても勉強になったので次回から作ったアプリの作り方を紹介する際には見積もりには気をつけたいと思います。