Human-Computer Interaction Design

Size: px

Start display at page:

Download "Human-Computer Interaction Design"

Franklin Gilmore
5 years ago
Views:

1 Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 4 - Simulating a backend without needing a server ( ) made by Philip Guo, derived from labs by Michael Bernstein and Scott Klemmer

2 Architecture of a Traditional Web App HTML for page structure: Lab 1 CSS for styling: Web Browser Frontend development Lab 2 JavaScript for interaction: Lab 3 Web server (usually a virtual computer in the cloud ) Backend development Server-side web framework; dynamically generate webpages using templates (e.g., Node.js, Django, Ruby on Rails) Database (e.g., MySQL, Postgres, MongoDB) 2

3 Way too complex for this course, since this isn t a programming course. Take COGS121 if you want to learn backend development. HTML for page structure: Lab 1 CSS for styling: Web Browser Frontend development Lab 2 JavaScript for interaction: Lab 3 Web server (usually a virtual computer in the cloud ) Backend development Server-side web framework; dynamically generate webpages using templates (e.g., Node.js, Django, Ruby on Rails) Database (e.g., MySQL, Postgres, MongoDB) 3

4 Instead, we will greatly simplify by using frontend features that can run in the web browser to simulate a backend HTML for page structure: Lab 1 CSS for styling: Web Browser Frontend development Lab 2 JavaScript for interaction: Lab 3 Web server (usually a virtual computer in the cloud ) Client-side HTML templating (handlebars): Lab 4 Fake database (localstorage): Lab 4 4

5 Generate pages on-demand using templates We will be using the handlebars javascript library: 5

6 To follow along, first clone lab4 from GitHub: git clone 6

7 Now open lab4/index.html in browser and notice how there are two identical sets of project entries. The first was hard-coded in HTML. The second was generated dynamically using Handlebars templates directly from JavaScript object data. Let s look inside the relevant code 7

8 entry-template defines a handlebars template that matches the format of the manually-generated HTML above it 8

9 In the js/lab4.js file, you ll find the data that we will use to fill out that template to turn it into HTML code. This serves as a fake database. What s the format of this data? They re simply JavaScript objects. a.k.a. JSON 9

10 concepts Data in JavaScript 10

11 JavaScript data structures are flexible Define the contents as needed: { 'username': 'msb', 'firstname': 'Michael', 'lastname': 'Bernstein', 'milesfromcampus': 2, 'classes': ['CS147', 'CS247', 'CS376'] } Brackets { } define the beginning and end of an object Properties and values 'property': value follow as a list. 11

12 Nest objects within each other { 'username': 'msb', 'firstname': 'Michael', 'lastname': 'Bernstein', 'classes': ['CS147', 'CS247', 'CS376'], 'milesfromcampus': 2, 'officehours': { 'start': '15:45', 'end': '17:30', 'room': 'Gates 308' } } 12

13 This data format is called JSON JavaScript Object Notation (Note that technically JSON strings need to be enclosed in "double-quotes", but JavaScript also accepts 'single quotes' when the data appears within JavaScript code. Some people find single quotes easier to type and read.) 13

14 Common JSON mistakes Can you find the four mistakes? [ { username = "msb" firstname = "Michael" "username": "msb", "firstname": "Michael" ] } 1. Using Property = value instead of property: value 2. Forgetting quotes around the property name 3. Forgetting the commas between properties 4. Brackets [ ] instead of braces { } 14

15 Instantiating templates 15

16 #templateprojects is an empty div where we will insert our new instantiated template entries 16

17 Create HTML code from both the entry-template template and your simpledata JSON object, then append it to #templateprojects div 17

18 Use a for-loop to populate all of the entries from complexdata, which is a list of objects. (handlebars has its own loop syntax as well, but we use the native JavaScript one for simplicity in this demo) 18

19 Using localstorage to emulate a persistent database 19

20 In the js/lab4.js file, you ll find the data that we will use to fill out that template to turn it into HTML code. This serves as a fake database. But the problem is that the user can t modify this data; it s still hard-coded, albeit in JS and not HTML. 20

21 A real database would let the user enter in their own data and then save it persistently on the hard drive so that it will survive webpage reloads and even computer reboots. Examples: MySQL, MongoDB, Postgres, Sqlite, etc. But those all require a server backend. 21

22 It turns out that all modern web browsers have a simple fake-database built into them. This feature is called localstorage, and it s very convenient for emulating database functionality without setting up a server backend. 22

23 Let s try to change your name on the webpage and have the browser remember your name and display it when the webpage reloads 23

24 In js/lab4.js bind a click handler to the #changename button to have it save your name using localstorage.setitem() 24

25 In js/lab4.js when the document loads, use localstorage.getitem() to fetch customname. If it exists, then set #myname to that value. 25

26 Major note: localstorage stores only string data, so use JSON.stringify() to encode an arbitrary JavaScript object into a string to store in it. Then use JSON.parse() to decode the data into a full object again. Example in Chrome console: 26

Human-Computer Interaction Design

Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 6 - Connecting frontend and backend without page reloads (2016-11-03) by Michael Bernstein, Scott Klemmer, and Philip