Your SlideShare is downloading. ×
0
Oracle Application Express
as add-on for Google Apps
with Twitter Bootstrap
1
Agenda
19:00 Who is…?
19:05 Introduction Google Apps
19:10 Business case & demo Gbilling
19:25 Introduction to Twitter Boo...
Who is smart4apex?!
• Just some geeks passionate about Apex, having fun
together
• Sharing experience and knowledge
• Expl...
Who is smart4apex?!
• Company 2.0;
– Co-operation of professionals
• Guild
– Rules about work-ethics
– Minimum experience
...
Who are we?
Sergei Martens
• Oracle developer from 1998
• OCP in 1999
• Database version 7
• Started as classic developer
...
Warning
During this presentation we will bring the user interface of
our Apex application “to the next level”.
To make thi...
Google Apps
7
Google Apps marketplace
8
Business Case
1. Specialist in information management
2. Interested in the opportunities of cloud technology and the use o...
Architecture
Domain &
user
information
Drive
Calendar
Jasper reports
server
Gbilling
Accounts &
projects
Invoicing
Local d...
Data structure
Users
Users-
sessions
Companies
Projects
Clients
Invoices
Invoice itemsAgenda items
11
Demo Gbilling
Demo
12
Subjects on user interface
Commercial
environmentShorter lifetime of software
Trends
Less = more
Reference of users
Bigger...
Trends
• Simple design
• Just a few items
• Large items
• Dynamic regions
• Info graphics
• Dashboards
• Long pages
• Comp...
wrong user interface
15
Example
16
Introduction Twitter Bootstrap
17
Bootstrap in a nutshell
Wikipedia
1. Bootstrap is a free collection of tools for creating websites and
web applications.
2...
Bootstrap examples I - template
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<meta name="viewport" cont...
Bootstrap examples I - grid
• 12 column layout
• 940px width
• Works with CSS-classes:
• row; like <tr> in html-table
• sp...
Bootstrap examples II - Icons
• Icons available through classes
<i class="icon-search"></i>
• 140 icons available (glyphic...
Who are we?
Richard Martens
• Oracle since 12 years (Oracle 8i)
– Large Multilingual websites
– RAD applications
• Core Te...
Bootstrap examples II – Modal
• Modal
– Built-in dialog (popup)
– Usage
• First create the modal.
– Container div
» modal-...
Bootstrap examples II – Date-picker
• Date-picker
• Using Bootstrap plugin (http://www.eyecon.ro/bootstrap-datepicker/)
• ...
Bootstrap examples II – Parsley
• Is not a part of bootstrap
– http://parsleyjs.org/
• JavaScript library for client side ...
Bootstrap examples II – Parsley
– Template JavaScript to position the error message correctly
for Bootstrap
26
<div class=...
Google API – Authentication
27
Server
Application
Google oauth2
server
Google API
endpoint
Token request
Code
API call wit...
Google API – Authentication I
• Utilizes package and tables on
database
– Table contains session information
• Page 101 (s...
Google API – Authentication II
• Page 102 (copied from 101)
– Contains item to store
query string
– Dynamic action to proc...
Google API – making a request
• Three options:
– Using apex built-in restful client
• Advantages:
– Easy to implement
– Re...
Google API – the built-in restful client
• Create web-service reference in
“Shared Components”
• Create process, report or...
Google API – making your own request
• Relies on procedures and functions (within packages)
• Gives full freedom in what t...
Google API - getUserInfo
• RESTful webservice
• Response in json format
• Endpoint:
https://www.googleapis.com/oauth2/v1/u...
Announcement
34
Quiz
35
Upcoming SlideShare
Loading in...5
×

Oracle Application Express as add-on for Google Apps

1,484

Published on

Building a Google Apps application in APEX

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,484
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Oracle Application Express as add-on for Google Apps"

  1. 1. Oracle Application Express as add-on for Google Apps with Twitter Bootstrap 1
  2. 2. Agenda 19:00 Who is…? 19:05 Introduction Google Apps 19:10 Business case & demo Gbilling 19:25 Introduction to Twitter Bootstrap 19:40 Some examples how to integrate TB in Apex 19:55 Mini-break 20:05 More examples how to integrate TB in Apex 20:15 Working with Google authentication (oauth 2.0) 20:35 Google API’s 20:50 Announcement 20:55 Quiz 2
  3. 3. Who is smart4apex?! • Just some geeks passionate about Apex, having fun together • Sharing experience and knowledge • Explore new techniques and opportunities • Building state of the art (Apex) solutions for our customers 3
  4. 4. Who is smart4apex?! • Company 2.0; – Co-operation of professionals • Guild – Rules about work-ethics – Minimum experience • Masters – Commission of entrance – Commission of dispute – Form the corporation • Friends 4
  5. 5. Who are we? Sergei Martens • Oracle developer from 1998 • OCP in 1999 • Database version 7 • Started as classic developer (Forms & Designer) • Now Apex developer • Speaker Dutch Apex congress 2012 (Ext JS) & 2013 (mobile) 5
  6. 6. Warning During this presentation we will bring the user interface of our Apex application “to the next level”. To make this happen we make use of HTML, CSS and JavaScript. This is inevitable for creating a modern user interface. 6
  7. 7. Google Apps 7
  8. 8. Google Apps marketplace 8
  9. 9. Business Case 1. Specialist in information management 2. Interested in the opportunities of cloud technology and the use of it in a business environment. Task Based on the appointments in our Google Calendars, we want to: 1. automatically generate invoices 2. send the invoices digitally (email) to our customers Next we want to keep track of payments, etc. 9
  10. 10. Architecture Domain & user information Drive Calendar Jasper reports server Gbilling Accounts & projects Invoicing Local data Google Apps GoogleAPI 10
  11. 11. Data structure Users Users- sessions Companies Projects Clients Invoices Invoice itemsAgenda items 11
  12. 12. Demo Gbilling Demo 12
  13. 13. Subjects on user interface Commercial environmentShorter lifetime of software Trends Less = more Reference of users Bigger = better HTML5 + CSS3 AJAX 13
  14. 14. Trends • Simple design • Just a few items • Large items • Dynamic regions • Info graphics • Dashboards • Long pages • Complex design • Many items • Small items • Tabs / Report -> Detail • Text • Reports / tables • Short pages 14
  15. 15. wrong user interface 15
  16. 16. Example 16
  17. 17. Introduction Twitter Bootstrap 17
  18. 18. Bootstrap in a nutshell Wikipedia 1. Bootstrap is a free collection of tools for creating websites and web applications. 2. It has been the most popular project in GitHub and has been used by NASA and MSNBC among others. 3. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools 4. Since version 2.0 it also supports responsive design 18
  19. 19. Bootstrap examples I - template <!DOCTYPE html> <html> <head> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> </body> </html> 19
  20. 20. Bootstrap examples I - grid • 12 column layout • 940px width • Works with CSS-classes: • row; like <tr> in html-table • span#; width of the column • offset#; move # columns to the right • fluid; uses percentages in stead of fixed width • container; centre on page 20
  21. 21. Bootstrap examples II - Icons • Icons available through classes <i class="icon-search"></i> • 140 icons available (glyphicons) – from “icon-glass” to “icon-fullscreen” • Alternative: font-awesome – http://fortawesome.github.io/Font-Awesome/icons/ – 361 icons – Compatible with the TB glyphicons – Sizeable (they use a font instead of an image) • CSS adjustable (colour, underline, alignment etc.) <i class="icon-search"></i> 21
  22. 22. Who are we? Richard Martens • Oracle since 12 years (Oracle 8i) – Large Multilingual websites – RAD applications • Core Technologies – Oracle PL/SQL – Oracle Apex – HTML5, CSS3, JavaScript, XML, XSLT • Other technologies – PHP, ASP(.net) – Windows and Linux server platform • RIMA on Oracle Forums 22
  23. 23. Bootstrap examples II – Modal • Modal – Built-in dialog (popup) – Usage • First create the modal. – Container div » modal-header » modal-body » modal-footer • To open modal – Through data attributes » <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> – Through JavaScript » $('#myModal').modal('show'); • Modal implemented as a region template. • Opening of modal through data-attributes on a button – Sometimes JavaScript is used for specific reasons. 23 <div id="myModal" class="modal hide fade" tabindex="-1“ role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal“ aria-hidden="true"> </button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div>
  24. 24. Bootstrap examples II – Date-picker • Date-picker • Using Bootstrap plugin (http://www.eyecon.ro/bootstrap-datepicker/) • Combination of text-item and button • Usage – Create input element of type text and ad the “date-picker” class – Page template will transform all these elements using jQuery and CSS 24 <div class="input-append"> <input type="text" class="text_field input-medium date-picker" value="20-08-2013"> <button class="btn icon-calendar btn-date-picker" type="button"></button> </div>
  25. 25. Bootstrap examples II – Parsley • Is not a part of bootstrap – http://parsleyjs.org/ • JavaScript library for client side form validation • Allows element as well as form validation • Element validation implemented in the S4A Bootstrap theme – without using plugins – Available for all page templates – By use of element attributes: • parsley=“blur” • parsley=“false” – Further attributes according to parsley docs • required = “required” • data-notblank = “true” • data-minlength = “6” • data-maxlength = “8” • data-type=“email” (“url”, “digits”, “number”, “date-iso”) 25
  26. 26. Bootstrap examples II – Parsley – Template JavaScript to position the error message correctly for Bootstrap 26 <div class="control-group error"> <label class="control-label“ for="inputError"> Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline"> Please correct the error</span> </div> </div>
  27. 27. Google API – Authentication 27 Server Application Google oauth2 server Google API endpoint Token request Code API call with token API response (json, xml) User login and consent Exchange code for token Token Step 1 Step 2 Step 3
  28. 28. Google API – Authentication I • Utilizes package and tables on database – Table contains session information • Page 101 (standard login page) – Remove token from table for “this” session – Start procedure • Procedure redirects to: https://accounts.google.com/o/oauth2/ • Google takes over: – Shows login information (shows the grants that the app is requesting) – User clicks okay – Google redirects to the URL specified in API console (which is page 102) 28 Server Application Google oauth2 server Token request Code User login and consent
  29. 29. Google API – Authentication II • Page 102 (copied from 101) – Contains item to store query string – Dynamic action to process query string • Copy query string into item (using JavaScript) • Start procedure (using pl/sql block) – Request token – Do first API call to: » Get user info (id, email, name) – Return user info – Put user-info into application items • Submit the page – Login process • Prepare redirect (start or settings) (new user needs to set certain settings) • Set session language • Start standard apex login procedure – User is redirected to start-screen or settings-page 29 Server Application Google oauth2 server Exchange code for token Code
  30. 30. Google API – making a request • Three options: – Using apex built-in restful client • Advantages: – Easy to implement – Results go in a apex-collection • Disadvantages – Limited use from PL/SQL – Limited debugging possibilities – Making your own request in PL/SQL • Advantages – Full debugging possibilities – Full access from PL/SQL • Disadvantages – More difficult to implement – Using apex_web_service package (not covered) • Advantages – like making own request – Easier to implement than own request, more difficult than restful client • Disadvantages – Less control than own request – Greatest lack in oracle apex is built in JSON parsing / extracting 30
  31. 31. Google API – the built-in restful client • Create web-service reference in “Shared Components” • Create process, report or form utilising the reference – Process: store result in collection or items – Report: will run on a temp collection – Form: allows to post data 31
  32. 32. Google API – making your own request • Relies on procedures and functions (within packages) • Gives full freedom in what to do • You must take errors into account • A request consists of: – URL (the question asked, aka: “endpoint”) – Header (for setting security and other parameters) • Authorization: Bearer {token} • Content-Length: {length_of_body} – Body (sometimes optional, used for POST, PUT and PATCH requests, contains the content sent) • Can contain json, xml or other structures, depending on webservice 32
  33. 33. Google API - getUserInfo • RESTful webservice • Response in json format • Endpoint: https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token={token} • Response is json: { "id": "111253075910917653317" , "email": r.martens@smart4apex.nl , "verified_email": true , "name": "Richard Martens" , "given_name": "Richard" , "family_name": "Martens" , "link": https://plus.google.com/111253075910917653317 , "picture": https://lh6.googleusercontent.com/-Dz..NM/photo.jpg , "gender": "male" , "locale": "nl" , "hd": "smart4apex.nl" } 33
  34. 34. Announcement 34
  35. 35. Quiz 35
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×