تصميم تطبيقات الهواتف باستخدام رياكت نيتيف

أحدث إطار عمل من فيسبوك لتصميم التطبيقات

تطوير تطبيقات الموبايل4.6(47)16 ساعة و56 دقيقة84 درسا9 أقسام

ماذا ستتعلم؟

  • فهم ما هي React Native وتثبيت الأدوات
  • استخدام Expo وإنشاء أول مشروع
  • التعامل مع المكونات الأساسية
  • تنسيق الشاشات باستخدام Style Sheet وFlexBox
  • تصميم شاشات المشروع
  • إنشاء عناصر Form وشاشات تسجيل الدخول
  • طلب صلاحيات الوصول والتعامل مع الصور والموقع
  • التنقل بين الشاشات
  • التعامل مع الشبكات والـ API

عن الدورة

يشرح هذا الكورس تصميم تطبيقات الهواتف باستخدام رياكت نيتيف React Native، وهو إطار عمل من فيسبوك لبناء تطبيقات أندرويد وiOS بلغة JavaScript. يبدأ الكورس بمقدمة الدورة ومتطلباتها وتثبيت الأدوات وإنشاء أول مشروع ونظرة على Expo. بعد ذلك تتعلم المكونات الأساسية مثل View وText وImage وTouchable وButtons وAlerts، ثم Style Sheet وFlexBox وتحديد موضع العناصر وتصميم عدة شاشات. ثم تتعامل مع TextInput وSwitch وModal وإنشاء عناصر Form وشاشات LoginScreen وRegisterScreen. وتتعلم المميزات الأصلية مثل صلاحيات الوصول والصور والموقع Location، والتنقل بين الشاشات عبر StackNavigator وTapNavigator، وفي النهاية التعامل مع الشبكات والـ API وPostman وFetch وAxios. يناسب الكورس من يعرف أساسيات JavaScript ويريد بناء تطبيقات موبايل. وبعده ستكون قادرا على تصميم شاشات التطبيق وربطها وتنفيذ مشروع كامل يتصل بالخادم. الشرح عملي ومتدرج، وتتبع الدروس بالترتيب لتنتقل من الفكرة إلى التطبيق خطوة بعد خطوة.

نتائج متوقعة من الدورة

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

تقييمات المتدربين

