STM32、Spring Boot、MQTT和React Native：智能停车管理系统的全栈开发详解（附代码示例）

2024-07-20 07:01:13

1. 项目概述

随着城市化进程的加快，停车难已成为许多大中城市面临的普遍问题。为了提高停车效率，改善用户体验，本文设计并实现了一套智能停车管理系统。该系统利用STM32微控制器、各类传感器以及移动应用，实现了停车位实时监控、在线预约和自动支付等功能，为用户提供了便捷的停车服务。

本系统的主要功能包括：

实时监控停车位状态
提供停车位在线预约
自动识别车牌
移动应用支付功能
停车数据统计和分析

2. 系统设计

2.1 硬件设计

系统的硬件部分主要包括以下组件：

STM32F103微控制器：作为系统的核心控制单元
HC-SR04超声波传感器：检测车位是否有车辆占用
OV7670摄像头模块：采集车牌图像
ESP8266 Wi-Fi模块：实现与服务器的无线通信
LED指示灯：显示车位状态（红色表示占用，绿色表示空闲）

硬件连接示意图如下：

2.2 软件设计

软件架构采用前后端分离的设计，具体包括：

前端：使用React Native开发跨平台移动应用
后端：采用Spring Boot框架，提供RESTful API
数据库：使用MySQL存储用户信息、停车记录等数据
消息队列：使用RabbitMQ处理高并发场景下的消息传递
缓存：使用Redis缓存热点数据，提高系统响应速度

软件架构图如下：

3. 代码实现

3.1 STM32固件代码

以下是STM32读取超声波传感器数据并通过MQTT上传的示例代码：

#include "stm32f1xx_hal.h"
#include "mqtt.h"

// 定义引脚
#define TRIG_PIN GPIO_PIN_0
#define TRIG_PORT GPIOA
#define ECHO_PIN GPIO_PIN_1
#define ECHO_PORT GPIOA

// 初始化超声波传感器
void init_hcsr04(void) {
  GPIO_InitTypeDef GPIO_InitStruct = {0};
  // 配置TRIG引脚为输出
  GPIO_InitStruct.Pin = TRIG_PIN;
  GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
  GPIO_InitStruct.Pull = GPIO_NOPULL;
  GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_LOW;
  HAL_GPIO_Init(TRIG_PORT, &GPIO_InitStruct);

  // 配置ECHO引脚为输入
  GPIO_InitStruct.Pin = ECHO_PIN;
  GPIO_InitStruct.Mode = GPIO_MODE_INPUT;
  GPIO_InitStruct.Pull = GPIO_NOPULL;
  HAL_GPIO_Init(ECHO_PORT, &GPIO_InitStruct);
}

// 获取距离数据
uint16_t get_distance(void) {
  uint32_t start_time, end_time;
  uint16_t distance;

  // 发送10us的触发脉冲
  HAL_GPIO_WritePin(TRIG_PORT, TRIG_PIN, GPIO_PIN_SET);
  HAL_Delay_us(10);
  HAL_GPIO_WritePin(TRIG_PORT, TRIG_PIN, GPIO_PIN_RESET);

  // 等待回波
  while(HAL_GPIO_ReadPin(ECHO_PORT, ECHO_PIN) == GPIO_PIN_RESET);
  start_time = HAL_GetTick();

  while(HAL_GPIO_ReadPin(ECHO_PORT, ECHO_PIN) == GPIO_PIN_SET);
  end_time = HAL_GetTick();

  // 计算距离 (声速约为340m/s，来回需要除以2)
  distance = (end_time - start_time) * 340 / 2 / 1000;

  return distance;
}

// MQTT数据上传
void upload_data(uint16_t distance) {
  char payload[50];
  sprintf(payload, "{\"parkingId\": 1, \"distance\": %d}", distance);
  mqtt_publish("parking/status", payload);
}

