المقدمة: لماذا تفشل الطرق التقليدية؟

عند برمجة تطبيق مثل Trendo Taxi، التحدي الأكبر هو: كيف نجعل العميل يرى سيارة الكابتن تتحرك بسلاسة على الخريطة؟

المبتدئون يستخدمون بروتوكول HTTP Request لطلب الموقع كل 5 ثوانٍ. هذه كارثة تقنية تؤدي إلى:

1. ضغط هائل على السرفر (Server Overload).

2. حركة “متقطعة” للسيارة (Teleporting effect) بدلاً من الحركة الناعمة.

الحل الذي اعتمدناه في Giturn هو إنشاء “قناة اتصال مفتوحة” (WebSocket) بين السائق، السرفر، والراكب.

الخطوة 1: المحرك الخلفي (The Backend Engine)

استخدمنا Node.js مع مكتبة Socket.io لإدارة الاتصال. السائق يرسل إحداثياته، والسرفر يقوم فوراً بتوجيهها (Broadcasting) للراكب المحدد فقط.

إليك كيف يبدو الكود في جانب السرفر (Backend):

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  
  // 1. استلام موقع السائق وتحديثه
  socket.on('updateDriverLocation', (data) => {
    const { driverId, latitude, longitude } = data;
    
    // 2. إرسال الموقع الجديد فوراً للراكب المرتبط بهذا السائق
    // نستخدم 'to' لإرسال البيانات لغرفة محددة (Room) لضمان الخصوصية
    io.to(`trip_${data.tripId}`).emit('driverMoved', {
      lat: latitude,
      lng: longitude
    });
    
    console.log(`Driver ${driverId} moved to: ${latitude}, ${longitude}`);
  });

});

الخطوة 2: الاستقبال في تطبيق الموبايل (Flutter Client)

في جانب تطبيق الراكب (Flutter)، لا نقوم بعمل “Refresh”. التطبيق “يستمع” (Listens) للبيانات القادمة. بمجرد وصول إحداثيات جديدة، نقوم بتحديث الـ Marker على الخريطة.

إليك كود الربط في Flutter:

import 'package:socket_io_client/socket_io_client.dart' as IO;

class TrackingService {
  late IO.Socket socket;

  void initSocket(String tripId) {
    // الاتصال بالسرفر
    socket = IO.io('https://api.trendo-taxi.com', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    });

    socket.connect();

    // الاستماع لحدث 'driverMoved' القادم من السرفر
    socket.on('driverMoved', (data) {
      // data تحتوي على {lat, lng}
      updateCarMarkerOnMap(data['lat'], data['lng']);
    });
  }

  void updateCarMarkerOnMap(double lat, double lng) {
    // كود تحديث الـ State لتحريك السيارة
    // نستخدم AnimationController هنا لجعل الحركة ناعمة
  }
}

السر في “النعومة” (Interpolation)

وصول الإحداثيات وحدها لا يكفي، لأن السيارة ستقفز من النقطة A إلى B. لجعل التجربة احترافية في Trendo Taxi، قمنا بإضافة طبقة Animation بين كل نقطتين. التطبيق يقوم “بتوقع” المسار ورسم حركة انسيابية للسيارة حتى وصول الإحداثيات التالية.

الخلاصة

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

هل تريد بناء تطبيق توصيل أو لوجستيات؟ [ناقش فكرتك مع فريقنا الهندسي الآن]