pushtape cassette

شريط كاسيت

يعد Pushtape Cassette إطارًا خفيف الوزن لإنشاء تطبيقات ويب موسيقية أفضل. أنشئ شريطًا من الموسيقى الخاصة بك وقم بعرض تطبيق ويب موسيقي كامل في ثوانٍ، مع مشغل موسيقى مستمر.

تجريبي

عن

يقوم هذا المشروع بإنشاء تطبيق ويب موسيقي ثابت يمكن دمجه مع أي عدد من تقنيات الواجهة الخلفية: الملفات المسطحة، وWordpress/Drupal، وJS Frameworks، وPython، وRuby. العنصر الأساسي الذي يدعم هذه الفكرة هو ملف cassette.json، وهو تنسيق ديسكغرافي محمول. يعمل هذا الملف كنقطة نهاية شاملة واحدة - ومن نقطة النهاية هذه، يتم استخدام جافا سكريبت لإنشاء تطبيق من صفحة واحدة باستخدام مكتبات صغيرة متنوعة.

تثبيت

• استنساخ هذا الريبو إلى خادم الويب الخاص بك
• تحقق من علامة URL الأساسية في ملف Index.html
• أضف مجلدات موسيقى جديدة داخل دليل الإصدارات وأضف ملفات تخفيض السعر داخل دليل الصفحات.
• قم بتشغيل python dub.py أو قم بتحديث cassette.json يدويًا
• قم بزيارة Index.html في متصفحك

عنوان URL الأساسي

إذا قمت بتشغيل التطبيق من دليل فرعي من جذر المستند، في ملف Index.html قم بتغيير العلامة الأساسية إلى:

  <base href="/subdirectory/" />

أو بدلاً من ذلك، قم بتحميل جميع الأصول باستخدام المسارات المطلقة.

Cassette.json

• قم ببناء cassette.json عن طريق تحرير الملف يدويًا أو تشغيل البرنامج النصي للإنشاء.

 $ cd pushtape-cassette
$ python dub.py

Dub.py

سيقوم البرنامج النصي للإنشاء تلقائيًا بإنشاء cassette.json استنادًا إلى الملفات الموجودة في دليل العمل. الغرض منه هو أن يتم تشغيله محليًا من خلال سطر الأوامر، ولكن إذا تم تكوين الخادم الخاص بك لتشغيل برامج python النصية، فيمكنك محاولة تشغيله من المتصفح أو إعداد crontab. ملحوظات:

• يقوم هذا البرنامج النصي بالبحث بشكل متكرر عبر الملفات والمجلدات الموجودة في دليل العمل ويقوم بإنشاء cassette.json بالإضافة إلى أي ملفات Tracklist.jspf ضرورية.
• يتم تخزين ملفات .jspf في _data ويتم ترك أدلة الموسيقى دون تغيير.
• يمكنك استخدام المجلدات الفرعية لتنظيم الإصدارات حسب الفنان، أي releases/artist-name/release-name
• إذا لم يتم العثور على ملف عمل فني، فسيتم استخدام الأصول/الصور/default-artwork.jpg.

عناوين URL النظيفة

إذا كنت تريد إزالة علامة التجزئة # من مسارات URL واستخدام History API بدلاً من ذلك، في ملف Index.html قم بتعيين app.settings.cleanURLs على true. لاحظ أنه يتم تشجيع تشغيل التطبيق مع تمكين History API من جذر المستند لأنه يعتني بجميع مشكلات الارتباط النسبية.

مثال ملف مسطح

ملاحظة: يمكنك تخطي الخطوتين 3 و4 إذا كنت تستخدم البرنامج النصي للإنشاء dub.py.

1. قم بإضافة صفحات ثابتة عن طريق إنشاء ملفات تخفيض السعر في الدليل /pages، ويجب أن يكون لكل ملف الامتداد .md.
2. أضف الموسيقى الخاصة بك في دليل /releases. ضع كل إصدار في الدليل الخاص به، أي /releases/release-title أو /releases/artist/release-title

• أضف ملاحظات خطية عن طريق تضمين ملف تخفيض الملاحظات.md
• أضف عملاً فنيًا من خلال تضمين ملف Art.jpg (يوصى بحجم 400 × 400)
• أضف ملفات MP3 أو اجمع قائمة بعناوين URL لملفات MP3 البعيدة (يُوصى بسرعة 128 كيلوبت في الثانية - 320 كيلوبت في الثانية باستخدام CBR MP3)

3. قم بإنشاء ملف Tracklist.jspf لكل إصدار، والذي يحتوي على ترتيب قائمة المسارات والبيانات الوصفية ومواقع الملفات (محلية أو بعيدة)
4. أنشئ cassette.json باستخدام عناوين URL لصفحاتك وموسيقاك الجديدة.
5. قم بزيارة موقعك الثابت الجديد.

تعديلات الموضوع

