Een mobiele applicatie in 10 stappen

Presentatie over: "Een mobiele applicatie in 10 stappen"— Transcript van de presentatie:

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

2 Consult Yourself Together
Consult Yourself Together Wyke Wouter Michiel Stefan Albert Ernst

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

4 Informatie van student naar CS
Informatie van student naar CS Standaard webservices van Oracle AAWS (aanmelden) EWS (Inschrijven op vakken) Studenten Campus

5 Informatie van CS naar student
Informatie van CS naar student Studenten hebben de volgende informatie nodig Cijferinformatie Roosterinformatie Persoonlijke informatie Financiële informatie Zoeken in het vakkenaanbod Informatie rondom evenementen … Studenten Campus

6 QAS (Query Access Service)
QAS (Query Access Service) Ook wel bekend als Reporting Webservices Een verzameling webservices rondom de Query tool. + = Webservice Query Power

7 Onderwerpen 5 stappen om peoplesoft gereed te maken voor integratie
Onderwerpen 5 stappen om peoplesoft gereed te maken voor integratie 5 stappen om een mobiele applicatie te maken Een voorbeeld applicatie Vragen

8 Third party applications
Campus Mobile XML Request Homegrown Internet SOAPUI Third party applications Campus Solutions Webservice Security Query CS Database

9 Third party applications
Campus Mobile XML Request Homegrown Internet Met beveiliging SOAPUI Third party applications Campus Solutions Webservice Security User Profile Query CS Database

10 Casus Onze universiteit heeft enkele informatie nodig rondom de persoon. EMPLID NAME BIRTHDATE EXTERNAL_SYSTEM_ID Uiteindelijk willen wij deze informatie in onze mobiele applicatie tonen.

11 Stappenplan configuratie
Stappenplan configuratie Build 1) Bouw de Query Config 2) Configureer QAS P.L. & Roles 3) Toegangsrechten en Rollen Provide 4) Webservice publiceren Test 5) Testen webservice

12 1) Bouw de query Query is de tool om informatie te verzamelen!
Build 1) Bouw de query Reporting Tools> Query > Query Manager Query is de tool om informatie te verzamelen! Query onderhoud is makkelijk!

13 Third party applications
Campus Mobile XML Request 1 Homegrown Internet Query: CY2_EMEA_HEUG SOAPUI Third party applications Campus Solutions Webservice Security User Profile Query CS Database

14 2) Webservice configuratie
Config 2) Webservice configuratie Zoek naar de QAS_EXECUTEQRYSYNC_OPER Vink aan User/Password Required! Merk op: Required Verification (dwingt ons om HTTPS te praten tegen deze webservice) zet de Operation op Active Peopletools > Integration broker > Integration Setup > Service Operations Reporting webservices zijn read-only (uitgeleverd) Zie tips & Tricks om dit te omzeilen

15 Third party applications
Campus Mobile XML Request 1 2 Req. Verification Homegrown Internet 2 Query: CY2_HEUG_EMEA Set Active Username / Password Req. SOAPUI Third party applications Campus Solutions Webservice Security User Profile Query CS Database

16 3) toegangsrechten & Rollen
P.L. & Roles 3) toegangsrechten & Rollen We hebben een gebruikersaccount nodig: Die toegang geeft tot de webservice Genoeg rechten heeft voor Query PTPT2200 geeft toegang tot 30 service operations (onderdeel van Reporting webservices). Peopletools > Security > Permissions & Roles > Permission Lists

17 3) Toegangsrecht & Rollen
P.L. & Roles 3) Toegangsrecht & Rollen Peopletools > Security > User Profiles > User Profiles Tip: Configureer de hoogst nodige toegang!

18 Third party applications
Campus Mobile XML Request Role: QAS ADMIN Role: CY2_QUERY 1 2 Req. Verification Homegrown Internet 2 3 Query: CY2_HEUG_EMEA Set Active Username / Password Req. CY2_QAS_ADMIN SOAPUI Third party applications Campus Solutions Webservice Security User Profile Query CS Database

