search

3dw / auto20-next

auto20-next
https://we.alearn.org.tw/
MIT License
4 stars 1 forks source link

auto20-next和we.alearn.org.tw將合併 #174

Closed bestian closed 3 weeks ago

bestian commented 1 month ago

@leechiuhui 最近促進會在搬網路的虛擬主機至CloudFlare, 對本專案的影響如下：

leechiuhui commented 4 weeks ago

@leechiuhui 最近促進會在搬網路的虛擬主機至CloudFlare, 對本專案的影響如下：

  • [x] 可以改成History Mode, 不必再用Hask Mode的路由了
  • [ ] auto20-next和we.alearn.org.tw將合併, 故未來的測試中功能僅在localhost進行, 不再適合build出來了

@bestian 老師，根據以上兩個Task內容，我想詢問以下幾個問題：

  1. 想問：是不是因為自主學習促進會網頁 https://www.alearn.org.tw/ 只能用 History Mode，所以只能搬到CloudFlare而不能用Github Pages(而Github pages不支援 History Mode)的緣故，所以auto20-next（https://auto20-next.pages.dev/） 和 we.alearn.org.tw才要合併呢？

  2. 若未來的測試中功能僅在localhost進行, 不再適合build出來，可是有些功能好像要build出來，或是 deploy出來才能測試耶...?例如有些功能必須要用“手機”測試結果，如果只有localhost這個網址就不能在手機上測試..不知對嗎？或是例如這次的 riv 動畫檔案，好像在localhost也無法show出，我是在https://we.alearn.org.tw/ 測試，才show出riv動畫的（但也可能是我還不甚理解的關係.......）

另有一個額外的問題：就是之前若只是build出來沒有deploy時，auto20-next（https://auto20-next.pages.dev/） 這個網址不知是否因為對新build出的程式更新的很慢.....?我常常不知道到底現在在 auto20-next（https://auto20-next.pages.dev/） 這個網址測試的是新程式還是舊程式；但若是用deploy後gh-pages更新的就很快，且通常也在下圖github pages可以看出已經是用更新過的程式碼 在運作了，比較好確認測試的內容是新的還是舊的.....其實這個我也不知理解的是否正確（其實蠻想問：是只要執行 yarn build指令後，就可以更新 Cloudflare了嗎？還是需要 upload build後的新程式碼到github master 程式碼中才算是更新了cloudflare 也就是https://auto20-next.pages.dev/ 的程式碼了呢？）🌹

截圖 2024-09-09 晚上8 12 25
leechiuhui commented 4 weeks ago

By the Way補充：昨晚竟然看到自學2.0 we.alearn.org.tw 在9月5日有新的小夥伴 升起旗幟 ，YA~撒花~~~🎉....再補充，剛才看到，9月9日今天竟然有另外兩個夥伴更新....再撒花～😄🍺

bestian commented 3 weeks ago

@leechiuhui 最近促進會在搬網路的虛擬主機至CloudFlare, 對本專案的影響如下：

  • [x] 可以改成History Mode, 不必再用Hask Mode的路由了
  • [x] auto20-next和we.alearn.org.tw將合併, 故未來的測試中功能僅在localhost進行, 不再適合build出來了

@bestian 老師，根據以上兩個Task內容，我想詢問以下幾個問題：

  1. 想問：是不是因為自主學習促進會網頁 https://www.alearn.org.tw/ 只能用 History Mode，所以只能搬到CloudFlare而不能用Github Pages(而Github pages不支援 History Mode)的緣故，所以auto20-next（https://auto20-next.pages.dev/） 和 we.alearn.org.tw才要合併呢？

不是，是因為History Mode的網址列沒有奇怪的#符號，使用者會覺得比較自然。加上CloudFlare Pages和CloudFlare本身的自訂域名可以自動整合，不需要再透過gh-pages

  1. 若未來的測試中功能僅在localhost進行, 不再適合build出來，可是有些功能好像要build出來，或是 deploy出來才能測試耶...?例如有些功能必須要用“手機”測試結果，如果只有localhost這個網址就不能在手機上測試..不知對嗎？或是例如這次的 riv 動畫檔案，好像在localhost也無法show出，我是在https://we.alearn.org.tw/ 測試，才show出riv動畫的（但也可能是我還不甚理解的關係.......）
  1. 手機測試可以用chrome的開發者模式來模擬手機介面和觸控事件
  2. riv檔在localhost無法呈現應該是路徑的問題

