أنشئ بطاقة تعريف مخصصة لنظام إدارة علاقات العملاء (CRM) من HubSpot بدون كتابة أي كود باستخدام Claude Code

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

الجمهور المستهدف: مسؤول HubSpot

فهم بطاقات إدارة علاقات العملاء في HubSpot

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

في هذا الدرس التعليمي، سنقوم بإنشاء بطاقة CRM تقوم بسحب معلومات الطقس لجهات الاتصال الخاصة بك وربطها بخريطة الطقس باستخدام OpenWeatherMap.org واجهة برمجة التطبيقات (API).

إنشاء تطبيق HubSpot العام الخاص بك

قبل أن تتمكن من إنشاء بطاقة CRM مخصصة، عليك أن أنشئ تطبيق HubSpot العام الخاص بكليس عليك نشره علنًا إذا كنت لا ترغب في ذلك، ولكن يمكنك ذلك! 🤑 سيتيح لك هذا ربط حساب HubSpot Hub الخاص بعميلك بمنصة APIANT.

لإنشاء تطبيقك العام الخاص، اتبع هذه الخطوات البسيطة:

إذا لم يكن لديك حساب مطور HubSpot، فأنشئ حسابًا على developers.hubspot.com

تريد إنشاء تطبيق:

انقر فوق إدارة التطبيقات

انقر على "إنشاء تطبيق" في أعلى اليمين

قم بتسمية التطبيق ووصفه وإضافة شعار له إن رغبت، ثم انقر على "مصادقة".

أدخل عنوان URL لإعادة التوجيه. إذا كنت تستخدم خطة HubSpot Admin المجانية أو HubSpot Admin Pro على APIANT، يمكنك إدخال apiant.com/oauth. أما إذا كنت تستخدم خطة مخصصة أو خطة خاصة بمستأجر، فأدخل عنوان URL الخاص بخادمك. إذا كنت لا تعرفه، فأدخل اسم نطاقك مؤقتًا، وسيُعلمك النظام بذلك عند ربط التطبيق بخادم APIANT، وعندها يمكنك العودة وإدخاله.

أدخل نطاقاتك. سيُمكّنك حساب APIANT الخاص بك من القيام بأكثر بكثير من مجرد بطاقات إدارة علاقات العملاء! (مثل بناء تطبيقات API كاملة). لذا، هذه هي النطاقات (انظر أدناه) التي نوصي بها بناءً على 24 محفزًا و73 إجراءً لدينا حاليًا ما هو متاح (اعتبارًا من 17 مارس 2024).

تحدد نطاقات الوصول الأذونات الممنوحة لتطبيقك للوصول إلى البيانات أو تنفيذ الإجراءات في HubSpot. يجب على المستخدمين الذين يقومون بتثبيت تطبيقك الموافقة على نطاقات الوصول المطلوبة. يُنصح بشدة بتقليل عدد نطاقات الوصول المطلوبة قدر الإمكان لضمان عمل تطبيقك بكفاءة.

احفظ تطبيقك في أسفل الشاشة:

ابدأ ببناء عملية الأتمتة في APIANT للحصول على عنوان URL لجلب البيانات

هل تحتاج إلى حساب APIANT؟ انقر هنا للتقدم بطلب للحصول على حساب مدير HubSpot مجاني.

إذا كنت تفضل تثبيت نظام التشغيل الآلي بدلاً من بنائه من الصفر، فيمكنك تثبيته من هنا.

لنبدأ الآن في بناء نظام التشغيل الآلي في حساب APIANT الخاص بك والذي سيتفاعل مع بطاقة CRM.

في محرر الأتمتة، انقر فوق إنشاء أتمتة:

انقر على علامة الزناد واختر "البحث عن زناد":

ابحث عن طلب HTTP وحدد المشغل المسمى "تم استلام طلب HTTP (فوري)".

انقر فوق علامة + لإدخال معلمة استعلام جديدة

أدخل hs_object_id كمعامل

انقر فوق جلب حقول البيانات

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

انقر على "حفظ المشغل" أسفل يمين النافذة:

أضف إجراءً مؤقتًا لحفظ عملية التشغيل الآلي المسماة Uppercase:

يمكنك ترك إجراء الأحرف الكبيرة فارغًا، وسنقوم بإزالته عند إعادة تحرير الأتمتة.

أعطِ العملية الآلية اسمًا واحفظها:

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

إنشاء بطاقة CRM في تطبيقك العام

بعد إعداد تطبيق HubSpot العام الخاص بك، حان الوقت لإنشاء بطاقة CRM. سيحدد هذا تصميم ومحتوى بطاقتك.

انقر على بطاقات إدارة علاقات العملاء (CRM) ضمن قسم الميزات:

انقر على إنشاء بطاقة إدارة علاقات العملاء

أدخل اسم بطاقة إدارة علاقات العملاء (CRM) الخاصة بك. سنسمي بطاقتنا "الطقس". سيكون هذا سجل جهة اتصال، وسنرسل سجل جهة الاتصال hs_object_id من HubSpot إلى حساب APIANT الخاص بك.

ألصق عنوان URL لخدمة الويب الخاصة بك من أتمتة APIANT في عنوان URL لجلب البيانات.

انقر على خصائص البطاقة وأدخل هذه الخصائص بالنقر على إضافة خاصية:

تأكد من مطابقة نوع الخاصية لكل منها كما هو موضح أعلاه.

هذا كل شيء! انقر على "إنشاء" لإنشاء بطاقة إدارة علاقات العملاء الخاصة بك:

ربط تطبيق HubSpot العام الجديد بحساب APIANT الخاص بك

قبل أن ننتهي من بناء نظام التشغيل الآلي، نحتاج إلى ربط تطبيق HubSpot العام الجديد الخاص بك بحساب APIANT الخاص بك.

انقر على "الاتصالات" في القائمة

انقر على زر تطبيق الاتصال

اختر HubSpot

اختر تطبيقي العام

اتبع التعليمات التي تظهر على الشاشة (افتح وحدة تحكم مطوري HubSpot، إلخ...) - انقر فوق "موافق"

ستحصل الآن على عنوان URL الخاص بك لإدخاله في حقل "جلب البيانات" في تطبيقك العام.

انسخ معرّف العميل وسر العميل وعنوان URL للتثبيت في مربع الحوار:

اختر حساب HubSpot الذي تريد ربط تطبيقك العام به، ثم انقر فوق "اختيار الحساب":

قم بالموافقة على الاتصال، وسيتم الآن ربط تطبيقك العام بحساب APIANT الخاص بك:

أكمل بناء نظام التشغيل الآلي في APIANT للتفاعل مع بطاقة CRM الخاصة بك

قم بتعديل نظام التشغيل الآلي الخاص بك في APIANT:

ثم انقر وقم بإزالة إجراء الأحرف الكبيرة الذي كان مجرد عنصر نائب لحفظه.

كل ما لدينا الآن في نظام التشغيل الآلي هو مُشغِّل (خدمة ويب):

في مثالنا، نحتاج الآن إلى إضافة ما يلي لاستقبال البيانات من HubSpot، وجلب البيانات من واجهة برمجة تطبيقات openweathermap، وإعادتها جميعًا إلى HubSpot:

1. استرجع جهة الاتصال من HubSpot للحصول على الرمز البريدي

2. حوّل الرمز البريدي إلى إحداثيات جغرافية باستخدام OpenWeatherMap

3. احصل على معلومات عن حالة الطقس الحالية من موقع OpenWeatherMap بناءً على نظام تحديد المواقع الجغرافية (Geocode).

4. قم بتعبئة خصائص بطاقة إدارة علاقات العملاء ببيانات OpenWeatherMap

5. قم بإنشاء خيار قائمة لبطاقة إدارة علاقات العملاء (CRM) لربطها بخريطة الطقس

6. أعد ملف JSON إلى بطاقة HubSpot CRM

هيا نبدأ!

1. أضف إجراء HubSpot المسمى "الحصول على جهة اتصال":

قم بتعيين hs_object_id من المشغل في حقل معرف جهة الاتصال:

2. أضف الإجراء المسمى "تحديد الموقع الجغرافي بواسطة الرمز البريدي".

قم بتحديد الرمز البريدي من جهة اتصال HubSpot في حقل "الرمز البريدي" ضمن إجراء "تحديد الموقع الجغرافي باستخدام الرمز البريدي". إذا كنت تفضل استخدام أداة التحديد عبر الرسم التخطيطي للقيام بذلك (وأنا أفضّلها!)، فإليك الطريقة:

3. أضف إجراء "الحصول على الظروف الحالية" من Openweathermap الآن وقم برسم خطوط الطول والعرض من الإجراء السابق:

4. أضف إجراء HubSpot المسمى "بطاقة CRM": اضبط قيم العرض:

أضف الخصائص الخمس التي أنشأناها في بطاقة CRM وقم بتعيينها (باستخدام علامة + المحاطة بدائرة) إلى القيم المقابلة القادمة من الإجراء أعلاه "الحصول على الشروط الحالية".

اسم خاصية بطاقة إدارة علاقات العملاء	بيانات الخرائط من OpenWeatherMap
شروط	وصف حالة الطقس
درجة حرارة	درجة الحرارة الرئيسية
temp_max	الحد الأقصى لدرجة الحرارة الرئيسية
temp_min	الحد الأدنى لدرجة الحرارة الرئيسية
رياح	سرعة الرياح

لاحظ أن هذه هي نفس الخصائص التي أضفناها في بطاقة إدارة علاقات العملاء الخاصة بنا:

اختر الاسم الذي ترغب في تسمية البطاقة به، هنا أسميها "أحوال الطقس لـ [الاسم الأول المحدد على الخريطة]". هذا هو المكان الذي ستظهر فيه هذه المعلومات في البطاقة:

6. الآن لنضف إجراء HubSpot الأخير المسمى بطاقة CRM: إضافة خيار قائمة iframe:

قم بتحديد جميع الحقول المطلوبة في الإجراء واحفظه.

بطاقة إدارة علاقات العملاء: إلحاق اسم حقل خيار قائمة الإطار المضمن	أدخل / خريطة في الحقل
بطاقة CRM بصيغة JSON	رسم خريطة: بطاقة CRM بصيغة JSON من الإجراء السابق بطاقة إدارة علاقات العملاء: ضبط قيم العرض
اسم القائمة	خريطة الطقس
URL	https://openweathermap.org/city/ [المعرف المنبعث من إجراء الحصول على الشروط الحالية] هذا ما سيتم تمريره إلى موقع الويب الخاص بمعرف مدينة الطقس في OpenWeatherMap ضمن إطار iframe
عرض	1200
ارتفاع	1000

7. وأخيرًا، أضف الإجراء المسمى "إرجاع استجابة HTTP" في نهاية عملية التشغيل الآلي لإرسال جميع البيانات مرة أخرى إلى HubSpot:

قم بربط بيانات JSON الخاصة ببطاقة CRM الصادرة من الإجراء أعلاه في بيانات الاستجابة واحفظ الإجراء.

احفظ الإعدادات التلقائية وشغّلها. انتهى الأمر! 🙌

تشغيل واختبار بطاقة HubSpot CRM الجديدة

لاختبار البطاقة، ما عليك سوى تحديث جهة الاتصال في HubSpot ومشاهدة عملية التشغيل التلقائي:

الآن يمكنك إنشاء بطاقة إدارة علاقات العملاء الخاصة بك بأي منطق وواجهة برمجة تطبيقات...

تعلّم من الآخرين وشارك إبداعك مع مديري HubSpot الآخرين على forum.apiant.com

هل أنت مسؤول في HubSpot وترغب في الحصول على حساب APIANT مجاني لمسؤولي HubSpot؟ إذا كان الأمر كذلك، يمكنك تقديم طلب أدناه:

الاسم الأول*

اسم العائلة*

مسمى وظيفي*

بريد إلكتروني*

رقم الهاتف المحمول*

اسم الشركة*

حلول مستهدفة

فريد لوميير المؤسس المشارك والرئيس التنفيذي لشركة أبيانت