Ionic Traccar Application ©

The Ionic traccar application is an open source project which aim is to provide an easy to use template for the creation of mobile applications for companies in the asset tracking sector that make use of the traccar service.

This application represents an improved and more up to date version of the The Ionic Traccar Starter with a more recent version of angular and much richer functions 😃

• First time user welcome screen
• Login and creation of new users
• Create/View/Edit/Delete devices easily
• Posibility of adding devices as favortes
• Fetch user info and change password, name and username
• Light and dark mode
• Change application language (with posibility of adding more translations)
• Button to auto-center map
• Get details information of the device's position (latitude, longitude, speed, etc)
• Follow device feature: Automatically keeps the map centered on the given device when it moves
• 3 report modes: Positions reports, stops reports and events reports (stops and events reports will only show stops/events that can be located on the map)

The application can be build for running on Android/iOS/WIndows devices or directly in the browser.

Table of Contents

• Getting Started
• How to see the map working
  • Adding the Google maps API Key
• Adding translations
• Deploying
  • Progressive Web App
  • Android
  • iOS

Getting Started

• Install NodeJs in your system. You can Download the installer for Node LTS.
• Install the ionic CLI globally: npm install -g ionic
• Run npm install from the project root.

Now from this point, you can:

• Run ionic serve. This will run the project in the browser. SInce the project makes use of cordova-plugin-googlemaps for displaying google maps (which is a cordova plugin), the map wont work, but using ionic serve is a good way to run the project during development and testing phases.
• Run ionic cordova run browser. This will run the app in the browser as well, but in compatibility mode for cordova, so, by using this method the map will be visible. Before doing this, you need to configure a google maps API key as described in the How to see the map working section
• Run ionic cordova run <platform> --prod (platform = android/ios). This will run the application on the connected Android/iOS device or in the running emulator. Check the Deploying section for more details

Note: See How to Prevent Permissions Errors if you are running into issues when trying to install packages globally.

How to see the map working 🌎

This project makes use of cordova-plugin-googlemaps for displaying google maps. Google maps, despite being the most common map solution used in mobile applications, is a commercial soluction, and google charges a fee for its use (check google maps documentation since they may allow some daily free quota). So, to make google maps work, you will have to create your own Google maps API key. You can follow the instructions provided Here. The creation of the API key is free and very simple, you could only be charged if the usage excees certain quota.

Adding the Google maps API Key 🔑

Once you have created your own API key, go to the config.xml file, and add it in the following preferences

<widget ...>
  <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
  <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
</widget>

Note: If you would like to execute the app in the browser, you will also have to edit the file src/app/services/mapService/map-service.service.ts and enter your API key in the following place

Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': '(api key)',
      'API_KEY_FOR_BROWSER_DEBUG': '(api key)'
    });

Note: Since the map depends on a cordova plugin, it will not work if you execute your app with ionic serve. You will have to execute the command ionic cordova run browser instead

Adding translations 📢

This application supports localization and (i18n) out of the box. This makes it easy to change the text used in the app by modifying only one file.

To add new languages, add new files to the src/assets/i18n directory, following the pattern of LANGCODE.json where LANGCODE is the language/locale code (ex: en/gb/de/es/etc.). Please, use the en.json (English translations), and es.json (Spanish translations) as template.

After that, go to the file src/app/app.component.html and add the new language in the language select element:

<ion-select  [(ngModel)]="language"  [value]="language"  (ionChange)="changeLanguage()">
    <ion-select-option  value="en">English</ion-select-option>
    <ion-select-option  value="es">Español</ion-select-option>
</ion-select>

The application will default to English (en) in case the translation is not found

Deploying 📲

Progressive Web App

1. Un-comment these lines
2. Run npm run ionic:build --prod
3. Push the www folder to your hosting service

Android

Assuming you have your Android phone connected (or an emulator running), just type:

1. Run ionic cordova run android --prod

iOS

Assuming you have an iphone connected (or an emulator running), just type:

1. Run ionic cordova run ios --prod

Publishing the app in Google Play/Apple app store 📰

People at ionic have compiled this guide that shows step by step what you have to do in order to publish your app in the Play Store (Android) or in the App Store (iOS)