原本之前說八月底要上線，結果東拖西拖還是弄到了八月第二週，不過總算可以把主流程給跑完了，接下來主力就放在製造簡報和錄影片，寫文章的當下剛好收到來自主辦方的訊息說要安排 Meeting 來介紹這個 Project。

遭遇問題與解決

這一段比較多在處理問題，下面就來分享一下遇到的幾個問題，不過因為解決完了所以就沒有副圖片。

Deta 可能有超時問題

在第一篇和第二篇都有說到用 Deta.sh 來代理使用者上傳到 NFT.storage，實際用過覺得確實不錯用，但在應用後發現有個問題：Timeout。Deta.sh 有一個 Request 必須在 10 秒內處理並回傳，否則會被砍掉的限制，但因為整個的流程 1. 使用者上傳到代理伺服器、2. 代理伺服器上傳到 NFT.storage，因此 10 秒滿容易炸掉的。

後來採用的解法是改用 Heroku，雖然 Deta.sh 可以申請增加到 20 秒，但不是很想聯絡（畢竟還沒驗證），而且 20 秒可能還是太少。Heroku 提供 30 秒，雖然也只多十秒但應該也算足夠了。不過 Heroku 的缺點是免費版的 Custom Domain 不能掛 SSL，對於有 SSL 強迫症的我就只能用他們給的 Domain 了，但也還好。

在之後，應該會考慮繼續使用 Heroku 或者轉到 Digital Ocean 的 App Platform，後者要研究但我還滿感興趣的。這兩個如果我沒記錯都是直接上傳 Code 就可以，主要考量是降低管理 Server 的成本。

SVG 遠端圖片載入問題

這個 Project 主打的就是 SVG 當樣板去套資料進去，但後來遇到兩個問題，首先遇到的是 <img> 似乎沒辦法讀到遠端的圖片，也就是會讓原本應該有圖片的地方變成空的，這問題不難解決，只要先把 <img> 的遠端資料轉換成 Data URL 就可以。這時就遇到第二個問題：如果遠端圖片的伺服器不支援 CORS 請求，就沒辦法透過 Canvas 來轉換。

這邊先往細講如何把 https://.../....png 轉換成 data:image/png...，由於後者在 SVG 的 <image> 可以使用並且能正常被 HTML 的 <img> 讀取，所以會解決前面第一個問題。做轉換時，目前大多數的作法是開一個 <img>，然後讓他讀取 HTTP 的圖片，讀完後再開一個 <canvas> 並把圖片畫上去，最後再用 <canvas> 的 .toDataURL() 得出結果。

在畫的過程，如果圖片不是 anonymous，那這張 <canvas> 就會被視為 insecure，後面的 toDataURL() 就無法呼叫，因此必須讓 <img> 帶上 cross-origin="anonymous" 來告訴伺服器不需要提供非匿名資料，而伺服器則需要提供 Access-Control-Allow-Origin 來告訴瀏覽器哪些 Domain （Origin）可以讀取，如果沒提供的話，瀏覽器會基於安全理由阻止這個 Request，因此就出現了前面的問題。

目前這個的解法是不解決，直接說無法讀取，再之後的開發或許可以用 Proxy 來處理。

錯誤處理

其實這不太算問題，就只是當初都假定使用者會用正流程去操作，所以錯誤處理就是不處理，在這段時間就把這些錯誤給包裝起來，然後跳出錯誤訊息讓使用者知道發生什麼了而已。

改動

改名為 VariaNFT

先前原本說要叫做 Memberory，但後來覺得這個名字的局限性太重，就改做 VariaNFT。最主要考慮是 NFT 要在名稱內，其次覺得 Variant（變種）和這個 App 滿搭的（？），就把後面 nt 插一個 F 進去變 NFT。不過壞處就是 Facebook 的粉專名稱就沒辦法用了。

其實這個改動好像上次就做了，但好像忘了寫進去，就在補寫一下。

不額外做 Tour

原本說要用 Reactour 來做，但想想發現好像幫助不大，所以就獨立出去變成 https://docs.varianft.studio 。

使用 Messenger 而非 Freshchat

雖然 Freshchat 好像滿好用的，但考量到我有點懶得去開那麼多平台，就還是用 Facebook 的 Messenger 來做而已。

接下來

到送交還有大約 20 天的時間，這週五（8/13）可能安排 Meeting 先來簡單介紹，並在這之前把文件寫好一點。下週五（8/20）前把簡報做好，再下週就把影片生出來這樣。