• يتم تنظيم CSS وفقًا لمبادئ SMACSS. يمكنك العثور على الملفات ذات الصلة بالموضوع في /assets/css.
• تم تضمين شبكة Bootstrap. لاحظ أنه في ملف Index.html، يحتوي قسم حاوية #content على فئة .container-fluid المطبقة في Bootstrap. هذا يعني أنه يمكنك استخدام فئات .row و.col-* لأي ترميز داخل هذا القسم.
• للحصول على خلفية الصفحة بالحجم الكامل، ابحث عن التعليقات داخل الأصول/css/theme/theme.css.

متقدم

Cassette.json

ملكية	يكتب	وصف
lastBuild	الطابع الزمني	طريقة لتتبع آخر مرة تم فيها إنشاء الملف أو تعديله.
الصفحات	هدف	يحتوي على أزواج المفتاح: القيمة للصفحات الثابتة على موقعك. يحدد المفتاح مسار جهاز توجيه JS من المستوى الأول، أي "حول". تحتوي القيمة على موقع URL لمستند تخفيض السعر. يمكن أن يكون عنوان URL نسبيًا أو مطلقًا. إذا كان خادمك يعرض مستندات باستخدام JSON/JSONP، فاضبط "format" : "json". إذا كنت بحاجة إلى تضمين رابط خارجي وتجاوز جهاز توجيه JS، فاضبط "النوع" : "خارجي".
الإصدارات	هدف	يحتوي على أزواج المفتاح: القيمة التي تحدد إصدارات الموسيقى المتاحة. يحدد المفتاح مسار جهاز التوجيه JS ويجب أن يكون بأحرف صغيرة بدون مسافات، أي عنوان الألبوم أو عنوان الفنان/الألبوم. ينتهي المسار الذي تم إنشاؤه بالكامل إلى الإصدار/عنوان الألبوم أو الإصدار/الفنان/عنوان الألبوم. تحدد القيمة المقابلة خصائص هذا الإصدار. كحد أدنى، يجب عليك تحديد عنوان URL لـ artifact.jpg وnotes.md (نسبي أو مطلق، ويمكن تحديد التنسيق بشكل اختياري كـ json). يجب أن تكون خاصية قائمة التشغيل مسارًا إلى ملف قائمة تشغيل JSPF صالح، والذي يحدد ترتيب المسار وموقع ملفات mp3 وأي بيانات تعريف أخرى.

إعدادات التطبيق

ملكية	يكتب	وصف
app.settings.cassettePath	خيط	افتراضيًا، سيقوم application.js بتحميل مسار cassette.json المحلي. يمكنك تجاوز المسار إلى cassette.json عن طريق تعيين هذا المتغير العام قبل تحميل application.js.
app.settings.homePage	خيط	تحدد هذه القيمة الصفحة التي يجب تحميلها افتراضيًا. يجب تسجيل المسار في جهاز توجيه JS.
app.settings.cleanURLs	منطقية	إذا كان خطأ، فسيتم استخدام التجزئة # عناوين URL. إذا كان هذا صحيحًا، فستتعامل واجهة History API مع عناوين URL النظيفة.

القضايا المعروفة:

• المسار /releases هو مسار JS محجوز يستخدم لسرد جميع الإصدارات المتاحة، وهو الصفحة الرئيسية الافتراضية.
• في بعض الحالات، لن تتمكن البيئات المحلية من تحميل الأصول البعيدة بسبب قيود الطلب عبر الأصل. قد تحتاج إلى استضافة هذه الأصول محليًا، وإلا فإن تشغيل تطبيق الويب على خادم الويب يجب أن يحل أي مشكلات. إذا واجهت مشكلات أخرى، فراجع الملاحظة حول JSONP أدناه.

القيود:

• نظرًا لأن هذا المشروع يهدف إلى تقديم تجربة مستخدم ثابتة، فمن المحتمل أن تواجه قيودًا إذا كنت تريد المزيد من الوظائف الديناميكية. يمكنك دائمًا تجربة دمج الأصول الديناميكية في عملية تخفيض السعر، أو بالنسبة إلى الأمور المتقدمة تقنيًا، يمكنك محاولة تعديل application.js ليناسب احتياجاتك.

مثال cassette.json:

 {
  "lastBuild": {},
  "pages": {
     "releases" : {},
     "about" : {"location" : "pages/about.md"},
     "shows" : {"location" : "pages/shows.md"},
     "external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
  },
  "releases": {
    "example-release": {
      "title" : "Cosmic Voyage",
      "playlist" : "releases/example-release/tracklist.jspf",
      "artwork" : "releases/example-release/artwork.jpg",
      "notes" : "releases/example-release/notes.md"  
    },
    "example-release-two": {
      "title" : "Bird Life",
      "playlist" : "releases/example-release-two/tracklist.jspf",
      "artwork" : "releases/example-release-two/artwork.jpg",
      "notes" : "releases/example-release-two/notes.md"  
    }
  }
}

المسارات الافتراضية

