Androidアプリ

【プログラミング初心者向け】Swift/iosアプリとRuby on Railsで作成したwebアプリケーション間で連携させ、アプリにログイン時にインスタグラム みたいにいいね数を表示する方法!

【プログラミング初心者向け】Swift/iosアプリとRuby on Railsで作成したwebアプリケーション間で連携させ、アプリにログイン時インスタグラム みたいにいいね数を表示する方法!

インスタグラム などのSNSにログインするといいね数などを通知がありますよね?
いいねが1つでもあって、あのピンクのポップアップがあると嬉しいものです!

そこで、今回私も自分のアプリに実装したいと思い、一度この場で全体の流れ・アルゴリズムを整理して行こうと思います!

◯環境
・ios/Iphoneアプリ
言語:swift
開発環境:xcode

・Webアプリケーション
言語:ruby
フレームワーク:Ruby on Rails
サーバー:conoha vps

・既存の基本機能
ログイン機能
質問・回答機能
記事投稿・コメント機能
商品の紹介・レビュー投稿機能
それぞれへのlike(いいね)機能
ポイント付与機能(各アクションをすると付与されます)

実現したい機能・ゴール

iPhone/iosアプリ側

【ログイン時アクション】
・Iphoneアプリを開いた時、トップ画面の下にインスタグラムのようにポップアップでいいね数を知らせたい。

【タブ内に新ページ作成】
・タブバー内に「通知」ページを新規作成
・通知内にはアクション内容を一覧で表示
・アクションの一覧は未確認のやつと確認済みをわかりやすいようにUIを分ける(確認・未確認についてはwebアプリ側と同一情報を表示)
・アクションの中から気になるものをタップすると、そのページに映る
・表示するのは最新10個分
・表示するアクションは「ポイント獲得(ログインポイント以外)」「ベストアンサーに選ばれた」「いいね」「投稿にコメントがあった」

webアプリ側

【ログイン時アクション】
・通知があれば、Haderに表示
・hoverでポップアップ表示し、「最終ログイン時と今回のログインまでの間にあったいいね数」「最新の通知3件」を表示

【ヘッダーに新ページ作成】
・タブバー内に「通知」ページを新規作成
・通知内にはアクション内容を一覧で表示
・アクションの一覧は未確認のやつと確認済みをわかりやすいようにUIを分ける(確認・未確認についてはiPhoneアプリ側と同一情報を表示)
・アクションの中から気になるものをタップすると、そのページに映る
・表示するのは最新10個分
・表示するアクションは「ポイント獲得(ログインポイント以外)」「ベストアンサーに選ばれた」「いいね」「投稿にコメントがあった」

各構築概要の検討

事前作業:構築済機能への追加構築

表示するアクションは「ポイント獲得(ログインポイント以外)」「ベストアンサーに選ばれた」「いいね」「投稿にコメントがあった」、これらがアクションがあったときに通知オブジェクトの

iPhone/iosアプリ側:【ログイン時アクション】

Iphoneアプリを開いた時、トップ画面の下にインスタグラムのようにポップアップでいいね数を知らせたい。

◯タイミング
アプリを開いた瞬間=Appdelegateに処理を書く
◯表示
Viewに「いいねのPictureImage」と「いいね数を反映したTextLabel」をページ下に設置しておく。
開いて更新した際に、必要あれば表示・必要なければ非表示
◯通知有無、いいね数の獲得
(事前処理)
Appdelegateで対応
appdelegeteに通知有無のフラグを持たせる
表示用のViewを作成

(処理フロー)
「起動時:アプリ起動時、前回起動終了時間と今回起動時間の間に通知があったかサーバー側から確認」
起動

Swift:前回の停止時間とユーザーIDをサーバー側に送付

Ruby on Rails(api):前回の停止時間と今の時間の間で作成されたLikeオブジェクトのレコード・アクションの有無を取得、swift側に返す

Swift:apiのレスポンスを受け取る処理の中で、like数を取得
   if分でlike数が0以上の場合or通知がある場合は通知有無フラグをtrueに。like数をグローバル変数にセット。

通知を表示したい画面のviewwillappearでappdelegateの通知有無フラグをチェック
if分で通知有無フラグがtrueの場合、事前に準備しておいたViewをlike数を更新して表示、通知有無フラグをfalseに戻す

※非ログイン期間がわかるように、非ログインになる際にwebサーバー側に非ログイン時間を通知しておく or アプリ側に登録しておいて、ログイン時に送信する 
 今回はアプリ側に登録しておいて、ログイン時に送信する

iPhone/iosアプリ側:【タブ内に新ページ作成】

タブバー内に「通知」ページを新規作成

tableviewで作成
cellはUIをわかりやすくできるようカスタムセルを利用

通知内にはアクション内容を一覧で表示/表示するのは最新10個分

※各アクション時(「ポイント獲得(ログインポイント以外)」「ベストアンサーに選ばれた」「投稿にコメントがあった」)、通知用のオブジェクトのレコードを作成しておく
・サーバー側から、通知用に作られたデータ10個取得、最新順で表示

アクションの一覧は未確認のやつと確認済みをわかりやすいようにUIを分ける(確認・未確認についてはwebアプリ側と同一情報を表示)

