Fitness with #OpenUI5

PS:Demo and source of the basic app below.

Motivation for the Blog

I was reading this wonderful blog by Jörn Mangels where he has used OpenUI5 to monitor electricity consumption  using a Fiori app, that actually triggered my thoughts leading to this blog. I am very lazy person by nature so have pretty good eating habits..lolz.. I have been trying loads of apps to improve my health and eating habits but each app as always gives you too much to handle. That is where this idea of making a quick, simple and basic OpenUI5 web app came.  

Infact i revised my concept of OpenUI5 in last 2-3 days using the quick Walkthrough tutorial and came reused the walkthrough app to make mine app. Believe me all it took me is just one day to make a web app which serves the purpose brilliantly.

What I am trying to make

You might have guessed it till now that app will definitely be fitness related the answer is a big YES!. The app is having a common theme which is for how long i can remain without indulging in these activities.

• Junk Food
• Sugar
• Running
• Sleep on time
• Wake up on time

A quick snapshot of the app is shown below.

OpenUI5 meets PHP/MySQL

I have been using PHP, MySQL etc. a lot in last 2-3 years to do quick things, so wanted to use the same.  The overall technical design is as follow.

• We have one Application view which has a plus button to start or reset your count of days for an activity. This button call a reusable Fragment containing dialog box as shown below.

• The application view has another view which contains the Generic tiles
• 3 server scripts were needed(people can make one do all the work also) with below mentioned purpose.
  • Gets the number of days for each habit data
  • Start recording for a habit
  • Reset the recording count to 0.

Sample code Count of days

<?php
require( 'connectDatabase.php' );
if ( isset( $_SERVER[ 'HTTP_ORIGIN' ] ) ) {
    header( "Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}" );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Access-Control-Max-Age: 86400' );
}
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'OPTIONS' ) {
    if ( isset( $_SERVER[ 'HTTP_ACCESS_CONTROL_REQUEST_METHOD' ] ) )
        header( "Access-Control-Allow-Methods: GET, POST, OPTIONS" );
    if ( isset( $_SERVER[ 'HTTP_ACCESS_CONTROL_REQUEST_HEADERS' ] ) )
        header( "Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}" );
    exit( 0 );
}
$sqlFinal = "SELECT DATEDIFF( CURDATE( ) , DATE_FORMAT( Run,  '%Y-%m-%d' ) )+1 AS Run, DATEDIFF( CURDATE( ) , DATE_FORMAT( Junk,  '%Y-%m-%d' ) )+1 AS Junk, DATEDIFF( CURDATE( ) , DATE_FORMAT( Sleep,  '%Y-%m-%d' ) )+1 AS Sleep, DATEDIFF( CURDATE( ) , DATE_FORMAT( Sugar, '%Y-%m-%d' ) )+1 AS Sugar, DATEDIFF( CURDATE( ) , DATE_FORMAT( WakeUp,  '%Y-%m-%d' ) )+1 AS WakeUp
            FROM myHealth";
try {
    $sel = $con->prepare( $sqlFinal );
    $sel->execute();
    $row = $sel->fetchAll();
}
catch ( PDOException $e ) {
    echo "DataBase Error:." . $e->getMessage();
}
catch ( Exception $e ) {
    echo "General Error:'.<br>" . $e->getMessage();
}
echo json_encode( array(
     "data" => $row 
) );
?>

The complete source code for the app can be found at here github it contains all the OpenUI5 as well as server side code.

Demo

What is next?

• Plan is to add one more tile which will be integrated with my Google Fit data so in a way one app to take care of all my health needs.
• Secondly i would like to add an optional analytics button to get some hints of when do normally break the rule

As always with SAP technologies sky is the limit these days. Feel free to provide your feedback open to all ears.