This app provides the map user interface for browsing data on Open Charge Map (https://map.openchargemap.io). It can also be embedded by other websites using an iframe.
The app is implemented using the Angular version of the Ionic Framework.
The build/runtime configuration settings are in /src/environments/environment.ts and environment.prod.ts
The .prod.ts version is used when you build with the --prod flag
At a minimum the apiBase setting must be set to a working OCM API host and the mapBoxToken must be set to a real mapbox API key.
Feature toggles are defined by the enabledFeatures array, the app will check for the presence of a feature in this array before enabling related UI. This is where additional feature toggles would be defined and this allows dev and prod versions to have different features toggled on.
-
Install Ionic CLI & Cordova:
npm install -g cordova ionic -
Install npm modules:
npm install -
To run in desktop browser:
ionic serve
Run ionic build --prod which will output html build to www folder. When updating live app, preserve web.config and favicon.
- Web uses a web/js mapping provider for the browser version
- ionic cordova plugin remove cordova-plugin-inappbrowser
- ionic cordova build browser --prod
- Android and iOS
- ionic cordova plugin add cordova-plugin-inappbrowser
- iOS and Android versions historically have different bundle ids.
- iOS fresh setup: install and update latest cocoapods version, then /platforms/ios/ pod deintegrate, pod install
- change bundle id to org.openchargemap.app and name to Open Charge (Open Charge Map is too long)
- Use square icon for iOS
- File> Workspace> Legacy Build
- ionic cordova platform remove ios
- ionic cordova platform add ios
- platforms/ios/ pod deintegrate, pod install
- ionic cordova prepare ios --prod
- using capacitor:
- Android:
- Update bundle id to com.webprofusion.openchargemap (including capacitor.config.json), version code in /app/build.gradle
- npx cap add android
- // resolve ERR_CLEARTEXT_NOT_PERMITTED debug error: add
android:usesCleartextTraffic="true"to AndroidManifest.xml - Icons: Android Studio > Res > New Image Asset, browse to Icon, scale 100%; trim yes; set background to #8BC43F
- Splashscreen: use apetools to generate 'splash.png' variants, remove unused existing default screens
- Push notifications: copy google-services.json to app
- Set version in Android Studio: gradle default config https://stackoverflow.com/a/26865465/1707154
- build:
ionic build --prod,npx cap sync android,npx cap open android, Build Signed APK in Android Studio - double check icons and splashscreens
- iOS:
- npx cap add ios
- Update bundle id to org.openchargemap.app (including capacitor.config.json), version code, ste Display Name to 'Open Charge' (for length)
- Set Info.plist settings and permissions as required by Capacitor plugins:
- Status Bar: UIViewControllerBasedStatusBarAppearance : Yes
- Privacy Location Text (important for validation): 'Your location information will be used to find charging stations near you.'
- Add Push Notifications capability
- set splashscreen and icons: replace Assets with resources/Assets
- Android:
`typedoc --options typedoc.json --exclude '**/*+(e2e|spec|index).ts' ./src/`