Ayato-kosaka / spelieve

1 stars 0 forks source link

Firebase Dinamic link を導入する #772

Closed Ayato-kosaka closed 1 year ago

Ayato-kosaka commented 1 year ago

754 と同様

Takapy1 commented 1 year ago

@Ayato-kosaka このチケットもらおうと思うんだけど、 具体的に何するチケットだったかって 書いてあったり、前回の作業の継続のメモ残ってたりする?

Takapy1 commented 1 year ago

Dynamic link使って、「しおりを共有した時にpreview 画面に飛ぶようにする」 を作るって認識で大丈夫よね? 現時点でEditに飛んでしまっているから

Takapy1 commented 1 year ago

タスク分解

フロー

方法

Dynamic Link Builder API を使用するのが良さそう?(参考) →ユーザー間で共有するリンクをアプリで動的に作成する場合に適しているそう

Ayato-kosaka commented 1 year ago

@Takapy1 ありがとうー!! めちゃめちゃ軽くだけど↓でまとめてる!

https://docs.google.com/document/d/1JQ1-RsW03Y9GRt5fD8swg_2uqtxmYrZeIoq2Du5HMM4/edit

◼︎使うライブラリ rnfirebase + react navigation ってのは決まってる

◼︎やりたいこと①(DLの参照)

https://spelieve.page.link/UAJh

を開いたらitinerary Editに飛ぶこと(もしかしたらリンク作り直した方がいいかも)

◼︎やりたいこと②(DLの作成) しおり共有ボタンでダイナミックリンクを作成すること

Ayato-kosaka commented 1 year ago

やりたいこと①,②でPBIが分かれてるって感じ

Takapy1 commented 1 year ago

@Ayato-kosaka

おけーです。確認します! ちなみにやりたいこと①の飛ばす場所はItinerary Previewだよね?

Ayato-kosaka commented 1 year ago

@Takapy1 貼ったurlのディープリンクは

https://www.spelieve.com/Itinerary/TopTab/ItineraryEdit?itineraryID=eTUHLh152sFWMNGLLwSg

だから、 Edit に飛ぶはず!

Ayato-kosaka commented 1 year ago

あ、でもこのurlだと本番環境に飛んじゃいそうだね 開発環境でやるにはどうすればいいんだろか

Takapy1 commented 1 year ago

@Ayato-kosaka ごめんやりたいこと1のユースケースが理解できてないわ

ユーザがしおりを共有したい時→やりたいこと② Copyボタンを押す→Itinerary PreviewへのDynamicリンクがコピーされる

やりたいこと1のユースケースはなにか教えて欲しい どういう場面で使うとか

Takapy1 commented 1 year ago

実装メモ やりたいこと2 →ドキュメントを参考に作成する

Ayato-kosaka commented 1 year ago

@Takapy1 例えば、インスタの投稿にリンク貼るとか! やりたいこと②も、開く時①がないと開けないから、 単純に手順が2個あるって感じ

Takapy1 commented 1 year ago

@Ayato-kosaka

理想の状態

インスタのリンク貼る時→Previewに飛ばす

  1. インスタのリンクを押す
  2. Itinerary edit Previewに飛ぶ方がいいよね?(編集させたくないから)

友達に共有する時 →Editに飛ばす

共有する側

  1. Copy button押す
  2. URLをLINEとかに貼る

共有された側

  1. リンク押す
  2. Splieveをインストール済みならアプリが開いて、Itinerary Editへ
  3. 未インストールならintall画面(app store?)に飛び、インストール後、Itinerary Editへ

754 ではPreviewに飛ばして、やりたいこと①ではEditに飛ばすってなっているけど

その違いは上記のようなどこにリンク貼るかの違いってこと?

Takapy1 commented 1 year ago

まとめメモ

変更前(現状) ただCOPY URLボタンを押すと、ただURLがコピーされるだけの状況 →Webで開かれる(モバイルアプリでURLコピーしても) モバイルとかで開かれない、アプリインストールに持ち込めない

