في هذا المنشور ، سننشئ موقعًا شخصيًا باستخدام القضبان وننشره في Heroku. Heroku عبارة عن منصة تطبيقات سحابية - طريقة جديدة لبناء ونشر تطبيقات الويب. أفضل شيء في Heroku هو أنك لست مضطرًا للدفع مقابل استضافة تطبيقات الويب الأساسية حيث صنفتها Heroku على أنها مجانية. سنقوم ببناء تطبيق قضبان من صفحة واحدة وسيكون موقعًا ثابتًا يمكن استخدامه كمحفظة.
يوجد أدناه لقطة لتطبيق ريلز (تم نشره على Heroku هنا )
لنبدأ في إنشاء تطبيق ريلز هذا. أفترض أنك قمت بالفعل بتثبيت Ruby و Rails. تأكد من أن لديك Ruby 2.0 و Rails 4.2.2. يمكنك التحقق من الإصدار من موجه الأوامر.
ملاحظة: سوف نستخدم Ruby 2.0 و Rails 4.2.2. إذا كان لديك بعض الإصدارات المختلفة من Ruby و Rails ، فقد لا تعمل بعض الخطوات الموضحة في هذا المنشور من أجلك.
إنشاء المشروع:
سنقوم بتسمية مشروعنا بالموقع الإلكتروني. لإنشاء المشروع ، استخدم الأمر موقع Rails الجديد
ستنشئ ريلز جميع الملفات تلقائيًا وستقوم أيضًا بتثبيت جميع الأحجار الكريمة المطلوبة عن طريق تنفيذ حزمة التشغيل المثبتة تلقائيًا كما هو موضح أدناه
سترى الآن مجلد موقع الويب أسفل محرك الأقراص C: (الموقع الذي قمنا بتنفيذ أمر موقع الويب الجديد منه ريلز). دعونا نفتح مجلد موقع الويب في بعض IDE. لدي Brackets IDE من Adobe. يمكنك استخدام أي شيء آخر لأنه لا يهم.
هيكل المشروع:
سيبدو هيكل المشروع الناتج على النحو التالي
على الرغم من أننا لم نكتب أي كود ، يمكنك تشغيل تطبيق الموقع الآن. لتشغيل تطبيق موقع الويب ، قم بتنفيذ أمر ريلز من مجلد موقع الويب كما هو موضح أدناه
كما ترى في اللقطة أعلاه ، تم نشر تطبيق موقعنا علىhttp: // localhost: 3000
ستتمكن من رؤية الشاشة أدناه عند الوصول إلى عنوان URLhttp: // localhost: 3000
لكننا نريد أن نظهر صفحة التطبيق الرئيسية الخاصة بنا حول الوصول إلى عنوان URLhttp: // localhost: 3000 /.لذلك دعونا ننشئ صفحة index.html ضمن المجلد العام لمشروع موقعنا على الإنترنت.
ملاحظة: سيخدم ريلز تلقائيًا صفحة index.html عند الوصول إلى عنوان URL الجذرhttp: // localhost: 3000
في الوقت الحالي لدينا سطر واحد فقط في صفحة index.html.
فلنصل إلى عنوان URL الأساسيhttp: // localhost: 3000
الآن ، دعنا نضع بعض الحياة في صفحة index.html الخاصة بنا عن طريق إضافة بعض الصور - JS و CSS الرائع. سنستخدم موضوع تدرج الرمادي من بدء التشغيل.
التدرج الرمادي بدء موضوع Bootstrap -
يوجد أدناه لقطة لموضوع بدء التشغيل بتدرج الرمادي الذي سنستخدمه. سنقوم بتخصيص هذا الموضوع لتلبية متطلباتنا.
يمكنك تنزيل هذا الموضوع من http://startbootstrap.com/template-overviews/grayscale/
قم بتنزيل سمة تدرج الرمادي وانسخ CSS و font-awesome و Fonts و img و JS و index.html إلى الدليل العام لمشروع موقع الويب. يوجد أدناه لقطة المشروع بعد إضافة CSS و JS والخطوط ومجلد الصور وصفحة index.html ضمن الدليل العام لمشروع موقع الويب.
دعونا ندير مشروع موقعنا الآن:
عند تشغيل المشروع ، سيتم تقديمك بصفحة ذات مظهر جميل بتدرج الرمادي.
سنقوم بتعديل صفحة index.html (ضمن الدليل العام لمشروع موقع الويب) لإضفاء مظهر احترافي عليها.
يوجد أدناه لقطة لمشروع موقع الويب بعد إجراء التغييرات في صفحة index.html. لقد قمنا للتو بتغيير الصور وتحرير بعض النص لجعله خاصًا بالفرد.
يمكنك تعديل index.html و grayscale.CSS كما تريد. الآن ، نحن جاهزون لنشر تطبيق موقعنا على Heroku.
دفع الكود إلى جيثب:
قبل نشر التطبيق على Heroku ، نحتاج إلى دفع الكود الخاص بنا إلى مستودع Github البعيد. لذلك أنت بحاجة إلى حساب جيثب. إذا لم يكن لديك حساب على Github ، فانتقل وأنشئ حسابًا على www.github.com .
تحتاج أيضًا إلى تثبيت Github على نظام Windows الخاص بك. قم بتنزيل Github لنظام التشغيل windows من https://windows.github.com/ .
بمجرد تنزيل Github وتثبيته على جهازك ، افتح تطبيق Github وقم بتكوين بيانات اعتماد Github واختر Git Bash shell كصدفة افتراضية (يمكنك اختيار أي خيار آخر أيضًا كما تريد) ثم احفظ التغييرات.
تحتاج إلى إنشاء مستودع على Github ، حيث سنحفظ مشروع موقعنا الإلكتروني عن بُعد. لإنشاء مستودع ، قم بتسجيل الدخول إلى Github وانقر فوق خيار المستودع الجديد الموضح في الزر الأخضر.
قم بتسمية المستودع الخاص بك (في هذه الحالة أطلقنا عليه اسم railtoheroku) وانقر على رابط إنشاء المستودع كما هو موضح أدناه.
سيوفر Github عنوان URL البعيد ( https://github.com/eMahtab/railtoheroku.git في هذه الحالة) لمستودع railtoheroku الذي سيكون ضروريًا أثناء دفع الكود من الجهاز المحلي إلى Github.
الآن ، نحن على استعداد لدفع رمز مشروع موقع الويب الخاص بنا إلى Github. اتبع الخطوات أدناه لدفع الكود إلى جيثب.
افتح Git shell واستخدم الأمر Git init لتهيئة دليل موقع الويب كما هو موضح أدناه:
الآن ، أضف جميع الملفات في دليل موقع الويب تحت التحكم في الإصدار عن طريق تنفيذ Git add.
قم بربط جميع الملفات بتنفيذ Git الالتزام –m “Final Commit”
أضف المستودع البعيد كما هو موضح أدناه:
الآن الخطوة الأخيرة التي ستدفع الكود بالفعل إلى مستودع Github:
لقد انتهينا مع جيثب. الجزء التالي هو النشر الفعلي للتطبيق إلى Heroku.
نشر التطبيق على Heroku:
قم بإنشاء حساب Heroku على https://www.heroku.com/
ملحوظة : يتعين علينا إجراء بعض التغييرات لنشر التطبيق على Heroku. لا يدعم Heroku SqLite 3 ، ولكنه يمتلك قاعدة بيانات PostgreSQL بدلاً من ذلك. لذلك علينا إزالة تبعية sqlite3 من gemfile. يتطلب Heroku جوهرة rails_12factor ، والتي تستخدمها Heroku لخدمة الأصول الثابتة مثل الصور وأوراق الأنماط. يتم تلخيص التغييرين المطلوبين في Gemfile أدناه:
قم بإزالة سطر جوهرة 'sqlite3' من Gemfile
أضف الأسطر التالية إلى Gemfile
المجموعة: التنمية ، اختبار تفعل #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
دعنا نتحقق مما إذا كان كل شيء يعمل بشكل جيد بعد إجراء التغييرات على Gemfile. احفظ ملف Gemfile وقم بتشغيله تثبيت الحزمة بعلم خاص (- بدون إنتاج) لمنع التركيب المحلي لأي أحجار كريمة إنتاجية.
لنلتزم بالتغييرات التي تم إجراؤها في Gemfile إلى مستودع بعيد في Github:
ادفع التغييرات إلى مستودع Github البعيد:
إنشاء تطبيق جديد في Heroku:
سجّل الدخول إلى Heroku وأنشئ تطبيقًا جديدًا. لقد قمت بتسمية تطبيقي railtoheroku. يمكنك تسميته ما شئت. انقر فوق إنشاء التطبيق لإنشاء التطبيق المحدد.
ربط مستودع جيثب بتطبيق Heroku:
الخطوة التالية هي ربط مستودع Github الخاص بك بـ Heroku.
أدناه قمنا بتوصيل railtoheroku مستودع Github الخاص بنا
ما هي فئة الماسح الضوئي في جافا
بمجرد توصيل مستودع Github الخاص بنا بـ Heroku ، نكون مستعدين لنشر تطبيقنا. لنشر التطبيق ، قم بالتمرير لأسفل إلى خيار النشر اليدوي وانقر فوق خيار نشر الفرع.
نشر التطبيق:
بمجرد النقر فوق Deploy Branch ، سيبدأ Heroku في تثبيت الأحجار الكريمة من Gemfile عند الإنتاج:
بمجرد تثبيت جميع الجواهر ونشر التطبيق ، سترى رسالة تهنئة من Heroku تقول ، 'تم نشر تطبيقك بنجاح.'
لمشاهدة التطبيق الذي تم نشره ، ما عليك سوى النقر فوق الزر 'عرض' وستتمكن من رؤية تطبيقك تم نشره بنجاح.
إذا واجهت أي مشكلة أثناء اتباع أي من الخطوات المذكورة أعلاه ، فيرجى التعليق أدناه. أتمنى أن تكون قد استمتعت بهذا المنشور.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات وسنعاود الاتصال بك.
المنشورات ذات الصلة:
تحليل ملفات XML باستخدام محلل SAX