مسار URL	وصف
/	إذا لم يتم إدخال أي مسار، فسيتم تحميل الصفحة الرئيسية الافتراضية.
/[عنوان الصفحة]	يؤدي هذا إلى توزيع وعرض تخفيض السعر للصفحة كما هو محدد في cassette.json.
/الإصدارات	قائمة بجميع الإصدارات مع العمل الفني والاسم، مرتبطة تشعبيًا بصفحة الإصدار الفردية.
/الإصدار/[عنوان الإصدار] /الإصدار/[اسم الفنان]/[عنوان الإصدار]	يعرض جميع المعلومات الخاصة بإصدار واحد: العمل الفني وقائمة الأغاني القابلة للتشغيل والملاحظات.

استكشاف الأخطاء وإصلاحها

مشكلة	خطوات
صفحة فارغة أو CSS/JS مفقودة	تحقق مرة أخرى من عنوان URL الأساسي الخاص بك في ملف Index.html. إذا كانت لديك مشكلة في معرفة المسار الصحيح، فيمكن في بعض الأحيان استنتاج مسار الخادم باستخدام Chrome Inspector.
مشكلات الطلب عبر الأصل (لا يتم تحميل المحتوى البعيد)	عند التعامل مع طلبات عبر الأصل عن بعد، يجب إرجاع JSONP صالح ويجب تنسيق الطلبات بشكل صحيح. 1. أنت بحاجة إلى تمرير ?callback=? في عنوان URL، على سبيل المثال http://example.com/cassette.json?callback=? 2: يجب أن تكون الاستجابة من الخادم JSONP، وليس JSON العادي فقط. على وجه الخصوص، قد تنشأ مشكلات عبر الأصل عند تحميل cassette.json وjspf وnotes.md وpages.md عن بعد. وبدلاً من ذلك، يمكنك فقط تحميل جميع الأصول محليًا لتجنب الاضطرار إلى إعداد حل بديل لـ JSONP.
لا يتم فهرسة الموقع بواسطة محركات البحث	بخلاف التحقق من ملف robots.txt وأفضل الممارسات الأخرى، فهذه مشكلة معروفة في أطر العمل التي تستخدم Javascript لعرض محتوى الصفحة. الحل الأسهل هو استخدام خدمة مثل prerender.io للتخزين المؤقت وعرض صفحات HTML المعروضة. أوصي بتثبيت الرمز المميز prerender.io عبر Apache. فيما يلي ملخص لما قد يبدو عليه ملف htaccess الخاص بك (ستحتاج إلى تغيير TOKEN_VALUE وhttp://example.com لموقعك).

لماذا فعلت هذا؟

الكثير من مواقع الموسيقى ثابتة إلى حد ما ولكن لديها متطلبات واجهة أمامية صعبة. تتيح أفضل تجربة مستخدم للموسيقى تجربة استماع متواصلة للموسيقى أثناء أداء مهام أخرى مثل قراءة الملاحظات الخطية وتصفح الموسيقى الأخرى وما إلى ذلك. عادةً ما يعني هذا استخدام AJAX لإنشاء موقع CMS تقليدي/موقع ثابت أو إنشاء حل كامل من البداية باستخدام JS. وسرعان ما يصبح هذا بمثابة صداع للبناء والصيانة، خاصة على المدى الطويل. ومن خلال إنشاء إطار عمل منفصل للواجهة الأمامية، فإنه يسمح بفصل الاهتمامات بشكل أفضل ويقلل الجهد طويل المدى المطلوب لبناء الموقع وصيانته. بالإضافة إلى ذلك، من خلال الاستفادة من JSPF وcassette.json، وهو تنسيق تسجيل محمول، فإن إمكانية نقل البيانات ليست فكرة لاحقة - فهي مدمجة في التطبيق من البداية.

لماذا مكتبات JS الصغيرة؟ لماذا لا Angular و Ember وما إلى ذلك؟

لقد اخترت المكتبات الصغيرة لأن متطلبات عرض تطبيق الموسيقى الثابتة عادة ما تكون متواضعة إلى حد ما، وأردت تجنب الاعتماد على إطار عمل تطبيق صفحة واحدة (SPA) لجهة خارجية. بالإضافة إلى ذلك، لأنني استخدمت المكتبات الصغيرة، فإنه يجعل من السهل انتقاء واختيار ما تريد. على سبيل المثال، إذا كنت لا تحب نظام القوالب أو التوجيه أو مكتبات الربط ثنائية الاتجاه التي اخترتها، فيمكنك استبدالها بمكتبة/إطار عمل JS المفضل لديك.

المكتبات الصغيرة

• Navigo.js - جهاز التوجيه
• Bind.js - ربط ثنائي الاتجاه
• Marked.js - محلل تخفيض السعر
• Micromustache.js - تنفيذ فرعي لمحرك القالب {{mustache}}.
• Soundmanager2.js - محرك صوتي متعدد المنصات
• Pushtape-player.js - مشغل صفحة صوت JS قابل للتخصيص مع عناصر تحكم عالمية
• شبكة Bootstrap فقط