البرمجة في 7 أيام

تطوير التطبيقات

ستتعلم في هذا اليوم كيف تطور تطبيقك للوصول إلى كافة خصائص الجهاز مثل الكاميرا والموقع

كيف أبدأ
قم بمشاهدة الفيديوهات مع متابعة الخطوات بالأسفل خطوة بخطوة
ابدأ من هنا

خطوة رقم 1

التعريف بإضافات كوردوفا
Cordova plugins

خطوة رقم 2

قم بإنشاء مجلد خاص باليوم السادس، ثم بداخله
قم بإنشاء ملف config.xml مع إضافة الأكواد الخاصة به كما تعلمنا في اليوم السابق
وقم أيضا بإنشاء ملف index.html فارغ

خطوة رقم 3

تنبيه بخصوص الكود الأساسي لنجاح عمل الإضافات

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

خطوة رقم 4

إضافة : معلومات الجهاز
cordova-plugin-device
وظائفها : معرفة نظام التشغيل ، الموديل ، الإصدار ، السيريال ، الشركة المصنعة ، وغير ذلك

لتثبيت الإضافة
يتم إضافة السطر التالي داخل ملف config.xml

<plugin name="cordova-plugin-device" spec="~2.0.2" />

للتجربة قم بإضافة ما يلي في ملف html

<html>
	<head>
		<meta charset="UTF-8">
		<style>
		    * {direction: rtl ; text-align: center ; font-size : 25px;}
		    body {background: #D8D8D8;}
		</style>
	</head>
	<body>
		<br><br>
		
		<button onclick = " getPlatform() " > اعرض نظام التشغيل </button><br><br>
		<button onclick = " getModel() " > اعرض الموديل </button><br><br>
		<button onclick = " getVersion() " > اعرض الإصدار </button><br><br>
		<button onclick = " getSerial() " > اعرض السيريال </button><br><br>
		<button onclick = " getUuid() " > اعرض uuid </button><br><br>
		<button onclick = " getCordova() " > اعرض إصدار كوردوفا </button><br><br>
		<button onclick = " getManufacturer() " > اعرض الشركة المصنعة </button><br><br>
		
		<script>
			// الحصول على المعلومات المطلوبة ووضعها في متغيرات
			document.addEventListener("deviceready", onDeviceReady, false);
			function onDeviceReady() {
			
				platform = device.platform; // نوع التشغيل
				model = device.model; // الموديل
				version = device.version; // الإصدار
				serial = device.serial; // السريال
				uuid = device.uuid; // رقم المعرف
				cordova = device.cordova; // إصدار كوردوفا
				manufacturer = device.manufacturer; // الشركة المصنعة
				
			}
			
			// عند الضغط على الزر المطلوب يتم إظهار قيمة المتغير في رسالة تنبيه
			function getPlatform() { alert(platform); }
			function getModel() { alert(model);	}
			function getVersion() { alert(version);	}
			function getSerial() { alert(serial); }
			function getUuid() { alert(uuid); }
			function getCordova() { alert(cordova); }
			function getManufacturer() { alert(manufacturer); }
			
		</script>
		
		<!-- يجب إضافة هذا السطر أدناه لعمل إضافات كوردوفا بشكل صحيح -->
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		
	</body>
</html>

خطوة رقم 5

إضافة : التعامل مع الأحداث
Events
وظائفها : التعامل مع الأحداث والأزرار

لتثبيت الإضافة
يتم التأكد من وجود السطر التالي داخل ملف html

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

للتجربة قم بإضافة ما يلي في ملف html

<html>
	<head>
		<meta charset="UTF-8">
		<style>
		    * {direction: rtl ; text-align: center ; font-size : 25px;}
		    body {background: #D8D8D8;}
		</style>
	</head>
	<body>
		<br><br>
			
			ثم قم بتجربة الآتي :
			<br><br>
			
			الخروج من التطبيق والرجوع إليه
			<br><br>
			
			تجربة الضغط على أزرار رفع وخفض الصوت - للأندرويد فقط
			<br><br>
			
			تجربة الضغط على زر الرجوع في نظام أندرويد

		
		<script>
			// لمعرفة الأحداث وحالة البطارية وحالة الاتصال بالانترنت
			document.addEventListener("deviceready", onDeviceReady, false);
			function onDeviceReady() {
				document.addEventListener("resume", onResume, false);
				document.addEventListener("backbutton", onBackKeyDown, false);
				document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);
				document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);

			}
			
			// لمعرفة إذا خرج المستخدم من التطبيق
			function onResume() {
				alert("تم رجوعك إلى التطبيق");
			}
			
			// لمعرفة إذا تم الضغط على زر الرجوع ، تظهر في بعض الأجهزة مثل اندرويد
			function onBackKeyDown() {
				alert("تم الضغط على زر الرجوع");
			}
			
			// لمعرفة إذا تم الضغط على زر رفع الصوت في أجهزة أندرويد فقط
			function onVolumeUpKeyDown() {
				alert("تم الضغط على زر رفع الصوت");
			}
			
			// لمعرفة إذا تم الضغط على زر خفض الصوت في أجهزة أندرويد فقط
			function onVolumeDownKeyDown() {
				alert("تم الضغط على زر خفض الصوت");
			}
			
			
		</script>
		
		<!-- يجب إضافة هذا السطر أدناه لعمل إضافات كوردوفا بشكل صحيح -->
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		
	</body>
