1 / 61

Een mobiele applicatie in 10 stappen

Een mobiele applicatie in 10 stappen. 8 November, 2012 Stefan van Liempt. Enjoy sharing knowledge. Consult Yourself Together. Wyke. Wouter. Michiel. Stefan. Albert. Ernst. Doel.

josephine-stephens
Download Presentation

Een mobiele applicatie in 10 stappen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Eenmobieleapplicatie in 10 stappen 8 November, 2012 Stefan van Liempt Enjoy sharing knowledge

  2. 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 Standaard webservices van Oracle • AAWS (aanmelden) • EWS (Inschrijven op vakken) Studenten Campus

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

  6. 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 • 5 stappen om een mobiele applicatie te maken • Een voorbeeld applicatie • Vragen

  8. Campus Mobile XMLRequest Homegrown Internet SOAPUI Third party applications Campus Solutions Webservice Security CS Database Query

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

  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. Stappenplanconfiguratie 1) Bouw de Query Build 2) Configureer QAS Config 3) Toegangsrechten en Rollen Provide P.L. & Roles 4) Webservice publiceren Test 5) Testen webservice

  12. 1)Bouw de query Build Reporting Tools> Query > Query Manager • Query is de tool ominformatieteverzamelen! • Query onderhoud is makkelijk!

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

  14. 2) Webservice configuratie Zoeknaar de QAS_EXECUTEQRYSYNC_OPER VinkaanUser/Password Required! Merk op: Required Verification (dwingtonsom HTTPS tepratentegendezewebservice) Config zet de Operation op Active Peopletools > Integration broker > Integration Setup > Service Operations • Reporting webserviceszijn read-only (uitgeleverd) • Zie tips & Tricks omditteomzeilen

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

  16. 3) toegangsrechten & Rollen • We hebbeneengebruikersaccountnodig: • Die toeganggeeft tot de webservice • Genoegrechtenheeftvoor Query P.L. & Roles PTPT2200 geefttoegang tot 30service operations (onderdeel van Reporting webservices). Peopletools > Security > Permissions & Roles > Permission Lists

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

  18. Campus Mobile XMLRequest 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 User Profile Webservice Security CS Database Query

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

  20. 4) Publiceer de webservice Provide Copy ‘n Paste dezeWSDL. We hebbendit in de Volgendestapnodig Peopletools > Integration Broker > Webservices> Provide Web Service

  21. Campus Mobile WSDL generated XMLRequest 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 User Profile Webservice Security CS Database Query

  22. Laten we de resultatentesten!

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

  24. 5) Test de webservice Maakeennieuw project en plak de WSDL van de vorigestaphierin Je zietonzegepubliceerdewebservice in de project view van SOAPUI Test Project view

  25. Maakeen XML request Hiergaan de prompt waarden • Opmerking: Bovenstaande XML is de juiste XML omeen query op afstanduittevoeren. Test Request XML pane Request XML

  26. Rechtermuisknopergens in het “request” gedeelte C Klikvervolgens “Add WSS Username Token” Klik OK B VulGebruikersnaamen wachtwoord in E We ziendatereen Security header toegevoegd is aanonze XML. D A KlikAut in de statusbar Test Request XML pane Status bar

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

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

  29. 5 StappenomPeoplesoftgereedtemakenvoorintegratie • 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 • 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 Stappenvooreenmobieleapplicatie 1) Download een webserver (Xampp) Installeer 2) Kies een webtaal (jQuery Mobile) Config 3) Genereer een interface met Peoplesoft (PhP) Voeruit Genereer 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 Webserver Campus Mobile XMLRequest Internet SOAPUI Third party applications Integratielaag Campus Solutions

  33. 1) Download webserver (XAMPP) • Download (windowsof Linux of OsX) • Voer setup uit • Klaar! http://www.apachefriends.org

  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) Webserver Campus Mobile XMLRequest Internet 1 SOAPUI Third party applications Integratielaag Campus Solutions

  35. App.html 2) Kieseenwebtaal (jQuery Mobile) • Uitstraling applicatie • Interactie met de gebruiker Wat gebeurt er al ikop deze knop klik Kleur en vormgeving knoppen Alles en meer op:http://www.jquerymobile.com

  36. Style &Scripts ZoekboxStudentnr Zoekknop Resultaat Ruimtevooronseigen script

  37. RoeptOnzeinterface aan Prompt waardenmeegeven Resultaatvullen met Naam v/d student

  38. Tot nu toe…

  39. Maak je eigen (simpele) mobiele website design • Bewaar het bestandje op de webserver • Je bent klaar met het webapp gedeelte 2 App.html Webserver Campus 2 Mobile XMLRequest Internet 1 SOAPUI Third party applications Integratielaag Campus Solutions

  40. PhP acteert als integratielaag • Data afhandeling / Beveiliging • Interface voor versimpeling van aanroepen 3) Genereereen interface met Peoplesoft A GanaarphpClasses.org Src_confi.php QAS.gen.php Download daar SoapProxy (soap-proxy-2011-09-27.zip) Soap.class.php B SoapProxyGenerator.php .Zip bestandphpClasses Unzip het bestand op de webserver C Webserver Maakeennieuwbestand op de Webserver (bvQAS.gen.php) D

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

  42. Zet QAS_QRY_SERVICE.class.php op de webserver • Zet Soap.class.php op de webserver Src_config.php 2 3 App.html Webserver Campus QAS_QRY_SERVICE.class.php 2 Soap.class.php Mobile XMLRequest Internet 1 SOAPUI Third party applications Integratielaag Campus Solutions

  43. 4) Roep de interface aan Src_config.php 2 Query/Prompt 3 App.html Webserver Campus QAS_QRY_SERVICE.class.php 2 include Soap.class.php getQuery.php Mobile Resultaat XMLRequest getQuery.php Internet 1 SOAPUI Third party applications Integratielaag Campus Solutions

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

  45. Overzicht Flow Src_config.php 2 BezoekWebsite 3 App.html Webserver Campus QAS_QRY_SERVICE.class.php 2 Soap.class.php AJAXReq. Internet Mobile getQuery.php 4 XMLRequest 1 SOAPUI Third party applications Integratielaag Campus Solutions

  46. 5) Test je applicatie

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

  48. VoorbeeldWebapp met QAS

  49. Login via AAWS webservices

  50. Vakresultaten Student persoonlijke en financiele info

More Related