SlideShare una empresa de Scribd logo
1 de 35
Descargar para leer sin conexión
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 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
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
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
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
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
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 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
Architecture
Domain &
user
information
Drive
Calendar
Jasper reports
server
Gbilling
Accounts &
projects
Invoicing
Local data
Google Apps
GoogleAPI
10
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 = better
HTML5 + CSS3
AJAX
13
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
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. 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
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
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
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
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
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>
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>
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
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>
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
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
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
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
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
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
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
Announcement
34
Quiz
35

Más contenido relacionado

La actualidad más candente

認定テクニカルアーキテクト取ろうぜ
認定テクニカルアーキテクト取ろうぜ認定テクニカルアーキテクト取ろうぜ
認定テクニカルアーキテクト取ろうぜHiroki Sato
 
Lightning コンポーネント開発〜実装例から学ぶ開発のコツ
Lightning コンポーネント開発〜実装例から学ぶ開発のコツLightning コンポーネント開発〜実装例から学ぶ開発のコツ
Lightning コンポーネント開発〜実装例から学ぶ開発のコツSalesforce Developers Japan
 
Oracle APEX Social Login
Oracle APEX Social LoginOracle APEX Social Login
Oracle APEX Social Loginmsewtz
 
Power BI のいろいろな活用パターン
Power BI のいろいろな活用パターンPower BI のいろいろな活用パターン
Power BI のいろいろな活用パターンYugo Shimizu
 
EtherCATやPROFINETを OPC UAで接続してみた
EtherCATやPROFINETを OPC UAで接続してみたEtherCATやPROFINETを OPC UAで接続してみた
EtherCATやPROFINETを OPC UAで接続してみたミソジ
 
What Makes a Good Concept of Operations?
What Makes a Good Concept of Operations?What Makes a Good Concept of Operations?
What Makes a Good Concept of Operations?Glen Alleman
 
Microsoft Azure EventHubで始めるIoT
Microsoft Azure EventHubで始めるIoTMicrosoft Azure EventHubで始めるIoT
Microsoft Azure EventHubで始めるIoTKeiichi Hashimoto
 
「The Things Networkの生い立ちとTNN Japanユースケース」
「The Things Networkの生い立ちとTNN Japanユースケース」「The Things Networkの生い立ちとTNN Japanユースケース」
「The Things Networkの生い立ちとTNN Japanユースケース」CRI Japan, Inc.
 
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]オラクルエンジニア通信
 
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05Hirofumi Ota
 
Practical Enterprise Architecture - Introducing CSVLOD EA Model
Practical Enterprise Architecture - Introducing CSVLOD EA ModelPractical Enterprise Architecture - Introducing CSVLOD EA Model
Practical Enterprise Architecture - Introducing CSVLOD EA ModelAshraf Fouad
 
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密ShuheiUda
 
データ基盤に関わる問い合わせ対応を仕組みで解決する
データ基盤に関わる問い合わせ対応を仕組みで解決するデータ基盤に関わる問い合わせ対応を仕組みで解決する
データ基盤に関わる問い合わせ対応を仕組みで解決する株式会社MonotaRO Tech Team
 
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!Yugo Shimizu
 
Oracle Cloud Infrastructure:2022年4月度サービス・アップデート
Oracle Cloud Infrastructure:2022年4月度サービス・アップデートOracle Cloud Infrastructure:2022年4月度サービス・アップデート
Oracle Cloud Infrastructure:2022年4月度サービス・アップデートオラクルエンジニア通信
 
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)オラクルエンジニア通信
 
Oracle GoldenGate Veridata 12cR2 セットアップガイド
Oracle GoldenGate Veridata 12cR2 セットアップガイドOracle GoldenGate Veridata 12cR2 セットアップガイド
Oracle GoldenGate Veridata 12cR2 セットアップガイドオラクルエンジニア通信
 
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよ
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよえ?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよ
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよYugo Shimizu
 

La actualidad más candente (20)

認定テクニカルアーキテクト取ろうぜ
認定テクニカルアーキテクト取ろうぜ認定テクニカルアーキテクト取ろうぜ
認定テクニカルアーキテクト取ろうぜ
 
AS45679 on FreeBSD
AS45679 on FreeBSDAS45679 on FreeBSD
AS45679 on FreeBSD
 
Lightning コンポーネント開発〜実装例から学ぶ開発のコツ
Lightning コンポーネント開発〜実装例から学ぶ開発のコツLightning コンポーネント開発〜実装例から学ぶ開発のコツ
Lightning コンポーネント開発〜実装例から学ぶ開発のコツ
 
Oracle APEX Social Login
Oracle APEX Social LoginOracle APEX Social Login
Oracle APEX Social Login
 
Power BI のいろいろな活用パターン
Power BI のいろいろな活用パターンPower BI のいろいろな活用パターン
Power BI のいろいろな活用パターン
 
