oracle application express as add-on for google apps
DESCRIPTION
Building a Google Apps application in APEXTRANSCRIPT
1
Oracle Application Express as add-on for Google Apps
with Twitter Bootstrap
2
Agenda
19:00 Who is…? 19:05 Introduction Google Apps19:10 Business case & demo Gbilling19:25 Introduction to Twitter Bootstrap19:40 Some examples how to integrate TB in Apex 19:55 Mini-break20:05 More examples how to integrate TB in Apex 20:15 Working with Google authentication (oauth 2.0)20:35 Google API’s20:50 Announcement20:55 Quiz
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
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
WWW.APEX.NL
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)
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.
7
Google Apps
8
Google Apps marketplace
IS NOT APP STORE!!
(GOOGLE PLAY)
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.
TaskBased on the appointments in our Google Calendars, we want to:
1. automatically generate invoices2. send the invoices digitally (email) to our customers
Next we want to keep track of payments, etc.
10
Architecture
Domain & user
information
Drive
Calendar
Jasper reports server
Gbilling
Accounts & projects
Invoicing
Local data
Google Apps
Goo
gle
API
11
Data structure
Users
Users-sessions
Companies
Projects
Clients
Invoices
Invoice itemsAgenda items
12
Demo Gbilling
Demo
13
Subjects on user interface
Commercial environmentShorter lifetime of software
Trends
Less = more
Reference of users
Bigger = better
HTML5 + CSS3AJAX
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
15
wrong user interface
16
Example
17
Introduction Twitter Bootstrap
18
Bootstrap in a nutshell
Wikipedia1. 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
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>
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
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>
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
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.
<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
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
<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
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”)
26
Bootstrap examples II – Parsley
– Template JavaScript to position the error message correctly for Bootstrap
<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
Google API – Authentication
Server Application
Google oauth2server
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
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)
Server Application
Google oauth2server
Token request
Code
User login and consent
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
Server Application Google oauth2server
Exchange code for token
Code
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
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
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
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": [email protected] , "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" }
34
Announcement