</html>

خطوة رقم 6

إضافة : معلومات الاتصال بالانترنت
plugin-network-information
وظائفها : معرفة استشعار الاتصال بالانترنت أو قطعه ، ومعرفة نوع الاتصال بالانترنت

لتثبيت الإضافة
يتم إضافة السطر التالي داخل ملف config.xml

<plugin name="cordova-plugin-network-information" spec="~2.0.1" />

للتجربة قم بإضافة ما يلي في ملف html

<html>
	<head>
		<meta charset="UTF-8">
		<style>
		    * {direction: rtl ; text-align: center ; font-size : 25px;}
		    body {background: #D8D8D8;}
		</style>
	</head>
	<body>
		<br><br>
		
		<button onclick="checkConnection()"> اضغط هنا لمعرفة نوع اتصالك بالانترنت</button>
		
		<script>
			
			// لمعرفة نوع الاتصال بالانترنت
			function checkConnection() {
					
					var networkState = navigator.connection.type;
					var states = {};
					states[Connection.NONE]     = 'لا يتوفر اتصال بالانترنت';
					states[Connection.WIFI]     = 'اتصالك بالانترنت بواسطة واي فاي';
					states[Connection.ETHERNET] = 'اتصالك بالانترنت بواسطة ايثرنت';
					states[Connection.CELL_4G]  = 'اتصالك بالانترنت بواسطة 4G';
					states[Connection.CELL_3G]  = 'اتصالك بالانترنت بواسطة 3G';
					states[Connection.CELL_2G]  = 'اتصالك بالانترنت بواسطة 2G';
					states[Connection.UNKNOWN]  = 'اتصالك بالانترنت غير معروف';
					
			    // states[networkState]  هذا الأمر يمثل نوع الاتصال بالانترنت
					alert( states[networkState] );
				}
				
			
			// لاستشعار حالة الاتصال بالانترنت
			document.addEventListener("deviceready", onDeviceReady, false);
			function onDeviceReady() {
                
    			// لاكتشاف اتصالك بالانترنت تلقائيا
    			document.addEventListener("online", onOnline, false);
    			function onOnline() {
    				alert("جهازك متصل بالانترنت");
    			}
    			
    			// لاكتشاف انقطاع اتصالك بالانترنت تلقائيا
    			document.addEventListener("offline", onOffline, false);
    			function onOffline() {
    				alert("جهازك غير متصل بالانترنت");
    			}
    			
			}
		
		</script>
		
		<!-- يجب إضافة هذا السطر أدناه عند لعمل إضافات كوردوفا بشكل صحيح -->
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		
	</body>
</html>

خطوة رقم 7

حالة البطارية
cordova-plugin-battery-status
وظائفها : معرفة نسبة شحن البطارية ، معرفة حالة انخفاض البطارية ، ومعرفة الحالة الحرجة للبطارية

لتثبيت الإضافة
يتم إضافة السطر التالي داخل ملف config.xml

<plugin name="cordova-plugin-battery-status" spec="~2.0.1" />

للتجربة قم بإضافة ما يلي في ملف html

<html>
	<head>
		<meta charset="UTF-8">
		<style>
		    * {direction: rtl ; text-align: center ; font-size : 25px;}
		    body {background: #D8D8D8;}
		</style>
	</head>
	<body>
		<br><br>
			
			ستظهر لك معلومات حول البطارية
			<br><br>
			
		<script>
			// لمعرفة حالة البطارية
			document.addEventListener("deviceready", onDeviceReady, false);
			function onDeviceReady() {
			
				window.addEventListener("batterycritical", onBatteryCritical, false);
				window.addEventListener("batterylow", onBatteryLow, false);
				window.addEventListener("batterystatus", onBatteryStatus, false);
				
			}
			
			
			// لإظهار رسالة في حال وصول البطارية إلى الحالة الحرجة
			function onBatteryCritical(status) {
				alert("حالة البطارية حرجة " + status.level + "% \n الرجاء توصيل الجهاز بالشاحن");
			}
			
			// لإظهار رسالة في حال وصول البطارية إلى الشحن المنخفض
			function onBatteryLow(status) {
				alert("شحن البطارية منخفض " + status.level + "%");
			}
			
			// لإظهار رسالة فيها معلومات مستوى البطارية
			function onBatteryStatus(status) {
				alert("مستوى البطارية : " + status.level + "% \n توصيل الشاحن : " + status.isPlugged);
			}
			
			
		</script>
		
		<!-- يجب إضافة هذا السطر أدناه عند لعمل إضافات كوردوفا بشكل صحيح -->
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		
	</body>
</html>

توضيح

توضيح بخصوص شروحات المهندس رياض خليفة

خطوة رقم 8

إضافة : التعامل مع الكاميرا
cordova-plugin-camera
وظائفها : التقاط صورة ، تحديد صورة من الألبوم ، وغير ذلك

خطوة رقم 9

إضافة : التقاط فيديو
cordova-plugin-media-capture
وظائفها : التقاط فيديو ...

خطوة رقم 10

إضافة : اتجاه الجهاز - البوصلة
cordova-plugin-device-motion
وظائفها : تحديد اتجاه الجهاز

خطوة رقم 11

إضافة : تحديد الموقع الجغرافي ، وجلب اسم موقع وإحداثياته ، واستدعاء برنامج خرائط قوقل ، وحساب المسافة بين نقطتين ، وغير ذلك
cordova-plugin-geolocation
وظائفها : تحديد الموقع الجغرافي

خطوة رقم 12

إضافة : التعامل مع جهات الاتصال
cordova-plugin-contacts
وظائفها : الإضافة والتعديل والحذف على جهات الاتصال

خطوة رقم 13

إضافة : المعلومات العامة - العولمة
cordova-plugin-globalization
وظائفها : معرفة اللغة المستخدمة في الجهاز ، التاريخ ، وغير ذلك

خطوة رقم 14

إضافة : عرض المواقع داخل التطبيق كمتصفح
cordova-plugin-inappbrowser
وظائفها : فتح المواقع داخل التطبيق كمتصفح

خطوة رقم 15

إضافة : التعامل مع الترميز والرسائل ورج الجهاز
cordova-plugin-vibration

خطوة رقم 16

إضافة : التعامل مع الصوتيات
cordova-plugin-media
وظائفها : تسجيل مقطع صوتي والتعامل مع الصوتيات

الخطوة الأخيرة

الاطلاع على المراجع المهمة
شرح فون جاب - كوردوفا : من اليوتيوب
ضع سؤالك هنا في مجموعة : فون جاب - كوردوفا - آيونك