EtherCATやPROFINETを OPC UAで接続してみた
EtherCATやPROFINETを OPC UAで接続してみたEtherCATやPROFINETを OPC UAで接続してみた
EtherCATやPROFINETを OPC UAで接続してみた
 
What Makes a Good Concept of Operations?
What Makes a Good Concept of Operations?What Makes a Good Concept of Operations?
What Makes a Good Concept of Operations?
 
Microsoft Azure EventHubで始めるIoT
Microsoft Azure EventHubで始めるIoTMicrosoft Azure EventHubで始めるIoT
Microsoft Azure EventHubで始めるIoT
 
「The Things Networkの生い立ちとTNN Japanユースケース」
「The Things Networkの生い立ちとTNN Japanユースケース」「The Things Networkの生い立ちとTNN Japanユースケース」
「The Things Networkの生い立ちとTNN Japanユースケース」
 
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]
【旧版】Oracle Exadata Cloud Service:サービス概要のご紹介 [2021年7月版]
 
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05
SharePoint Online モダンサイトの設計 - SharePoint の利用計画 - #‎MSInteract19‬ #PR05
 
Architecture governance
Architecture governanceArchitecture governance
Architecture governance
 
Practical Enterprise Architecture - Introducing CSVLOD EA Model
Practical Enterprise Architecture - Introducing CSVLOD EA ModelPractical Enterprise Architecture - Introducing CSVLOD EA Model
Practical Enterprise Architecture - Introducing CSVLOD EA Model
 
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
サポート エンジニアが語る、Microsoft Azure を支えるインフラの秘密
 
データ基盤に関わる問い合わせ対応を仕組みで解決する
データ基盤に関わる問い合わせ対応を仕組みで解決するデータ基盤に関わる問い合わせ対応を仕組みで解決する
データ基盤に関わる問い合わせ対応を仕組みで解決する
 
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!
え、毎月手作業でレポートを作ってるの?Power BI を使えば自動化できますよ!
 
Oracle Cloud Infrastructure:2022年4月度サービス・アップデート
Oracle Cloud Infrastructure:2022年4月度サービス・アップデートOracle Cloud Infrastructure:2022年4月度サービス・アップデート
Oracle Cloud Infrastructure:2022年4月度サービス・アップデート
 
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
 
Oracle GoldenGate Veridata 12cR2 セットアップガイド
Oracle GoldenGate Veridata 12cR2 セットアップガイドOracle GoldenGate Veridata 12cR2 セットアップガイド
Oracle GoldenGate Veridata 12cR2 セットアップガイド
 
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよ
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよえ?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよ
え?まだフルスクラッチで開発してるの!? Power Platformをフル活用すると普通にシステムができるんですよ
 

Similar a Oracle Application Express as add-on for Google Apps

Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...
Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...
Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...serge luca
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery GuideMark Rackley
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConSPTechCon
 
Creating a Documentation Portal
Creating a Documentation PortalCreating a Documentation Portal
Creating a Documentation PortalSteve Anderson
 
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...European Collaboration Summit
 
Microsoft Flow best practices European Collaboration Summit 2018
Microsoft Flow best practices European Collaboration Summit 2018Microsoft Flow best practices European Collaboration Summit 2018
Microsoft Flow best practices European Collaboration Summit 2018serge luca
 
SharePoint Development
SharePoint DevelopmentSharePoint Development
SharePoint DevelopmentMalin De Silva
 
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...Wilco Turnhout
 
01_Team_03_CS_591_Project
01_Team_03_CS_591_Project01_Team_03_CS_591_Project
01_Team_03_CS_591_Projectharsh mehta
 
An Introduction to Microservices
An Introduction to MicroservicesAn Introduction to Microservices
An Introduction to MicroservicesAd van der Veer
 
Rajnish singh(presentation on oracle )
Rajnish singh(presentation on  oracle )Rajnish singh(presentation on  oracle )
Rajnish singh(presentation on oracle )Rajput Rajnish
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 Mark Rackley
 
Automate your Oracle Cloud Infrastructure operation
Automate your Oracle Cloud Infrastructure operationAutomate your Oracle Cloud Infrastructure operation
Automate your Oracle Cloud Infrastructure operationNelson Calero
 
Powering a Startup with Apache Spark with Kevin Kim
Powering a Startup with Apache Spark with Kevin KimPowering a Startup with Apache Spark with Kevin Kim
Powering a Startup with Apache Spark with Kevin KimSpark Summit
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery GuideMark Rackley
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesMark Rackley
 

Similar a Oracle Application Express as add-on for Google Apps (20)

ow.ppt
ow.pptow.ppt
ow.ppt
 
ow.ppt
ow.pptow.ppt
ow.ppt
 