19 4) Publiceer de Webservice
Provide 4) Publiceer de Webservice Vink de QAS_EXECUTEQRYSYNC_OPER Peopletools > Integration Broker > Webservices > Provide Web Service

20 4) Publiceer de webservice
Provide 4) Publiceer de webservice Copy ‘n Paste deze WSDL. We hebben dit in de Volgende stap nodig Peopletools > Integration Broker > Webservices > Provide Web Service

21 Third party applications
Campus Mobile WSDL generated XML Request 4 Role: QAS ADMIN Role: CY2_QUERY 1 2 Req. Verification 3 Homegrown Internet 2 Query: CY2_HEUG_EMEA Set Active Username / Password Req. CY2_QAS_ADMIN SOAPUI Third party applications Campus Solutions Webservice Security User Profile Query CS Database

22 Laten we de resultaten testen!
Laten we de resultaten testen!

23 5) Test de webservice Download SoapUI van http://www.soapui.org
Test 5) Test de webservice Control buttons Project view Request XML Response XML Status bar Download SoapUI van

24 Test 5) Test de webservice Maak een nieuw project en plak de WSDL van de vorige stap hierin Je ziet onze gepubliceerde webservice in de project view van SOAPUI Project view

25 Test Maak een XML request Hier gaan de prompt waarden Opmerking: Bovenstaande XML is de juiste XML om een query op afstand uit te voeren. Request XML Request XML pane

26 D C E B A 3-4-2017 Rechtermuisknop ergens in het “request” gedeelte
Klik OK Test Rechtermuisknop ergens in het “request” gedeelte C Klik vervolgens “Add WSS Username Token” We zien dat er een Security header toegevoegd is aan onze XML. E Vul Gebruikersnaam en wachtwoord in B A Klik Aut in de statusbar Request XML pane Status bar

27 Stuurt deze XML (Query aanvraag) naar de webservice
Test Druk op play Stuurt deze XML (Query aanvraag) naar de webservice Control buttons Request XML

28 If it works in SoapUI it should work anywhere!
Test Query Resultaten If it works in SoapUI it should work anywhere! Response XML

29 5 Stappen om Peoplesoft gereed te maken voor integratie
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.

30 Bouwen van een app Native app download je naar je telefoon
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)

31 5 Stappen voor een mobiele applicatie
5 Stappen voor een mobiele applicatie Installeer 1) Download een webserver (Xampp) Config 2) Kies een webtaal (jQuery Mobile) Genereer 3) Genereer een interface met Peoplesoft (PhP) Voeruit 4) Roep de interface aan Test 5) Test je applicatie!

32 Infrastructuur web app.
Een extra integratiepunt waar de smartphones naar verbinden Op deze webserver wordt de website geplaatst W e b s e r v e r Campus Internet XML Request Mobile SOAPUI Third party applications Integratielaag Campus Solutions

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

34 Third party applications
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) W e b s e r v e r Campus Internet XML Request Mobile 1 SOAPUI Third party applications Integratielaag Campus Solutions

35 2) Kies een webtaal (jQuery Mobile)
2) Kies een webtaal (jQuery Mobile) App.html Uitstraling applicatie Interactie met de gebruiker Wat gebeurt er al ik op deze knop klik Kleur en vormgeving knoppen Alles en meer op:

36 Ruimte voor ons eigen script
Style & Scripts Zoekbox Studentnr Zoekknop Resultaat Ruimte voor ons eigen script

37 Roept Onze interface aan
Prompt waarden meegeven Resultaat vullen met Naam v/d student

38 Tot nu toe…

39 Third party applications
Maak je eigen (simpele) mobiele website design Bewaar het bestandje op de webserver Je bent klaar met het webapp gedeelte 2 App.html W e b s e r v e r Campus 2 Internet XML Request Mobile 1 SOAPUI Third party applications Integratielaag Campus Solutions

