من قائمة فنادق إلى خريطة وتصويت

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

فطلبت من Claude طلبًا بسيطًا: اعرض لي خريطة فيها المكان والفنادق المقترحة. وانتهى الأمر بصفحة على نطاقي فيها خريطة، وطرق مشي، وتصويت، وتغلق نفسها بعد موعد القرار.

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

جربها: فنادق حول Tokyo Big Sight

اختر فندقًا لتشاهد طريق المشي، ثم صوت لاختيار المجموعة. الأسماء والأصوات المبدئية أمثلة خيالية.

123456

© OpenStreetMap contributors · ODbL

اختيار المجموعة · صوتانSotetsu Grand Fresa Tokyo-Bay Ariake

1. 1Sotetsu Grand Fresa Tokyo-Bay Ariake8 دقائق مشيًا8.2 · 6,543 تقييم¥51,421 / 3 ليال
   صوتان

   سالم (مثال) · ليلى (مثال)

2. 2Tokyo Bay Ariake Washington Hotel6 دقائق مشيًا8.2 · 284 تقييم¥71,527 / 3 ليال
   صوت واحد

   عمر (مثال)

3. 3DoubleTree by Hilton Tokyo Ariake9 دقائق مشيًا8.6 · 657 تقييم¥150,500 / 3 ليال
   صوت واحد

   مريم (مثال)

4. 4Villa Fontaine Grand Tokyo Ariake13 دقيقة مشيًا8.5 · 6,142 تقييم¥110,193 / 3 ليال
   لا أصوات بعد
5. 5Far East Village Hotel Tokyo Ariake19 دقيقة مشيًا8.1 · 3,677 تقييم¥84,498 / 3 ليال
   لا أصوات بعد
6. 6Hotel Trusty Tokyo Bayside11 دقيقة مشيًا8.1 · 1,318 تقييم¥52,774 / 3 ليال
   لا أصوات بعد

الأسعار والتقييمات من Booking.com، جمعت في 11 نوفمبر 2026 للإقامة من 24 إلى 27 مارس 2027 خلال SMART ENERGY WEEK، لشخص بالغ واحد، بأرخص غرفة متاحة، قبل الضرائب. تتغير هذه الأرقام؛ تحقق منها قبل الحجز.

البيانات والمصادر · 2026-11-11

SMART ENERGY WEEK [Spring] 2027 · المعرض: 24–26 مارس؛ الإقامة: 24–27 مارس، 3 ليال، إجمالي بـ JPY.

الطرق تقديرية من FOSSGIS OSRM foot، بتاريخ 11 نوفمبر 2026. المداخل غير مؤكدة. الخريطة مرسومة محليًا من بيانات OSM دون تنزيل tiles.

• Sotetsu Grand Fresa Tokyo-Bay Ariake: Booking.com · Standard Double Room, non-smoking · excludes 10% VAT · الموقع · الطريق
• Tokyo Bay Ariake Washington Hotel: Booking.com · Renovated Deluxe Single Room, non-smoking · includes 10% service charge; excludes 10% VAT · الموقع · الطريق
• DoubleTree by Hilton Tokyo Ariake: Booking.com · Queen Guest Room · includes 13% service charge; excludes 10% VAT and ¥200 city tax per person per night · الموقع · الطريق
• Villa Fontaine Grand Tokyo Ariake: Booking.com · Run of House Room for 1 person, non-smoking, check-in 6 pm · excludes 10% VAT · الموقع · الطريق
• Far East Village Hotel Tokyo Ariake: Booking.com · Standard Double Room · excludes 10% VAT · الموقع · الطريق
• Hotel Trusty Tokyo Bayside: Booking.com · Standard Single Room, non-smoking · includes ¥4,394 service charge; excludes ¥5,765 tax · الموقع · الطريق

الإبلاغ عن مشكلة في الخريطة

الخريطة داخل المحادثة

قرأ Claude صفحة المنظمين، وحدد مواقع الفنادق على خريطة ظهرت داخل المحادثة نفسها، ومعها نسخة بملء الشاشة أفتحها في الهاتف. وترك خارج الخريطة ثلاثة فنادق، وأخبرني بالسبب: فندق لم يجد عنوانه الدقيق، وفنادق لم يحصل على أسعارها.

لم أكن أعرف أن Claude يستطيع أن يعرض صفحات كهذه داخل المحادثة. أعجبتني الخريطة، فطلبت المزيد.

