تطوير جوتنبرج بأمثلة: خرائط جوجل (الجزء 3)

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

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

كيفية حفظ كتلة الخريطة لعرضها في الواجهة الأمامية

لعرض الخريطة في الواجهة الأمامية ، علينا أولاً تحديد HTML الذي نريد عرضه في الواجهة الأمامية. في كتلة Gutenberg ، يتم تحقيق ذلك من خلال تحديد طريقة save لوظيفة registerBlockType . كما ذكرت سابقًا في المنشور السابق ، تم تحديد هذه الطريقة في ملف save.js في packages/blocks/nelio-maps/ .

مرة أخرى ، هذه وظيفة بسيطة للغاية لفهمها:

• من السطر 7 إلى 25 نقوم باستخراج جميع السمات ذات الصلة بالكتلة الخاصة بنا. أي كل السمات التي حددناها في attributes.js والتي تعدل مظهر خريطتنا.
• في السطر 41 نفتح div الذي سيكون بمثابة حاوية للكتلة.
• في السطر 47 ، نجد div الذي سيلتف الخريطة نفسها. انظر إلى شيء مثير للاهتمام: هذا div يتضمن كل كائن attributes في تعريفه. هذا يعني أن جميع الخصائص في attributes (على سبيل المثال ، 'data-lat': lat of line 34) سيتم عرضها كسمات HTML (على سبيل المثال ، بافتراض أن المتغير lat هو 2.48171 ، ستظهر lat في HTML النهائي data-lat="2.48171" ).
• في السطر 49 ، تتم إضافة div صغير يحتوي على إحداثيات العلامة.
• في السطر 59 ، محتويات RichText التي حددناها في edit.js

لذلك ، من حيث الجوهر ، فإن طريقة save تنشئ HTML يحتوي على جميع السمات ذات الصلة لعرض الخريطة في الواجهة الأمامية. لذا ، ما الخطأ الذي يمكن أن يحدث؟ حسنًا ، إذا كنت ستفتح الواجهة الأمامية الآن ، فسيكون كل ما تراه هو هذا:

كتلة فارغة تحتوي فقط على بعض محتوى RichText . ماذا حدث؟

كيفية تعديل المكون الإضافي لعرض خريطة Google التي تم إنشاؤها باستخدام Gutenberg Block الخاص بنا

لعرض خريطة Google في الواجهة الأمامية ، من الضروري أن نقوم بتحميل مكتبة خرائط Google والبرنامج النصي الذي يستخدمها لبناء الخريطة نفسها. هذا بسيط للغاية وإذا كنت قد قمت بتطوير WordPress من قبل ، فيجب أن تعرف كيفية القيام بذلك.

أول شيء يجب علينا فعله هو إنشاء برنامج نصي يمكنه إنشاء خريطة Google باستخدام البيانات التي وضعناها في HTML. هذا النص موجود في assets/src/js/public/public.js . ألق نظرة فاحصة لفهم كيفية عملها:

• في السطر 9 ، نقوم بالبحث في جميع العقد التي تحتوي على خريطة (تصفية حسب إحدى الفئات التي قمنا بتضمينها في طريقة save ) ، ولكل منها ، نسمي طريقة initGoogleMap .
• تعتمد هذه الطريقة على وظيفتين للقيام بعملها. من ناحية ، فإنه يستخرج إحداثيات علامة محتملة مع استخراج الوظيفة extractMarkerPositionIfAny سطر 55 ، ومن ناحية أخرى ، يستخرج جميع خصائص الخريطة (إحداثيات المركز ، ومستوى التكبير ، وقائمة الأزرار المرئية ، وما إلى ذلك) باستخدام دالة extractMapOptions من السطر 26. لاحظ أن كلتا الوظيفتين مخصصتان ببساطة لقراءة قيم data-something وضعناه في طريقة save .
• أخيرًا ، أنشأنا خريطة (السطر 18) وأضفنا علامة (السطر 21) باستخدام فئتي Map and Marker ، على التوالي ، التي توفرها مكتبة خرائط Google.

