timesheet @ insidetrack rome #sitrome
TRANSCRIPT
www.besolution.it
1
2
3
4
5
6
7
8
9
10
11
12
Marco Tamagnini
@BESolution
Enterprise SAPUI5
Timesheet application
www.besolution.it
Agenda
• Introduction
• Technologies
• Architecture
• How to use it…
www.besolution.it
Why another Timesheet application?
Introduction
Because an Employee needs to record:
• working hours spent
• travel expenses
on several projects/orders of particular customers.
And, of course, do it…
...IN A EASIER WAY!
www.besolution.it
What an user can do?
Introduction
Manage Time
entries of a
particular month
Record expenses
and upload receipts
to gain refunds
Insert private car
km to be refunded
www.besolution.it
How you have managed to get it working?
Technologies
1. We searched for a black phoenix…
«an extensible JavaScript-based
HTML5 browser rendering library
for Business Applications»
www.besolution.it
How you have managed to get it working?
Technologies
1. We searched for a black phoenix…
2. …then we found some nerdy stuff...
«a curated set of user interface
interactions, effects, widgets, and
themes built on top of the jQuery
JavaScript Library»
jQueryUI
www.besolution.it
How you have managed to get it working?
Technologies
1. We searched for a black phoenix…
2. …then we found some nerdy stuff...
3. …and finally something a little bit more nerdy!
provides access to
many Google
APIs. It is
designed for
JavaScript client-
application
developers and
offers simple,
flexible, powerful
API access.
jQueryUI
Google API
www.besolution.it
Hmmm, front-end seems to be complex…
Technologies
Some «Technical» aspects of our solution are:
• Custom Controls definition (SAPUI5)
• Custom animations (with jQueryUI)
• Single Sign On with Google Account
• Google Drive integration (receipts upload)
• Google Maps integration (private car km)
www.besolution.it
And what about the Back-end side?
Technologies
OpenSource
And the phoenix…
…became white!
www.besolution.it
And what about the Back-end side?
Architecture
www.besolution.it
Ok, let’s take a look to the application flow
Architecture
Bob Bob’sBrowser
GoogleAuthentication
Back-EndSystem
JSON /oData
www.besolution.it
Ok, let’s take a look to the application flow
Architecture
Video Demo:
https://www.youtube.com/watch?v=rExMNC8x1_8
www.besolution.it
Am i wrong or you said «Google Drive»…?
Architecture
Bob Bob’sBrowser
Bob’sReceipts
GoogleAuthentication
Google Drive
SSO (with Google AuthToken)
www.besolution.it
Am i wrong or you said «Google Drive»…?
Architecture
Video Demo:
https://www.youtube.com/watch?v=OSsCdAhbR0c
www.besolution.it
I’m pretty sure you’ve also said «Google Maps»…
Architecture
Bob
Bob’s Browser
GoogleAuthentication
Google MapsBob’sCar KMs
SSO (with Google AuthToken)
www.besolution.it
I’m pretty sure you’ve also said «Google Maps»…
Architecture
Video Demo:
https://www.youtube.com/watch?v=OG8Pp3sB9bs
www.besolution.it
Contacts
98
Marco [email protected]
BeSolution @ LuccaInnovation research lab
Thank youFor further technical (or not) information, just ask me…