كيفية إنشاء تطبيق في الوقت الفعلي باستخدام اشتراكات GraphQL على Postgres

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

سيكون التركيز الأساسي على إعداد الواجهة الخلفية (نشر الأدوات الجاهزة للاستخدام ، ونمذجة المخطط) ، وجوانب تكامل الواجهة الأمامية مع GraphQL وبدرجة أقل على UI / UX للواجهة الأمامية (بعض المعرفة بـ ReactJS ستساعد). سيأخذ قسم البرنامج التعليمي منهج التلوين بالأرقام ، لذلك سنقوم فقط باستنساخ GitHub repo لنمذجة المخطط وواجهة المستخدم وتعديلها ، بدلاً من إنشاء التطبيق بالكامل من البداية.

قبل متابعة قراءة هذا المقال ، أود أن أذكر أن المعرفة العملية بالتقنيات (أو البدائل) التالية مفيدة:

• ReactJS
  يمكن استبدال هذا بأي إطار عمل للواجهة الأمامية ، Android أو IOS باتباع وثائق مكتبة العميل.
• بوستجرس
  يمكنك العمل مع قواعد بيانات أخرى ولكن باستخدام أدوات مختلفة ، ستظل المبادئ الموضحة في هذا المنشور سارية.

يمكنك أيضًا تكييف سياق البرنامج التعليمي هذا مع تطبيقات الوقت الفعلي الأخرى بسهولة بالغة.

كما يتضح من حمولة GraphQL المصاحبة في الأسفل ، هناك ثلاث ميزات رئيسية نحتاج إلى تنفيذها:

1. قم بإحضار سؤال الاستطلاع وقائمة الخيارات (أعلى اليسار).
2. السماح للمستخدم بالتصويت على سؤال استطلاع معين (زر "التصويت").
3. قم بإحضار نتائج الاستطلاع في الوقت الفعلي وعرضها في رسم بياني شريطي (أعلى اليمين ؛ يمكننا إخفاء الميزة لجلب قائمة بالمستخدمين المتصلين حاليًا لأنها نسخة طبق الأصل من حالة الاستخدام هذه).

تحديات إنشاء تطبيقات في الوقت الفعلي

يعد إنشاء تطبيقات في الوقت الفعلي (خاصةً كمطور للواجهة الأمامية أو شخص انتقل مؤخرًا ليصبح مطورًا متكاملًا) مشكلة هندسية صعبة الحل. هذه بشكل عام طريقة عمل تطبيقات الوقت الفعلي المعاصرة (في سياق تطبيقنا المثال):

