おーしまブログ

プログラミングやってます

【swift】ライン風チャットアプリを作ってみた

こんにちは、おーしまです。

今回は、ライン風チャットアプリを作ってみたのでご紹介します。

YouTubeの動画でFirebaseを使用したライン風チャットアプリの作り方の動画が上がっていたので、初学者の私にはちょうど良いと思って、アプリケーションの作り方の流れを勉強しようと思いました。ほぼ動画の内容を写しただけなので、自分で作ったとは言えませんが、何度かエラーが出た際には、自分で解決しました。

分かりやすいので、初学者にはおすすめです。
www.youtube.com


主な機能としては、
・ログイン機能
・チャット機能
の2つです。


まずサインアップ(新規登録)画面です。

f:id:tomo_bb_aki0118115:20210113000743p:plain


ログインしていない人は、最初にこのサインアップ画面に遷移します。
FirebaseのAuthenticationを使ってログイン機能を実装しています。画像、Eメール、パスワード、名前を入力することでログインすることができます。画像を選択し、全てのTextFieldに入力しないとRegisterボタンが押せないようになっています。すでにアカウントを持っていてログアウトした方は、下のボタンからログイン画面に遷移できます。





ログインできた人はチャットルーム選択画面に遷移します。

f:id:tomo_bb_aki0118115:20210113004203p:plain
(右上の「新規チャット」ボタンからユーザー選択画面に遷移する↓↓↓)
f:id:tomo_bb_aki0118115:20210113004112p:plain

この画面では、チャットルームを作成することができます。右上のナビゲーションボタンからユーザーを選択してチャットルームを作成し、中央のテーブルビューに表示します。セルの中には、相手の写真とユーザーネーム、最後のメッセージ、最後のメッセージの時刻が表示されます。セルを選択することで相手とのチャット画面に遷移することができます。



最後にチャット画面です。

f:id:tomo_bb_aki0118115:20210113004625p:plain

リアルタイムで送られてきたメッセージが表示されていきます。メッセージ1つ1つはTableViewで表示していて、送信したユーザーがcurrentuserであれば緑背景で画面右から表示するようになっています。






動画を見ながら、写すだけでしたがこれを作成するのに10日間ほどかかってしまいました。
ですが、これでTableView、画面遷移、Firebase、画像処理、をある程度理解することができたので、今度はシフト管理アプリを作っていきたいと思います。

今後も頑張ります。

ここはどこ おれはだれ それに近いものがあんだよ 始めようとした奴らも迷い始めてる 怖がらせないでよ そりゃ甘くはないけど まだまだ 夢見ていい世界なんでしょ {UVERwould「ハイ!問題作」}