Navvo
الأدلّة

بناء محدّد مواقع المتاجر

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

بناء محدّد مواقع المتاجر

تكامل كلاسيكي: دع المستخدمين يبحثون عن الأماكن، واعرض النتائج بصور مصغّرة وحالة الفتح/الإغلاق، واعرض التفاصيل الكاملة عند اختيارهم لمكان. يستخدم البحث والأماكن وخريطة.

النطاقات المطلوبة: search وplacestiles للخريطة).

1. ابحث أثناء كتابة المستخدم

استدعِ GET /search مع الاستعلام. أبطئ معالجة الإدخال (debounce) للبقاء ضمن حدود المعدّل.

async function search(q) {
  const res = await fetch(
    "https://navvo.io/api/v1/search?" + new URLSearchParams({ q, limit: "10" }),
    { headers: { "x-api-key": KEY } }
  );
  const data = await res.json();
  return data.places.items; // [{ slug, nameEn, categories, rating, center, sponsored }]
}

2. اعرض النتائج بصور مصغّرة وحالة

لكل نتيجة، اجلب صورة مصغّرة خفيفة وحالة الفتح/الإغلاق من GET /places/thumb:

async function thumb(slug) {
  const res = await fetch(
    "https://navvo.io/api/v1/places/thumb?" + new URLSearchParams({ slug }),
    { headers: { "x-api-key": KEY } }
  );
  return res.json(); // { url, source, rating, openState, openText }
}

حلّل قيمة center بصيغة WKT لرسم كل نتيجة على الخريطة:

function parsePoint(wkt) {
  // "POINT(35.8806 31.9461)" -> [lng, lat]
  const [lng, lat] = wkt.replace(/^POINT\(|\)$/g, "").split(" ").map(Number);
  return [lng, lat];
}

3. اعرض التفاصيل الكاملة عند الاختيار

عندما يختار المستخدم نتيجة، حمّل السجل الكامل من GET /places/{slug}:

async function detail(slug) {
  const res = await fetch(`https://navvo.io/api/v1/places/${encodeURIComponent(slug)}`, {
    headers: { "x-api-key": KEY },
  });
  const place = await res.json();
  if (!place) return null; // unknown slug returns 200 with null body
  return place; // includes reviews, photos, questions, arrivalIntelligence
}

اعرض nameEn/nameAr وcategories وcontact وopeningHours وrating وphotos وreviews.

4. وجّه المستخدمين إلى الباب الصحيح

يمنحك place.arrivalIntelligence المدخل المُوصى به — وهو أفضل من علامة المركز للتوجيه:

const target = place.arrivalIntelligence?.candidates?.[0]?.routeTarget; // { lat, lng }
const directionsUrl =
  `https://navvo.io/api/v1/routing/route`; // POST with that target — see Directions guide
استخدم arrivalIntelligence.candidates[0].routeTarget (المدخل المُوصى به) كوجهة للتوجيه بدلًا من center. لتطبيق توصيل، اعرض أيضًا lastMetersGuidance للسائق.

تجميع كل شيء معًا

البحث

GET /search?q=… ← قائمة من { slug, center, … }.

الإثراء

GET /places/thumb?slug=… لكل نتيجة ← صورة مصغّرة + حالة الفتح.

التفاصيل

GET /places/{slug} عند الاختيار ← السجل الكامل + مدخل الوصول.

التوجيه

POST /routing/route (أو /traffic/route) إلى المدخل المُوصى به.

Copyright © 2026