الآن بعد أن أصبح لدينا هذا البرنامج النصي ، نحتاج فقط إلى تعديلين إضافيين في مشروعنا:

• من ناحية أخرى ، يجب علينا تعديل ملف تكوين webpack.config.js بحيث يقوم بتحويل البرنامج النصي public.js الذي أنشأناه للتو. قد يبدو الأمر صعبًا ، لكنه في الواقع سهل جدًا: ما عليك سوى إلقاء نظرة على التغييرات التي أجريتها على هذا الملف في هذا الالتزام.
• من ناحية أخرى ، يتعين علينا تعديل المكون الإضافي لإدراج هذا البرنامج النصي الجديد (ومكتبة خرائط Google!) في الواجهة الأمامية. مرة أخرى ، تغيير بسيط للغاية يمكنك رؤيته في هذا الالتزام.

بمجرد إجراء كل هذه التغييرات ، تكون هذه هي النتيجة النهائية:

أعرف ما تفكر فيه: لماذا ، بدلاً من القيام بكل هذا يدويًا ، لم نستخدم مكون React الذي استخدمناه في edit.js ؟ ألن يوفر هذا بعض الوقت؟

في الواقع ، فإن استخدام مكون React الذي رأيناه في المنشور السابق كان سيوفر لنا بعض المشاكل ... ولكن هناك مشكلة: فهو يعتمد على React ، مما يعني أنه كان علينا تحميل React في الواجهة الأمامية لاستخدامها أيضًا. وهذا يبدو كثيرًا ، ألا تعتقد ذلك؟

تفاصيل معلقة

أخيرًا ، اسمحوا لي أن أناقش بإيجاز جانبًا واحدًا مهمًا للغاية ، وإلا فلن يعمل المكون الإضافي الخاص بك: مفتاح API لخرائط Google.

مفتاح API لخرائط Google

من أجل استخدام خرائط Google ، يجب أن يكون لديك مفتاح API. كيفية الحصول عليها هو شيء شرحه لنا أنطونيو قبل بضعة أيام. الآن ، كيف نستخدمه؟

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

ماذا تفعل في هذه الحالات؟ الفكرة بسيطة للغاية: ما عليك سوى إضافة خيار تكوين في المكون الإضافي للأشخاص لإدخال مفتاح API الخاص بهم.

في حالتنا ، إذا أضفت خريطة بدون مفتاح API ، فسترى رسالة التحذير التالية:

نحثك على إضافة مفتاح API.

عادةً ما تقوم بإنشاء صفحة خاصة لإدارة إعدادات المكون الإضافي الخاص بك. ولكن بالنسبة لمكوِّن إضافي سهل وبسيط مثل المكون الذي نقوم بإنشائه ، فقد اعتقدت أنه سيكون أسهل إذا اخترنا حلاً مختلفًا.

في WordPress توجد شاشة خيارات في /wp-admin/options.php تبدو كالتالي:

إنها نوع من "الواجهة الرائعة" لتعديل (تقريبًا) جميع الخيارات التي تم تسجيلها في WordPress والموجودة في الجدول wp_options . لذلك ، كل ما يتعين على المكون الإضافي القيام به هو التأكد من وجود هذا الخيار دائمًا في قاعدة البيانات (حتى في حالة عدم وجود مجموعة مفاتيح API حتى الآن) وسيكون لدينا "واجهة لطيفة" للمستخدم للصق مفتاح API الخاص به دون القيام بأي شيء. !

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

باختصار

في هذا المنشور ، تغلبنا على الحاجز الأخير في مشروعنا: كيفية حفظ الخريطة وكيفية عرضها في الواجهة الأمامية. في الأساس ، كان كل ما نحتاجه هو div مع جميع المعلومات ذات الصلة بالخريطة (مركزها وخيارات عرض الأزرار والعلامة وما إلى ذلك) ونص صغير لإعادة بنائه في الواجهة الأمامية.

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

إذا كانت لديك أي أسئلة ، فأخبرنا بها في قسم التعليقات أدناه. حظ سعيد!

صورة مميزة بواسطة Artem Bali على Unsplash .