singularitysociety/nounsmap-web

firebase-vue3-startup-kit

Purpose

This is a Start-Up kit for a Firebase web project, which uses Vue3 and firebase 9.

Requirements

• Node.js version 14 or later.

Instruction

1. Git clone this repository
2. Run "yarn global add firebase-tools" to install firebase tools.
3. Run "yarn install" once to get necessary node modules.
4. Run "yarn install" once in the functions directory as well.
5. Open the firebase console (from https://firebase.google.com) and add a project
6. From the dashboard of this project, add an app and choose "web" (</>).
7. From the setting of this app, choose "Config" (in Firebase SDK snippet)
8. Copy the config file, and paste into src/config/project.ts file.
9. Replace the word "fir-vue-startup-kit" in .firebaserc file with your Firebase project name.
10. Open the firebase console, and create a Cloud Firestore (make it "secure" for now).
11. Enable Firebase Hosting on the firebase console.

Available Scripts

In the project directory, you can run:

yarn run serve

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn run build

Builds the app for production to the dist folder.
It correctly bundles Vue in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn run deploy-dev

Build and deploy the app to the Firebase cloud. Now only deploy web assets to hosting.

yarn run format

Run Prettier, rewrite code as code formatting.

yarn test

to Run browser automated test with puppeteer and @chainsafe/dappeteer. for login with wallet, Metamask chrome-extension will be needed, and puppeteer doesn't support headless mode with chrome-extension(https://github.com/puppeteer/puppeteer/blob/main/website/versioned_docs/version-16.1.0/index.md#working-with-chrome-extensions).

** So we can use this test command for local, but cannot use for CI.

Test pre-condition

1. run yarn serve on /functions/ (this will run firebase-emulator on local, to test with same-condition )
2. edit src/config/project.ts emulator: false => true
3. run yarn serve on /(top directory). (this will serve nouns-map web with localhost:8080)
4. run you can run yarn test on /.

you can re-try, re-test step 4 only.(On 1st time to test it fails randomly,because firebase emulator took much time to preplare backend,, so please retry yarn test again, on that case.)

Firebase Hosting GitHub Action

Get that service account's key and add it to your repository as a secret

1. Create and download the new service account's JSON key
2. Add that JSON key as a secret in your GitHub repository. JSON key is FIREBASE_SERVICE_ACCOUNT_FIR_VUE_STARTUP_KIT.
3. Add firebase project id as a secret in your GitHub repository. JSON key is FIREBASE_PROJECT.

More detail: see, https://github.com/marketplace/actions/deploy-to-firebase-hosting

This is the sample site I deployed.

https://firebase-vue3-startup-kit.firebase.love/

nounsmap-web's Issues

downloadMapImage retry 追加

functions/src/functions/map/map.ts
export const downloadMapImage = async (lat,lng, zoom) => {

ネットワーク経由でとってくると思うので、retry などの処理があっても良いかも。
失敗すると、この関数が例外を投げて処理が終わりますか？
念の為検証しておくと良いです。

Pin class を別ファイルに分離する

NounsMapコンポーネントが大きくなってきているので、 PIN Classを分離する
(relate : #48)

PhotoPost 直後にTwitter でShareしたときにCardに画像が表示されない

WebからPhotoPost直後に下記のようなリンクをTwitterで記載してもOGPの表示がかきのようなじょうたいになる
https://dev.nounsmap.com/p/NyI3LsyFBabouaShmHeV

• そもそもtwitterCardが表示されない
• TwitterCardの枠はでてきてTextは表示されるが、画像が表示されない

下記のTwitterCardCheckerでは正しく表示されるので、キャッシュの問題が絡んでいると想定
https://cards-dev.twitter.com/validator

（関連情報）
firebase cloud functionのapi log を参考にすると 2486ms かかっている　これを早くすると変わるかとおもったが、、
Function execution took 2486 ms, finished with status code: 200

別のPhotoをUploadしたときも　下記のようにはやくapiの応答はかえしても cardが表示されない現象は発生した。
Function execution took 114 ms, finished with status code: 200

twitterでシェアするとき別タブで開いてほしい

PCで投稿する際の要望です。

twitterでシェアするときに、同じタブでtwitterが開くので、
別タブで開くといいかなと思いました。

[problem] iosだとheic の写真位置情報読み取りができない

症状：
iphoneのchromeや、metamask browser から写真ファイルを選択すると　
iOSの機能で位置情報をフィルタした状態でBrowserAppに渡されるので、正しい位置が表示されない。
iphoneの設定=> カメラ => フォーマット　
　高効率　だとheic になり、その場合　地点情報が取得できない
　互換性優先　　jpg になり　地点情報取得できる

補足：
iphoneで撮影した画像をicloud経由で共有し、
MacのChromeからheic 写真を選択すると　位置情報は利用できるので、heic自体には位置情報は入っている。

解決案：
以下の情報を参考にmanifest.jsonのpermission に追加する
https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API/Using_the_Geolocation_API
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json

1. permissionに追加して許可していればheic の位置情報も読み取れるか？　（読み取れれば解決）
2. permissionに追加しても読み取れない場合、　その時点のユーザー位置情報を取得する（これはpermissionに追加すればiosでも動くことは確認ずみ）

MetaMask auth implementation

implement MetaMask auth,
and make selectable twitter or MetaMask.

NFT contractAddress should be changed

Should change contract address for each Token descriptor.

https://github.com/SingularitySociety/nounsmap-web/pull/14/files#diff-700fe8f90b68d8ed29824d6efe702f7b6e98e28645de43fbe3b8a37f6c9bda0dR80

photo post 時にユーザー認証,権限folder チェック追加

functions/src/functions/photo.ts

将来的にはここでユーザのチェックなどが必要です。

etherScan API

Move etherScan API call to cloud function

heic の場合　写真NFT化で問題がおきる

original 画像uploadしたあとに、backendがわでの処理でエラーが発生する。
一度jpegに変換する等のしょりが必要

• 追記1 : type 判定をみなおす
  • #37 (comment)
• 追記2：　　下記指摘にあるようにjpeg 前提の処理になっているところをあわせて見直す　
  • #37 (comment)

[idea] 写真にwatermark追加

• WaterMarkを追加し、正当な持ち主のみ　Original画像を表示、DLできるようにする

初めての人へのUX

導入UXを整理、実装：

ユーザーがアクセスにくる経路を主に下記３パターンに分けてそれぞれのUX画面フローを検討する

• twitterのリンクから知る人が多くなると想定する（その場合はphoto_idが指定された状態）
• 紹介リンク等で、 / にアクセスする人(一定数いる）
• すでにアカウントがあり２回目以上のアクセスに来る

flowchart TB
    iniuser((initial user)) --"photo_idリンククリック"--> pid[["p/photo_id<br> ------- <br>写真強調表示"]]
    pid--"写真close & accountなし"-->guide1[["/guide1<br> ------- <br>使い方説明"]]
    guide1--"使い方close & accountなし"-->login[["/user<br> ------- <br>(accountなし)ログイン方法選択"]]
    guide1--"close & guide1表示済み"-->mapphoto
    mapphoto--"Userメニュー click"-->login
    login--"loginしない & guide1表示済み"-->mapphoto
    login--"login完了 & photoなし"-->guide2[["/guide2<br> ------- <br>(photo投稿なし)photo投稿方法説明<br>今すぐ投稿ボタン"]]
    guide2--"いますぐ投稿"-->photoup[["/upload<br> ------- <br> photose選択＆投稿"]]
    photoup--"upload完了"-->pid
    pid--"写真close & accountあり&photoあり"-->mapphoto[["/map<br> ------- <br>地図上に自分の投稿済みの写真小さく表示"]] 
    mapphoto--"写真 icon click"-->pid
    pid--"写真close & accountあり & photoなし"-->guide2
    mapphoto--"upload click"-->photoup
    iniuser --" / リンククリック & accountなし"--> guide1
    2nduser((account　user))--" / リンククリック & accountあり"-->mapphoto

背景：以下の課題が指摘された

1.パッと見て何をすべきか分からない。色々とトライして、まずは “User” をクリックしてログインすべきだと「発見」した。これは辛いです。
2,なぜ、ウクライナの写真が出ているか今でも分からない。V1では他の人の写真は見えないことになっていたんじゃないのですか？
3. ログイン後、“Choose File” で何を Choose して良いのかの説明が一切ない。私はたまたま写真を Choose すべきと知っているけど、初めての人はとまどう。

• 導線は、基本的には「Twitter で他の人の投稿を見てクリック」となる点を考慮し、そこからステップ・バイ・ステップで誘導するのが良いと思います。始めて来た人（ログイン前の人）に対しては、いきなりUIを見せるのではなく、「このサービスを使って何が出来るのか」の説明を画像付きで説明するのはどうでしょう？

firebase-tools v11 he

v10.9.2 だと　protobufのdependabot指摘に対応できないのでv11への対応、動作確認を行う

[Idea] photo NFT化

• User(wallet紐付け済み)は写真に対してNFT Token化したいものをリクエストすることができる
  • （その際）高画質画像を再up, 注意事項に同意する
• 特定の会員Tokenを持っている人はUserのリクエストを許可し、nftをmint, リクエスト元のWalletにtransferできる
• すでにNFT化された写真の一覧を見られるようにする
• OpenSesにも連携されて、写真をクリックするとOpenSeaで取引できる
• 該当写真のTokenを持っているUser(wallet 紐付け済み)は原画をDLできる

iPhoneでメタマスクのアカウントと連携できない

iOSにMetamaskのアプリを入れました。入れたらnounsmapと連携できるのかと思ったのですが、
Userをクリックすると「Please install MetaMask」のメッセージが表示されます。
連携させるにはどうしたらよいでしょうか（もしくはこれから実装でしょうか）

確認したブラウザー

• iPhone12/Safari
• iPhone12/Chrome

写真登録コンポーネントを NounsMapから分離

NounsMapコンポーネントが大きくなってきているので、写真登録に関するhtml, src コンポーネントを分離する
(relate #48 )

functions/src/functions/photo.tsのリファクタ

photo posted, nftPosted に共通点が多いのでリファクタする

osm-static-mapsの代替を検討する

functionsで 地図画像読み込みで使用しているosm-static-maps（https://www.npmjs.com/package/osm-static-maps）は
２年前で更新がとまっている。脆弱性の指摘にもあがってくる。現状、実影響がないパターンの指摘だけだが
今後代替を検討する