يمكن أن يؤدي إعداد ميزة عنوان الإكمال التلقائي في Laravel إلى تحسين تجربة المستخدم بشكل كبير. سيوضح لك هذا الدليل كيفية دمج وظيفة الإكمال التلقائي للعنوان باستخدام واجهة برمجة تطبيقات أماكن Google.

دليل خطوة بخطوة لإعداد عنوان الإكمال التلقائي في Laravel

متطلبات

1. مشروع لارافيل.
2. مفتاح واجهة برمجة تطبيقات أماكن Google.
3. المعرفة الأساسية بـ jQuery وJavaScript.

الخطوة 1: إعداد مفتاح API لأماكن Google

1. تفضل بزيارة Google Cloud Console.
2. إنشاء مشروع جديد (أو استخدام مشروع موجود).
3. انتقل إلى واجهات برمجة التطبيقات والخدمات > المكتبة، وابحث عن واجهة برمجة التطبيقات للأماكن.
4. تمكين واجهة برمجة التطبيقات للأماكن.
5. انتقل إلى واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد وقم بإنشاء مفتاح واجهة برمجة التطبيقات. تأكد من تقييد هذا المفتاح لتجنب الاستخدام غير المصرح به.

الخطوة 2: تثبيت Laravel وإعداد المسارات

إنشاء مشروع Laravel (إذا لم تكن قد قمت بذلك بالفعل):

composer create-project --prefer-dist laravel/laravel address-autocomplete

إنشاء وحدة تحكم:

php artisan make:controller AddressController

الآن، حدد المسار فيways/web.php:

Route::get('/autocomplete', [AddressController::class, 'index']);

الخطوة 3: إنشاء منطق وحدة التحكم

افتح app/Http/Controllers/AddressController.php وأضف المنطق التالي لإرجاع العرض:

  
  
  الخطوة 4: إنشاء العرض باستخدام حقل إدخال الإكمال التلقائي


قم بإنشاء ملف العرض لـ autocomplete.blade.php في دليل الموارد/العروض:


touch resources/views/autocomplete.blade.php




في ملف الإكمال التلقائي.blade.php، قم بتضمين نموذج HTML والبرنامج النصي لواجهة برمجة تطبيقات أماكن Google:




    

    
Autocomplete Address
    

        Address
        








  
  
  توضيح:

• الأنواع: ['الرمز الجغرافي'] يقتصر الاقتراحات على العناوين المشفرة جغرافيًا.
• استبدل YOUR_GOOGLE_API_KEY بمفتاح واجهة برمجة التطبيقات الفعلي الذي أنشأته.

الخطوة 5: قم بتشغيل تطبيق Laravel

قم بتشغيل الأمر التالي لخدمة التطبيق:

php artisan serve

قم بزيارة http://127.0.0.1:8000/autocomplete في متصفحك، ومن المفترض أن تشاهد حقل إدخال العنوان. ابدأ في كتابة عنوان، وستوفر لك واجهة برمجة تطبيقات أماكن Google اقتراحات العناوين.

الخطوة 6: التعامل مع العنوان المحدد (اختياري)

إذا كنت تريد التعامل مع العنوان المحدد بشكل أكبر (على سبيل المثال، تخزينه في قاعدة بيانات)، يمكنك تعديل النموذج ليشمل خيار الإرسال.

على سبيل المثال، يمكنك إضافة حقل نموذج إضافي:

قم بتعديل جافا سكريبت الخاص بك لالتقاط خطوط الطول والعرض:

var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
});

الخطوة 7: إنشاء طريقة المتجر (اختياري)

في وحدة تحكم العنوان الخاصة بك، قم بإنشاء طريقة لتخزين العنوان المرسل:

public function storeAddress(Request $request)
{
    $latitude = $request->input('latitude');
    $longitude = $request->input('longitude');

    // Store the address in the database or perform other actions.

    return back()->with('success', 'Address stored successfully.');
}

أضف مسارًا لإرسال النموذج هذا في web.php:

Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');

خاتمة

باتباع هذه الخطوات، تكون قد نجحت في دمج الإكمال التلقائي لأماكن Google في تطبيق Laravel الخاص بك. يمكنك الآن تحسين تجربة المستخدم من خلال السماح للمستخدمين بإكمال العناوين تلقائيًا، ولديك خيار تخزين إحداثيات العناوين المختارة في قاعدة البيانات الخاصة بك.