Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

61
Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge

Transcript of Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Page 1: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Een mobiele applicatie in 10 stappen

8 November, 2012

Stefan van Liempt

Enjoy sharing knowledge

Page 2: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

2

Consult Yourself Together

MichielWouter

AlbertStefan

Wyke

Ernst

Page 3: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

3

Doel

Tijdens deze sessie een webservice configureren die elke willekeurige informatie voor ons ophaalt uit CS

Een simpele mobiele applicatie maken die gebruikt maakt van onze webservice

Page 4: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

4

Informatie van student naar CS

Standaard webservices van Oracle

AAWS (aanmelden) EWS (Inschrijven op vakken)

Campus

Studenten

Page 5: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Informatie van CS naar student

Studenten hebben de volgendeinformatie nodig

Cijferinformatie Roosterinformatie Persoonlijke informatie Financiële informatie Zoeken in het vakkenaanbod Informatie rondom evenementen …

Campus

Studenten

Page 6: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

6

QAS (Query Access Service)

Ook wel bekend als Reporting Webservices

Een verzameling webservices rondom de Query tool.

+ =Webservice Query Power

Page 7: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

7

Onderwerpen

5 stappen om peoplesoft gereed te maken voor integratie

5 stappen om een mobiele applicatie te maken

Een voorbeeld applicatie Vragen

Page 8: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

8

Mobile

Homegrown Internet

Query

Webservice

Third party applications

Security

SOAPUI

CS Database

XMLRequest

Campus

Campus Solutions

Page 9: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

9

Mobile

Homegrown Internet

Query

Webservice Security

SOAPUI

CS Database

XMLRequest

Campus

User Profile

Met beveiliging

Third party applications Campus Solutions

Page 10: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

10

Casus

Onze universiteit heeft enkele informatie nodig rondom de persoon.

EMPLIDNAMEBIRTHDATEEXTERNAL_SYSTEM_ID

Uiteindelijk willen wij deze informatie in onze mobiele applicatie tonen.

Page 11: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

11

Stappenplan configuratie

1) Bouw de Query

2) Configureer QAS

4) Webservice publiceren

5) Testen webservice

Build

3) Toegangsrechten en Rollen

Test

Provide

P.L. & Roles

Config

Page 12: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

12

1) Bouw de query Build

Query is de tool om informatie te verzamelen! Query onderhoud is makkelijk!

Reporting Tools> Query > Query Manager

Page 13: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

13

Mobile

Homegrown Internet

Query

Webservice Security

SOAPUI

CS Database

XMLRequest

Campus

User Profile

1Query:

CY2_EMEA_HEUG

Third party applications Campus Solutions

Page 14: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

14

2) Webservice configuratie Config

Zoek naar de QAS_EXECUTEQRYSYNC_OPER

zet de Operation op Active

Reporting webservices zijn read-only (uitgeleverd) Zie tips & Tricks om dit te omzeilen

Peopletools > Integration broker > Integration Setup > Service Operations

Vink aan User/Password Required!

Merk op: Required Verification (dwingt ons om HTTPS te praten tegen deze webservice)

Page 15: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

15

Mobile

Homegrown Internet

Query

Webservice Security

SOAPUI

CS Database

XMLRequest

Campus

User Profile

1Query:

CY2_HEUG_EMEASet ActiveUsername /

Password Req.

2

Third party applications Campus Solutions

Req. Verification

2

Page 16: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

16

3) toegangsrechten & Rollen

PTPT2200 geeft toegang tot 30service operations (onderdeel van Reporting webservices).

P.L. & Roles

Peopletools > Security > Permissions & Roles > Permission Lists

We hebben een gebruikersaccount nodig:1. Die toegang geeft tot de

webservice2. Genoeg rechten heeft voor

Query

Page 17: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

17

3) Toegangsrecht & Rollen

Tip: Configureer de hoogst nodige toegang!

P.L. & Roles

Peopletools > Security > User Profiles > User Profiles

Page 18: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

18

Mobile

Homegrown Internet

Query

Webservice Security

SOAPUI

CS Database

XMLRequest

Campus

User Profile

Query:CY2_HEUG_EMEA

1

Set ActiveUsername /

Password Req.

CY2_QAS_ADMIN

Role:QAS ADMIN

Role:CY2_QUERY

32

Third party applications Campus Solutions

