الدرس 8 · الوحدة 4: مفاهيم تطوير تطبيقات متعدّدة المنصّات

لماذا متعدّد المنصّات؟ React Native وFlutter والأصيل

كودٌ واحد يصل إلى كل الأجهزة. ⏱ نحو 35 دقيقة.

بعد هذا الدرس ستستطيع أن:

تشرح مشكلة تعدّد المنصّات وحلولها الثلاثة.
تقارن React Native بـ Flutter وتبرّر البدء بالأول.
تكيّف السلوك حسب المنصّة بـ Platform.

١المشكلة: منصّتان، جمهورٌ واحد

لِتصل إلى كل المستخدمين تحتاج تطبيقًا على Android وiOS. الطريق التقليديّ: فريقان، لغتان، قاعدتا كود:

	Android أصيل	iOS أصيل
اللغة	`Kotlin / Java`	`Swift / Objective-C`
الأداة	Android Studio	Xcode
الواجهة	`XML / Compose`	`Storyboard / SwiftUI`

النتيجة: تكلفةٌ مضاعفة، وتأخّرٌ في المزايا، وصعوبة الاتّساق. تطوير متعدّد المنصّات يحلّها: قاعدة كودٍ واحدة تعمل على المنصّتين.

٢ثلاثة طرق

النهج	أمثلة	الميزة	المقابل
أصيل منفصل	`Kotlin + Swift`	أعلى أداءٍ وتحكّم	تكلفةٌ مضاعفة
متعدّد المنصّات	React Native · Flutter	كودٌ واحد، سرعة تطوير	طبقةٌ وسيطة
ويب مغلّف	`Cordova / PWA`	أبسط	أداءٌ وتجربةٌ أضعف

نركّز على نهج متعدّد المنصّات لأنه يوازن السرعة والجودة، وهو الأوسع في السوق اليوم.

٣React Native مقابل Flutter

	React Native	Flutter
الجهة	Meta	Google
اللغة	`JavaScript / TypeScript`	Dart
الواجهة	مكوّنات تتحوّل لعناصر أصيلة	Widgets تُرسَم بمحرّك Skia
المظهر	يتبع مكوّنات المنصّة	موحَّدٌ عبر المنصّات
منحنى التعلّم	سهلٌ لمن يعرف React	لغةٌ جديدة Dart
نستخدمه	نكتبه ونشغّله (معظم المقرر)	نعرضه ونشرحه (وحدة 6)

كلاهما ممتاز. نبدأ بـ React Native لأنه امتدادٌ مباشر لمهارة React لديك، ونفرد الوحدة السادسة لفهم Flutter ومقارنته عمليًّا.

٤كشف المنصّة: Platform

أحيانًا تحتاج سلوكًا مختلفًا لكل منصّة. توفّر React Native كائن Platform لمعرفة المنصّة الحالية وتكييف الكود:

import { View, Text, Platform, StyleSheet } from 'react-native'; export default function App() {  return (    <View style={styles.box}>      <Text style={styles.t}>المنصّة الحالية: {Platform.OS}</Text>      <Text style={styles.s}>        {Platform.OS === 'ios' ? 'أسلوب iOS' :         Platform.OS === 'android' ? 'أسلوب Android' : 'أسلوب الويب (المحاكاة)'}      </Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center' },  t: { fontSize: 18, fontWeight: 'bold' },  s: { marginTop: 8, color: '#E8820C' },});

في المحاكاة هنا تكون المنصّة web؛ على الجهاز تكون ios أو android. Platform.OS يتيح تكييف السلوك.

توقّع وتحقّق

ميزة تطوير متعدّد المنصّات:

لغة Flutter:

لماذا نبدأ بـ React Native؟

لمعرفة المنصّة الحالية نستخدم:

الخلاصة

تطوير متعدّد المنصّات: قاعدة كودٍ واحدة لـ Android و iOS.
React Native (JS، Meta) و Flutter (Dart، Google) أبرز الأدوات.
نبدأ بـ React Native لأنه امتدادٌ لمهارة React.
Platform.OS يتيح تكييف الفروق القليلة في مكانٍ واحد.

تحدٍّ برمجي: بطاقة منصّة

سهل

اعرض اسم المنصّة ورسالةً مناسبة.

المطلوب:

استورد Platform من react-native.
<Text testID="os"> يعرض Platform.OS.
<Text testID="hint">: إن كانت المنصّة «web» اكتب «محاكاة» وإلا «جهاز حقيقيّ».

👀 اعرض الناتج المطلوب (وجرّبه)

✓ التحقق الآلي من حلّك:

الكود يعمل بلا أخطاء في Console
المنصّة web في المحاكاة
الرسالة «محاكاة»
استُخدم Platform.OS

💡 تلميح 1

في بيئتنا Platform.OS === 'web'.

💡 تلميح 2

الشرط يقرّر النصّ بين «محاكاة» و«جهاز حقيقيّ».

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

import { View, Text, Platform, StyleSheet } from 'react-native'; export default function App() {  const sim = Platform.OS === 'web';  return (    <View style={{ padding: 20 }}>      <Text testID="os" style={styles.os}>{Platform.OS}</Text>      <Text testID="hint">{sim ? 'محاكاة' : 'جهاز حقيقيّ'}</Text>    </View>  );} const styles = StyleSheet.create({  os: { fontSize: 22, fontWeight: 'bold', color: '#E8820C' },});

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس