كيف تنشئ مخطط أراضٍ عقاريًا تفاعليًا يتحدّث في الوقت الفعلي (مجانًا)

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

هذا بالضبط ما ستتعلم فعله في هذا المقال.

والأفضل من ذلك: إنه مجاني بالكامل.

ماذا ستبني؟

مخطط تقسيم أراضٍ تفاعليًا فيه:

• لكل قطعة رمز لوني حسب توفرها: أخضر (متاحة)، وأحمر (مُباعة)، وأصفر (محجوزة)
• عند تمرير المؤشر فوق قطعة أو لمسها على الهاتف، يظهر تلميح (tooltip) يعرض الاسم والمساحة والسعر
• يتم تحديث التوفر في الوقت الفعلي من جدول بيانات في Google Sheets
• يُنشر المخطط برابط خاص به يمكنك مشاركته عبر WhatsApp أو استخدامه في موقعك

الأدوات التي ستستخدمها

تحتاج إلى 4 أدوات فقط:

1. Adobe Illustrator: لتحويل المخطط إلى رسم متجهي (يُستخدم مرة واحدة فقط)
2. Claude: الذكاء الاصطناعي الذي يحوّل مخططك إلى كود
3. Google Sheets: قاعدة البيانات التي تتحكم من خلالها في التوفر
4. Lovable: المنصة التي تنشر مخططك على الإنترنت

هل Illustrator مدفوع؟ نعم، يحتاج إلى ترخيص. لكنك تحتاجه مرة واحدة فقط لتحويل المخطط. يمكنك تفعيل النسخة التجريبية وإنجاز العمل وانتهى الأمر. وكبديل، برنامج Inkscape مجاني ويؤدي الغرض نفسه في هذه العملية.

الخطوة 1: تحويل المخطط إلى رسم متجهي في Illustrator

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

كيف تجهّز Illustrator

1. افتح Illustrator وأنشئ مستندًا جديدًا. الحجم لا يهم
2. اذهب إلى File → Place (ملف ← وضع) واختر صورة مخططك أو ملف PDF الخاص به
3. في لوحة الطبقات (Layers)، أعد تسمية تلك الطبقة إلى PLANO IMG ثم اقفلها. هذا يمنع تحريكها عن طريق الخطأ
4. أنشئ طبقة جديدة فوقها وسمّها TRAZOS (وتعني "المسارات" بالإسبانية)

المفاتيح الأربعة الوحيدة التي تحتاجها

كيف ترسم كل قطعة

باستخدام أداة القلم (P)، انقر على كل زاوية من زوايا القطعة لإنشاء النقاط. عندما تصل إلى النقطة الأخيرة، انقر على النقطة الأولى. سترى دائرة صغيرة تظهر أسفل المؤشر، وهذا يعني أن الشكل سيُغلق.

⚠️ الخطأ الأكثر شيوعًا: ترك الشكل مفتوحًا. الشكل المفتوح لا يحتوي على تعبئة وتفشل العملية. تحقق دائمًا من أن كل قطعة مضلع مغلق.

كيف تسمّي الطبقات

يجب أن يكون لكل قطعة اسمها الخاص في لوحة الطبقات. يصبح هذا الاسم هو المعرّف (ID) في الكود. استخدم أسماء بسيطة دون رموز خاصة:

• A1 و A2 و A3 لقطع البلوك A
• B1 و B2 و B3 للبلوك B
• CALLE (وتعني "شارع" بالإسبانية) للشارع أو الطريق

💡 اسم الطبقة في Illustrator = معرّف القطعة في الموقع. اكتبه بشكل صحيح من البداية.

التصدير بصيغة SVG

بعد أن ترسم جميع القطع:

1. File → Save As → SVG (ملف ← حفظ باسم ← SVG)
2. في خيارات التصدير، فعّل Object IDs: Layer names. هذا هو الأهم
3. احفظ الملف باسم plano.svg

الخطوة 2: تحويل ملف SVG إلى مكوّن ويب باستخدام Claude

افتح claude.ai، وابدأ محادثة جديدة، وأرفق ملف SVG، ثم الصق الأمر التالي:

الأمر 1: لـ Claude (يحوّل ملف SVG إلى مكوّن React)

أنت محرك لتحويل الأصول المتجهية العقارية إلى واجهات ويب بلغة React تتيح التفاعل الجغرافي. مهمتك هي معالجة ملفات SVG لمخططات المساحة وإنتاج مكونات جاهزة للنشر.

المدخلات: ستتلقى ملف SVG مُصدَّرًا من برنامج CAD أو برنامج تصميم متجهي (Illustrator أو AutoCAD أو Inkscape) يحتوي على هندسة مشروع تقسيم أراضٍ.

