umetaberu

umetaberu

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

FirebaseにBMIデータを登録するIOSアプリを作る(part1)

やること

プログラミング学習の初めの時期といったらBMI計算アプリの作成はもはや登竜門のようなもの。(どうかな)

今回はシンプルにBMIを計算してFirebaseに登録するIOSアプリを作成します。

環境

Xcode: ver12.0.1

Swift5

MacOS: MacOS Catalina 10.15.7

目次
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 完成・動作確認 追記

完成イメージ図

f:id:bangbang400cc:20201203200843p:plain


 

 1.まずは画面周りから作成

UIから作成していきます。

xcodeからプロジェクトを作成します。

「Create a new Xcode project」を押下します。

f:id:bangbang400cc:20201203201234p:plain

 

 

次にAppを選択します。

f:id:bangbang400cc:20201204195457p:plain

 「ProductName」には任意のアプリ名を入れましょう。

今回はBMIの計算アプリを作成するので、「BMI_APP」という名前にします。

f:id:bangbang400cc:20201204195951p:plain

「General」画面が表示されたら今回のアプリは横画面を使用しないかつタブレットを使わないためチェックを外します。

f:id:bangbang400cc:20201204200623p:plain

  

 

f:id:bangbang400cc:20201204200822p:plain

 出来たら早速Main.storyboardに写りましょう! 

と言いたいところですが、

その前にここでどのような完成図になるのか把握するため、全体図を載せておきます。

f:id:bangbang400cc:20201204201152p:plain

全体図が掴めたら画面周りを作成しましょう。 

f:id:bangbang400cc:20201204201741p:plain

 

 操作方法として

cmd + shift + L でオブジェクトライブラリを表示させることができます。

文字列はLabel

ボタンはbuttonと入力すると出てきます。

こんな感じで次回は画面作成していきます。