بناء تطبيقات React و GraphQL: دورة مجانية مكثفة في ساعة واحدة مع كارل هادوين

هل تساءلت يوماً عن كيفية دمج قوة React.js مع مرونة GraphQL لبناء تطبيقات ويب حديثة؟ إذاً، فإن دورة سكرامبا المجانية والمكثفة التي تستغرق ساعة واحدة فقط هي بوابتك لهذا العالم! تقدم هذه الدورة منهجاً عملياً مباشراً، حيث تغوص بك في استخدام مجموعة واسعة من التقنيات المتطورة لإنشاء تطبيق سريع الأداء بكود برمجي موجز وفعال.

لماذا تتعلم React و GraphQL؟

تُعد GraphQL بديلاً قوياً لواجهات برمجة التطبيقات التقليدية (REST APIs)، حيث توفر أوقات بناء وتكرار أسرع بشكل ملحوظ. تتميز GraphQL بقدرتها على تقليل كمية البيانات المرسلة من الخادم إلى العميل، مما يعني تطبيقات أكثر سرعة واستجابة. هذه الميزة لا غنى عنها لأي مطور React يسعى لبناء تجارب مستخدم متميزة وفعالة.

تعرف على مدرب الدورة: كارل هادوين

يقدم هذه الدورة التدريبية المتميزة الخبير كارل هادوين، وهو مطور متخصص في JavaScript و React يمتلك خبرة تزيد عن عشر سنوات في المجال. يدير كارل أيضاً قناة على يوتيوب يقدم من خلالها دروساً تعليمية حول React و JavaScript و GraphQL، مما يجعله الشخص الأمثل لمساعدتك في صقل مهاراتك والارتقاء بها في عالم React و GraphQL.

ماذا ستتعلم في هذه الدورة؟

خلال هذه الدورة، ستتعلم كيفية بناء تطبيق واجهة أمامية (front-end) ممتع يعرض شخصيات البوكيمون وحقائقها وصورها، وذلك باستخدام React و GraphQL ومكتبة Apollo. تتميز الدورة بكونها تفاعلية ومباشرة، مما يعني أنك ستتمكن من بناء تطبيق مشابه لما هو موضح أدناه في وقت قياسي:

وفقاً لتقاليد سكرامبا، تزخر دورة كارل هادوين بالعديد من التحديات البرمجية التفاعلية المصممة لمساعدتك على تطبيق معرفتك وترسيخ تعلمك. ندعوك لزيارة سكرامبا الآن ومتابعة القراءة لاكتشاف المزيد.

مراحل بناء التطبيق العملي

نظرة عامة على التقنيات المستخدمة

في الجزء الأول من الدورة، يقدم لنا كارل التقنيات الأساسية التي سنعتمد عليها في بناء التطبيق، وهي:

• مكتبة React لبناء واجهات المستخدم التفاعلية.
• لغة الاستعلام GraphQL لإدارة البيانات.
• مكتبة Apollo كعميل GraphQL.
• لغة التنسيق CSS لتصميم واجهة التطبيق.
• واجهة برمجة تطبيقات Pokemon API المفتوحة كمصدر للبيانات.

إعداد بيئة العمل وتثبيت الاعتماديات

حان الوقت الآن لبدء مشروعنا. الخطوة الأولى تتضمن تثبيت الاعتماديات (dependencies) الضرورية لمكتبات Apollo و GraphQL و React. بعد ذلك، سنقوم بإنشاء الهيكل الأساسي للمشروع، بما في ذلك الملفات والمجلدات المطلوبة:

 import React from "react" ;
 import { render } from "react-dom" ;
 import { App } from "./App" ;

 render(
   < App /> ,
   document .getElementById( "root" )); 

إطلاق شرارة الحياة لتطبيقنا

بعد إعداد الهيكل، ننتقل إلى منح تطبيقنا الحياة من خلال تعديل ملف التطبيق الرئيسي (App) والتفاعل مع خادم GraphQL. يوضح هذا الجزء من الدورة الخطوات التالية لتمكين المستخدم من التفاعل مع التطبيق:

 export function App ( ) {
   const client = new ApolloClient({
     uri : "https://graphql-pokemon.now.sh" ,
   });

   return < p > I am a Pokemon </ p > ;
 } 

• إعداد عميل Apollo (Apollo Client).
• بناء مكون ApolloProvider وتمرير العميل (client) كخاصية (prop).
• إضافة وسم <main> ومكون PokemonsContainer.

فهم GraphQL في العمق

يتناول هذا الجزء خادم GraphQL الذي سنستخدمه في تطبيقنا. الميزة الرائعة في GraphQL هي أنها تمكننا من طلب الحقول المحددة التي نحتاجها فقط من الكائن (object)، على عكس REST APIs التي ترسل جميع المعلومات المتاحة، مما يؤدي إلى زيادة حجم البيانات المنقولة بلا داعٍ. يوضح لنا كارل هذه الميزة عملياً من خلال توجيهنا لبناء وتشغيل أول استعلام GraphQL خاص بنا.

استخدام مكون الحاوية لعرض البوكيمونات