المرحلة 1: المعالجة المتجهية (بصمت، دون تقرير):
حلّل ملف SVG وحدّد جميع العناصر حسب id أو data-name أو الطبقة. استخرج viewBox والأبعاد ونظام الإحداثيات. صنّف كل عنصر: قطعة قابلة للبيع، طريق، مساحة مشتركة، مبنى. احسب المركز الهندسي الحقيقي لكل مضلع (وليس الصندوق المحيط). لا تكتب تقريرًا عن التحليل. انتقل مباشرة إلى المرحلة 2.

المرحلة 2: جمع المعطيات:
اطرح هذه الأسئلة في كتلة واحدة، دون مقدمات:
1. ما الاسم التجاري لمشروع تقسيم الأراضي؟
2. ما لون خلفية موقعك بصيغة HEX؟ (مثال: #F3F6F0)
3. لكل قطعة محددة: الحالة الأولية (disponible / vendido / reservado، احتفظ بهذه القيم كما هي) والمساحة بالمتر المربع
4. ما السعر الأساسي للمتر المربع بالدولار الأمريكي (USD)؟
5. هل يوجد طريق داخلي أو مقترح؟ هل يحتاج إلى نسيج بلاط متداخل؟
6. هل يلزم تحديد مداخل السيارات؟ ما أبعادها بالأمتار؟

المرحلة 3: دون أي أسئلة أخرى، أنشئ المكوّن PlanoLotes.tsx مع: ألوان ثابتة (disponible #c8e0a0، vendido #d4a0a0، reservado #e8d880)، و LOTES_DATA ككائن منفصل وقابل للاستبدال، وتفاعل عند تمرير المؤشر واللمس، وتلميح (tooltip) يعرض الاسم والمساحة والسعر، وعلامة مائية "✦ Developed by royaltor360.com" في الزاوية السفلية اليمنى.

القيود: لا تخترع أي هندسة، استخدم فقط مسارات (paths) ملف SVG الأصلي، وسلّم كل ملف قابل للتنزيل على حدة.

سيطرح عليك Claude ستة أسئلة. أجب عنها كلها في رسالة واحدة، وخلال دقائق يسلّمك ملف PlanoLotes.tsx جاهزًا للتنزيل.

تبقى قيم الحالة بالإسبانية (disponible = متاحة، vendido = مُباعة، reservado = محجوزة) لأنها يجب أن تطابق قالب Google Sheets والكود الناتج عن الأوامر التالية.

الخطوة 3: تجهيز جدول Google Sheets

جدول Google Sheets هو قاعدة البيانات التي تتحكم في توفر كل قطعة. البنية بسيطة:

القالب الموجود في الملفات القابلة للتنزيل باللغة الإسبانية. احتفظ بأسماء الأعمدة كما هي تمامًا (estado = الحالة، precio_m2 = سعر المتر المربع)، لأن الكود يقرأ الأعمدة بهذه الأسماء.

القيم الصالحة لعمود estado هي disponible أو vendido أو reservado، وبأحرف صغيرة دائمًا.

إضافة التحقق من البيانات مع الألوان

لتسهيل الإدارة من الهاتف:

1. حدّد عمود estado بالكامل
2. اذهب إلى البيانات ← التحقق من البيانات ← إضافة قاعدة (Data → Data validation → Add rule)
3. اختر قائمة منسدلة (قائمة عناصر): disponible,vendido,reservado
4. فعّل الألوان: الأخضر لـ disponible، والأصفر لـ reservado، والأحمر لـ vendido

بهذه الطريقة، كلما حدّثت الحالة، تختارها ببساطة من القائمة المنسدلة.

نشر الجدول بصيغة CSV

1. ملف ← مشاركة ← نشر على الويب (File → Share → Publish to web)
2. اختر الورقة الأولى (Sheet1)
3. في التنسيق، اختر قيم مفصولة بفواصل (.csv)
4. انقر على نشر
5. انسخ الرابط. يجب أن ينتهي بـ &output=csv

احتفظ بهذا الرابط، فستحتاجه في الخطوة التالية.

الخطوة 4: رفع المكوّن إلى Lovable ونشره

اذهب إلى lovable.dev، وأنشئ حسابًا مجانيًا، وافتح مشروعًا جديدًا. في دردشة Lovable الصق هذا الأمر:

الأمر 2: لـ Lovable (يرفع المكوّن)

أضف ملف المكوّن ‎.tsx الذي أرفقته للتو إلى src/components/ (احتفظ باسم الملف الأصلي). اعرضه في وسط الصفحة الرئيسية فوق قسم بعرض كامل بلون خلفية #F3F6F0. بدون ترويسة (header) وبدون تذييل (footer)، المكوّن فقط.

أرفق ملف PlanoLotes.tsx الذي أعطاك إياه Claude. يدمجه Lovable تلقائيًا، وخلال ثوانٍ ترى المخطط يعمل في المعاينة.

الخطوة 5: الربط مع Google Sheets (في الوقت الفعلي)

هذه هي الخطوة الأخيرة. انسخ الأمر التالي، والصقه في دردشة Lovable، وأضف في نهايته رابط CSV الخاص بجدولك:

الأمر 3: لـ Lovable (يربط مع Google Sheets)

عدّل ملف المكوّن ‎.tsx الذي أضفته سابقًا إلى src/components/ (مكوّن خريطة القطع، احتفظ باسم الملف الحالي) ليحمّل بيانات القطع من Google Sheets بدلًا من الكائن الثابت LOTES_DATA. اتبع هذه التعليمات بدقة:

1. أضف useEffect و useRef إلى سطر استيراد React
2. استبدل الكائن الثابت LOTES_DATA بنوع LoteData وثابت SHEETS_URL
3. أضف داخل المكوّن: الحالة lotesData، والحالة cargando، و prevDataRef، و intervalRef
4. أضف useEffect يجلب ملف CSV من SHEETS_URL مع كسر التخزين المؤقت (&cachebust=Date.now())، ويتخطى صف العناوين، ويقرأ الأعمدة A=id و B=area (أضف " m²") و C=estado و D=precio_m2، ويولّد nombre تلقائيًا على شكل "Lote " + id، ولا يحدّث الحالة إلا إذا تغيرت البيانات (قارن باستخدام JSON.stringify)، ويكرر ذلك كل 15000ms، وينظف عند إزالة المكوّن
5. استبدل كل الإشارات إلى LOTES_DATA بـ lotesData
6. إذا لم تتطابق معرّفات مضلعات SVG مع معرّفات الجدول، وحّدها تلقائيًا
7. اعرض "جارٍ تحميل التوفر..." ما دامت cargando تساوي true
8. أضف العلامة المائية: "✦ Developed by royaltor360.com"، بحجم 11px، باللون #4a7a2a وشفافية 40%، مع رابط إلى https://royaltor360.com في علامة تبويب جديدة
9. لا تُفرغ lotesData أبدًا بين عمليات الجلب. إذا فشل الجلب، أبقِ البيانات السابقة ظاهرة.

لا تغيّر أي شيء آخر في المكوّن ولا تغيّر اسم الملف.

رابط CSV من Google Sheets:

ينفّذ Lovable التغييرات تلقائيًا. بعد ذلك انقر على Publish لتصبح التغييرات منشورة.

كيف تبدو النتيجة النهائية؟

بعد ربط كل شيء، يسير التدفق هكذا:

1. يفتح فريق المبيعات Google Sheets من الهاتف
2. يغيّر حالة قطعة من disponible إلى vendido
3. خلال 15 ثانية كحد أقصى، يُظهر المخطط على الويب هذا التغيير
4. كل من لديه الرابط يرى المعلومات المحدّثة

⚠️ ملاحظة حول ذاكرة Google المؤقتة: أحيانًا يستغرق Google لحظات لنشر التغيير. إذا لم يتغير اللون فورًا، انتظر بضع ثوانٍ وأعد تحميل الصفحة. النظام يفعّل كسر التخزين المؤقت (cache busting) لتقليل هذا التأخير.

ما الخطوة التالية؟

ما بنيته للتو هو الأساس: مخطط تفاعلي يعمل، قابل للتحديث في الوقت الفعلي، ومنشور مجانًا على الإنترنت.

لكن إذا أردت الانتقال به إلى المستوى التالي:

• جولة 360 درجة تفاعلية مدمجة في المخطط
• نظام CRM لإدارة العملاء المحتملين القادمين من المخطط
• نماذج تلتقط بيانات العملاء مباشرة
• تنبيهات بالبريد الإلكتروني في كل مرة يستفسر فيها أحد عن قطعة
• منصة عرض مرئي متكاملة لمشروعك

كل ذلك هو ما نقدّمه في Royaltor360: المخطط الرئيسي التفاعلي لمشروعك مربوطًا بنظام CRM. وإذا أردت أيضًا أن تفهم ما يحتاجه فريق يبيع قطع الأراضي، فاقرأ ما الذي يجب أن يتوفر في نظام CRM لشركات العقارات التي تبيع الأراضي (بالإسبانية).

دورة مجانية · بالإسبانية

أنشئ أول فيديو عقاري لك باستخدام After Effects

الدورة المجانية في مجتمعي على Skool، وهي باللغة الإسبانية: حرّر فيديو لعقار أو مشروع من البداية إلى النهاية، حتى لو لم تفتح البرنامج من قبل.

ادخل مجانًا

ملخص العملية

هل وجدت هذا المقال مفيدًا؟ شاركه مع شخص لديه مشروع عقاري وما زال يستخدم ملفات PDF ثابتة لعرض توفر قطعه.