変更後 Dynamic Linkを使用したURLがコピーされ、 モバイルアプリのインストールがされ、Previewが開かれるようにしたい

ちょっと疑問点

Takapy1 commented 1 year ago

@Ayato-kosaka 【報告】 こさがまとめてくえてた記事のLinstening for deep linkでreact navigationを使用した 設定方法についてなんだけど、 設定方法の下の方を見ると、生のXcodeでkotlin、Android StdioでJavaの設定しているから この方法では、できないのではと思った。

その代わりとして、expo のdeep linkの設定方法があって、これでいけるのではと思う

Ayato-kosaka commented 1 year ago

@Takapy1 色々連携確り出来ていなくて申し訳ない!だいぶ認識ずれてるね、、

Itinerary edit Previewに飛ぶ方がいいよね?(編集させたくないから)

Preview に飛ばすリンクをインスタに仕込む予定。 アプリ側は特に考慮は不要!

友達に共有する時 →Editに飛ばす

友達に共有するときも Preview がいいな。

共有された側 リンク押す Splieveをインストール済みならアプリが開いて、Itinerary Editへ 未インストールならintall画面(app store?)に飛び、インストール後、Itinerary Editへ

共有された側 リンク押す Splieveをインストール済みならアプリが開いて、Itinerary Previewへ 未インストールならWeb で開く

https://github.com/Ayato-kosaka/spelieve/issues/754 ではPreviewに飛ばして、やりたいこと①ではEditに飛ばすってなっているけど

その違いは上記のようなどこにリンク貼るかの違いってこと?

Previewに飛ばすが正。 やりたいこと①はあくまで、アプリのリンク受信の話。 開いたリンクがEdit ならEdit に飛ぶし、PreviewならPreview、Place なら Place に飛ぶ想定。 インスタのリンクをクリックを読み取る時→インスタに仕込むDynamic Link がPreview に遷移させるものだからPreviewに遷移する 友達に共有する時 → Copy button押す時にクリップボードに入るDynamic Link がPreview に遷移させるものだからPreviewに遷移する

WebのユーザがURLコピーした時に、共有される側はモバイルをインストールすべきか。Webで

Splieveをインストール済みならアプリが開いて、Itinerary Previewへ 未インストールならWeb で開く だから、WebのユーザがURLコピーした時はWebで開くから問題ない!

Ayato-kosaka commented 1 year ago

@Takapy1

@Ayato-kosaka 【報告】 こさがまとめてくえてた記事のLinstening for deep linkでreact navigationを使用した 設定方法についてなんだけど、 設定方法の下の方を見ると、生のXcodeでkotlin、Android StdioでJavaの設定しているから この方法では、できないのではと思った。 その代わりとして、expo のdeep linkの設定方法があって、これでいけるのではと思う

managed workflow の場合、多分どっちも使うと思うんだよね。 Expo のdeep linkの設定方法は、アプリがディープリンクを受け取るための「ドア」を設定し、 React Navigationはそのドアを通って来たディープリンクをどの「部屋」(画面)に案内するかを決定する。 これら2つのツールは一緒に動作し、ユーザーが特定のURLをクリックしたときにアプリの特定の画面を直接開くという一貫したユーザーエクスペリエンスを提供すると思うんだよね。

Takapy1 commented 1 year ago

現状 COPY button押すと https://spelieve-user.page.link/?link=http%3A%2F%2Flocalhost%3A19006%2F%2FItinerary%2FTopTab%2FItineraryPreview%3FitineraryID%3DjFYxvJGebEKLylvozBph&utm_campaign=banner がコピーされる でもブラウザで開くと、これが出る状況

Image

Takapy1 commented 1 year ago

ログに以下も表示された

