Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby
Code

إنشاء تطبيق بسيط موسيقى الجري مع روبي على القضبان

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Ratnawati (you can also view the original English article)

يعد Amazon S3 طريقة رائعة لتخزين الملفات ، ولكن تعلم كيفية دمجها في موقع الويب الخاص بك يمكن أن يكون تحديًا. في هذه المقالة ، ستتعلم كيفية دمج Amazon S3 و Ruby on Rails من خلال إنشاء تطبيق بسيط لتدفق الموسيقى.


ما هو وكيف يعمل؟

Amazon S3 هو "تخزين للإنترنت"

وكما يقول موقع Amazon الإلكتروني ، فإن Amazon S3 هو "تخزين للإنترنت". ليس فقط أنها غير مكلفة ، بل هي أيضا سريعة وموثوقة. إنها طريقة رائعة لعرض المحتوى على موقعك الإلكتروني ، بما في ذلك الصور ومقاطع الفيديو أو أي شيء تريده تقريبًا. لا يعمل Amazon S3 تمامًا مثل التخزين على جهاز الكمبيوتر ، لذلك إليك بعض الأشياء التي يجب عليك معرفتها:

  • مع Amazon S3 ، تسمى المجلدات "دلاء" والملفات تسمى "الكائنات".
  • يتم استخدام جرائد في المستوى الأعلى لتحديد عنوان URL للوصول إلى بياناتك ، بحيث يمكنك فقط استخدام الأسماء التي لم يتم التقاطها بالفعل.على سبيل المثال ، إذا كان شخص ما قد أنشأ بالفعل مجموعة بيانات من المستوى العلوي تحمل اسم "مقاطع الفيديو" ، فلا يمكنك استخدام هذا الاسم.
  • أنها لفكرة جيدة أن يكون دلو الأعلى مستوى واحد مع الاسم موقع الويب الخاص بك، واستخدام مستويات فرعية من الدلاء إلى ملفات منفصلة إلى أقسام مختلفة، مثل الصور أو ملفات الفيديو أو الموسيقى.

قبل أن نبدأ...

قبل المتابعة مع هذا البرنامج التعليمي، وهناك عدد قليل من الأشياء الرئيسية التي يجب أن تكون موجودة:

  • تم تثبيت مترجم Ruby و RubyGems على جهاز الكمبيوتر الخاص بك ، بالإضافة إلى جوهرة Rails
  • معرفة (أو على الأقل الوصول إلى) معرف مفتاح الوصول الخاص بك ومفتاح الوصول السري للأمازون S3
  • فهم أساسي لروبي على القضبان

ما علينا سوف يكون بناء

المنتج النهائي لهذا البرنامج التعليمي بسيط موسيقى الجري وتحميل التطبيق. في هذا التطبيق، وسوف يكون المستخدم قادراً على القيام بما يلي:

  • عرض قائمة بكافة من الموسيقى تم تحميلها حاليا وتحميل الموسيقى نفسها
  • قم بتنزيل الموسيقى بعدة طرق ، بما في ذلك بثها بصوت HTML5 ، أو تنزيلها عبر HTTP ، أو تنزيلها عبر ملف .torrent

بحلول الوقت الذي اكتمل فيه هذا التطبيق ، ستتعلم جميع الموضوعات الرئيسية التي تحتاج إلى معرفتها حول استخدام Amazon S3 في تطبيق Ruby on Rails الخاص بك.


دعونا نبدأ!

تسمح لك الأحجار الكريمة aws-s3 بالتفاعل مع خدمة Amazon S3 في تطبيقك.

أول شيء فعله هو تثبيت الأحجار الكريمة aws-s3 ruby. تتيح لك الأحجار الكريمة التفاعل مع خدمة Amazon S3 في تطبيقك. للقيام بذلك ، إذا كنت تستخدم Windows ، فقم ببساطة بتشغيل الأمر:

بعد تثبيت ذلك ، قم بتوليد تطبيق Rails الخاص بنا باستخدام الأمر التالي:

الخطوة الأخيرة لبدء تشغيل التطبيق الخاص بك هي الانتقال إلى دليل mp3app / العام وحذف الملف المسمى "index.html". بمجرد اكتمال ذلك ، يكون تطبيقك جاهزًا لبدء التفاعل مع Amazon S3!


تسجيل الدخول إلى Amazon S3

يسمح لك مفتاح الوصول الخاص بك ومفتاح الوصول السري بالاتصال بـ Amazon S3.

كي نتفاعل مع Amazon S3 ، نحتاج إلى إخبار تطبيقنا كيفية تسجيل الدخول إلى Amazon S3. هذا هو المكان الذي يكون فيه مفتاح الوصول الخاص بك ومفتاح الوصول السري في متناول اليد. يسمح لك مفتاح الوصول الخاص بك ومفتاح الوصول السري بالاتصال بـ Amazon S3. ولكن أولا ، نحن بحاجة إلى إخبار طلبنا بأننا نستخدم الأحجار الكريمة aws-s3 . نحن نفعل ذلك في Gemfile :

للسماح لتطبيقنا باستخدام هذه الأحجار فعليًا ، ستحتاج إلى كتابة command bundle install . الآن بعد أن تعمل ، نحن بحاجة إلى إخبار تطبيقنا كيفية تسجيل الدخول إلى Amazon S3. ونفعل ذلك أيضًا في ملف config/application.rb ، في سطر جديد داخل فئة التطبيق:

يخبر هذا الكود التطبيق لدينا لإنشاء اتصال إلى Amazon S3 بمجرد بدء تشغيل التطبيق (يتم تحميل ملف application.rb عند بدء تشغيل التطبيق الخاص بك). النهائية التي تحتاج إلى إضافتها إلى ملف التطبيق أمر واحد ثابت بقيمة دلو التي سيتم استخدام. والسبب في ذلك هو أنه إذا من أي وقت مضى نحن بحاجة إلى تغيير دلو التي نستخدمها، فإنه فقط يحتاج إلى تحديث في هذا الموقع واحد. يجب أن يبدو مثل هذا:

لهذا البرنامج التعليمي ، قررت أن أذكر اسم دلو s3tutorialmusic ، ولكن يجب استبداله مع أي دلو موجود في حسابك. في النهاية ، يجب أن يبدو ملفك مثل هذا (ولكن مع معلومات تسجيل الدخول الخاصة بك):


إنشاء وحدة تحكم

والآن وأخيراً يمكننا أن نبدأ العمل على جعل تطبيق لدينا فعلا عرض شيء في المستعرض. للبدء، دعونا إنشاء وحدة تحكم ووجهات النظر التي سنحتاج إليها. الآن يمكننا أخيرا أن نبدأ العمل على جعل تطبيقنا يعرض في الواقع شيئا في المتصفح. للبدء ، دعنا نولد جهاز التحكم والمشاهدات التي سنحتاج إليها. في المجموع ، سنقوم بإنشاء ثلاثة إجراءات لوحدة التحكم الخاصة بنا (والتي سنطلق عليها الأغاني): index, upload delete .

  • سيكون الإجراء مؤشر الصفحة الرئيسية.
  • يتمثل إجراء التحميل في تحميل موسيقى جديدة على Amazon S3 ، لذلك لا يحتاج إلى عرض.
  • وأخيراً، إجراء الحذف لن يكون لها رأي، وسوف تكون مسؤولة عن حذف الموسيقى.

وفي النهاية، هو طريقة العرض الوحيدة التي سنحتاج إليها لهذا التطبيق عرض مؤشر، نظراً لأنها ستكون بمثابة لوحة تحكم مركزية لكل الإجراءات التي يمكنك القيام بها. الآن، سوف نجمع كل ذلك في عبارة واحدة لطيفة من سطر الأوامر:

بمجرد الانتهاء من التشغيل ، قم بحذف المشاهدات التي تم إنشاؤها upload delete ، لأنه لن يتم استخدامها. دعنا ننتقل لكتابة الرمز الخاص بفهرسة الإجراء!


