Debug School

Abhishek singh
Abhishek singh

Posted on

End-to-End Flow: Motoshare App to Traccar Tracking

Below is the complete end-to-end flow for adding one Track Vehicle button in the Motoshare Flutter app and opening Traccar tracking with Motoshare authentication.

End-to-End Flow: Motoshare App to Traccar Tracking

1. Main Requirement

In the Motoshare Flutter app, add one button:

Track Vehicle
Enter fullscreen mode Exit fullscreen mode

When user clicks this button:

Motoshare Flutter App
        ↓
Track Vehicle Button
        ↓
Open Traccar Manager App / gps.motoshare.in
        ↓
Motoshare OAuth / OpenID Authentication
        ↓
Traccar Dashboard Opens
        ↓
User tracks allowed vehicles
Enter fullscreen mode Exit fullscreen mode

2. Final Architecture 

Flutter App
        ↓
Laravel Backend
        ↓
Traccar Server
        ↓
gps.motoshare.in
        ↓
Traccar Manager App / Web Dashboard
Enter fullscreen mode Exit fullscreen mode

Simple meaning:

Flutter App = Button and user action
Laravel = Authentication and Traccar device/user mapping
Traccar = GPS tracking system
Physical GPS Tracker = Sends vehicle location
Enter fullscreen mode Exit fullscreen mode

3. Vehicle Registration Flow

When vehicle is added in Motoshare:

User adds vehicle in Motoshare app
        ↓
User enters vehicle details + GPS IMEI
        ↓
Flutter sends data to Laravel backend
        ↓
Laravel saves vehicle in Motoshare database
        ↓
Laravel creates device in Traccar using Traccar API
        ↓
Laravel saves Traccar Device ID in vehicle table
Enter fullscreen mode Exit fullscreen mode

Example vehicle data:

Vehicle Name: Honda Activa
Vehicle Number: JH05 AB 1234
GPS IMEI: 864895060123456
Enter fullscreen mode Exit fullscreen mode

In Traccar, device should be created like:

Device Name: Honda Activa - JH05 AB 1234
Unique ID: 864895060123456
Enter fullscreen mode Exit fullscreen mode

Important:

Unique ID = GPS tracker IMEI
Enter fullscreen mode Exit fullscreen mode

4. Physical GPS Tracker Flow

Live tracking will work only when physical GPS tracker sends data to Traccar.

Physical GPS tracker installed in vehicle
        ↓
SIM card inserted in GPS tracker
        ↓
Tracker configured with APN + gps.motoshare.in + correct port
        ↓
Tracker sends live location to gps.motoshare.in
        ↓
Vehicle becomes online in Traccar
Enter fullscreen mode Exit fullscreen mode

Example tracker setting:

Server: gps.motoshare.in
Port: 5023 or correct device protocol port
APN: airtelgprs.com / jionet / www
Enter fullscreen mode Exit fullscreen mode

Important:

8082 = Traccar web/API port
5023 or other protocol port = GPS tracker data port
Enter fullscreen mode Exit fullscreen mode

5. Track Vehicle Button Flow in Flutter

Simple Button Flow 

User opens Motoshare Flutter app
        ↓
Clicks Track Vehicle
        ↓
App opens Traccar Manager App or gps.motoshare.in
        ↓
Traccar checks login session
        ↓
If user is already authenticated, dashboard opens
        ↓
If user is not authenticated, Motoshare login opens
        ↓
After login, user returns to Traccar dashboard
Enter fullscreen mode Exit fullscreen mode

6. Authentication Flow

Your desired authentication flow:

Traccar Login
        ↓
Motoshare OAuth / OpenID Authentication
        ↓
Traccar Dashboard
Enter fullscreen mode Exit fullscreen mode

Yes, it can automatically authenticate and go to dashboard if SSO/OpenID is configured properly.

Case 1: User already has active Motoshare session 

Click Track Vehicle
        ↓
Open gps.motoshare.in / Traccar Manager
        ↓
Motoshare session found
        ↓
Auto authentication
        ↓
Traccar dashboard opens
Enter fullscreen mode Exit fullscreen mode

Case 2: User does not have active Motoshare session 

Click Track Vehicle
        ↓
Open gps.motoshare.in / Traccar Manager
        ↓
Redirect to Motoshare login
        ↓
User enters login details
        ↓
Redirect back to Traccar
        ↓
Dashboard opens
Enter fullscreen mode Exit fullscreen mode

So first-time login may be required. After login/session is saved, it can open dashboard directly next time.

7. Required Traccar OpenID Configuration

Your Traccar config should have Motoshare OAuth/OpenID enabled.

Example:

<entry key='web.url'>https://gps.motoshare.in</entry>
<entry key='web.port'>8082</entry>

<entry key='openid.force'>true</entry>
<entry key='openid.issuerUrl'>https://motoshare.in</entry>
<entry key='openid.authUrl'>https://motoshare.in/oauth/authorize</entry>
<entry key='openid.tokenUrl'>https://motoshare.in/oauth/token</entry>
<entry key='openid.userInfoUrl'>https://motoshare.in/api/user</entry>
Enter fullscreen mode Exit fullscreen mode

This means:

Traccar login will use Motoshare authentication.
Enter fullscreen mode Exit fullscreen mode

8. Required Redirect URLs

In Laravel OAuth/OpenID client settings, allow these callback URLs:

https://gps.motoshare.in/api/session/openid/callback
Enter fullscreen mode Exit fullscreen mode

