# Ola Electric Scooter Mobile Dashboard SwiftUI (Learn the Pattern)

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-30, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/in-hardware-iot-mobility-field-apps-ola-electric-scooter-mobile-dashboard-swiftu

एक vehicle dashboard की जान है एक नज़र में battery, range और speed साफ़ दिखना, अक्सर कम रोशनी में।

**TL;DR.** Electric scooter जैसा mobile dashboard बनाने का सही free तरीका है structure सीखना, brand clone नहीं। VP0 से एक dashboard design चुनिए और Cursor या Claude Code से SwiftUI code बनाइए, बड़ा battery/range gauge, साफ़ speed और ride status, और रात के लिए dark mode।

दरअसल एक electric scooter या किसी vehicle का mobile dashboard बनाते समय सबसे ज़रूरी बात नीयत साफ़ रखना है: आपको उसका structure और साफ़गी सीखनी है, किसी brand का हूबहू UI नहीं बनाना। ऐसे dashboard की जान यह है कि rider एक नज़र में, अक्सर चलते हुए या कम रोशनी में, battery, range और speed देख ले। इस structure को सीखकर, अपने brand और अपने data के साथ बनाना सही रास्ता है, और VP0 इसे free बनाता है।

## एक नज़र की साफ़गी क्यों

vehicle dashboard अक्सर मुश्किल हालात में देखा जाता है: धूप, रात, या rider का ध्यान सड़क पर। इसलिए यहाँ की हर उलझन भारी पड़ती है। यह उपयोग और भरोसे से जुड़ता है: रात में या तेज़ धूप में अगर gauge साफ़ न दिखे तो app अधूरा लगता है, और दिलचस्प यह कि करीब [82% लोग dark mode पसंद](https://www.androidauthority.com/dark-mode-poll-results-1090716/) करते हैं, जो रात की सवारी के लिए और भी ज़रूरी है। इसलिए battery और range सबसे बड़े और साफ़ हों, speed तुरंत पढ़ने लायक, और status (charging, ready, error) एक नज़र में समझ आए। structure से यही साफ़गी सीखनी है, brand नहीं।

## VP0 से dashboard की बात करें तो

VP0 एक free iOS / React Native design library है, और इसके designs से आप SwiftUI code भी बना सकते हैं। तरीका सीधा है: एक dashboard design चुनिए, link copy कीजिए और [Cursor](https://developer.apple.com/xcode/swiftui/) या Claude Code से SwiftUI code बनाइए। एक बड़ा battery/range gauge, साफ़ speed, ride status, और trip जानकारी रखिए। contrast ऊँचा और dark mode डिफ़ॉल्ट-सा रखिए ताकि रात में साफ़ दिखे। असली vehicle data को UI से अलग रखिए, वह BLE/IoT या backend से सुरक्षित आए, dashboard सिर्फ़ साफ़ दिखाने का काम करे। फिर colours और brand अपने कर दीजिए। Apple की [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) अच्छी कसौटी हैं।

## dashboard के core हिस्से

नीचे ऐसे dashboard के ज़रूरी हिस्से और सीखने लायक बात है।

| हिस्सा | सीखने लायक बात |
|---|---|
| Battery/Range | सबसे बड़ा, एक नज़र में साफ़ |
| Speed | तुरंत पढ़ने लायक |
| Status | charging/ready/error साफ़ |
| Dark mode | रात की सवारी के लिए ज़रूरी |

## एक practical उदाहरण

मान लीजिए एक EV scooter के लिए dashboard बनाना है। VP0 में एक dashboard design चुनिए, link copy करके Cursor से SwiftUI code बनाइए: ऊपर बड़ा battery और range gauge, बीच में speed, नीचे ride status और trip। हर state रखिए, charging और error साफ़ दिखें, और रात के लिए dark mode डिफ़ॉल्ट जाँचिए। असली data BLE/IoT से जोड़िए, UI उससे अलग रहे। field apps का structure [delivery partner app UI kit](/blogs/in-hardware-iot-mobility-field-apps-delivery-driver-route-app-ui-template-india/) और IoT control [IoT device control app UI SwiftUI](/blogs/in-hardware-iot-mobility-field-apps-ev-charging-station-app-ui-react-native-indi/) में देखें।


एक vehicle dashboard को सच में भरोसेमंद बनाने के लिए कुछ बातें ख़ास ध्यान माँगती हैं। सबसे ज़रूरी जानकारी, battery, range और speed, इतनी बड़ी और साफ़ हो कि एक झलक में पढ़ी जा सके, क्योंकि rider का ध्यान मुख्यतः सड़क पर होता है। रंगों का इस्तेमाल समझदारी से कीजिए: कम battery या error के लिए साफ़ चेतावनी-रंग, और सामान्य स्थिति के लिए शांत रंग, ताकि नज़र वहीं जाए जहाँ ज़रूरी हो। गति या charging में बदलाव को हल्के animation से दिखाइए, पर कुछ भी झपकाता या ध्यान भटकाता न हो। real telemetry को UI से अलग एक साफ़ परत में रखिए, ताकि data देर से आए या टूटे तो भी dashboard शालीनता से 'अपडेट हो रहा है' जैसा हाल दिखाए, खाली या टूटा हुआ नहीं। चूँकि आप यह सब अपने code में बना रहे हैं, इन ज़रूरतों को अपने vehicle और अपने brand के हिसाब से ढालना पूरी तरह आपके हाथ में रहता है।
## आम गलतियाँ

सबसे आम गलती है screen को आँकड़ों से भर देना, rider के पास देखने का वक़्त कम है, सबसे ज़रूरी 3-4 चीज़ें बड़ी रखिए। दूसरी गलती है कम contrast, जो धूप या रात में gauge को अदृश्य कर देता है, ऊँचा contrast और dark mode रखिए। तीसरी गलती है status को छोटा या अस्पष्ट रखना, charging और error तुरंत समझ आने चाहिए। चौथी गलती है UI में असली vehicle data को गूँथ देना, उसे अलग रखिए और सुरक्षित स्रोत से लाइए।


आख़िर में, एक vehicle dashboard की जान एक नज़र की साफ़गी और भरोसे में है, और VP0 से एक design लेकर, इन ज़रूरतों के साथ अपना SwiftUI code बनाकर, आप एक ऐसा dashboard बना सकते हैं जो दिन-रात साफ़ दिखे और पूरी तरह आपका अपना हो।
## मुख्य बातें

- vehicle dashboard की जान एक नज़र की साफ़गी है: बड़ा battery/range, साफ़ speed और status।
- करीब 82% लोग dark mode पसंद करते हैं, रात की सवारी के लिए ऊँचा contrast और dark mode ज़रूरी।
- structure सीखिए, brand clone मत कीजिए, और असली data UI से अलग सुरक्षित स्रोत से लाइए।
- VP0 free है: एक dashboard design लेकर अपना SwiftUI EV dashboard बनाइए।

## अक्सर पूछे जाने वाले सवाल

EV scooter dashboard को लेकर सबसे ज़्यादा यही पूछा जाता है: free कैसे बनाएँ, सबसे ज़रूरी क्या है, और clone सही है या नहीं। छोटा सा निचोड़: structure और साफ़गी सीखिए, VP0 से free design लेकर बड़ा battery/range, साफ़ speed और status वाला dashboard बनाइए, dark mode के साथ, असली data सुरक्षित स्रोत से लाइए, और colours तथा brand अपने रखकर एक मौलिक, भरोसेमंद vehicle dashboard तैयार कीजिए।

## Frequently asked questions

### Electric scooter dashboard का free UI कैसे बनाएँ?

brand clone मत कीजिए, structure सीखिए। VP0 से एक dashboard design चुनिए, link copy कीजिए और Cursor या Claude Code से SwiftUI code बनाइए, बड़ा battery/range gauge, साफ़ speed और ride status के साथ।

### vehicle dashboard में सबसे ज़रूरी क्या है?

एक नज़र में साफ़ी: बड़ा battery और range, साफ़ speed, और मौजूदा status। अक्सर कम रोशनी या धूप में देखा जाता है, इसलिए contrast और dark mode बहुत ज़रूरी।

### क्या किसी brand का UI clone करना सही है?

structure और layout सीखना ठीक है, brand और visual copy नहीं। यही बात field apps पर [delivery partner app UI kit](/blogs/in-hardware-iot-mobility-field-apps-delivery-driver-route-app-ui-template-india/) में है।

### असली vehicle data कैसे जोड़ूँ?

UI को real telemetry से अलग रखिए: dashboard दिखाने का काम करे, असली data BLE/IoT या backend से सुरक्षित आए। structure का और उदाहरण [IoT device control app UI SwiftUI](/blogs/in-hardware-iot-mobility-field-apps-ev-charging-station-app-ui-react-native-indi/) में।

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*