تعمل على عمل الفهرس

في عمل الفهرس، والمنتج النهائي سيتم السماح للمستخدمين بتحميل الموسيقى الجديدة وحذف الموسيقى الموجودة. ليس هناك أي شيء يجب القيام به في ملف وحدة التحكم هذا الإجراء لتحميل الموسيقى الجديدة، ولكننا نحتاج إلى قائمة الأغاني الحالية بغية السماح للمستخدمين بحذفها.

أولاً ، نحتاج إلى الحصول على كائن يشير إلى مجموعة الموسيقى الخاصة بنا (تذكر أن اسم هذا الدلو مخزن في BUCKET المستمر). هنا كيف نفعل ذلك:

لكي نستخدم الطرق المتاحة في الأحجار الكريمة aws-s3 ، نحتاج إلى إخبار مترجم Ruby بأننا نريد البحث عن الوظائف في مساحة الاسمAWS::S3 ، وهذا هو السبب في ذلك جزء من استدعاء الأسلوب.   تحتوي فئة Bucket على جميع الطرق المتعلقة بالتلاعب بالمجموعات. وأخيرًا ، تقبل طريقة find معلمة واحدة ، واسم مجموعة البيانات ، وتُرجع كائنًا يشير إلى هذا الدلو. الآن بعد أن أصبح لدينا دلو ، دعنا نحصل على جميع أغراضه من خلال القيام بذلك:

تقوم طريقة objects بإرجاع التجزئة مع أسماء كل الكائنات في تلك المجموعة. وأخيراً، نحن بحاجة إلى تخزين نتيجة لذلك استدعاء الأسلوب في متغير مثيل بحيث يمكننا استخدامه في رأينا. وفي النهاية، وهذا ما سيبدو الإجراء index:


الاستمرار عرض المؤشر

الآن نحن بحاجة إلى جعل طريقة العرض للمستخدم لتحميل وحذف الموسيقى. دعونا نبدأ مع وقت لاحق، وإنشاء قائمة غير مرتبة من كافة الكائنات التي تم تحميلها حاليا، مع ارتباط بحذف هذا الكائن. يمكننا أن نفعل ذلك مثل ذلك:

  • أولاً، نحن إنشاء قائمة غير مرتبة.
  • بعد ذلك ، نتعامل مع جميع الأغاني في متغير @songs باستخدام كل طريقة.
  • لكل أغنية، إنشاء عنصر قائمة، وبناء النص الذي سيظهر لكل بند. الجزء الأول هو مفتاح الأغاني، لأن كل أغنية تجزئة، وهو المفتاح لأن التجزئة اسم الأغنية.
  • ثم نضع رابط لإجراء الحذف، حيث يمكن حذف الأغنية. لعنوان url، نستخدم استعلام من سلسلة أحرف في النهاية لمعرفة الإجراء حذف الأغنية التي تحتاج إلى حذف.
  • وأخيراً، لدينا رسالة تأكيد لتحذير المستخدم قبل أنهم فعلا حذف الأغنية.
  • أولاً، نحن تحقق للتأكد من أنه تم تحديد المعلمات الأغنية.
  • وإذا كانت، ثم نستخدم أسلوب بحث للحصول على الكائن الذي يمثل تلك الأغنية.
  • أخيرا، نحن نستخدم أسلوب الحذف لحذفه من الأمازون S3.
  • وبعد ذلك، نحن بحاجة إلى إعادة توجيه المستخدم إلى صفحة جديدة نظراً لأن إجراء الحذف لا رأي. ومع ذلك، إذا تم تحديد المعلمة الأغنية ابدأ، نحن فقط تقديم النص "تم العثور على لا أغنية لحذف!".

السماح للمستخدم تحميل الموسيقى