Ow
OwOw
Ow
 
Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...
Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...
Microsoft Flow advanced: tips, pitfalls, problems and warnings to be known be...
 
Plantilla oracle
Plantilla oraclePlantilla oracle
Plantilla oracle
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
Creating a Documentation Portal
Creating a Documentation PortalCreating a Documentation Portal
Creating a Documentation Portal
 
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...
[Luca/Van Campenhoudt] Microsoft Flow Beyone the Limits: Tips, Pitfalls, Patt...
 
Microsoft Flow best practices European Collaboration Summit 2018
Microsoft Flow best practices European Collaboration Summit 2018Microsoft Flow best practices European Collaboration Summit 2018
Microsoft Flow best practices European Collaboration Summit 2018
 
SharePoint Development
SharePoint DevelopmentSharePoint Development
SharePoint Development
 
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
SharePoint Connections Conference Amsterdam - Pitfalls and success factors of...
 
01_Team_03_CS_591_Project
01_Team_03_CS_591_Project01_Team_03_CS_591_Project
01_Team_03_CS_591_Project
 
An Introduction to Microservices
An Introduction to MicroservicesAn Introduction to Microservices
An Introduction to Microservices
 
Rajnish singh(presentation on oracle )
Rajnish singh(presentation on  oracle )Rajnish singh(presentation on  oracle )
Rajnish singh(presentation on oracle )
 
SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013 SharePoint & jQuery Guide - SPSTC 5/18/2013
SharePoint & jQuery Guide - SPSTC 5/18/2013
 
Automate your Oracle Cloud Infrastructure operation
Automate your Oracle Cloud Infrastructure operationAutomate your Oracle Cloud Infrastructure operation
Automate your Oracle Cloud Infrastructure operation
 
Powering a Startup with Apache Spark with Kevin Kim
Powering a Startup with Apache Spark with Kevin KimPowering a Startup with Apache Spark with Kevin Kim
Powering a Startup with Apache Spark with Kevin Kim
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
 
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery librariesTulsaTechFest - Maximize SharePoint UX with free jQuery libraries
TulsaTechFest - Maximize SharePoint UX with free jQuery libraries
 

Más de Sergei Martens

Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developersSergei Martens
 
DOAG 10 UI commendments for APEX developers
DOAG 10 UI commendments for APEX developersDOAG 10 UI commendments for APEX developers
DOAG 10 UI commendments for APEX developersSergei Martens
 
Apex world 2018 continuously delivering APEX
Apex world 2018 continuously delivering APEXApex world 2018 continuously delivering APEX
Apex world 2018 continuously delivering APEXSergei Martens
 
The experience from a successful Forms to APEX migration
The experience from a successful Forms to APEX migrationThe experience from a successful Forms to APEX migration
The experience from a successful Forms to APEX migrationSergei Martens
 
Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.Sergei Martens
 
Artikel APEX & Ext JS
Artikel APEX & Ext JS Artikel APEX & Ext JS
Artikel APEX & Ext JS Sergei Martens
 
Presentatie apex en extjs
Presentatie apex en extjsPresentatie apex en extjs
Presentatie apex en extjsSergei Martens
 
SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014Sergei Martens
 

Más de Sergei Martens (9)

Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
 
DOAG 10 UI commendments for APEX developers
DOAG 10 UI commendments for APEX developersDOAG 10 UI commendments for APEX developers
DOAG 10 UI commendments for APEX developers
 
Apex world 2018 continuously delivering APEX
Apex world 2018 continuously delivering APEXApex world 2018 continuously delivering APEX
Apex world 2018 continuously delivering APEX
 
The experience from a successful Forms to APEX migration
The experience from a successful Forms to APEX migrationThe experience from a successful Forms to APEX migration
The experience from a successful Forms to APEX migration
 
Apex World 2015
Apex World 2015Apex World 2015
Apex World 2015
 
Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.Create fancy applications with the new Twitter Bootstrap theme for Apex.
Create fancy applications with the new Twitter Bootstrap theme for Apex.
 
Artikel APEX & Ext JS
Artikel APEX & Ext JS Artikel APEX & Ext JS
Artikel APEX & Ext JS
 
Presentatie apex en extjs
Presentatie apex en extjsPresentatie apex en extjs
Presentatie apex en extjs
 
SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014SMART4apex company presentation APEX world convention March 25 2014
SMART4apex company presentation APEX world convention March 25 2014
 

Último

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 

Último (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 

Oracle Application Express as add-on for Google Apps

  • 1. Oracle Application Express as add-on for Google Apps with Twitter Bootstrap 1
  • 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. 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. 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. 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. 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
  • 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
  • 13. Subjects on user interface Commercial environmentShorter lifetime of software Trends Less = more Reference of users Bigger = better HTML5 + CSS3 AJAX 13
  • 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
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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