before week 7

WebEngineering-FHNW · Nov 1, 2019 · 1b4b44d · 1b4b44d
1 parent 52f8748
commit 1b4b44d
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 0 deletions.
diff --git a/docs/lecture-7/README-7-Services.md b/docs/lecture-7/README-7-Services.md
@@ -0,0 +1,49 @@
+# WebEngineering Module, Services
+
+## Goals
+
+### Abilities
+- Being able to use simple services from both client (smart view) and server (controller).
+- Implementing the full range of REST services for a persistent Grails domain model.
+
+### Knowledge
+- Understanding REST principles on top of HTTP verbs.
+
+## Resources
+
+REST by Roy Fielding
+http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
+
+REST in Grails
+http://docs.grails.org/latest/guide/REST.html
+http://docs.grails.org/latest/guide/theWebLayer.html#restfulMappings
+
+Rest docs usage
+https://github.com/jlstrater/grails-spring-restdocs-example
+
+## Demo / Live-coding
+
+- Go to the static page Jokes.html
+- Use it and look at the code.
+
+- Go to the static page Pictures.html
+- Work through the JavaScript solution to fetch flickr photos.
+
+- Show how to expose Grails domain classes and controller actions.
+
+- Use Http Client to interact with the remote service.  
+
+## practical work
+
+- Extend the solution to fetch the next 10 photos when needed.
+
+## Homework 
+
+Finish the practical work
+
+By following the approach of the practical work from above,
+change the search page for the Room reservation app such that
+a click on a link shows the results not in a new page but
+right in the search page itself.
+You will also need to prepare the respective Booking controller
+if you want to fetch the booking data as JSON.
diff --git a/docs/lecture-7/Services.pdf b/docs/lecture-7/Services.pdf
diff --git a/src/main/resources/public/Jokes.html b/src/main/resources/public/Jokes.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <title>
+        Jokes
+    </title>
+    <script>
+        function getJokes() {
+            const url = "https://sv443.net/jokeapi/category/Programming";
+            fetch(url)
+                .then( resp => resp.json() )
+                .then( json => {
+                    // console.log(json);
+                    let text = json.joke;
+                    if (json.type === "twopart") {
+                        text = json.setup + " - "+ json.delivery;
+                    }
+                    document.getElementById("target").innerText = text ;
+                 })
+                .catch( err => console.log(err));
+        }
+    </script>
+</head>
+<body>
+<h1>
+    Programmer jokes from <a href="https://sv443.net/jokeapi">jokeapi</a>
+</h1>
+
+<button onclick="getJokes();">Next</button>
+
+<div id="target">
+    fetching ...
+</div>
+
+<script>
+    getJokes(); // initial load
+</script>
+
+</body>
+</html>
diff --git a/src/main/resources/public/Pictures.html b/src/main/resources/public/Pictures.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <title>
+        Pictures
+    </title>
+    <script>
+        let photoNumber = 0;
+        let pageNumber  = 1;
+        let photoInfos = undefined;
+
+        function nextPhoto() {
+            if (undefined === photoInfos) {
+                findInterestingImages();                // mutually recursive
+                return;
+            }
+            const photo = photoInfos[photoNumber++];
+            if (photoNumber > 10) {
+                // todo: what to do about the page number here?
+                photoNumber = 0;
+                findInterestingImages();
+                return;
+            }
+            const pictureUrl = "http://static.flickr.com/" +
+               photo.server + "/" +
+               photo.id + "_" +
+               photo.secret + "_m.jpg";
+            document.getElementById("target").innerHTML = "<img src='" +
+                                                          pictureUrl + "'><div> " +
+                                                          photo.title + "</div>";
+        }
+
+        function findInterestingImages() {
+            const url = "https://www.flickr.com/services/rest/?method=flickr.interestingness.getList&per_page=10&page=" +
+                        pageNumber + "&format=json&nojsoncallback=1&api_key=d5d6d15bb498e649b134170184968b61";
+            fetch(url)
+                .then( resp => resp.json() )
+                .then( json => {
+                    photoInfos = json.photos.photo;
+                    nextPhoto();
+                 })
+                .catch( err => console.log(err));
+        }
+    </script>
+</head>
+<body>
+<h1>
+    Pictures
+</h1>
+
+<div id="target" onclick="nextPhoto()">
+    Click me to find interesting images on flickr.
+</div>
+
+
+</body>
+</html>