// 主循环
void main(void) {
  // 初始化硬件
  HAL_Init();
  init_hcsr04();
  mqtt_init();
  
  while(1) {
    uint16_t dist = get_distance();
    
    // 判断停车位状态
    if (dist < 50) {  // 如果距离小于50cm，认为有车
      HAL_GPIO_WritePin(LED_PORT, LED_PIN_RED, GPIO_PIN_SET);
      HAL_GPIO_WritePin(LED_PORT, LED_PIN_GREEN, GPIO_PIN_RESET);
    } else {
      HAL_GPIO_WritePin(LED_PORT, LED_PIN_RED, GPIO_PIN_RESET);
      HAL_GPIO_WritePin(LED_PORT, LED_PIN_GREEN, GPIO_PIN_SET);
    }
    
    upload_data(dist);
    HAL_Delay(1000);  // 每秒检测一次
  }
}

这段代码实现了以下功能：

初始化超声波传感器的GPIO引脚
通过超声波传感器测量距离
根据测量距离判断停车位状态，并控制LED指示灯
通过MQTT协议上传停车位状态数据

3.2 Spring Boot后端代码

以下是处理停车位状态更新的Spring Boot控制器示例：

@RestController
@RequestMapping("/api/parking")
public class ParkingController {

  @Autowired
  private ParkingService parkingService;
  @PostMapping("/status")
  public ResponseEntity<?> updateStatus(@RequestBody ParkingStatus status) {
    try {
      ParkingSpot updatedSpot = parkingService.updateParkingStatus(status);
      return ResponseEntity.ok(updatedSpot);
    } catch (Exception e) {
      return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error updating parking status");
    }
  }

  @GetMapping("/available")
  public ResponseEntity<?> getAvailableSpots() {
    try {
      List<ParkingSpot> availableSpots = parkingService.getAvailableSpots();
      return ResponseEntity.ok(availableSpots);
    } catch (Exception e) {
      return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error fetching available spots");
    }
  }

  @PostMapping("/reserve")
  public ResponseEntity<?> reserveSpot(@RequestBody ReservationRequest request) {
    try {
      Reservation reservation = parkingService.reserveSpot(request);
      return ResponseEntity.ok(reservation);
    } catch (Exception e) {
      return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Error reserving spot: " + e.getMessage());
    }
  }
}

这个控制器实现了以下功能：

更新停车位状态
获取可用停车位列表
预约停车位

3.3 React Native前端代码

以下是React Native应用中显示可用停车位的组件示例：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';

const AvailableSpots = () => {
  const [spots, setSpots] = useState([]);

  useEffect(() => {
    const fetchSpots = async () => {
      try {
        const response = await axios.get('http://api.example.com/parking/available');
        setSpots(response.data);
      } catch (error) {
        console.error('Error fetching available spots:', error);
      }
    };

    fetchSpots();
    const interval = setInterval(fetchSpots, 30000); // 每30秒更新一次

    return () => clearInterval(interval);
  }, []);

  const renderSpot = ({ item }) => (
    <View style={styles.spotItem}>
      <Text>Spot ID: {item.id}</Text>
      <Text>Status: {item.status}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Available Parking Spots</Text>
      <FlatList
        data={spots}
        renderItem={renderSpot}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  spotItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default AvailableSpots;

这个组件实现了以下功能：

在组件加载时获取可用停车位数据
每30秒自动更新数据
使用FlatList组件展示停车位列表

4. 项目总结

本智能停车管理系统通过整合硬件传感器、微控制器、后端服务和移动应用，实现了停车位的实时监控、在线预约和自动支付等功能，为用户提供了便捷的停车服务。系统的主要特点和优势包括：

实时监控：利用STM32微控制器和超声波传感器，实现了对停车位状态的实时监测，确保数据的及时性和准确性。
高效通信：采用MQTT协议进行设备与服务器之间的通信，保证了数据传输的可靠性和实时性。
可扩展性：采用前后端分离的架构设计，使用Spring Boot构建后端服务，便于系统的扩展和维护。
用户友好：通过React Native开发的移动应用，为用户提供了直观、易用的界面，方便查看停车位状态和进行预约操作。
性能优化：引入Redis缓存和RabbitMQ消息队列，有效提高了系统在高并发场景下的性能表现。

在实际应用中，本系统可以显著提高停车场的管理效率，减少用户寻找停车位的时间，从而缓解城市交通压力。同时，系统收集的数据也可用于进一步的分析和优化，如停车位使用率统计、高峰期预测等。

码农公寓