A Blueprint for Location Tracking Using Laravel and Ionic
Location-Based Service
Say you want to construct a mobile app for a location-based service such as on demand cleaning or any field service organization, in general. For a such a location-based service, consumers post a request and suppliers are allocated per demand. Suppliers move around through the city, so we need to track their location continuously. Allocation of suppliers to demands may be manual or automatic or a combination of both.
Suppliers need a mobile app that tracks their location via the mobile device GPS and transmit it to the server. Suppliers use the app the receive the ongoing consumer demand, and respond to a demand request. Such a demand request can be either directed at the particular supplier or generally broadcast to all nearby suppliers.
The back office for the service needs a real-time map of the suppliers locations, and the incoming demands. Such a map will be used to either manually or automatically match supply to demand.
Nowadays, it is common to provide consumers with a live map of the supplier location en route to the consumer. Such a map needs to be a responsive real-time web app.
The Web App
Many solutions are possible, but in my experience using the PHP Laravel framework for the server side is most convenient for a developer. It provides a Vue.js front-end with Bootstrap for responsiveness.
Real-Time Web
For a real-time web experience we would use Laravel Echo, a wrapper for Socket.io that integrates the general Laravel broadcasting mechanism. One can send events through the Socket.io server for Laravel Echo.
The Mobile App
The Ionic framework is an Angular hybrid mobile framework for iOS and Android. Being hybrid you need to construct one app. For suppliers to receive real-time notification on demand, and possibly other capabilities like messaging, we need mobile push notifications. Sockets are good within a hybrid app only while the app is in the foreground, such as when the supplier is in the map screen.
Based on our experience both push and sockets are best, corresponding to the two usage scenarios:
1. Unpredictable information, such as a new demand request
2. Ongoing real-time display, such as a map screen
Push Notification
Build by oneself the interaction with the Apple and Google push notification services is something that is best avoided.
There are plenty of push notifications services that one can use. But as we work with Ionic we tend to use Ionic push service.
Live App Update
For the same price of the Ionic services, one can do dynamic app update of the web components of the web app, which is really the majority of app code in a hybrid app.
The Live Map
There is a difficult choice here. One can go with Vue.js because it you already have in the web app, or you could go with Ionic because you already have it in the mobile app.
Laravel Vue.js it is better streamlined with the views in the web app allowing for code reuse, and will make it easier to have richer live views to be construct with Laravel Blade templates.
Ionic will be easier for making a responsive display, especially using SplitPane. So if you need an easy construction of a more complicated thing, Ionic might be better.
