This post talks about the process of migrating code, first into a Cordova format, then combining with Sukh’s code.
https://build.phonegap.com/ was usde to compile our website into native apps. Many changes needed to be made to fit with the native app format.
First, as many CDN inclusions as possible were changed to local files; jQuery, Framework7, Bootstrap, etc. This allows for maximum functionality when the user is offline.
Second was making sure everything worked, which was the case for everything except Spotify login. To carry out the OAuth2 authentication, the user had to be directed to an external link. It worked on the pc/phone browsers by opening a new window/tab respectively, then closing when authenticated. Inside the Cordova app, this directed the user to their phone’s browser, with no easy way to return to the app. The Cordova ‘InAppBrowser’ was used to fix this. It opens a browser window inside the app, the user logs into spotify then closes the window. An eventlistener triggers on the window closing, then redirects the main page to MixMap.
In the music trail, the vibration was added when a user gets within 100m of a trail location.
Migration of Sukh’s and My work was the final step in our project, as I had built functionality inside a simple/temporary UI. Features which had to be integrated were:
Placeholders for these were already in place; the music trail is one of the 4 main options on the menu, the ‘login’
button on the homepage was a placeholder for the MixMap login.
The music trail button now links to the completed music trail page using application routes. The login screen is now functional. There are links at the bottom of the popup to the registration page and to submit the form. On successful form submit, an InAppBrowser window is opened for the Spotify login. Authentication is completed, the user closes the browser window, and is redirected to MixMap. During migration I also added a key for the map, in the form of Framework7 alert.