Skip to Content
Author's profile photo Nabheet Madan

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.

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Margot Wollny
      Margot Wollny

      Very nice and funny use case for UI5 😀 Thanks for sharing!

      What a pity, UI5Top5 is just over ...

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks for the feedback..agree its a funny case but being truthful?

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      nice app - it has a nice response on the youtube video!

       

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks for the feedback, sorry did not get the youtube part.

      Author's profile photo Phil Cooley
      Phil Cooley

      Nice idea Nabheet Madan and amazing you can use the different languages here. Awesome! Great that you share the codebase as well. Thanks!

       

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      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.

      Author's profile photo Smriti Gupta
      Smriti Gupta

      Hello Nabheet,

       

      Suck Kind of App I would definitely like to have on my Handy. Great idea!

       

      Best Regards

      Smriti

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Glad you like it:)

      Author's profile photo Ankita Gaur
      Ankita Gaur

      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

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks Ankita for feedback. An idea can do wonders?