Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
1 This slide deck is licensed under a ...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
2
Agenda
 Motivation
 OpenAPI & Inte...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
3
Motivation
 APIs are ubiquitous in ...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
4
OpenAPI
 OpenAPI (fka Swagger) is a...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
5
openapi: 3.0.0
servers:
-description...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
6
Interaction Flow Modeling Language
...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
7
Address Book IFML Model
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
8
Transformation Approach
Step 1:
Pars...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
9
Live Demo
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
10
Challenges
 Synchronization betwee...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
11
Conclusion
 APIs are ubiquitous, O...
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
Prof. Dr. S. Decker
12
fin
 Thank you for your attention!...
Upcoming SlideShare
Loading in …5
×

of

The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 1 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 2 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 3 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 4 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 5 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 6 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 7 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 8 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 9 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 10 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 11 The Exploitation of OpenAPI Documents for the Generation of Web Frontends Slide 12
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

The Exploitation of OpenAPI Documents for the Generation of Web Frontends

Download to read offline

TheWebConf 2018 Developer Track Presentation. New Internet-enabled devices and Web services are introduced on a daily basis. Documentation formats are available that describe their functionalities in terms of API endpoints and parameters. In particular, the OpenAPI specification has gained considerable influence over the last years. Web-based solutions exist that generate interactive OpenAPI documentation with HTML5 & JavaScript. They allow developers to quickly get an understanding what the services and devices do and how they work. However, the generated user interfaces are far from real-world practices of designers and end users. We present an approach to overcome this gap, by using a model-driven methodology resulting in state-of-the-art responsive Web user interfaces. To this end, we use the Interaction Flow Modeling Language (IFML) as intermediary model specification to bring together APIs and frontends. Our implementation is based on open standards like Web Components and SVG. A screencast of our tool is available at https://youtu.be/KFOPmPShak4

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

The Exploitation of OpenAPI Documents for the Generation of Web Frontends

  1. 1. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 1 This slide deck is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. The Exploitation of OpenAPI Documents for the Generation of Web Frontends István Koren, Ralf Klamma Advanced Community Information Systems (ACIS) RWTH Aachen University, Germany koren@dbis.rwth-aachen.de The Web Conference, Developers‘ Track April 26, 2018 Lyon, France
  2. 2. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 2 Agenda  Motivation  OpenAPI & Interaction Flow Modeling Language  Transformation Approach  Tool Presentation  Conclusion
  3. 3. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 3 Motivation  APIs are ubiquitous in Web service and IoT worlds  Componentization leads to even more of them  ProgrammableWeb lists around 20,000 APIs; apis.guru indexes around 550 public OpenAPIs  But: How they work and what they do is hard to understand.  Our goal is to automate the time-consuming process from Web API to frontend.
  4. 4. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 4 OpenAPI  OpenAPI (fka Swagger) is a specification for RESTful Web service documentation.  Governed by the OpenAPI Initiative  Human and machine readable  Use cases – code generation – test case automation – interactive documentation
  5. 5. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 5 openapi: 3.0.0 servers: -description:Development Server url:http://127.0.0.1:3000 info: version: 1.0.0 title:AddressBookService description:The API ofthe AddressBookService. tags: -name: contact description:Everything about contacts. paths: "/contacts": get: tags: -contact description:Returnsallcontacts. operationId: getContacts responses: '200': description:Allthe contacts. content: application/json: schema: type: array items: "$ref": "#/components/schemas/Contact" "/contacts/{contactId}": get: tags: -contact description:Returnsa particularcontact. operationId: getContactById parameters: -in: path name: contactId description:ID ofa contact. required:true schema: type: integer format:int64 responses: '200': description:A specificcategory. content: application/json: schema: "$ref": "#/components/schemas/Contact" delete: tags: -contact description:Deletesa contact. operationId: deleteContactById parameters: -in: path name: contactId description:ID ofa contact. required:true schema: type: integer format:int64 responses: '200': description:Contactdeleted. '404': description:Contactnot found. components: schemas: Contact: type: object properties: id: type: integer format:int64 name: type: string lastname: type: string email: type: string
  6. 6. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 6 Interaction Flow Modeling Language  The Interaction Flow Modeling Language (IFML) is a visual domain-specific modeling language for the design of abstract user interactions and data flows.  Standardized by Object Management Group  Platform-independent  Mappings to WPF and HTML available
  7. 7. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 7 Address Book IFML Model
  8. 8. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 8 Transformation Approach Step 1: Parsing OpenAPI Step 2: Designing Model Step 3: Generating HTML
  9. 9. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 9 Live Demo
  10. 10. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 10 Challenges  Synchronization between HTML, JavaScript & SVG  Web Component (Polymer!) versions and updates  Usability issues like information overload  Limitations – OpenAPI correctness – Nested JSON schemas are not supported (no longer…) – Interaction patterns like pagination are missing
  11. 11. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 11 Conclusion  APIs are ubiquitous, OpenAPI increasingly used  Our methodology enables generating Web frontends out of OpenAPI interface descriptions with an intermediary model-based representation.  Web components are a powerful foundation!  Future work – empirical evaluation with OpenAPIs “in the wild” – user management and awareness – component store – explore use cases in IoT & AR/VR
  12. 12. Lehrstuhl Informatik 5 (Information Systems) Prof. Dr. M. Jarke Prof. Dr. S. Decker 12 fin  Thank you for your attention!  Do you have any questions? koren@dbis.rwth-aachen.de @istinhere Ideas? Please contribute them on https://requirements- bazaar.org/projects/303/categories/439

TheWebConf 2018 Developer Track Presentation. New Internet-enabled devices and Web services are introduced on a daily basis. Documentation formats are available that describe their functionalities in terms of API endpoints and parameters. In particular, the OpenAPI specification has gained considerable influence over the last years. Web-based solutions exist that generate interactive OpenAPI documentation with HTML5 & JavaScript. They allow developers to quickly get an understanding what the services and devices do and how they work. However, the generated user interfaces are far from real-world practices of designers and end users. We present an approach to overcome this gap, by using a model-driven methodology resulting in state-of-the-art responsive Web user interfaces. To this end, we use the Interaction Flow Modeling Language (IFML) as intermediary model specification to bring together APIs and frontends. Our implementation is based on open standards like Web Components and SVG. A screencast of our tool is available at https://youtu.be/KFOPmPShak4

Views

Total views

77

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×