الطريق والنجوم والترتيب

أضاف Claude ما طلبته:

• طريق المشي: عند الضغط على فندق، في الخريطة أو في القائمة، يظهر طريق المشي منه إلى المكان، وتقترب الخريطة منه. حسب Claude الطرق من خرائط OpenStreetMap وحفظها في الصفحة.
• التقييم: عدد النجوم وتقييم الضيوف من Booking.com، عندما يتوفران.
• الترتيب: حسب مدة المشي، أو عدد الأصوات، أو تقييم الضيوف، أو السعر.

التصويت

أردت أن نختار الفندق معًا، بدل رسائل طويلة في المجموعة. أول نسخة كانت صفحة على claude.ai، لكن كل من يصوت كان سيحتاج إلى حساب في Claude، ولم أرد أن أرسل رابط Claude لأحد. فنقلها Claude إلى subdomain في نطاقي، يخدمه Cloudflare Worker.

هكذا يعمل التصويت:

• يكتب كل شخص اسمه مرة واحدة، ويحفظه متصفحه.
• لكل متصفح صوت واحد، يغيره صاحبه أو يسحبه حتى يغلق التصويت. ولا تتحقق الصفحة من هوية المصوت.
• يظهر اختيار المجموعة حتى الآن أعلى الصفحة، وتحت كل فندق أسماء من صوتوا له، والصفحة تحدث الأصوات وحدها.
• يحفظ الـ Worker الأصوات في Durable Object، وهو مخزن صغير في Cloudflare.

وللصفحة قواعد أخرى:

• تطلب من محركات البحث ألا تعرضها.
• لا تقبل أكثر من 25 مصوتًا، وتنظف الأسماء من بعض الرموز وتعرضها نصًا عاديًا، حتى لا يدخل أحد كود HTML.
• بعد موعد القرار لا تعرض إلا رسالة بأن التصويت انتهى، وفي صباح اليوم التالي تحذفها مهمة مجدولة من Cloudflare.

وقبل أن يرسل لي الرابط، جربها Claude على شاشة بحجم iPhone، وعلى Android في الوضع الداكن، وعلى الكمبيوتر. ووجد نافذة تنقطع عند حافة الشاشة وأسماء على الخريطة تخرج عن حدودها، فأصلحهما.

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

مقارنة الفنادق الثلاثة

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

كيف تصنع مثلها

تحتاج إلى coding agent يقرأ صفحات الويب ويكتب الملفات، مثل Claude Code أو Codex. وللتصويت تحتاج إلى حساب في Cloudflare: إذا أردت الرابط على نطاقك، فيجب أن يكون النطاق في Cloudflare، وإلا فعنوان workers.dev الذي يعطيك إياه Cloudflare يكفي.

الخريطة

هذه صفحة فيها الفنادق المقترحة: <الرابط>. وسأذهب كل يوم إلى: <العنوان>.
اصنع صفحة HTML واحدة فيها خريطة (Leaflet وOpenStreetMap) تعرض المكان وكل فندق.
عند الضغط على فندق، في الخريطة أو في القائمة، اعرض طريق المشي منه إلى المكان ومدته، ولا تعرض غيره.
أضف لكل فندق النجوم وتقييم الضيوف مع مصدر كل رقم، وسعر الإقامة من <تاريخ الوصول> إلى <تاريخ المغادرة> لـ <عدد الأشخاص> بعملة <العملة>.
رتب القائمة حسب المشي أو التقييم أو السعر.
إذا لم تتأكد من عنوان أو سعر، فلا تخمن: اكتب أنه غير متوفر وأخبرني.

التصويت

حول هذه الصفحة إلى تصويت أشاركه برابط على <نطاقك أو workers.dev>، باستخدام Cloudflare Worker وDurable Object مع SQLite.
يكتب كل شخص اسمه مرة واحدة ويحفظه متصفحه، ولكل متصفح صوت واحد يغيره أو يسحبه حتى يغلق التصويت. واعرض اختيار المجموعة أعلى الصفحة.
اطلب من محركات البحث ألا تعرضها. وأغلق التصويت من جهة الخادم في <التاريخ والساعة والمنطقة الزمنية>، ثم جدول مهمة منفصلة تحذف الصفحة بعد ذلك، وأكد لي أن الجدولة تعمل.
لا تضع فيها رقم رحلة أو تفاصيل حجز. وجربها على الهاتف والكمبيوتر قبل أن ترسل لي الرابط.