Technical Spec Sheet

Front-End

Using the Onsen-UI library as the styling framework for the front-end of the application.

Instructions

So, Onsen UI has a 'Playground' that shows users worked examples (a bit like Codepen) of how elements can be implemented.

After looking through some examples and documentation, some main points that need to be followed when using Onsen-UI was noted:

1. In order to get Onsen-UI working, the following css and js scripts must be linked in the head element: <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

   <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

   <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

2. After the body tag in a HTML document, all elements that should be rendered in the space of the page must be wrapped inside the ons-page tag as that is essentially the page wrapper that allows elements to be rendered inside the space of a page.

3. Most of the onsen-ui elements use a ons- prefix to so most of the usual html tags will require this prefix to be in place in order to have the onsen ui styling.

4. Onsen-UI uses modifiers to attach different attributes to specific elements. For example, a text input field will automatically render using either Apple design or Material design depending on which platform the app is being accessed. However, the text input field can be tagged with a modifier so that it displays a specific style of text input field regardless of platform. For example, attaching modifier="underbar" means that the text input field's automatic platform-based rendering has been overridden and will now render in the 'underbar' format only.

Back-End

Using PHP as the primary backend language to connect the front end to the database. Used to echo data from the database to dynamically generate content and pages.

Database

Using phpmyadmin to manage the database. The database is written in SQL.

Deployment Guide

Deployment & Installation Guide

In the Moment is a progressive web app, therefore the deployment process is very similar to deploying a website. It is recommended that the developers first test the app on their local server and then transfer it to the actual server. Therefore below is a guide to deploying the app on both a local and a live server.

For Development & Testing

In order to deploy In The Moment into a testing server, it is recommended to first download XAMPP, (https://www.apachefriends.org/index.html) a free and open-source cross-platform (windows and mac) PHP development environment.

Once XAMPP has been downloaded and installed, go to XAMPP folder within your computer, typically within C:\xampp\htdocs. Then create a new folder called inthemoment and transfer all source code within.

In the Moment also requires a relational database server and XAMPP also includes phpmyadmin, an administration tool for MySQL. To access it, open wamp, navigate to http://localhost/phpmyadmin and log in through root account. Once the phpmyadmin dashboard is opened, create a new database and name it inthemoment. Then click on import on the header navigation and choose a file to import. In the Moment source code, there is a file called inthemoment.sql, import that file. It includes all necessary queries to set up the required tables and data.

Once the database has been set up, it is important that you change the login credentials within start.php to your own account and password to your phpmyadmin dashboard.

Once the setup has been completed, to test the source code, first run XAMPP and press start on the control panel. It will automatically set up a local server within your computer and can be accessed through http://localhost/inthemoment.

For Going Live

On UQ
If you have a valid UQ account, you can deploy In the Moment through UQ cloud, a cloud hosting services offered by EAIT. First, you need to set up a web project zone (for the exact steps please refer to https://help.eait.uq.edu.au/smartos/) and then transfer the source code to the zone via FTP software such as FileZilla. (For more information on transfer the files please refer to https://its.uq.edu.au/node/1168/0#0) Lastly the export your local inthemoment database and import the SQL file to phpmyadmin dashboard on the UQ zone you had just set up. (Note please change the start.php to your phpmyadmin account)

On your own server First set up your own public server by first register a domain name and then finding a web hosting company. After please ensure a MySQL database with phpMyAdmin is installed and export your local inthemoment database and import the SQL file. Please ensure that the app has been fully tested and then moves the source code to the live server through FTP software.

Important app viewing instructions In the Moment is designed to be a mobile application and has not been optimised for PC viewing, for the best experience please view the app on mobile.

If you are testing the app on your local computer server, please follow the following instructions to simulate mobile devices with device mode in Chrome DevTools.

1. Open the app on chrome

2. Right click on any part of the page and click Inspect.

3. The inspector screen should be opened on the right side of the browser. Click on the small phone icon (device toolbar) the top header of the inspector.

4. You will be presented with a stimulation on how the app will look on mobile within chrome. You can also click on the top header to select a specific device you want to test app on.

Note: Testing on chrome is not a replacement for testing on a mobile device as the proportion may be different on an actual phone screen.