For Traccar Manager mobile app, also allow:

org.traccar.manager:/api/session/openid/callback
Enter fullscreen mode Exit fullscreen mode

These are required so login can return back to Traccar after Motoshare authentication.

9. Flutter App Button Options

Option A: Easiest and Most Reliable

Open web dashboard:

https://gps.motoshare.in
Enter fullscreen mode Exit fullscreen mode

Flow:

Track Vehicle Button
        ↓
Open https://gps.motoshare.in
        ↓
Motoshare SSO login
        ↓
Traccar dashboard opens
Enter fullscreen mode Exit fullscreen mode

This is simplest and needs minimum coding.

Option B: Open Traccar Manager App

Flow:

Track Vehicle Button
        ↓
Open Traccar Manager App
        ↓
Server URL: https://gps.motoshare.in
        ↓
Motoshare SSO login
        ↓
Traccar dashboard opens
Enter fullscreen mode Exit fullscreen mode

Important:

First time, user may need to set server URL in Traccar Manager:

https://gps.motoshare.in
Enter fullscreen mode Exit fullscreen mode

10. Flutter Button Code: Simple Web Dashboard

Use this for fastest implementation:

import 'package:url_launcher/url_launcher.dart';

Future<void> openGpsTracking() async {
  final Uri url = Uri.parse('https://gps.motoshare.in');

  await launchUrl(
    url,
    mode: LaunchMode.externalApplication,
  );
}
Enter fullscreen mode Exit fullscreen mode

Button:

ElevatedButton(
  onPressed: openGpsTracking,
  child: const Text('Track Vehicle'),
)
Enter fullscreen mode Exit fullscreen mode

11. Flutter Button Code: Open Traccar Manager App

Android package:

org.traccar.manager
Enter fullscreen mode Exit fullscreen mode

Flutter dependencies:

dependencies:
  url_launcher: ^6.3.0
  android_intent_plus: ^5.0.2
Enter fullscreen mode Exit fullscreen mode

Code:

import 'package:android_intent_plus/android_intent.dart';
import 'package:url_launcher/url_launcher.dart';

Future<void> openTraccarManager() async {
  const String packageName = 'org.traccar.manager';

  try {
    final intent = AndroidIntent(
      action: 'android.intent.action.MAIN',
      package: packageName,
      category: 'android.intent.category.LAUNCHER',
    );

    await intent.launch();
  } catch (e) {
    final Uri playStoreUrl = Uri.parse(
      'https://play.google.com/store/apps/details?id=$packageName',
    );

    await launchUrl(
      playStoreUrl,
      mode: LaunchMode.externalApplication,
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Button:

ElevatedButton(
  onPressed: openTraccarManager,
  child: const Text('Track Vehicle'),
)
Enter fullscreen mode Exit fullscreen mode

12. Laravel Backend Responsibilities

Laravel should handle:

1. Vehicle save
2. GPS IMEI save
3. Traccar device creation
4. Traccar Device ID save
5. User mapping with Traccar
6. Device permission assignment
Enter fullscreen mode Exit fullscreen mode

Vehicle table should store:

gps_imei
traccar_device_id
gps_enabled
gps_status
Enter fullscreen mode Exit fullscreen mode

13. Permission Flow

Authentication only logs the user into Traccar.

Vehicle visibility depends on Traccar permissions.

Recommended:

Admin:
Can see all vehicles.

Partner:
Can see only own vehicles.

Renter:
Can see vehicle only during active booking, if required later.
Enter fullscreen mode Exit fullscreen mode

Example:

Partner adds vehicle
        ↓
Laravel creates device in Traccar
        ↓
Laravel maps partner user in Traccar
        ↓
Laravel assigns device to partner user
        ↓
Partner opens Traccar Manager
        ↓
Partner sees only assigned vehicle
Enter fullscreen mode Exit fullscreen mode

14. Complete Final Flow 

1. Physical GPS tracker is installed in vehicle.

2. SIM card is inserted in GPS tracker.

3. GPS tracker is configured with:
   - APN
   - gps.motoshare.in
   - correct GPS protocol port

4. Vehicle is added in Motoshare Flutter app with GPS IMEI.

5. Flutter sends vehicle details to Laravel backend.

6. Laravel saves vehicle in Motoshare database.

7. Laravel creates device in Traccar using IMEI as Unique ID.

8. Laravel stores Traccar Device ID.

9. Laravel assigns vehicle/device permission to correct user.

10. User clicks Track Vehicle button in Flutter app.

11. App opens Traccar Manager App or https://gps.motoshare.in.

12. Traccar redirects to Motoshare OAuth/OpenID login.

13. If user session exists, authentication happens automatically.
    If not, user logs in once.

14. After successful login, user is redirected to Traccar dashboard.

15. User sees only allowed vehicles.

16. Live location appears because physical GPS tracker is sending data to gps.motoshare.in.
Enter fullscreen mode Exit fullscreen mode

15. Final Simple Summary 

Motoshare Flutter App:
Add Track Vehicle button.

Button Action:
Open Traccar Manager App or https://gps.motoshare.in.

Authentication:
Traccar uses Motoshare OAuth/OpenID.

Backend:
Laravel creates Traccar device and assigns user permission.

Tracking:
Physical GPS tracker sends live location to gps.motoshare.in.

Result:
User clicks Track Vehicle → auto/login with Motoshare → Traccar dashboard opens → vehicle tracking visible.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)