في الجزء التالي، سنقوم ببناء مكون الحاوية الرئيسي (main container) الذي سيسمح لنا بالتكرار على قائمة البوكيمونات وعرضها. يبدأ كارل بتوضيح كيفية جلب البيانات من Pokemon API:

 const { data : { pokemons = [] } = {} } = useQuery(GET_POKEMONS, {
   variables : { first : 9 },
 }); 

بعد ذلك، يأتي دور التحدي التفاعلي: تمرير خاصيتين (props)، وهما key و pokemon. يمكنك التوجه إلى الدورة لتجربة هذا التحدي بنفسك.

صياغة استعلام GraphQL وإنشاء مكون البوكيمون

في هذا الجزء، نبدأ ببناء استعلام GraphQL الخاص بنا:

 import gql from "graphql-tag" ;

 export const GET_POKEMONS = gql `
   query pokemons($first: Int!) {
     pokemons(first: $first) {
       id
       name
       image
       maxHP
       maxCP
       attacks {
         special {
           name
           damage
         }
       }
     }
   }
 ` ;
 

بعد ذلك، يقدم لنا كارل الهيكل الأساسي لمكون البوكيمون (Pokemon component):

 export function Pokemon ( { pokemon } ) {
   return < p > {pokemon.name} </ p > ;
 } 

التحدي الآن هو استكمال بناء مكون Pokemon لعرض جميع المعلومات المسترجعة من API. انقر للانتقال إلى الدورة وتجربة هذا التحدي.

استكمال مكون البوكيمون

في الخطوة التالية، يشرح لنا كارل كيفية التكرار على ما يصل إلى ثلاثة من هجمات البوكيمون المتعددة وعرضها:

 { pokemon.attacks.special.slice( 0 , 3 ).map( ( attack ) => < span > </ span > ); }
 

لدينا أيضاً تحدٍ مصغر يتمثل في إضافة خاصية key داخل وسم div الخاص بـ pokemon__attacks. انقر الآن لتجربة هذا التحدي.

إضفاء لمسة جمالية على تطبيقنا: التنسيق باستخدام CSS

بعد أن قمنا بإنشاء تطبيقنا، حان الوقت لمنحه مظهراً جذاباً. في هذا الجزء الغني من الدورة، يشرح لنا كارل كيفية تنسيق جميع عناصر تطبيق البوكيمون باستخدام CSS، ويقدم لنا بعض التحديات الشيقة في هذا الصدد. بالطبع، الأنماط المقترحة من كارل هي مجرد تفضيل شخصي، ويمكنك تنسيق تطبيقك بالطريقة التي تفضلها!

 .container .pokemon {
   width : 49% ;
   background-color : #fff ;
   background-clip : border-box;
   border : 1px solid rgba ( 0 , 0 , 0 , 0.125 );
   border-radius : 0.25rem ;
   box-shadow : 0 0.125rem 0.25rem rgba ( 0 , 0 , 0 , 0.075 );
   overflow : hidden;
   margin-bottom : 20px ;
 } 

تكييف التطبيق مع مختلف أحجام الشاشات (Responsive Styling)

في الجزء الأخير من الدورة، سنتعلم كيفية جعل تطبيقنا متجاوباً (responsive) ويتكيف مع مختلف أحجام الشاشات باستخدام استعلامات الوسائط (media queries):

 @media ( max-width: 800px ) {
   .container .pokemon {
     width : 100% ;
   }
 }

 @media ( max-width: 400px ) {
   .container .pokemon__attacks ,
   .container .pokemon__meta {
     flex-wrap : wrap;
   }

   .container .pokemon__meta span ,
   .container .pokemon__attacks span ,
   .container .pokemon {
     width : 100% ;
   }

   .container .pokemon__meta span {
     margin-bottom : 10px ;
   }
 } 

بإتمام هذه الخطوة، سيظهر تطبيقنا بمظهر رائع ومتناسق على جميع أحجام المتصفحات. تهانينا على إكمال الدورة! لقد نجحت في إنشاء وتصميم تطبيق React يعمل بكامل طاقته ويتصل بخادم GraphQL، وهو إنجاز عظيم. نأمل أن تكون قد اكتسبت الكثير من المعرفة خلال هذه الدورة وأن تتاح لك الفرصة لتطبيق مهاراتك الجديدة في مشاريع وتطبيقات أخرى قريباً. في هذه الأثناء، لماذا لا تتصفح سكرامبا لاكتشاف الدورات الأخرى المتاحة؟

الخلاصة التقنية

تُقدم هذه الدورة المجانية من سكرامبا، بإشراف الخبير كارل هادوين، نموذجاً ممتازاً لكيفية دمج تقنيات الواجهة الأمامية الحديثة مثل React مع قوة GraphQL في إدارة البيانات. إن التركيز على بناء تطبيق عملي للبوكيمون يوضح بفعالية مزايا GraphQL في تحسين أداء التطبيقات وتقليل استهلاك النطاق الترددي مقارنة بـ REST APIs. كما أن استخدام مكتبة Apollo يبسط عملية التفاعل مع GraphQL، مما يجعلها خياراً مثالياً للمطورين الذين يسعون لبناء تطبيقات ويب سريعة، متجاوبة، وقابلة للتطوير. الدورة مثالية للمبتدئين والمتوسطين الذين يرغبون في فهم دورة حياة بناء تطبيق React متكامل مع GraphQL من الصفر.