الآن، نحن بحاجة إلى الواقع تسمح للمستخدم بتحميل الموسيقى، لأنها واحدة من القطع الأساسية للأداء الوظيفي لهذا التطبيق. أولاً، نحن إنشاء نموذج بسيط يسمح للمستخدم باختيار ملف لتحميله. يمكننا أن نفعل ذلك مثل ذلك:

ونحن إنشاء نموذج التي تدفع إلى عمل تحميل، وهو الإجراء الذي ينفذ فعلا التحميل إلى S3 الأمازون. نحن نستخدم متعدد الأجزاء ووظيفة لأن نقدم الملفات. بخلاف ذلك، هذا النموذج بسيطة جداً وسهلة الفهم، حتى الآن يمكننا الانتقال إلى تنفيذ الجزء المراقب المالي من هذا العمل.


إرسال الملف إلى الأمازون S3

نحن بحاجة إلى أخذ الملف الذي تم إرساله وإنشاء كائن جديد S3، الذي سيتم تنفيذه في تحميل العمل. يمكننا أن نفعل ذلك مع هذا السطر من التعليمات البرمجية:

وهناك الكثير يحدث في هذا سطر واحد من التعليمات البرمجية، حيث سأشرح كل جزء على حدة.

كالعادة ، ندخل إلى AWS::S3::S3Object أجل التفاعل مع الكائنات على Amazon S3.

نستخدم أمر store لتحميل الملفات بالفعل إلى S3. تحدد المعلمة الأولى ما يتم استدعاء الملف. نستخدم المعلمة original_filename للملف الذي تم تحميله لهذا حتى يبقى الاسم كما هو. أما بالنسبة لطريقة sanitize_filename ، فسيتم شرح ذلك في الفقرة التالية. المعلمة الثانية هي بيانات الملف الفعلية ، والتي يتم الحصول عليها من استدعاء طريقة القراءة في الملف الذي تم تحميله. تحدد المعلمة الثالثة الدلو الذي سيتم استخدامه ، ويحدد الرابع من يمكنه الوصول إلى الملف. نظرًا لأننا نريد أن يتمكن الجميع من قراءة الملف (الذي يتضمن التنزيل) ، فإننا نحدد الوصول كـ:public_read.

طريقة sanitize_filename هي الطريقة التي استخدمها العديد من الأشخاص والمكونات الإضافية ، مثل attachment_fu ، ويتم استخدامها لحل مشكلة في Internet Explorer (صدمة ، أليس كذلك؟). بدلاً من إعطاء اسم الملف عند استدعاء الأسلوب original_filename ، يقوم IE بإعادة المسار بالكامل إلى الملف ؛ على سبيل المثال ، إذا كان الملف الذي نريد تحميله يدعى mysong.mp3 ،  بدلاً من ذلك علىC:\rails\mp3app\mysong.mp3 عندما نسميه original_filename .  يمكننا إصلاح هذا عن طريق إضافة التعليمة البرمجية التالية إلى نهاية وحدة التحكم:

خطوتنا الأخيرة في إكمال إجراء التحميل هي إضافة بعض طرق التحقق من الأخطاء والطرق. الطريقة التي تقوم بها التحقق من الخطأ في روبي هي معbegin...rescue...end بيان  . أشياء كثيرة يمكن أن تذهب الخطأ عند تحميل ملف، وبعد ذلك التحقق من الخطأ وسوف يمنع المستخدم من رؤية رسالة إعلام بخطأ أن القضبان من شأنه أن يولد تلقائياً. هنا هو نسخة معدلة من عمل تحميل:

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


توجيه التطبيق الخاص بنا

ربما لاحظت أنه خلال الشفرة التي  حتى الآن ، كان هناك العديد من المرات التي تم فيها استخدام شيء مثل upload_path بدلاً من تحديد وحدة تحكم وإجراء. يوضح هذا التطبيق لدينا ما يمكن الوصول إلى URL في التطبيق الخاص بنا. ونحن أيضا إعطاء أسماء لمسارات معينة لجعلها أسهل لتحديث التعليمات البرمجية الخاصة بنا. هنا هو كيف يمكنك تسمية المسارات التي سوف تستخدم لدينا Mp3app:

