实时车辆跟踪应用

使用 WebSocket 和 Flutter 构建的实时车辆跟踪应用

描述

这是一个演示项目，通过 WebSocket 协议提供实时跟踪的工作原理，我使用了 Bloc 模式来提供一个更真实的示例。

跟踪过程包括三个主要元素

Design image

  • 司机

    连接到服务器并持续更新其位置的移动应用程序或嵌入式设备。

  • Client

    连接到服务器并持续更新其位置并列出附近司机位置的移动应用程序。

  • 服务器

    后端服务器用于管理客户端和驱动程序之间的连接。

本项目侧重于客户端，因此我使用的是具有单个端点的服务器来模拟跟踪 Web 套接字。

如何使用此项目

在开始之前，您需要安装 Flutter SDK、Google Maps API 密钥、Dart Frog。

  1. 配置 Android 和 IOS

    • 在应用程序清单 android/app/src/main/AndroidManifest.xml 中指定您的 API 密钥

         <manifest ...
     <application ...
       <meta-data android:name="com.google.android.geo.API_KEY"
         android:value="YOUR KEY HERE"/>

    • 在应用程序委托 ios/Runner/AppDelegate.swift 中指定您的 API 密钥

        import UIKit
  import Flutter
  import GoogleMaps

  @UIApplicationMain
  @objc class AppDelegate: FlutterAppDelegate {
    override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication. LaunchOptionsKey: Any]?
      ) -> Bool {
   GMSServices.provideAPIKey("YOUR KEY HERE")
   GeneratedPluginRegistrant.register(with: self)
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
    }

  2. 安装 Dart Frog

dart pub global activate dart_frog_cli
  1. 转到服务器根文件夹并运行
cd real_time_vehicle_tracking_server
dart_frog dev
  1. 运行 Flutter 应用

工具与包

GitHub

查看 Github