بناء محدّد مواقع المتاجر
بناء محدّد مواقع المتاجر
تكامل كلاسيكي: دع المستخدمين يبحثون عن الأماكن، واعرض النتائج بصور مصغّرة وحالة الفتح/الإغلاق، واعرض التفاصيل الكاملة عند اختيارهم لمكان. يستخدم البحث والأماكن وخريطة.
النطاقات المطلوبة: search وplaces (وtiles للخريطة).
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) إلى المدخل المُوصى به.