تحدد طريقة المطابقة مسارًا مثل songs/upload ،  اسمًا ، upload_path . يتم تحديد هذا الاسم باستخدام :as => "name" كمعلمة ثانية لطريقة المطابقة.  أخيرًا ، تحدد طريقة الجذر الإجراء الذي سيكون الإجراء الجذر ، والذي يعمل على غرار index.html في موقع ويب ثابت يستند إلى HTML.


عمل تحميل المكتملة

الآن ، انتهينا من تنفيذ وظيفة إجراء التحميل. إليك الشفرة النهائية لملف songs_controller.rb حتى الآن:

وهنا ما التطبيق يبدو حتى الآن عند عرضها في المستعرض.


تنزيل الموسيقى

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

  • تيار أنها مع الصوت HTML5،
  • تحميل البرنامج عبر HTTP، و
  • تحميل البرنامج باستخدام ملف تورنت.

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

  • أولاً، نقوم بتحديث الرأس لتعكس أنه يمكننا أيضا تحميل الموسيقى.
  • ثانيا، علينا تغيير القائمة غير مرتبة بجدول، ووضع اسم الأغنية ورابط التحميل على الخاصة بهم.</td>

الآن نحن على استعداد لإضافة التعليمات البرمجية للسماح للمستخدم تحميل الموسيقى. دعونا نبدأ مع تحميله عبر HTTP، لأنها هي أسهل لتنفيذ.


تحميل عبر HTTP

جديد إلى جدولنا مع رابط إلى ملف .mp3. لقد تم بناء جوهرة aws-s3 بطرق تتيح لنا إنشاء عنوان url لملف.  ومع ذلك ، فإن أفضل الممارسات هي وضع أي "طرق مساعدة" مثل هذه في ملف المساعد لوحدة التحكم هذه. نظرًا لأننا نستخدم هذه الطرق في التطبيق بالكامل (خاصة إذا قررت تمديد هذا التطبيق بنفسك) ، فسيتم وضع أساليب المساعد في application_helper.rb file .إليك كيفية الحصول على عنوان URL:

هذه الطريقة فقط تقبل معلمة واحدة ، وهو اسم الأغنية. لمساعدتنا على تذكر أن اسم الأغنية يتم الوصول إليه بواسطة  ، فإننا نطلق على المعلمة song_key . كالعادة ، ندخل إلى فئة AWS::S3::S3Object للتفاعل مع كائنات Amazon S3. تأخذ طريقة url_for معلمتين ، أما الثالثة فهي اختيارية.

  • الأول هو اسم الملف كنت تبحث عن.
  • والثاني هو اسم دلو حيث يقع الملف.
  • وأخيرًا ، يتم استخدام المعلمة الثالثة لمنحنا عنوان URL لا تنتهي صلاحيته. إذا لم نحدد :authenticated => false ، فستنتهي صلاحية عنوان URL بالكامل خلال 5 دقائق (افتراضيًا).

وهذا<td>يذهب ما بين اسم الأغنية والارتباط حذف (ولكن هذا هو تفضيل شخصي، وحتى تتمكن الروابط في أي ترتيب تختاره).


تحميل عن طريق بت تورنت

يشبه تنزيل الملفات من Amazon S3 عبر Bit Torrent جدًا التنزيل عبر HTTP. في الواقع ، الاختلاف الوحيد بين عنوانين URL للتنزيل هو أن السيل لديه "سيل" في نهايته.  لذلك ، فإن طريقة المساعدة الخاصة بنا لإنشاء عنوان url الخاص بالتورل ستضيف فقط torrent إلى نهاية عنوان url HTTP. إليك كيفية القيام بذلك:

والآن، نحن بحاجة فقط إضافة آخر<td>أن لدينا الجدول:


دفق الصوت HTML5

بث الأغاني من خلال الصوت HTML5 قليلاً أكثر صعوبة من مجرد تحميل الأغنية، لذلك دعونا نبدأ مع الجزء السهل:<td>لذلك. ومع ذلك، هناك ستكون بعض الاختلافات من الروابط وأضاف نحن ل HTTP وبت تورنت.

  • أولاً، نحن بحاجة إلى وسيلة لتحديد هذا الارتباط من أجل إضافة <audio>علامة على الصفحة، حيث أننا سوف تعطيه فئة من html5.</audio>
  • ثانيا، نحن بحاجة إلى طريقة لمعرفة مصدر mp3 لاستخدام العلامة <source>، حيث سنقدم فقط هو نفس عنوان url كتحميل HTTP. وهذا سيكون بمثابة احتياطي للمتصفحات مع جافا سكريبت المعوقين، لأننا سوف نستخدم جافا سكريبت لإضافة <audio>علامة للصفحة.

هنا هو رمز لإنشاء الارتباط:

نحتاج الآن إلى العمل على javascript لإضافة علامة الصوت إلى الصفحة عند النقر فوق هذا الارتباط. للقيام بذلك ، سوف نستخدم تقنية مشابهة للتقنية التي يستخدمها Jeffrey Way في البرنامج التعليمي الخاص به ، The HTML 5 Audio Element الخطوة الأولى هي إضافة بعض الأشياء لملفات المشاهدة لدينا. في ملف layout/application.html.erb لدينا، نحن بحاجة إلى تضمين أحدث نسخة من jQuery، لأن هذا هو مكتبة جافا سكريبت سيتم استخدام. هنا هو رمز لإضافة الحق قبل تضمين جافا سكريبت أول السطر:

ثم تغيير المعلمة الأولى لتضمين العلامة الأصلية من: الافتراضيات إلى application.js، لأن ذلك هو أننا سوف يكون تخزين رمز جافا سكريبت لدينا، حيث ملفات JavaScript الافتراضية الأخرى ليست ضرورية. بعد ذلك، نحن بحاجة لإضافة مقطع لرأينا index.html.erb لوضع علامة الصوت. في الجزء العلوي من طريقة العرض هذه، نحن بحاجة إلى وضع التعليمات البرمجية التالية:

بعد مع موضوع HTML5، نستخدم علامة قسم بدلاً من div لإنشاء قسم الصوت.

الحصول على مرجع إلى مقطع صوتي، وذاكرة التخزين المؤقت هو في متغير، الذي يعتبر من أفضل ممارسات. وبعد ذلك، نحن بحاجة لإضافة معالج حدث النقر لصلاتنا مع فئة إتش تي أم ال 5. عندما تنفجر معالج الحدث هذا، نحن بحاجة إلى القيام ببعض الأمور:

  • أولاً، نحن بحاجة إلى جعل علامة صوتية جديدة وإعطائها بعض السمات مثل عناصر التحكم.
  • ثم، نحن بحاجة إلى إضافة علامة المصدر إلى أنه حتى أنه يعرف فعلا ما للعب.
  • وأخيراً، نحن بحاجة إلى استبدال HTML في قسم الصوت مع بطاقة الصوت الجديدة، والعودة كاذبة حتى لا يذهب العمل العادي للارتباط عن طريق، الذي سوف يتم تحميل الأغنية. هنا كيف يمكن وضع هذا معا:

أن هذا البرنامج التعليمي حول روبي على القضبان، وليس جافا سكريبت، لن أخوض في التفاصيل التي تشرح كيف تعمل هذه التعليمات البرمجية. ومع ذلك، التعليمات البرمجية بسيطة إلى حد ما، حيث أنه ينبغي أن يكون من السهل بالنسبة لك لمعرفة. هو الشيء الوحيد الذي يجب أن نلاحظ أن هذا العمل فقط في المتصفحات التي تدعم HTML5 ودعم mp3 كمصادر صحيحة للعلامات الصوتية. لمعظم المستعرضات، سيدعم أحدث إصدار هذه التعليمات البرمجية HTML 5، ولكن المتصفحات القديمة لا تدعم هذا.


أكمل عرض الفهرس

أخيرا لقد أنجزنا كافة الوظائف الأساسية لهذا التطبيق. يمكن للمستخدم تحميل، تنزيل، وحذف mp3 في مجموعة متنوعة من الطرق، بما في ذلك HTML5 الصوت والأسبوعية HTTP، وبت تورنت. هنا ما ينبغي أن ننظر عرض المؤشر مثل عند هذه النقطة:

إذا لم تقم مسبقاً، يجب أن تحاول تشغيل التعليمات البرمجية هذا وأنها تحاول بنفسك. يمكنك القيام بذلك عن طريق تشغيل الأمر: rails s. على الرغم من أن نكون قد استكملنا الوظيفة الأساسية لهذا التطبيق، لا تزال هناك الأشياء التي يتعين القيام به، مثل التصميم الصفحة. دعونا نفعل ذلك الآن.


التصميم التطبيق

أن أول شيء نفعله هو التفاف الصفحة في حاوية يتسنى لنا أنها مركز. كل ما نحتاج إلى القيام به هو وضع div مع معرف حاوية حول بيان الغلة في ملف التخطيط حيث يبدو شيئا من هذا القبيل:

عد ذلك ، سوف نستخدم التصميم من جوهرة Ryan Bates ، nifty_generators ، لإعطاء تطبيقنا بعض التصميم الأساسي. إليك CSS الذي سنستخدمه من هذه الأحجار الكريمة:

الآن سوف نعمل في عرض المؤشر. الشيء الأول الذي نحتاج إلى القيام به تقسيم الصفحة إلى ثلاثة أقسام. سوف تكون هذه المقاطع رأس والفرع الرئيسي والشريط جانبي. في الجزء العلوي من الصفحة، دعونا إضافة رأس بسيط:

وبعد ذلك، دعونا تقسيم الصفحة إلى منطقة رئيسية، وهي منطقة الشريط جانبي. منطقتنا الرئيسية تتكون من قائمة الأغاني، بينما سوف تحتوي على الشريط الجانبي الصوت HTML5 وتحميل النموذج. هنا كيف يمكننا سيتم تعديل التعليمات البرمجية:

بما أننا سنستخدم العوامات لتصميم هذه الصفحة ، نحتاج إلى مسح العوامات قبل وبعد للتأكد من عدم تعطل التصميم. الآن دعنا نضيف CSS لضبط تخطيط تلك الأجزاء:

الشريط الجانبي سيكون 30% الصفحة، والقسم الرئيسي سيكون 70% الصفحة. وبالإضافة إلى ذلك، هناك المغلق لإزالة التسطير من الارتباطات إلا إذا هي تحوم الماوس فوقه، وهناك أيضا إضافة إلى الحشو<td>العلامات حيث أن لا تبدو ضيقة جداً.</td> وفي النهاية، هذا هو حقاً المغلق فقط نحن بحاجة إلى إعطاء الصفحة تخطيط أساسي. لا تتردد في إضافة قدر من التصميم لهذا التطبيق كما تريد بنفسك، لأن هناك بالتأكيد طرق لجعل هذا التطبيق تبدو أجمل.


الاستنتاج

أمل أن يكون لديك الآن فهم جيد لكيفية التفاعل مع Amazon S3 من تطبيق Ruby on Rails الخاص بك. من خلال aws-s3 الأحجار الكريمة، فإن القيام بذلك أمر سهل للغاية ، لذا فإن إضافته إلى تطبيق حالي لن يستغرق سوى القليل من الوقت.  لا تتردد في تعديل هذا التطبيق في أي بالطريقة التي تريدها لمعرفة إذا كان يمكنك تحسين أنه في أي حال من الأحوال. تذكر أن تقوم بإضافة معلومات تسجيل الدخول الخاصة بك S3 الأمازون ودلو ثابتة في الملف application.rb، وإلا لن يتم تشغيل التطبيق!

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.