Req. Verification

2

Page 19: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

19

4) Publiceer de Webservice Provide

Vink de QAS_EXECUTEQRYSYNC_OPER

Peopletools > Integration Broker > Webservices > Provide Web Service

Page 20: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

20

4) Publiceer de webservice Provide

Copy ‘n Paste dezeWSDL. We hebben dit in deVolgende stap nodig

Peopletools > Integration Broker > Webservices > Provide Web Service

Page 21: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

21

Mobile

Homegrown Internet

Query

Webservice Security

SOAPUI

CS Database

XMLRequest

Campus

User Profile

Query:CY2_HEUG_EMEA

1

Set ActiveUsername /

Password Req.

CY2_QAS_ADMIN

Role:QAS ADMIN

Role:CY2_QUERY

32

WSDL generated

4

Third party applications Campus Solutions

Req. Verification

2

Page 22: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Laten we de resultaten testen!

Page 23: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

23

Request XML Response XML

Download SoapUI van http://www.soapui.org

Status bar

Control buttons

5) Test de webservice

Project view

Test

Page 24: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

24

5) Test de webservice

Project view

Test

Je ziet onze gepubliceerde webservice in de project view van SOAPUI

Maak een nieuw project en plak de WSDL van de vorige stap hierin

Page 25: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

25

Maak een XML request

Hier gaan de prompt waarden

Request XML paneRequest XML

Test

Opmerking: Bovenstaande XML is de juiste XML om een query op afstand uit te voeren.

Page 26: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

26

A Klik Aut in de statusbar

Vul Gebruikersnaamen wachtwoord inB

Rechtermuisknop ergens in het “request” gedeelte

C

Klik vervolgens “Add WSS Username Token”

Request XML pane

Status bar

We zien dat er een Security header toegevoegd is aan onze XML.

E

Test

DKlik OK

Page 27: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

27

Control buttons

Druk op play

Request XML

Stuurt deze XML (Query aanvraag) naar de webservice

Test

Page 28: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

28

Query Resultaten

Response XML

Test

If it works in SoapUI it should work anywhere!

Page 29: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

29

5 Stappen om Peoplesoft gereed te maken voor integratie

Bouw de query Configureer reporting webservice Toegangsrechten & Rollen Publiceer de webservice Test de webservice

en verder.. 5 stappen om een mobiele applicatie te maken Vragen.

Page 30: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

30

Bouwen van een app

Native app download je naar je telefoon

Native app kun je ook telefoonfuncties gebruiken (zoals camera)

Web app is platform onafhankelijk (Apple, Android, Windows)

Web app draait op een webserver (zoals een normale website)

Page 31: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

31

5 Stappen voor een mobiele applicatie

1) Download een webserver (Xampp)

2) Kies een webtaal (jQuery Mobile)

4) Roep de interface aan

5) Test je applicatie!

Installeer

3) Genereer een interface met Peoplesoft (PhP)

Test

Voeruit

Genereer

Config

Page 32: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

32

Een extra integratiepunt waar de smartphones naar verbinden

Op deze webserver wordt de website geplaatst

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

Infrastructuur web app.

Page 33: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

33

1) Download webserver (XAMPP) Download (windows of Linux of OsX) Voer setup uit Klaar!

http://www.apachefriends.org

Page 34: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

34

Zorg ervoor dat je de webserver installeert op een machine die ook bij de peoplesoft omgeving kan.

Het zou jouw laptop of vaste PC op het werk kunnen zijn. (Enkel voor te testen natuurlijk)

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

1

Page 35: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Uitstraling applicatie Interactie met de

gebruiker

Wat gebeurt er al ikop deze knop klik

Kleur en vormgeving knoppen

2) Kies een webtaal (jQuery Mobile)

Alles en meer op:http://www.jquerymobile.com

App.html

Page 36: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

36

Style &Scripts

ZoekboxStudentnr

Zoekknop

Resultaat

Ruimte voor ons eigen script

Page 37: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

37

Roept Onzeinterface aan

Prompt waardenmeegeven

Resultaat vullen met Naam v/d student

Page 38: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

38

Tot nu toe…

Page 39: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

39

Maak je eigen (simpele) mobiele website design

Bewaar het bestandje op de webserver Je bent klaar met het webapp gedeelte

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

1

App.html

2

2

Page 40: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