40 3) Genereer een interface met Peoplesoft
PhP acteert als integratielaag Data afhandeling / Beveiliging Interface voor versimpeling van aanroepen A Ga naar phpClasses.org QAS.gen.php Src_confi.php Soap.class.php SoapProxyGenerator.php .Zip bestand phpClasses Download daar SoapProxy (soap-proxy zip) B W e b s e r v e r Unzip het bestand op de webserver C Maak een nieuw bestand op de Webserver (bv QAS.gen.php) D

41 3) Genereer een inteface met Peoplesoft
De aanroep genereert een nieuw bestand: QAS_QRY_SERVICE.class.php Campus QAS.gen.php Src_config.php Soap.class.php SoapProxyGenerator.php .Zip bestand phpClasses Src_config.php QAS_EXEQRY_SYNC_REQ Prompt Prompts Classes QAS.gen.php QAS_QRY_SERVICE.class.php Ons gegenereerd bestand!

42 Third party applications
Zet QAS_QRY_SERVICE.class.php op de webserver Zet Soap.class.php op de webserver Src_config.php 2 3 App.html W e b s e r v e r QAS_QRY_SERVICE.class.php Campus 2 Soap.class.php Internet XML Request Mobile 1 SOAPUI Third party applications Integratielaag Campus Solutions

43 Third party applications
4) Roep de interface aan Src_config.php 2 3 App.html W e b s e r v e r QAS_QRY_SERVICE.class.php Campus 2 include getQuery.php Query/Prompt Resultaat Soap.class.php Internet XML Request Mobile getQuery.php 1 SOAPUI Third party applications Integratielaag Campus Solutions

44 4) Roep de interface aan getQuery.php SOAPUI Parameters Prompts
getQuery.php SOAPUI Onze WSDL Onze gegenereerde class Parameters Prompts

45 Third party applications
Overzicht Flow Src_config.php 2 Internet XML Request Bezoek Website 3 App.html W e b s e r v e r QAS_QRY_SERVICE.class.php Campus 2 Soap.class.php AJAX Req. Mobile getQuery.php 4 1 SOAPUI Third party applications Integratielaag Campus Solutions

46 5) Test je applicatie

47 5 stappen voor een mobiele applicatie
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

48 Voorbeeld Webapp met QAS
Voorbeeld Webapp met QAS

49 Login via AAWS webservices

50 Vakresultaten Student persoonlijke en financiele info

51 Details vakken. En vanuit hier verder op het EWS framework. Zoeken naar vakken.

52 Behalve de Login pagina, is de rest via QAS gedaan!
Bottom Line: Behalve de Login pagina, is de rest via QAS gedaan!

53 Tips & tricks Usage Oracle documentatie PeopleBook: (pt850trws‐b0909)
Tips & tricks Usage Oracle documentatie PeopleBook: (pt850trws‐b0909) Lees het! Veel nuttige info over de 29 andere service operations, onderdeel van QAS.

54 Tips & Tricks Performance
Tips & Tricks Performance

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)

56 Questions ?

57 Geadvanceerde onderwerpen
Geadvanceerde onderwerpen Toevoegen Authenticatie header Strippen van CDATA in XML

58 Aanpassingen: Soap.class
Aanpassingen: Soap.class Header informatie genereren

59 Aanpassingen: QAS_QRY_SERVICE.class.php
Aanpassingen: QAS_QRY_SERVICE.class.php Strippen van CDATA tags

60 Stefan van Liempt Wouter de Bruin Mobile: +31641009099
Stefan van Liempt Mobile: Skype: stefan.v.liempt LinkedIn: Wouter de Bruin Mobile: Skype: cy2_wouter LinkedIn:

61 ‘Enjoy sharing knowledge’
This presentation and all HEUG EMEA 2012 presentations are available for download from the Conference site at www. heug.org ‘Enjoy sharing knowledge’