Traccar client

Traccar client

Simple Ionic Traccar client app

$10.00

Jose Fernandez

Jose Fernandez

Member since 2017

Details

Version:
1.0
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
2 years ago
Updated:
1 year ago
Category:
Starters
Tags:
traccar, ionic, provider, api, gps,

Attention! ⚠

This app is currently no longer being maintained, being superseded by a more modern an up to date version that you can find here

The Ionic Traccar Starter 🎮

See it in action! --> https://www.youtube.com/watch?v=ikBoXNjXmUM&t

This is a very basic starter, based on Ionic Super Starter, that demonstrates how to make use of the Traccar APIs in an Ionic application. It also shows how you can integrate integrate a native Google map where you can draw the position of your vehicles and perform further actions.

All the different endpoints/functions of the Traccar API are available, but for simplicity, the Starter contains examples of the most common functions:

  • How to Login into the platform and verify the credentials
  • How to create a new User
  • How to get the list of all devices and their last position to locate them on the map
  • How to perform a POST request to create new devices
  • How to retrieve the list of the user devices
  • How to delete a device
  • How to retrieve and edit the user basic info (name, email, password).
  • how to handle possible errors during login or during the app operation using an HTTP interceptor

You can set up the URL of your own Traccar server during the app initialization if you would like to test it with your platform. By default, the app connects to one of the Traccar demo servers (http://demo.traccar.org/api)

In order for the maps to work correctly, you will need to create your own Google maps API key. This is a pretty simple process and you can create one for free. Check the "using the map" section for specific details.

All the files of the project are included in this download, so you are free to make any changes in the code, add/remove functionality, etc. Or just add your own logo/company name in the app and you are good to go.

How to use

Since the app is making use of a native cordova plugin, you will not be able to use "ionic serve", but you can still test it on a browser:

Unzip *.zip file

$ cd traccar-client $ ionic cordova run browser

(On mac, I have sometimes to use sudo)

If you would like to make a build for android, just:

$ ionic cordova platform add android $ ionic cordova build android

(On mac, I have sometimes to use sudo)

Api

A special provider was created to host all the Traccar API functionality. Just add the provider in any of your pages to make use of any of the Traccar endpoints. Check out the already created pages for examples.

Using the map

The application makes use of the plugin cordova-plugin-googlemaps which requires a google maps API key to work. For information on how to get your own API key, please follow the instructions provided here. Once you have your own API key, copy & paste it in the corresponding section within cordova-plugin-googlemaps in the config.xml file

Adding Languages

The Starter comes with internationalization (i18n) out of the box with ngx-translate. 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.).

Changing the Language

To change the language of the app, edit src/app/app.component.ts and modify translate.use('en') to use the LANGCODE from src/assets/i18n/