40

PhP acteert als integratielaag Data afhandeling / Beveiliging Interface voor versimpeling van aanroepen

3) Genereer een interface met Peoplesoft

A Ga naar phpClasses.org

BDownload daar SoapProxy (soap-proxy-2011-09-27.zip)

C Unzip het bestand op dewebserver

QAS.gen.phpSrc_confi.php

Soap.class.php

SoapProxyGenerator.php

.Zip bestandphpClasses

Maak een nieuw bestand op deWebserver (bv QAS.gen.php)D

Webserver

Page 41: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

41

De aanroep genereert een nieuw bestand: QAS_QRY_SERVICE.class.php

3) Genereer een inteface met Peoplesoft

QAS_EXEQRY_SYNC_REQ

Prompt

Prompt

Prompts

Classes

Campus

QAS_QRY_SERVICE.class.php Ons gegenereerd bestand!

QAS.gen.php

Src_config.phpQAS.gen.php

Src_config.php

Soap.class.php

SoapProxyGenerator.php

.Zip bestandphpClasses

Page 42: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

42

Zet QAS_QRY_SERVICE.class.php op de webserver Zet Soap.class.php op de webserver

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

1

App.html

2

2QAS_QRY_SERVICE.class.php

Soap.class.php

Src_config.php

3

Page 43: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

43

4) Roep de interface aan

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

1

App.html

2

2QAS_QRY_SERVICE.class.php

Soap.class.php

Src_config.php

3

getQuery.php

include

Resultaat

getQuery.phpQuery/Prompt

Page 44: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

44

4) Roep de interface aanSOAPUIgetQuery.php

Parameters

Prompts

Onze WSDL

Onze gegenereerde class

Page 45: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

45

Mobile

Third party applications

SOAPUI

Internet

XMLReques

t

Campus

Webserver

Campus SolutionsIntegratielaag

1

App.html

2

2QAS_QRY_SERVICE.class.php

Soap.class.php

Src_config.php

3

getQuery.php

4

BezoekWebsite

AJAXReq.

Overzicht Flow

Page 46: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

46

5) Test je applicatie

Page 47: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

47

5 stappen voor een mobiele applicatie

Download een webserver (Xampp) Kies een webtaal (jQuery Mobiel) Genereer een interface met PeopleSoft (PhP) Roep de interface aan Test je applicatie

Page 48: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

48

Voorbeeld Webapp met QAS

Page 49: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

49

Login via AAWS webservices

Page 50: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

50

Student persoonlijke en financiele info

Vakresultaten

Page 51: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

51

Zoeken naar vakken.

Details vakken. En vanuit hier verder op het EWS framework.

Page 52: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

52

Bottom Line:

Behalve de Login pagina, is de rest via QAS gedaan!

Page 53: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

53

Tips & tricks Usage

Oracle documentatie PeopleBook: (pt850trws‐b0909)

Lees het! Veel nuttige info over de 29 andere service operations, onderdeel van QAS.

Page 54: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

54

Tips & Tricks Performance

Page 55: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

55

Tips & Tricks Security

Configureer de proxy gebruiker met minimale, maar toch net voldoende rechten

Autentication webservice (SCC_USERREG_AUTHENTICATE), kun je gebruiken om de login af te vangen

Verwijder de read-only restrictie door: Peopletools -> Integration Broker -> Configuration > Service Configuration (tab retricted services)

Page 56: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Questions

?

Page 57: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

57

Geadvanceerde onderwerpen

• Toevoegen Authenticatie header• Strippen van CDATA in XML

Page 58: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

58Aanpassingen: Soap.class

Header informatie genereren

Page 59: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

59

Aanpassingen: QAS_QRY_SERVICE.class.php

Strippen van CDATA tags

Page 60: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

Stefan van Liempt Mobile: +31641009099 E-mail: [email protected] Skype: stefan.v.liempt LinkedIn: http://www.linkedin.com/in/stefanvanliempt

Wouter de Bruin Mobile: +31611417177 E-mail: [email protected] Skype: cy2_wouter LinkedIn: http://nl.linkedin.com/in/cy2wouter

Page 61: Een mobiele applicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge.

This presentation and all HEUG EMEA 2012

presentations are available for download from the

Conference site atwww. heug.org

www.CY2.nl ‘Enjoy sharing knowledge’