التقييمات هنا من المتدربين الذين اشتروا الدورة وأكملوا 50٪ من المحتوى على الأقل — لا توجد تقييمات من شخص لم يطلع على المحتوى.
4.6
★★★★★
47 تقييم
5★
28
4★
17
3★
2
2★
0
1★
0

    محتوى الدورة

    1

    مقدمة عن الـ React Native

    6 درس
    1. مقدمة الدورةتعريف بالتطبيق الذي سيُبنى بـ React Native ليعمل على Android وiOS، وتشمل الشاشات التسجيل وتسجيل الدخول والصفحة الرئيسية والحساب والرسائل وإضافة منشور وصور والموقع، مع تنظيم المجلدات.3:01
    2. متطلبات الدورةيوضح المتطلبات السابقة لتعلم React Native، وهي JavaScript بمفاهيمها المتقدمة مثل البرمجة كائنية التوجه والـ modules، ثم React بمفاهيمها كالمكونات وJSX وprops وhooks وstate.3:44
    3. React Native ما هو الـيعرّف React Native بأنه إطار عمل يبني تطبيقات للموبايل على Android وiOS بلغة JavaScript وبمكونات مثل View وText، ويقارنه بلغات المنصتين الأصلية ويذكر أن Facebook طورته.9:31
    4. تثبيت الأدواتيشرح تثبيت أدوات العمل على Windows لبناء تطبيقات React Native، ومنها Node.js وnpm وExpo، وإضافات محرر الكود التي تسهّل الكتابة، وتثبيت تطبيق Expo على الهاتف لتجربة التطبيق.17:07
    5. إنشاء أول مشروعيشرح إنشاء أول مشروع React Native باستخدام Expo وأوامر npm، وهيكل ملفات المشروع، وإضافة الاستايل، وتشغيل التطبيق على Expo Go وتجربة التعديل الفوري.14:30
    6. نظرة على الـ Expoيشرح أداة Expo وخدماتها كبيئة تطوير لتطبيقات React Native، ومنها Snack وتشغيل التطبيق على الجهاز، وإنشاء مشروع بالأمر المناسب، واختصارات الطرفية لإعادة التشغيل.13:52
    2

    شرح المكونات الاساسية

    9 درس
    1. مقدمة الشابتر (شرح المكونات الاساسية)يقدّم الشابتر الثاني عن المكونات الأساسية في React Native، ويستعرض مكونات مثل button، ويوضح كيف توفر الوثائق خصائص كل مكون وما يخص Android أو iOS منها.9:49
    2. Viewيشرح مكون View في React Native كأحد المكونات الأساسية لبناء الواجهات، ويجرب وضع عناصر داخله وتحديد ارتفاعه، ويوضح تداخل View داخل View آخر وتأثير ذلك على المساحة.18:02
    3. Textيشرح مكون Text لعرض النصوص في React Native، وخصائصه مثل الستايل وحجم الخط وتحديد عدد الأسطر، والتعامل مع حدث الضغط عليه بـ onPress وطباعة النتيجة في الـ terminal.14:48
    4. Imageيشرح مكون Image في React Native لعرض الصور من ملفات المشروع عبر require ومن الإنترنت عبر uri، وخصائصه مثل blurRadius وresizeMode لتأثيرات وضبط ملاءمة الصورة للإطار.19:09
    5. Touchableيشرح مكونات Touchable مثل TouchableHighlight وTouchableOpacity وTouchableWithoutFeedback لإضافة التفاعل عند الضغط، وتأثير الشفافية على الصورة، والضغط الطويل، وTouchableNativeFeedback الخاص بأندرويد.18:56
    6. Buttonsيشرح مكون Button الجاهز في React Native، وأهم خصائصه كالعنوان ودالة الضغط، واختلاف شكله بين أندرويد وiOS، وتوحيد الشكل باستخدام تخصيص خاص.8:06
    7. Alertsيشرح واجهة Alert لعرض رسالة تنبيه للمستخدم، وإضافة أزرار بدوال تنفيذ مثل تأكيد الحذف، وAlert.prompt الذي يطلب إدخال نص ويعمل على iOS فقط.15:55
    8. Style Sheetيشرح استخدام StyleSheet.create بدل الاستايل المباشر داخل المكون، لتعريف كائن styles يجمع الاستايلات ويشير إليها بمفاتيح، ويفضل جعله لكل مكون، مع التفريق عن كتابة CSS في الويب.7:33
    9. Platformيشرح استخدام Platform لمعرفة نظام التشغيل وتنفيذ كود مخصص لأندرويد أو iOS، ومعالجة تداخل الزر مع شريط الحالة بـ SafeAreaView وpadding علوي، وقيمة StatusBar.currentHeight.12:23
    3

    الأبعاد وتنظيم الواجهات

    10 درس
    1. Dimensionsيشرح كيفية الحصول على أبعاد شاشة الجهاز عبر Dimensions، واختلاف الأبعاد بين الأجهزة، والفرق بين البكسل والوحدات المستقلة عن الكثافة، واستخدام النسب المئوية لتصميم متجاوب.17:50
    2. Orientationsيشرح معرفة اتجاه الشاشة Orientation والتعامل مع تغيّره، باستخدام hooks مثل useWindowDimensions وuseDeviceOrientation، مع التفريق بين أبعاد screen وwindow وضبط الواجهة تبعا لذلك.19:07
    3. FlexBoxيشرح نظام Flexbox لتصميم الشاشة في React Native، فيستخدم خاصية flex لتقسيم المساحة بين العناصر بنسب، ويطبقها على رسم علم مصر بثلاثة ألوان متساوية أو بنسب مختلفة.10:46
    4. FlexDirectionيشرح خاصية flexDirection في Flexbox بقيمها row وrow-reverse وcolumn وcolumn-reverse، ويوضح تأثيرها في ترتيب العناصر داخل الحاوية، والمحور الرئيسي والمحور المتقاطع، مع مثال علم مصر.7:34
    5. التحكم فى وضع العناصريشرح خصائص التحكم في وضع العناصر داخل الـ View مثل justifyContent وalignItems، وقيم البداية والنهاية والمنتصف والتوزيع بالتساوي، والفرق بين اتجاه الصف والعمود وعكس الترتيب.17:59
    6. خروج العناصر من الشاشةيشرح التعامل مع العناصر التي تخرج من إطار الشاشة، باستخدام flexWrap لتنزيلها على سطر جديد، وخاصية alignContent لتوزيع الأسطر عندما يزيد المحتوى عن حجم الشاشة.4:41
    7. تحديد موضع العنصريشرح تحديد موضع العنصر بخاصية position، وإزاحته بقيم top وleft وright وbottom موجبة أو سالبة، والفرق بين relative بالنسبة للعناصر المجاورة وabsolute بالنسبة للشاشة.6:57
    8. تصميم الشاشة الأولى فى المشروعيشرح تصميم الشاشة الأولى للتطبيق بصورة خلفية ImageBackground، وتوسيط الشعار، وتثبيت زرين أسفل الشاشة، مع ضبط الأحجام والمحاذاة بخصائص اللاي أوت المتعلمة.29:51
    9. تصميم الشاشة الثانية فى المشروعيشرح تصميم الشاشة الثانية التي تعرض صورة بخلفية سوداء مع زرين صغيرين، وضبط حجم الزر ولونه من ملف الألوان المشترك، وفصل الألوان الأساسية والثانوية في وحدة مستقلة.25:29
    10. تحميل ملفات المشروع 1
    4

    المظهر Style

    12 درس
    1. Borderيشرح خاصية الحدود Border في React Native، فيضيف حدا حول العنصر بلون وعرض، ويستخدم borderRadius لجعله دائريا، ويحدد حدودا مختلفة لكل جهة من العنصر.8:30
    2. Shadowيشرح خاصية الظل Shadow في React Native وطريقة ضبط لونه وإزاحته وشفافيته في iOS، وأن Android يحتاج خاصية elevation بدلا منها لإظهار الظل.8:18
    3. Paddingيشرح الفرق بين padding وmargin في React Native، فالأول يضيف مسافة داخلية بين حافة العنصر ومحتواه، والثاني مسافة خارجية بينه وبين العناصر الأخرى، مع خصائص الجهات المختلفة.7:47
    4. تنسيق النصوصيشرح خصائص تنسيق النصوص في React Native، مثل سمك الخط fontWeight، ومحاذاة النص textAlign، وعائلة الخط fontFamily واختلاف الخطوط المدعومة بين Android وiOS.16:12
    5. إنشاء عنصر جديد للنصوصيشرح إنشاء مكون نص مخصص قابل لإعادة الاستخدام، وتوحيد استايل النصوص في التطبيق كله، وتحديد الخط حسب النظام باستخدام Platform، بدل تكرار الكود.12:23
    6. الأيقون Iconيشرح عرض الأيقونات في التطبيق باستخدام مكتبة vector icons، وتصفح الأيقونات واختيارها واستيرادها، وتغيير حجمها، ولماذا تحافظ على جودتها عند التكبير بعكس الصورة العادية.9:53
    7. إعادة تعديل الشاشة الأولى فى المشروعيشرح إنشاء مكون AppButton قابل لإعادة الاستخدام، وتنسيقه بالعرض والحواف والهوامش، وتمرير العنوان واللون له كخصائص مع لون افتراضي، وتطبيقه على الشاشة الأولى.27:36
    8. إعادة تعديل الشاشة الثانية فى المشروعيشرح تعديل الشاشة الثانية بإضافة أيقونتين من MaterialCommunityIcons هما الإغلاق والحذف داخل عنصري View، وضبط لونهما وحجمهما، وإزالة الخلفية للإبقاء على الأيقونة فقط.6:17
    9. إنشاء عنصر Cardيشرح إنشاء مكون Card لعرض سلعة بصورتها وعنوانها وعنوانها الفرعي، واستقبال هذه القيم كخصائص props، وتنسيق السعر بين النصوص، لإعادة استخدامه لاحقا في القوائم.26:52
    10. ListItem إنشاء عنصريبني مكوّن ListItem في React Native، وهو عنصر يعرض صورة صاحبها واسمه وعدد مشتركيه، ويستقبل هذه القيم كخصائص ثم ينسقها بالأنماط.12:23
    11. تصميم الشاشة الثالثة فى المشروعيصمم شاشة التفاصيل الثالثة التي تفتح عند الضغط على كارد، ويرتب فيها الصورة والعنوان والسعر والحاويات بالأنماط، ويضيف لونا جديدا للقائمة ويضبط الحشو.14:35
    12. تحميل ملفات المشروع 2
    5

    التعامل مع الـ Lists

    8 درس
    1. تصميم الشاشة الرابعة فى المشروع من خلال FlatListيقدّم الشابتر الخاص بالقوائم ويبني شاشة الرسائل باستخدام FlatList، مع تمرير مصفوفة البيانات، ودالة renderItem لعرض كل عنصر، وkeyExtractor لتحديد مفتاح فريد لكل عنصر.17:46
    2. إنشاء عنصر Screenينشئ مكون Screen قابلا لإعادة الاستخدام لحل مشكلة ظهور العناصر تحت شريط الحالة في Android، باستخدام SafeAreaView وStatusBar.currentHeight لضبط الحافة العلوية.15:33
    3. إنشاء عنصر Separatorينشئ مكون Separator قابلا لإعادة الاستخدام يفصل بين عناصر القائمة، ويستخدمه مع ItemSeparatorComponent في FlatList بعرض كامل وارتفاع رفيع ولون خفيف، ثم يضيفه إلى شاشة الرسائل.9:10
    4. طريقة تحديد العنصر فى القائمةيشرح جعل العنصر قابلا للضغط بمكون Touchable، وتغيير لون التظليل عند الضغط بخاصية underlayColor، وربط الضغط بدالة تنفذ منطقا معينا على العنصر المحدد من القائمة.7:37
    5. إعادة تحديث بيانات الشاشةيشرح تحديث بيانات الشاشة عند السحب لأسفل في FlatList، باستخدام useState لحفظ الرسائل وخاصية refreshing ودالة onRefresh لإضافة رسائل جديدة.7:44
    6. تصميم الشاشة الخامسة لعرض السلعيشرح تصميم شاشة عرض السلع بقائمة FlatList تعرض مكون Card، وتمرير البيانات له، واستخدام keyExtractor لتحديد مفتاح كل عنصر، وضبط ألوان الشاشة وتنسيقها.12:04
    7. تصميم الشاشة السادسة لعرض الأكونت الشخصييشرح تصميم شاشة الحساب الشخصي بمكون ListItem يعرض صورة المستخدم والاسم والبريد، وقائمة خيارات بأيقونات دائرية ملونة، مع الانتقال من كل خيار إلى شاشته.32:02
    8. تحميل ملفات المشروع 3
    6

    التعامل مع المدخلات

    11 درس
    1. التعامل مع عنصر الـ TextInputيشرح التعامل مع مكون TextInput لاستقبال إدخال المستخدم، وخصائصه مثل تحديد عدد الحروف ونوع لوحة المفاتيح، ويقرأ القيمة المكتوبة وعرضها فورا باستخدام الـ state.14:53
    2. إنشاء عنصر AppTextInputينشئ مكون AppTextInput قابلا لإعادة الاستخدام يجمع TextInput مع أيقونة وأنماط موحدة، ويمرر له الخصائص بالتمدد، ويجرّب كتابة نص ليتأكد من عمله.18:15
    3. التعامل مع عنصر Switchيشرح التعامل مع مكون Switch وكيف يختلف شكله بين Android وiOS، ويستخدم خاصية value لتحديد حالته وonValueChange لتحديثها، ويربطه بالـ state لتغيير القيمة عند الضغط.11:29
    4. إنشاء عنصر AppPickerيشرح بناء عنصر AppPicker من كود Picker الجاهز، وعرض التصنيفات عند الضغط عليه، وإضافة أيقونة من MaterialCommunityIcons بجانب النص مع تنسيق التصميم.12:19
    5. التعامل مع عنصر Modalيشرح استخدام عنصر Modal لعرض قائمة التصنيفات داخل AppPicker عند الضغط عليه، واختيار عنصر من القائمة وعرضه، مع إغلاق النافذة وإظهار أيقونة العنصر المختار.18:56
    6. إنشاء عناصر Formيشرح بناء عناصر النموذج باستخدام مكتبتي Formik وYup، حيث تدير Formik قيم الحقول وإرسالها، وتتحقق Yup من المدخلات عبر validation schema وتعرض الأخطاء.28:36
    7. تصميم شاشة الـ LoginScreenيشرح تصميم شاشة تسجيل الدخول بحقلي بريد وكلمة مرور باستخدام Formik وYup، وتحديد schema للتحقق من البريد، وعرض رسائل الخطأ، وإضافة الشعار وضبط التنسيق.21:16
    8. تصميم شاشة الـ RegisterScreenيشرح تصميم شاشة التسجيل بحقول الاسم والبريد وكلمة المرور باستخدام Formik وYup، وضبط نوع لوحة المفاتيح للبريد، وإخفاء كلمة المرور بـ secureTextEntry، وطباعة القيم المدخلة.16:54
    9. تصميم شاشة الـ ListingEditScreenيشرح تصميم شاشة ListingEditScreen لإضافة سلعة بنموذج Formik وحقول العنوان والسعر والتصنيف والوصف، وتحديد validation schema وطول الحقول، وإضافة زر الإرسال.16:48
    10. بعض التعديلات والتحسينات فى المشروعيراجع تحسينات على كود الفصل السابق، مثل إضافة Picker لاختيار الفئة وضبط عرض العناصر وتحديد عدد أسطر النص في الكارد، ويمهد لإضافة منطق التطبيق والصور في الفصل التالي.9:12
    11. تحميل ملفات المشروع 4
    7

    التعامل مع المميزات الأصلية

    10 درس
    1. مقدمة الشابتر (التعامل مع المميزات الأصلية)يقدّم الشابتر الخاص بمميزات الجهاز مثل الكاميرا والصور والموقع، ويبحث عن مكتبة Expo المناسبة لاختيار الصور، ويتصفح وثائقها ويثبّتها في المشروع.9:21
    2. طلب صلاحيات الوصوليشرح طلب صلاحية الوصول إلى الصور في التطبيق عبر ImagePicker وfunction تعمل مرة واحدة باستخدام useEffect، ويتحقق من نتيجة الطلب وحالة منح الإذن.10:43
    3. التعامل مع صلاحيات الوصول المختلفةيشرح التعامل مع صلاحيات الوصول المختلفة عبر Permissions API في Expo، لطلب أذونات متعددة مثل الكاميرا والموقع، ويفحص نتيجة المنح ويتصرف حسب قبول المستخدم أو رفضه.7:58
    4. الوصول للصور من على الجهازيشرح الوصول إلى صور الجهاز بعد أخذ إذن المستخدم، واستدعاء مكتبة اختيار الصور عند الضغط على زر، وعرض الصورة المختارة داخل مكون Image.9:19
    5. إنشاء عنصر ImageInputيشرح إنشاء عنصر ImageInput لاختيار الصور، بطلب إذن الكاميرا باستخدام useEffect، وفتح مكتبة الصور عند الضغط، وتنسيق الحاوية والصورة المعروضة.21:55
    6. إنشاء عنصر ImageInputListيشرح إنشاء عنصر ImageInputList لعرض قائمة الصور المختارة داخل ScrollView، مع دالتي إضافة صورة وحذفها، وحفظ المسارات في مصفوفة وحذف الصورة عند الضغط عليها.16:32
    7. إنشاء عنصر FormImagePickerيشرح إنشاء عنصر FormImagePicker الذي يربط ImageInputList بـ Formik، فيتعامل مع أخطاء الصور وإضافتها وحذفها عبر setFieldValue، ويعرض رسالة الخطأ عند عدم اختيار صورة.8:16
    8. رفع الصور وإضافتها بالنسبة لشاشة ListingEditScreenيشرح إضافة عنصر FormImagePicker إلى شاشة ListingEditScreen لرفع صور السلعة، وربطه بحقل images في Formik، وإخفاء رسالة الخطأ بعد اختيار الصورة، ثم تجهيز البيانات للإرسال للسيرفر.4:35
    9. الوصول لمكان الهاتف Locationيشرح الوصول إلى موقع الهاتف باستخدام مكتبة expo-location، وطلب إذن الموقع، وجلب خط العرض وخط الطول، ثم وضع الكود في Hook مخصص useLocation لإعادة استخدامه في أي شاشة.15:24
    10. تحميل ملفات المشروع 5
    8

    التنقل بين الشاشات

    12 درس
    1. مقدمة الشابتر (التنقل بين الشاشات)يقدّم الشابتر الخاص بالتنقل بين الشاشات، ويعرض أنواع المتنقلات مثل Stack وTab وDrawer، ثم يثبّت مكتبة React Navigation وما تحتاجه من حزم مساندة.6:29
    2. التعامل مع الـ StackNavigatorيشرح استخدام Stack Navigator من مكتبة React Navigation، فيثبّت المكتبة، وينشئ المتنقل بـ createNativeStackNavigator، ويعرّف الشاشات داخله ويلفه بـ NavigationContainer.16:17
    3. كيفية الانتقال بين الشاشات عن طريق االـ Stackيشرح الانتقال بين الشاشات باستخدام Stack، فيضع NavigationContainer حول المتنقل، ويستخدم navigation.navigate للذهاب إلى شاشة أخرى، ويمرر navigation إلى المكونات عبر useNavigation.8:23
    4. إرسال البيانات بين الشاشاتيشرح إرسال بيانات من شاشة إلى أخرى عبر route، وتمرير كائن فيه معرف واسم ووصف عند التنقل، وقراءتها في الشاشة الثانية وعرضها.9:16
    5. تغيير الاستايل الخاص بالـ Headerيشرح تغيير استايل الـ Header في التنقل، كلون الخلفية، وضبطه لشاشة واحدة أو لكل الشاشات من خيارات الـ Navigator، وأيهما له الأولوية عند التعارض.6:29
    6. التعامل مع الـ TapNavigatorيشرح التنقل بالتابات باستخدام bottom tab navigator، وتثبيت الحزمة، وإنشاء Tab Navigator بشاشتين، وإحلاله محل الـ Stack داخل NavigationContainer.8:27
    7. التعامل مع الاستايل بالنسبة للشاشات من خلال الـ Tapيشرح تنسيق التابات في Tab Navigator، كلون التاب النشط وغير النشط وحجم الأيقونة، وإضافة أيقونات لكل تاب عبر tabBarIcon، وإخفاء الـ Header المكرر عند احتواء Stack داخل التاب.11:17
    8. إنشاء عنصر الانتقال AuthNavigationيشرح إنشاء AuthNavigation داخل مجلد navigation، باستخدام Stack Navigator يربط شاشات الترحيب وتسجيل الدخول والتسجيل، وإخفاء الـ Header، والتنقل بين الشاشات بالضغط على الأزرار.8:27
    9. إنشاء عنصري الانتقال AppNavigation, FeedNavigationيربط شاشات التطبيق بعنصري التنقل AppNavigation وFeedNavigation في React Native، ويضبط التبويبات السفلية والعناوين، ويمرر بيانات العنصر المضغوط من شاشة القائمة إلى الشاشة التالية.18:43
    10. إنشاء عنصر الانتقال AccountNavigationينشئ عنصر التنقل AccountNavigation بنفس فكرة FeedNavigation، ويربطه بتبويب الحساب في AppNavigation، ثم يضيف زرا في شاشة الحساب ينقل المستخدم إلى شاشة الرسائل عبر navigate.5:34
    11. تصميم AppNavigationيضيف أيقونات MaterialCommunityIcons لتبويبات AppNavigation، وينشئ زرا مخصصا للتبويب الأوسط بمكوّن دالة، مع تنسيقه ومعالجة الضغط عليه للانتقال إلى الشاشة المطلوبة.11:52
    12. تحميل ملفات المشروع 6
    9

    التعامل مع الشبكات Networks

    6 درس
    1. مقدمة الشابتر (التعامل مع الشبكات)يقدّم الشابتر الخاص بالتعامل مع الشبكات وربط التطبيق بالـ backend بدلا من البيانات الوهمية، ويستعرض مفاهيم الإنترنت والويب وبروتوكول HTTP وأدوات مثل fetch وaxios لطلبات GET وPOST وDELETE.3:35
    2. التعامل مع الـ BackEndيشرح مفاهيم الشبكات الأساسية، ومعنى الإنترنت، وطلب الـ request من المتصفح إلى السيرفر وأجزاؤه مثل الـ URL، والأفعال GET وPOST وDELETE، وأكواد حالة الاستجابة، وعلاقة السيرفر بالـ endpoints.23:39
    3. مفهوم الـ APIيشرح مفهوم الـ API كحلقة وصل بين واجهة المستخدم والـ backend server وقاعدة البيانات، ويشبهه بالنادل الذي ينقل الطلب إلى المطبخ ويعيد الرد، ويربطه بتعامل التطبيق مع الخدمات.4:21
    4. التعامل مع الـ Postmanيشرح استخدام أداة Postman لاختبار الباك إند، وإرسال طلب POST ببيانات في الجسم وطلب GET لجلب التصنيفات، وفهم رد الخادم وحالة النجاح.11:47
    5. التعامل مع الـ Fetch and Axiosيشرح طريقتين للتعامل مع الـ API من التطبيق، هما Fetch المدمجة في المتصفح التي ترجع Promise، ومكتبة Axios، وكيفية طلب البيانات وقراءة الرد.9:28
    6. تحميل ملفات المشروع 7

    المحاضر

    م/عمرو عبد الفتاح

    م/عمرو عبد الفتاح

    مهندس أنظمة حاسوب متخصص في تطوير وتصميم تطبيقات الهواتف ومواقع الإنترنت، عمل على تطوير منصات ومواقع شهيرة.
    49.1K مشاهدة20 دورة

    دورات ذات صلة