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.
Very nice and funny use case for UI5 😀 Thanks for sharing!
What a pity, UI5Top5 is just over ...
Thanks for the feedback..agree its a funny case but being truthful?
nice app - it has a nice response on the youtube video!
Thanks for the feedback, sorry did not get the youtube part.
Nice idea Nabheet Madan and amazing you can use the different languages here. Awesome! Great that you share the codebase as well. Thanks!
Great tip Phil Cooley time to get hands my dirty with #i18n:). Will try in my next app which i am planning to buiild. Thanks for the feedback as always.
Hello Nabheet,
Suck Kind of App I would definitely like to have on my Handy. Great idea!
Best Regards
Smriti
Glad you like it:)
Hi Nabheet,
You always try to think out of the box....and seriously I really like your idea, this directly connects with us.
More importantly this make us realize that how we can make a small difference with day to day experiences:)
Funny but an inspiring way of code:)
Best Regards
Ankita Gaur
Thanks Ankita for feedback. An idea can do wonders?