Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
README.md
_config.yml
index.html
main.js
manifest.json
service-worker.js
style.css
vue-function-api.umd.js
vue.min.js

README.md

MusicTogether-public


DEMO

DEMO連結

應用技術

  • Vue.js
  • Vue.js function-based Api
  • axios
  • PWA
  • KKBOX OPENAPI
  • Youtube search api

為何做這個專案


看到六角學院副校長分享該活動覺得很有意思,最近剛好也在學習Vue.js這項技術,因此當天看了KKBOX OPENAPI的相關影片把東西生了出來。

後記:雖然Vue 3.0還沒釋出,但已經有Composition Api可以嚐鮮,因此也將整體架構改為function-based。

該專案的功能


該專案利用了KKBOX OPENAPI搜尋了所有KKBOX收錄的歌曲,提供KKBOX線上試聽的功能,若使用者還沒有KKBOX的付費會員又想聆聽完整歌曲,該專案也會提供歌曲的Youtube連結(利用Youtube search api實現)。 並且該專案使用PWA使該WEB APP能夠安裝在多個平台當中,提供接近原生的APP體驗。

注意事項


將該專案下載或是CLONE後,有幾個地方需要設定:

  1. main.js中的Youtube search api的APIKEY。

  2. manifest.json 中的網頁起始路徑。

  3. index.html中的登入連結,其連結的redirect_uri 需要先經過URL encode

針對上述兩點,提供以下連結方便使用者建置以及參考:

KKBOX Open API 的相遇 By 六角學院

KKBOX OPENAPI投影片

KKBOX DEV

YouTube Data API

PWA 說明文件

聯絡我


我的IT邦主頁

聲明


該專案內的圖片、內容等皆為個人練習使用,不做任何商業用途。

You can’t perform that action at this time.