[CoreFoundation] AddInstanceForFactory: No factory registered for id <CFUUID 0x600000ee0ae0> F8BB1C28-BAE8-11D6-9C31-00039315CD46
[AuthKit] No URL for Apple ID Authorization
[AuthKit] No URL for Apple ID Authorization
[AuthKit] No URL for Apple ID Authorization
[AuthKit] No URL for Apple ID Authorization
[AuthKit] No URL for Apple ID Authorization
Takapy1 commented 1 year ago

検証2

firebase にspelieveuser.page.linkドメインを作成し

https://spelieveuser.page.link/?link=http%3A%2F%2Flocalhost%3A19006%2F%2FItinerary%2FTopTab%2FItineraryPreview%3FitineraryID%3Dr85xodGMksdJ6891ujs2

解決策?

Image

log output

[UIKitCore] Background Task 10 ("GDTCCTUploader-upload"), was created over 30 seconds ago. In applications running in the background, this creates a risk of termination. Remember to call
UIApplication.endBackgroundTask(_:) for your task in a timely manner to avoid this.
debug IDB01/Itineraries read docSnap.id r85xodGMksdJ6891ujs2
[CoreFoundation] AddInstanceForFactory: No factory registered for id <CFUUID 0x6000021d67c0> F8BB1C28-BAE8-11D6-9C31-00039315CD46
[CoreAudio]   HALC_ProxyObjectMap.cpp:153    HALC_ProxyObjectMap::_CopyObjectByObjectID: failed to create the local object
[CoreAudio]      HALC_ShellDevice.cpp:2606   HALC_ShellDevice::RebuildControlList: couldn't find the control object
[UIKitCore] Background Task 260 ("APMAnalyticsMeasurementBackgroundTask"), was created over 30 seconds ago. In applications running in the background, this creates a risk of termination.
Remember to call UIApplication.endBackgroundTask(_:) for your task in a timely manner to avoid this.
Ayato-kosaka commented 1 year ago

@Takapy1 localhost になってるから、expo web したら開くのかな? わからないけど、、

Takapy1 commented 1 year ago

遷移フロー画像の Use Schemeのリンクを押せば、アプリを直接開くことが可能だった ただ、現時点ではPlaceのページに飛ばない、原因追及中

Ayato-kosaka commented 1 year ago

@Takapy1 見てみたけど、難しいなぁ、、

Takapy1 commented 1 year ago

現状

DL作成機能実装し https://spelieveuser.page.link/?link=https%3A%2F%2Fwww%2Espelieve%2Ecom%2FItinerary%2FTopTab%2FItineraryPreview%3FitineraryID%3DARMloUM8YzyuKsm1q97B&ibi=com%2Espelieve&apn=com%2Espelieve をアプリでコピーでき、 メモアプリにpasteし、押すと、 Chromeに飛び、「アプリ開きますか?」の画面が出てきて、開くと Previewに飛んでいる →うまくNagigationは動いてないか?

問題

Takapy1 commented 1 year ago

やはりNavigationはきのうしていない →理想の状態はnaviagtion.navigate(コンポーネント名)で一っ発で飛べること

Takapy1 commented 1 year ago

現状

アプリインストールしている端末で実験

  1. URLコピー
  2. メモ帳などに貼り付け
  3. アプリ内のPreviewページに飛ぶ

アプリインストールしてない端末で実験

  1. URLコピー
  2. メモ帳などに貼り付け
  3. WebのPreviewページに飛ぶ

⚠️Webでの動作確認ではinternal distrubutionで作成したしおりはWebでは見れないので、 ページが映るまでの確認はできない

Ayato-kosaka commented 1 year ago

@Takapy1 すげー完璧じゃん!! Webが見れないのはバージョンがずれてるから! 今回のリリースで治るはず!

Takapy1 commented 1 year ago

@Ayato-kosaka ごめんメモのつもりだったから、まだメンションしてなかった。 LINEで共有してもアプリで開かれないのはこれ仕方ないのか。。。

Ayato-kosaka commented 1 year ago

@Takapy1 なんでだろ、、