把有localhost:9091和#的路徑(因為每次serve時的port不一定是9091, 它會從8080往上加)改為 相對路徑"./vehicles.riv" 或這個相對路徑"/vehicles.riv" 其中之一應就可以了

另有一個額外的問題：就是之前若只是build出來沒有deploy時，auto20-next（https://auto20-next.pages.dev/） 這個網址不知是否因為對新build出的程式更新的很慢.....?我常常不知道到底現在在 auto20-next（https://auto20-next.pages.dev/） 這個網址測試的是新程式還是舊程式；但若是用deploy後gh-pages更新的就很快，且通常也在下圖github pages可以看出已經是用更新過的程式碼 在運作了，比較好確認測試的內容是新的還是舊的.....其實這個我也不知理解的是否正確（其實蠻想問：是只要執行 yarn build指令後，就可以更新 Cloudflare了嗎？還是需要 upload build後的新程式碼到github master 程式碼中才算是更新了cloudflare 也就是https://auto20-next.pages.dev/ 的程式碼了呢？）🌹

yarn build 之後commit, push就會更新CloudFlare Pages了，因為它會先觸發CloudFlare的全球部署動作，所以通常要等1分鐘才會上線。 如果要即測，最好是在localhost全部測完，再一次push。

以上希望開發習慣的改變不會產生太大的困擾

bestian commented 3 weeks ago

By the Way補充：昨晚竟然看到自學2.0 we.alearn.org.tw 在9月5日有新的小夥伴 升起旗幟 ，YA~撒花~~~🎉....再補充，剛才看到，9月9日今天竟然有另外兩個夥伴更新....再撒花～😄🍺

@leechiuhui 正好是因為有新的人上來，觀察了一下用戶體驗，所以開了這個新的議題，請看一下

176

bestian commented 3 weeks ago

問了一下ChatGPT 可以用本地伺服器當手機和電腦的同一個網路之下就可以用真的手機來測試

你可以使用真實手機來測試你的網站，而不只依賴 Chrome 開發者模式。方法如下：

  1. 本地網路測試 (Local Network Testing)：

    • 確保你的手機和開發的電腦在同一個 Wi-Fi 網路上。
    • 在本地開發時，將你的 Vue 開發伺服器啟動於電腦的 IP 地址上，而不僅是 localhost。
    • 例如，假設你的電腦 IP 是 192.168.1.100，啟動 Vue 開發伺服器時，可以指定該 IP，如： 
      vue-cli-service serve --host 192.168.1.100
    • 然後在手機的瀏覽器上輸入 http://192.168.1.100:8080，這樣手機可以直接訪問你的本地開發環境。

  2. 使用 Cloudflare Pages 預覽功能：

    • 如果你已經將專案部署到 Cloudflare Pages，你可以利用他們提供的預覽連結，這樣你可以在手機上打開這些預覽版本來進行測試。

  3. 端口轉發 (Port Forwarding)：

    • 如果你的本地開發環境需要通過 USB 連接來測試手機，可以考慮使用端口轉發工具來將本地服務轉發到手機上測試。
leechiuhui commented 3 weeks ago

以上謝謝老師清楚說明，了解了。🫡

只有一小點： 「把有localhost:9091和#的路徑(因為每次serve時的port不一定是9091, 它會從8080往上加)改為 相對路徑"./vehicles.riv" 或這個相對路徑"/vehicles.riv" 其中之一應就可以了」

—》 我會再測試一下，因為我記得那天是有先使用相對路徑，但不work，且看到這裡 https://stackoverflow.com/questions/71006532/rive-animation-in-vue-js-use-riv-file-from-assets 有人也有相同狀況。image 🌹

leechiuhui commented 3 weeks ago

AHaha.....實在不好意思💦，剛剛回到電腦前在localhost 測試./vehicles.riv這樣，真的就可以了，Thanks Teacher~