通知用オブジェクトのレコードに確認済フラグを持たせておく
そのフラグに合わせて、表示のUIを切り替え
通知をクリックすると、サーバー側にIDと通知オブジェクトのIDをPost→サーバ側で該当の通知オブジェクトレコードを確認済に変更

アクションの中から気になるものをタップすると、そのページに映る

通知用オブジェクト内に「その通知の対象がどの機能(質問or記事)に対する物なのか」「どのIDに対する物なのか」を記録しておく
(表示するアクションは「ポイント獲得(ログインポイント以外)」「ベストアンサーに選ばれた」「いいね」「投稿にコメントがあった」)
タップ時はそのレコード内容に合わせて、遷移先を選択

web/Ruby on Railsアプリ側:【ログイン時アクション】

通知があればHaderに表示

Rubyのコントローラーで、前回表示時と現在の時間の間に「like」「通知オブジェクトのレコード」がないか確認
あれば、ヘッダーの通知部分にCSSを使って、通知バッチを表示

hoverでポップアップ表示し、「最終ログイン時と今回のログインまでの間にあったいいね数」「最新の通知3件」を表示

cssのhoverを用いて、情報をboxで表示する

web/Ruby on Railsアプリ側:【ヘッダーに新ページ作成】

タブバー内に「通知」ページを新規作成

新規のコントローラー・View・ルーティングを作成

通知内にはアクション内容を一覧で表示

コントローラーを新基準で取得
※表示するのは最新10個分

アクションの一覧は未確認のやつと確認済みをわかりやすいようにUIを分ける(確認・未確認についてはiPhoneアプリ側と同一情報を表示)

事前に持たせている確認済フラグの有無に合わせて、UIを切り替え

アクションの中から気になるものをタップすると、そのページに映る

確認済フラグをtrueに変更
レコード内にある情報を元に、該当のモデル・IDを開く

Web側(Ruby on Rails側)構築詳細内容:検討

新規オブジェクト

◯通知用オブジェクト
項目案
・該当ユーザーUI:integer
・該当オブジェクトの名称:string
・該当質問のID(通知したい内容が「質問のベストアンサーに選ばれた」「質問投稿によるポイント付与」「質問へのコメント投稿によるポイント付与」の場合利用):integer
・該当記事のID(通知したい内容が「記事投稿によるポイント付与」「記事へコメントを受けた」「記事へのコメント投稿によるポイント付与」の場合利用):integer
・該当商品のID(通知したい内容が「商品のレビューによるポイント付与」の場合利用):integer
・通知テキスト:text
→saveする段階で、テキスト内容を作成し、text形式で保存する

既存オブジェクト-追加項目

◯ユーザー
・最終ログインタイム(gemのdeviceを利用している人は不要)

アクション 追加機能

◯質問コントローラー
質問投稿時、ポイント用の通知インスタンスを作成するようにする

ベストアンサー時、選ばれたことの通知インスタンスを作成するようにする
ベストアンサー時、選ばれた側のポイント用の通知インスタンスを作成するようにする
ベストアンサー時、選んだ側のポイント用の通知インスタンスを作成するようにする

◯回答コントローラー
質問に対する回答投稿時、ポイント用の通知インスタンスを作成するようにする
質問に対する回答投稿時、回答受けた側の通知インスタンスを作成するようにする

◯記事コントローラー
記事投稿時、ポイント用の通知インスタンスを作成するようにする
記事に対するコメント投稿時、コメントを受けた側の通知インスタンスを作成するようにする
記事に対するコメント投稿時、コメントをした側のポイント用の通知インスタンスを作成するようにする

◯商品コントローラー
商品へのレビュー投稿時、ポイント用の通知インスタンスを作成するようにする

◯apiコントローラー(モバイル側の処理を記載)

ベストアンサー時、選ばれたことの通知インスタンスを作成するようにする
ベストアンサー時、選ばれた側のポイント用の通知インスタンスを作成するようにする
ベストアンサー時、選んだ側のポイント用の通知インスタンスを作成するようにする

質問投稿時、ポイント用の通知インスタンスを作成するようにする
質問に対する回答投稿時、ポイント用の通知インスタンスを作成するようにする
質問に対する回答投稿時、回答受けた側の通知インスタンスを作成するようにする

記事投稿時、ポイント用の通知インスタンスを作成するようにする
記事に対するコメント投稿時、コメントを受けた側の通知インスタンスを作成するようにする
記事に対するコメント投稿時、コメントをした側のポイント用の通知インスタンスを作成するようにする

商品へのレビュー投稿時、ポイント用の通知インスタンスを作成するようにする

新規アクション

◯apiコントローラー
ログイン時通知チェック用アクション
→送られて来た最終アクセス時間と現時間の間に作成されたlike&通知を取得し、モバイル側に送信

◯通知オブジェクトコントローラー
最新の通知を10個・新規のlikeを返答 
web側の表示用の処理

まとめ

基本的な処理・データ構造はこのようなところでしょうか。
自分用の考察である部分もあるため、内容はわかりにくいかもしれませんが少しでも参考になれば幸いです。