الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

مخبأ

محول عنوان URL للموسيقى

تطبيق بسيط للاستمتاع بعنوان URL من مختلف خدمات بث الموسيقى وإظهار نفس المسار (عند توفره) من خدمات البث الأخرى. يمكنك رؤية العرض التوضيحي المباشر @ https://muc.anirbanmu.com/؟queries Budap/2spotify

الاستعلام معاملات

  • queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365 - param Query type type (يمكن أن يكون هناك متعددة) يمكن تمريرها كاستفسارات أولية للتطبيق.

الخدمات المدعومة

يدعم حاليًا Spotify و YouTube و iTunes/Apple Music & Deezer.

يثبت

  • تأكد من تثبيت Node & NPM
  • استنساخ الريبو
  • cd في دليل الريبو
  • npm install

الواجهة

يجب بناء الواجهة الأمامية وجاهزة للذهاب قبل أن تتمكن الواجهة الخلفية من خدمة التطبيق بنجاح.

للتنمية (سيتم بناء ، شاهد التغييرات وإعادة بناء Vue.JS Frontend): 

 npm run build-watch

للإنتاج (سوف يبني فقط): 

 npm run build

يتم وضع الملفات المدمجة في ./dist .

الخلفية

يتطلب الواجهة الخلفية تعيين مفاتيح API بحيث يمكن استخدام واجهات برمجة التطبيقات المعنية. 

 SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> [OPTIONAL]

بعد تعيين متغيرات البيئة ، يمكنك بدء تشغيل خادم الواجهة الخلفية محليًا مع: 

 npm run express

يجب أن تكون قادرًا الآن على الوصول إلى التطبيق محليًا @ http: // localhost: 8081

fly.io

التطبيق جاهز للنشر على Fly.io. ما عليك سوى إنشاء تطبيق باستخدام flyctl واستبدل <APP-NAME> في fly.toml. بعد إنشاء التطبيق واستبدال الاسم في fly.toml:

  • flyctl secrets set SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
  • flyctl secrets set SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
  • flyctl secrets set YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
  • flyctl deploy --build-secret GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> إذا كنت تريد رمز التحقق من موقع Google في الصفحة ، فقط flyctl deploy .

تفاصيل

الواجهة

معظم رمز التطبيق هو جانب العميل وهو تطبيق vue.js. هذا يتعامل مع جميع التقديم ، تحليل عناوين URL ، وتحويلها إلى خدمات أخرى.

الخلفية

يتكون الواجهة الخلفية من خادم Express Trivial That Thurse Thats الوحيد هو الحصول على بعض بيانات جانب الخادم الأولية (رموز API) وقالب تطبيق Page Vue.js المفرد حتى يتمكن بعد ذلك من التشغيل بشكل مستقل عن الواجهة الخلفية. كما أنه يخدم واجهة برمجة التطبيقات للحصول على رموز API بنفسها دون أن تتمكن الواجهة الأمامية من تحديثها بشكل دوري.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل