كيفية بناء موقع ويب وتطبيق موبايل بنفس لغة البرمجة
بما لم تدرك هذا الأمر سابقًا ولكن يمكنك بالفعل الاعتماد على لغة برمجةٍ واحدةٍ في بناء موقع ويب واستخدامها نفسها لتصميم تطبيقٍ خاصٍ بالهواتف الذكية.سنحاول شرح الموضوع بأبسط ما يمكن كي لا تحتاج إلى خبرةٍ كبيرةٍ في مجال لغات البرمجة.
نبذة عن لغات البرمجة المستخدمة في بناء موقع ويب
لغة البرمجة هي لغةٌ يستخدمها مبرمجو الكمبيوتر لتطوير برامج أو نصوص برمجية أو مجموعات أخرى من الإرشادات المختلفة لأجهزة الكمبيوتر كي يتم تنفيذها.
على الرغم من أن العديد من اللغات تشترك في أوجه تشابه متعددة، لكن لكلٍ منها بناء خاص بها، وبمجرد أن يتعلم المبرمج قواعد اللغات وبنائها الخاص والبنية وما إلى ذلك، عليه أن يكتب شيفرةَ المصدر الخاصة باللغة في محرر نصوصٍ أو في بيئة تطويرٍ متكاملةٍ، وبعد ذلك يقوم المبرمج غالبًا بترجمة هذه الشيفرة ودمجها مع لغة الآلة التي يمكن فهمها بواسطة الكمبيوتر.
ومن الجدير بالذكر أن لغات البرمجة النصية لا تتطلب ترجمة ودمج مثل المنهجية المتبعة مع اللغات الأخرى الأكثر تعقيدًا، وإنما تستخدم مُفسرًا أو مترجمًا بسيطًا لتطبيق أوامر البرنامج النصي.
لغة JavaScript في بناء موقع ويب وتطبيق موبايل
JavaScript أو جافا سكريبت هي لغةُ برمجةٍ للويب مدعومةٌ من قبل معظم متصفحات الويب بما في ذلك Chrome و Firefox و Safari و Internet Explorer و Edge و Opera وغيرها من متصفحات الإنترنت الخاصة بالهواتف الذكية أيضًا.
تستخدم بشكلٍ أساسيٍّ لتحسين صفحات الويب لتوفير تجربةٍ سهلة الاستخدام، وتشتمل ميزاتها ووظائفها تحديث صفحات الويب ديناميكيًّا وتحسين واجهة المستخدم مثل القوائم ومربعات الحوار والرسوم المتحركة والرسومات ثنائية وثلاثية الأبعاد والخرائط التفاعلية ومشغلات الفيديو وغير ذلك.
ولكن يمكن أيضًا استخدام هذه اللغة في تطوير التطبيقات المختلفة على الهواتف، ولهذا السبب سوف نعتمد على هذه اللغة في العمل على بناء موقع ويب وأيضًا تطبيق لهاتفك الذكي، خصوصًا أنها من أكثر لغات البرمجة انتشارًا وليست من اللغات المعقدة للغاية.
استخدام جافا سكريبت في تصميم تطبيق هواتف
بالنسبة إلى استخدام هذه اللغة لبناء تطبيق هواتف، فهنالك عدة نقاطٍ يجب أن نتحدث عنها، وأولها هو أن تصميم تطبيق لنظام الأندرويد يختلف عن نظام iOS فأنت كمطورٍ عليك إعادة اتباع خطوات التطوير نفسها لكل من النظامين.
أما النقطة الثانية فهي أن تصميم تطبيق للهواتف لا يمكن تلخيصه في بضعة خطوات إرشاد كما الحال في بناء موقع ويب ، وذلك لأن الموضوع ببساطةٍ يتوقف على نوع التطبيق الذي تريد استخدامه، ونجد أنه من الأفضل أن نتحدث عن إرشاداتٍ وطرقٍ لمساعدتك بدلًا من الخوض في طريقٍ طويلٍ ومعقدٍ.
إذا أردت اتباع طريقةٍ سهلةٍ لتطوير تطبيقات هواتف مع خبرةٍ في استخدام لغة JavaScript فمن الأفضل أن تتوجه نحو منصة Meteor التي تستخدم اللغة البرمجية JavaScript في عملية التطوير.
عندما تنتقل إلى الموقع الرسمي للمنصة يمكنك الضغط على خيار البدء من أجل تصميم تطبيقات JavaScript يمكن أن تعمل على الهواتف الذكية بمختلف الأنظمة وأيضًا شبكة الويب.
سوف يقدم لك الموقع إرشاداتٍ بسيطةً وسهلةً لتنصيب برنامج المنصة ومن ثم سوف يساعدك على بناء تطبيقاتٍ بسيطةٍ من أجل التدريب والوصول إلى الاحتراف.
لاحقًا سوف تتمكن بسهولةٍ من تحويل ما قمت بتصميمه إلى تطبيقٍ مخصصٍ لنظام الأندرويد أو iOS ، والجميل في الأمر هنا أنك لا تحتاج إلى تعلم لغةٍ ثانيةٍ من أجل استخدام هذه المنصة.
من الجدير بالذكر أن هذه المنصة تستخدم تقنية تدعى Cordova وتتيح هذه التقنية تشغيل لغة الترميز HTML ولغة JavaScript على الهواتف الذكية بدون استخدام متصفح إنترنت، وتساعد المطورين على كتابة أوامر برمجية تفاعلية بالاعتماد على JavaScript مثل الولوج إلى كاميرا الهاتف وغيره.
كيفية استخدامها في بناء موقع ويب
- محرر النص: ابدأ بفتح برنامج تحرير النصوص الذي تفضله فهو أساسيٌّ في خطوات الإرشاد وستقوم من خلاله بإنشاء مجلداتٍ وملفاتٍ جديدةٍ والتعديل عليها وتحريرها.
بعد الاعتماد على محرر نصوصٍ تفضله قم بإنشاء مجلدٍ جديدٍ وضع داخله ملف يحمل التسمية: index.html.- إضافة الأوامر: قم بإضافة الأمر البرمجي التالي إلى الملف الذي قمت بإنشائه سابقًا:
<!DOCTYPE html>
<html>
<head>
<title>My webpage!</title>
</head>
<body>
<h1>Hello, World!</h1>
<h4 id='date'></h4>
</body>
</html>- إدخال JavaScript: إذا حاولت الآن فتح هذه الصفحة التي قمت بإنشائها في متصفح إنترنت، فسوف تجد رسالة ترحيبٍ لا أكثر، ولذلك سوف نضيف لغة JavaScript ليكون الموقع أكثر تميزًا
عليك لهذه الخطوة إنشاء مجلد جديد باسم javascript وبداخله ملف باسم index.js وثم إضافة الأمر التالي لهذا الملف :
document.getElementById('date').innerHTML = new Date().toDateString();- تفعيل اللغة: الآن عليك نقل الأمر البرمجي إلى موقع الويب، وذلك عبر تحرير ملف index.html مجددًا وإضافة الأمر البرمجي التالي أسفل عنوان الصفحة “My webpage”
<script async src="./javascript/index.js"></script>
الآن قم بحفظ الملف وثم قم بتحديث الموقع في المتصفح وسترى أنه يقوم الآن بعرض التاريخ أسفل رسالة الترحيب.- إدخال CSS: يمكنك أيضًا إدخال لغة التنسيق CSS في بناء موقع ويب عبر إنشاء مجلد جديد styles للتعبير عن التنسيق، وبداخل الملف قم بإنشاء ملفٍ جديدٍ باسم styles.css وبعدها عند تحرير الملف قم بإدخال الأمر البرمجي :
body {
text-align: center;
background-color: #f0e8c5;
}- تفعيل اللغة:
- الآن يجب العودة إلى ملف html الأصلي وفي داخله يجب إضافة الأمر البرمجي التالي فوق أمر <script> الذي أضفناه سابقًا:
<link rel="stylesheet" href="styles/styles.css" />
بعد تحديث صفحة الويب سترى أنها تمتلك الآن تميّزًا أكثر في الألوان والشكل.- إضافة المزيد من التميز (ليست ضرورية): يمكنك أن تسعى لإضافة المزيد من التميز للصفحة عبر إدخال الصور والألوان المختلفة، ولهذه الخطوة سوف نختصر التغييرات التي يجب إجراؤها عبر فتح ملف html الأصلي واستبدال كل ما بداخله بالأوامر التالية:
<!DOCTYPE html>
<html>
<head>
<title>My webpage!</title>
<link rel=”stylesheet” href=”styles/styles.css” />
<script async src=”./javascript/index.js”></script>
</head>
<body>
<h1>Hello, World!</h1>
<h4 id=’date’></h4>
<div class=”image-section”>
<div class=”section-style”>
<img src=”source.unsplash.com/random/400×200″ alt=”” />
<p>A random image courtesy of unsplash.com.</p>
</div>
<div class=”section-style”>
<img src=”source.unsplash.com/random/400×200″ alt=”” />
<p>A random image courtesy of unsplash.com.</p>
</div>
</div>
<div class=”image-section”>
<div class=”section-style”>
<img src=”source.unsplash.com/random/400×200″ alt=”” />
<p>A random image courtesy of unsplash.com.</p>
</div>
<div class=”section-style”>
<img src=”source.unsplash.com/random/400×200″ alt=”” />
<p>A random image courtesy of unsplash.com.</p>
</div>
</div>
</body>
</html>- تعديل styles.css: إذا قمت باتباع الخطوة السابعة فيجب تعديل ملف styles.css أيضًا واستبدال كافة محتوياته بما يلي:
body {
text-align: center;
background-color: #f0e8c5;
}
div {
margin-top: 15px;
}
.image-section {
display: flex;
justify-content: center;
}
.section-style {
margin-right: 25px;
margin-left: 25px;
background-color: white;
}- تنشيط الموقع: حتى هذه اللحظة من بناء موقع ويب أصبح الموقع جميلًا بصورٍ وخلفياتٍ وتاريخٍ وما إلى ذلك، لكنه غير موجودٍ بشكلٍ فعليٍّ على شبكة الإنترنت.
لتنشيط الموقع يوجد طرقٌ عديدةٌ، أسهلها عبر موقع GitHub Pages والذي يمنح خدمةً مجانيةً لنشر مواقع الويب المخصصة.
يمكنك اتباع خطواتٍ من الموقع من أجل تسجيل الدخول وتحميل برنامج صغير لإجراء التعديلات وتفعيل الموقع.
رد مع اقتباس