1. تقوم الواجهة الأمامية بتحديث قاعدة بيانات ببعض المعلومات ؛ يتم إرسال تصويت المستخدم إلى الخلفية ، أي الاستطلاع / الخيار ومعلومات المستخدم ( option_id user_id .
2. يؤدي التحديث الأول إلى تشغيل خدمة أخرى تقوم بتجميع بيانات الاستطلاع لتقديم مخرجات يتم ترحيلها مرة أخرى إلى التطبيق في الوقت الفعلي (في كل مرة يتم فيها تصويت جديد بواسطة أي شخص ؛ إذا تم ذلك بكفاءة ، فستتم معالجة بيانات الاستطلاع المحدثة فقط و يتم تحديث العملاء الذين اشتركوا في هذا الاستطلاع فقط):
   • تتم معالجة بيانات التصويت أولاً بواسطة خدمة register_vote (بافتراض أن بعض عمليات التحقق من الصحة تحدث هنا) والتي تؤدي إلى poll_results خدمة نتائج الاستطلاع.
   • يتم ترحيل بيانات الاستطلاع المجمعة في الوقت الفعلي بواسطة خدمة poll_results إلى الواجهة الأمامية لعرض الإحصائيات الإجمالية.

هذا النموذج مشتق من نهج بناء API التقليدي ، وبالتالي لديه مشاكل مماثلة:

1. يمكن أن تسوء أي من الخطوات المتسلسلة ، مما يترك UX معلقًا ويؤثر على العمليات المستقلة الأخرى.
2. يتطلب الكثير من الجهد على طبقة API لأنها نقطة اتصال واحدة لتطبيق الواجهة الأمامية ، والتي تتفاعل مع خدمات متعددة. كما يحتاج أيضًا إلى تنفيذ واجهة برمجة تطبيقات في الوقت الفعلي قائمة على مآخذ الويب - لا يوجد معيار عالمي لذلك ، وبالتالي يرى دعمًا محدودًا للأتمتة في الأدوات.
3. مطلوب تطبيق الواجهة الأمامية لإضافة السباكة اللازمة لاستهلاك واجهة برمجة التطبيقات في الوقت الفعلي وقد يتعين عليه أيضًا حل مشكلة تناسق البيانات التي تظهر عادةً في تطبيقات الوقت الفعلي (أقل أهمية في المثال الذي اخترناه ، ولكنه مهم في ترتيب الرسائل بشكل حقيقي تطبيق الدردشة -time).
4. تلجأ العديد من عمليات التنفيذ إلى استخدام قواعد بيانات إضافية غير علائقية على جانب الخادم (Firebase ، وما إلى ذلك) لسهولة دعم واجهة برمجة التطبيقات في الوقت الفعلي.

دعنا نلقي نظرة على كيفية معالجة GraphQL والأدوات المرتبطة بهذه التحديات.

ما هي GraphQL؟

GraphQL هي مواصفات للغة استعلام لواجهات برمجة التطبيقات ، ووقت تشغيل من جانب الخادم لتنفيذ الاستعلامات. تم تطوير هذه المواصفات بواسطة Facebook لتسريع تطوير التطبيق وتوفير تنسيق وصول إلى البيانات موحد لا يحيد قاعدة البيانات. يجب أن يدعم أي خادم GraphQL متوافق مع المواصفات ما يلي:

1. استفسارات للقراءات
   نوع طلب لطلب بيانات متداخلة من مصدر بيانات (والتي يمكن أن تكون إما قاعدة بيانات واحدة أو مجموعة ، أو REST API أو مخطط / خادم GraphQL آخر).
2. طفرات للكتابة
   نوع طلب لكتابة / ترحيل البيانات إلى مصادر البيانات المذكورة أعلاه.
3. اشتراكات للاستعلامات الحية
   نوع طلب للعملاء للاشتراك في التحديثات في الوقت الفعلي.

تستخدم GraphQL أيضًا مخططًا مكتوبًا. يحتوي النظام البيئي على الكثير من الأدوات التي تساعدك على تحديد الأخطاء في وقت dev / compile مما يؤدي إلى عدد أقل من أخطاء وقت التشغيل.

إليك سبب أهمية GraphQL لتطبيقات الوقت الفعلي:

• تعد الاستعلامات المباشرة (الاشتراكات) جزءًا ضمنيًا من مواصفات GraphQL. يجب أن يتمتع أي نظام GraphQL بقدرات API أصلية في الوقت الفعلي.
• عززت المواصفات القياسية للاستعلامات في الوقت الفعلي جهود المجتمع حول الأدوات من جانب العميل ، مما أدى إلى طريقة سهلة للغاية للتكامل مع واجهات برمجة تطبيقات GraphQL.

توفر GraphQL ومجموعة من الأدوات مفتوحة المصدر لأحداث قواعد البيانات والوظائف التي لا تحتوي على خادم / سحابة ركيزة رائعة لبناء تطبيقات السحابة الأصلية مع منطق الأعمال غير المتزامن وميزات الوقت الفعلي التي يسهل بناؤها وإدارتها. ينتج عن هذا النموذج الجديد أيضًا تجربة رائعة للمستخدم والمطور.

في بقية هذه المقالة ، سأستخدم أدوات مفتوحة المصدر لإنشاء تطبيق بناءً على مخطط البنية هذا:

إنشاء تطبيق تصويت / اقتراع في الوقت الفعلي

مع هذه المقدمة إلى GraphQL ، دعنا نعود إلى بناء تطبيق الاقتراع كما هو موضح في القسم الأول.

تم اختيار الميزات الثلاث (أو القصص المميزة) لتوضيح أنواع طلبات GraphQL المختلفة التي سيقدمها تطبيقنا:

1. استفسار
   إحضار سؤال الاستطلاع وخياراته.
2. طفره
   السماح للمستخدم بالتصويت.
3. الاشتراك
   عرض لوحة تحكم في الوقت الحقيقي لنتائج الاستطلاع.

المتطلبات الأساسية

• حساب Heroku (استخدم المستوى المجاني ، لا يلزم وجود بطاقة ائتمان)
  لنشر خلفية GraphQL (انظر النقطة التالية أدناه) ومثيل Postgres.
• Hasura GraphQL Engine (مجاني ، مفتوح المصدر)
  خادم GraphQL جاهز للاستخدام على Postgres.
• عميل أبولو (SDK مجاني ومفتوح المصدر)
  لدمج تطبيقات العملاء بسهولة مع خادم GraphQL.
• npm (مدير حزم مجاني مفتوح المصدر)
  لتشغيل تطبيق React الخاص بنا.

نشر قاعدة البيانات وخلفية GraphQL

سننشر مثيلاً لكل من Postgres و GraphQL Engine على الطبقة المجانية لـ Heroku. يمكننا استخدام زر Heroku الأنيق للقيام بذلك بنقرة واحدة.

ملاحظة: يمكنك أيضًا اتباع هذا الرابط أو البحث عن وثائق نشر Hasura GraphQL لـ Heroku (أو الأنظمة الأساسية الأخرى).

لن تحتاج إلى أي تكوين إضافي ، ويمكنك فقط النقر فوق الزر "نشر التطبيق". بمجرد اكتمال النشر ، قم بتدوين عنوان URL للتطبيق:

 <app-name>.herokuapp.com

على سبيل المثال ، في لقطة الشاشة أعلاه ، سيكون:

 hge-realtime-app-tutorial.herokuapp.com

ما قمنا به حتى الآن هو نشر مثيل Postgres (كإضافة في لغة Heroku) ومثيل GraphQL Engine الذي تم تكوينه لاستخدام مثيل Postgres هذا. نتيجة للقيام بذلك ، لدينا الآن واجهة برمجة تطبيقات GraphQL جاهزة للاستخدام ، ولكن نظرًا لعدم وجود أي جداول أو بيانات في قاعدة البيانات الخاصة بنا ، فإن هذا ليس مفيدًا حتى الآن. لذا ، دعنا نتناول هذا على الفور.

نمذجة مخطط قاعدة البيانات

يلتقط الرسم التخطيطي التالي مخطط قاعدة بيانات علائقية بسيط لتطبيق الاستطلاع الخاص بنا:

كما ترى ، يعد المخطط مخططًا بسيطًا وطبيعيًا يستفيد من قيود المفتاح الخارجي. يتم تفسير هذه القيود بواسطة GraphQL Engine على أنها 1: 1 أو 1: العديد من العلاقات (على سبيل المثال ، poll:options هي علاقة 1: العديد من العلاقات حيث سيكون لكل استطلاع أكثر من خيار واحد مرتبط بقيد المفتاح الخارجي بين عمود id في جدول poll poll_id معرّف الاستطلاع في جدول option ). يمكن نمذجة البيانات ذات الصلة كرسم بياني وبالتالي يمكنها تشغيل واجهة برمجة تطبيقات GraphQL. هذا هو بالضبط ما يفعله محرك GraphQL.

بناءً على ما سبق ، سيتعين علينا إنشاء الجداول والقيود التالية لنمذجة مخططنا:

1. Poll
   جدول لالتقاط سؤال الاستطلاع.
2. Option
   خيارات لكل استطلاع.
3. Vote
   لتسجيل تصويت المستخدم.
4. قيد المفتاح الخارجي بين الحقول التالية ( table : column ):
   • option : poll_id → poll : id
   • vote : poll_id → poll : id
   • vote : created_by_user_id → user : id

الآن بعد أن أصبح لدينا تصميم المخطط الخاص بنا ، فلنقم بتنفيذه في قاعدة بيانات Postgres الخاصة بنا. لإحضار هذا المخطط على الفور ، إليك ما سنفعله:

1. قم بتنزيل GraphQL Engine CLI.
2. استنساخ هذا الريبو:
   

    $ git clone clone https://github.com/hasura/graphql-engine $ cd graphql-engine/community/examples/realtime-poll

3. انتقل إلى hasura/ وقم بتعديل config.yaml :
   

    endpoint: https://<app-name>.herokuapp.com

4. قم بتطبيق عمليات الترحيل باستخدام CLI ، من داخل دليل المشروع (الذي قمت بتنزيله للتو عن طريق الاستنساخ):
   

    $ hasura migrate apply

هذا كل شيء للواجهة الخلفية. يمكنك الآن فتح وحدة تحكم GraphQL Engine والتحقق من وجود جميع الجداول (تتوفر وحدة التحكم على https://<app-name>.herokuapp.com/console ).

ملاحظة: يمكنك أيضًا استخدام وحدة التحكم لتنفيذ المخطط عن طريق إنشاء جداول فردية ثم إضافة قيود باستخدام واجهة المستخدم. يعد استخدام الدعم المدمج لعمليات الترحيل في GraphQL Engine مجرد خيار مناسب كان متاحًا لأن نموذج إعادة الشراء الخاص بنا به عمليات ترحيل لإحضار الجداول المطلوبة وتكوين العلاقات / القيود (يُنصح بشدة بهذا بغض النظر عما إذا كنت تبني هواية مشروع أو تطبيق جاهز للإنتاج).

دمج تطبيق Frontend React مع GraphQL Backend

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

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

تكوين تطبيق الواجهة الأمامية

1. في الريبو المستنسخ في القسم السابق ، قم بتحرير HASURA_GRAPHQL_ENGINE_HOSTNAME في ملف src / apollo.js (داخل مجلد / community /amples /community/examples/realtime-poll ) واضبطه على عنوان URL لتطبيق Heroku من الأعلى:
   

    export const HASURA_GRAPHQL_ENGINE_HOSTNAME = 'random-string-123.herokuapp.com';

2. انتقل إلى جذر المستودع / مجلد التطبيق ( /realtime-poll/ ) واستخدم npm لتثبيت الوحدات النمطية المسبقة ثم قم بتشغيل التطبيق:
   

    $ npm install $ npm start 

يجب أن تكون قادرًا على اللعب مع التطبيق الآن. انطلق وقم بالتصويت عدة مرات كما تريد ، ستلاحظ تغيير النتائج في الوقت الفعلي. في الواقع ، إذا قمت بإعداد مثيل آخر لواجهة المستخدم هذه ووجهته إلى نفس الواجهة الخلفية ، فستتمكن من رؤية النتائج مجمعة عبر جميع المثيلات.

إذن ، كيف يستخدم هذا التطبيق GraphQL؟ واصل القراءة.

خلف الكواليس: GraphQL

في هذا القسم ، سوف نستكشف ميزات GraphQL التي تعمل على تشغيل التطبيق ، يليها عرض توضيحي لسهولة التكامل في القسم التالي.

مكون الاستطلاع والرسم البياني للنتائج المجمعة

مكون الاستطلاع الموجود في أعلى اليسار والذي يجلب الاستطلاع بجميع خياراته ويلتقط تصويت المستخدم في قاعدة البيانات. تتم كلتا العمليتين باستخدام واجهة برمجة تطبيقات GraphQL. لجلب تفاصيل الاستطلاع ، نقوم بعمل استعلام (تذكر هذا من مقدمة GraphQL؟):

 query { poll { id question options { id text } } }

باستخدام مكون الطفرة من react-apollo ، يمكننا توصيل الطفرة إلى نموذج HTML بحيث يتم تنفيذ الطفرة باستخدام المتغيرين optionId و userId عند إرسال النموذج:

 mutation vote($optionId: uuid!, $userId: uuid!) { insert_vote(objects: [{option_id: $optionId, created_by_user_id: $userId}]) { returning { id } } }

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

 CREATE VIEW poll_results AS SELECT poll.id AS poll_id, o.option_id, count(*) AS votes FROM (( SELECT vote.option_id, option.poll_id, option.text FROM ( vote LEFT JOIN public.option ON ((option.id = vote.option_id)))) o LEFT JOIN poll ON ((poll.id = o.poll_id))) GROUP BY poll.question, o.option_id, poll.id;

تجمع طريقة العرض poll_results البيانات من جداول vote poll لتوفير عدد إجمالي لعدد الأصوات لكل خيار.

باستخدام اشتراكات GraphQL عبر هذا العرض ومخططات تفاعل google ومكوِّن الاشتراك من react-apollo ، يمكننا إنشاء مخطط تفاعلي يتم تحديثه في الوقت الفعلي عند إجراء تصويت جديد من أي عميل.

 subscription getResult($pollId: uuid!) { poll_results(where: {poll_id: {_eq: $pollId}}) { option { id text } votes } }

تكامل واجهة برمجة تطبيقات GraphQL

كما ذكرت سابقًا ، استخدمت Apollo Client ، وهو SDK مفتوح المصدر لدمج تطبيق ReactJS مع الواجهة الخلفية لـ GraphQL. يعد Apollo Client مشابهًا لأي مكتبة عميل HTTP مثل طلبات Python ووحدة http القياسية لجافا سكريبت وما إلى ذلك. إنه يلخص تفاصيل إجراء طلب HTTP (في هذه الحالة طلبات POST). يستخدم التكوين (المحدد في src/apollo.js ) لإجراء طلبات استعلام / طفرة / اشتراك (محددة في src / GraphQL.jsx مع خيار استخدام المتغيرات التي يمكن استبدالها ديناميكيًا في كود JavaScript لتطبيق REACT الخاص بك) نقطة نهاية GraphQL. كما أنه يستفيد من المخطط المكتوب خلف نقطة نهاية GraphQL لتوفير التحقق من صحة وقت التجميع / التطوير للطلبات المذكورة أعلاه. دعونا نرى مدى سهولة قيام تطبيق العميل بطلب استعلام مباشر (اشتراك) لواجهة GraphQL API.

تكوين SDK

يجب توجيه Apollo Client SDK إلى خادم GraphQL ، بحيث يمكنه التعامل تلقائيًا مع الكود المعياري المطلوب عادةً لمثل هذا التكامل. لذلك ، هذا هو بالضبط ما فعلناه عندما قمنا بتعديل src / apollo.js عند إعداد تطبيق الواجهة الأمامية.

إجراء طلب اشتراك في GraphQL (استعلام مباشر)

حدد الاشتراك الذي نظرنا إليه في القسم السابق في ملف src / GraphQL.jsx :

 const SUBSCRIPTION_RESULT = ` subscription getResult($pollId: uuid!) { poll_results ( order_by: option_id_desc, where: { poll_id: {_eq: $pollId} } ) { option_id option { id text } votes } }`;

سنستخدم هذا التعريف لتوصيل مكون React الخاص بنا:

 export const Result = (pollId) => ( <Subscription subscription={gql`${SUBSCRIPTION_RESULT}`} variables={pollId}> {({ loading, error, data }) => { if (loading) return
 جارٍ التحميل ... </ p>؛
       إذا (خطأ) يعود
 خطأ: </ p>؛
       إرجاع (
         <div>
           <div>
             {renderChart (بيانات)}
           </div>
         </div>
       ) ؛
    }}
  </ الاشتراك>
)

شيء واحد يجب ملاحظته هنا هو أن الاشتراك أعلاه يمكن أن يكون أيضًا استعلامًا. مجرد استبدال كلمة رئيسية بأخرى يمنحنا "استعلامًا مباشرًا" ، وهذا كل ما يتطلبه الأمر لـ Apollo Client SDK لربط واجهة برمجة التطبيقات هذه في الوقت الفعلي بتطبيقك. في كل مرة توجد فيها مجموعة بيانات جديدة من استعلامنا المباشر ، تقوم SDK بتشغيل إعادة عرض مخططنا بهذه البيانات المحدثة (باستخدام renderChart(data) ). هذا هو. هو حقا بهذه البساطة!

افكار اخيرة

في ثلاث خطوات بسيطة (إنشاء خلفية GraphQL ، ونمذجة مخطط التطبيق ، ودمج الواجهة الأمامية مع واجهة برمجة تطبيقات GraphQL) ، يمكنك إنشاء تطبيق في الوقت الفعلي يعمل بكامل طاقته بسرعة ، دون الانغماس في تفاصيل غير ضرورية مثل الإعداد اتصال websocket. هذا صحيح هناك قوة أدوات المجتمع التي تدعم فكرة مجردة مثل GraphQL.

إذا وجدت هذا مثيرًا للاهتمام وترغب في استكشاف GraphQL بشكل أكبر لمشروعك الجانبي التالي أو تطبيق الإنتاج ، فإليك بعض العوامل التي قد ترغب في استخدامها لبناء سلسلة أدوات GraphQL:

• الأداء وقابلية التوسع
  يُقصد من GraphQL أن تُستهلك مباشرة عن طريق تطبيقات الواجهة (إنها ليست أفضل من ORM في الواجهة الخلفية ؛ فوائد الإنتاجية الحقيقية تأتي من القيام بذلك). لذلك يجب أن تكون أدواتك ذكية فيما يتعلق باستخدام اتصالات قاعدة البيانات بكفاءة ويجب أن تكون قادرة على التوسع دون عناء.
• حماية
  ويترتب على ذلك أن نظام التحكم في الوصول المستند إلى الدور الناضج ضروري للسماح بالوصول إلى البيانات.
• التشغيل الآلي
  إذا كنت جديدًا على نظام GraphQL البيئي ، فقد تبدو كتابة مخطط GraphQL يدويًا وتنفيذ خادم GraphQL بمثابة مهام شاقة. قم بتعظيم الأتمتة من الأدوات الخاصة بك حتى تتمكن من التركيز على الأشياء المهمة مثل بناء ميزات الواجهة الأمامية التي تركز على المستخدم.
• بنيان
  بقدر ما تبدو الجهود المذكورة أعلاه تافهة ، فقد تتضمن بنية الواجهة الخلفية لتطبيق من فئة الإنتاج مفاهيم متقدمة في GraphQL مثل خياطة المخطط ، وما إلى ذلك. علاوة على ذلك ، فإن القدرة على إنشاء / استهلاك واجهات برمجة التطبيقات في الوقت الفعلي تفتح إمكانية بناء غير متزامن ورد الفعل تطبيقات مرنة وقابلة للتطوير بطبيعتها. لذلك ، من المهم تقييم كيف يمكن لأدوات GraphQL أن تبسط بنيتك.

موارد ذات الصلة

• يمكنك التحقق من نسخة مباشرة من التطبيق هنا.
• كود المصدر الكامل متاح على جيثب.
• إذا كنت ترغب في استكشاف مخطط قاعدة البيانات وتشغيل استعلامات GraphQL الاختبارية ، فيمكنك القيام بذلك هنا.