Changing the way you learn

Dad Joke API/Web App

Task Requirements
1. Prescribed Criteria
  1. PC1: User Interface: Display API data aesthetically.
    1. R1: API data text must be of a reasonable/legible font size (at least 12pt).
    2. R2: API data must be positioned clearly on the screen, with interesting but visible colours.
  2. PC2: Code: be efficient, modular, and have accurate code.
    1. R1: Final program results in no syntax errors (program does work).
    2. R2: Final program has no logic errors (program works and results are as expected).
  3. PC3: Code: have an algorithm to retrieve, process and display the dad jokes data from the API.
    1. R1: The program must be able to take (retrieve) dad jokes, which are displayed exactly onto the web page (no modifications to the actual content).
    2. R2: API calls must be conducted to retrieve the data from the API.
  4. PC4: Data: receive data in one format and programmatically transform it into another format for sharing/displaying.
    1. R1: The dad joke must be displayed in plain text (Presentable JSON), rather than raw JSON data.
    2. R2: The program must use variables to represent API retrieved data, rather than returning a JSON response.
  5. PC5: Data: make use of a publicly available API.
    1. R1: Data must be sourced from an API that can be found online by multiple users.
    2. R2: The API “icanhazdadjokes” (C653 Labs, n.d.) must be used in the program.
2. Self-Determined Criteria
  1. SD1: A “random dad joke of the day” must be easy to obtain.
    1. R1: A visible button that selects a random joke when pressed is situated clearly on the screen.
    2. R2: Each time the web app is loaded, a new dad joke should appear (“joke of the day”).
  2. SD2: The user should be able to quickly search for jokes.
    1. R1: A search bar at the top of the page should allow user input.
    2. R2: The search bar must submit user input and display appropriate results (e.g., results related to the term inputted).
3. Constraints and Limitations
  1. Time
    1. Less than 30 lessons (1hr 10mins each) is allowed for in-class working time. This means that time at home/outside of school must be used to submit a complete response, and that there is minimal consultation time with teachers.
  2. Skills
    1. This class has never used APIs before. While this class knows how to retrieve data from a local database, online databases are different and the appropriate skills need to be learnt before beginning the assignment task, providing a constraint to the assignment.
  3. Coding Environment
    1. General classroom distractions could limit the amount of in-school effort and time put into this assignment.
    2. The correct software, such as Thonny and Notepad++/Visual Studio Code, must be downloaded with all correct packages before beginning programming. This could take time, thus limiting how much coding time is available.
4. Existing Solutions
  1. dadjokegenerator.com
    1. Pros
      1. Simple website, no other buttons except for the "Tell Me!" button, which transforms into buttons to share or to retrieve another dad joke.
      2. Bright colours allow for easy visibility of the text and buttons, allowing more users to be able to use this web app.
    2. Cons
      1. There are no options for users to add their own jokes, limiting interactivity.
      2. The split system of asking the question, then having to click a button to reveal the punchline may become boring or over-excessive for some users.
  2. ekster.com/en-au/pages/dad-joke-generator
    1. Pros
      1. Engaging interactivity in terms of a working lever that the user can "pull".
      2. The website follows the same colour palette, providing simplicity for users when they are retrieving dad jokes.
    2. Cons
      1. Overwhelming website - it is also an online shop, meaning that users could get distracted or overwhelmed by the various other features found on an online shopping site, such as categories of search items.
      2. After multiple trials of the dad joke generator, it was found that jokes are reused quite frequently, suggesting that this website/web app only has a small amount of available dad jokes.
5. Details (IA3 Digital Solutions Task Sheet 2024 Document)
  1. Context
    1. "Studied data exchange methods" - "manipulating JSON API data for presentation on a web form"
    2. "Dad Jokes have emerged as a delightful and endearing cultural phenomenon"
    3. "...timeless joy found in simple, lighthearted jests. These wholesome and often groan-inducing quips not only entertain but also strengthen the bonds between generations, showcasing the enduring power of laughter in fostering family connections."
  2. Task
    1. "research and investigate JSON and XML digital exchange methods and the components of digital data exchange systems"
    2. "re-develop a website to use Dad Jokes from an open api data source instead of a local database"
    3. "evaluate the data security and privacy impacts and recommend security strategies related to publishing the Dad Jokes to the web and adding a user registration and login process that requires transfer of personal data over the internet."
User Problem
1. User Persona (Source: IA3 Digital Solutions Task Sheet 2024 Document)
  1. Name: Alex Terry
    1. Details
      1. Age: 35
      2. Education: University - Bachelor of Education
      3. Occupation: Physics Teacher
      4. Location: AUS
      5. Interests: Science puns.
      6. Pain Points/Frustrations: As a busy teacher Alex doesn’t have a lot of time to search through jokes.
    2. Needs
      1. Needs and Expectations: Ability to get a random dad joke of the day.
      2. User Problem Summary: I love puns and having a joke with my students. I look for new material regularly to keep my jokes fresh and engaging.
    3. Wants
      1. Goals: Alex uses dad jokes to connect with her students.
  2. Max Brown
    1. Details
      1. Age: 77
      2. Education: High School
      3. Occupation: Retired
      4. interests: Loves entertaining his grandkids by telling jokes.
      5. Pain Points/Frustrations: Poor eyesight and not being great with technology. A lot of jokes he finds online are not suitable for children.
    2. Wants
      1. Goals: To be known as the funny grandparent. He seeks silly jokes and puns that are non-offensive and suitable for young children.
    3. Needs
      1. Simple and uncluttered UI A simple solution that I can search through all the jokes on a topic of my choice.
      2. User Problem Summary: I really want a simple solution to explore Dad jokes so that I can have a repertoire of jokes.
Impacts
1. Social
  1. More Public Information
    1. The "icanhazdadjokes.com" API is already a public API, so this web app provides another source of access for the API. Additionally, users will be more trusting to use this API as the information is already publicly online, and is a verified website with a valid domain.
  2. Tradition/Generational Bonds
    1. As stated in the task (IA3 Digital Solutions Task Sheet 2024 Document), dad jokes have existed for a long time, and are used to connect different people in different stages of their lives. Creating an aesthetic web app that displays dad jokes in plain text allows a variety of users to enjoy the dad joke content and share with others.
2. Personal
  1. Increased humour/happiness
    1. As people read more dad jokes from the generators' API, or search for jokes on an interesting topic to them, they will have a boost in joy.
  2. Time Saver
    1. Pressing a quick button instead of scrolling through heaps of dad jokes saves users time, and encourages them to use the web app more, because it is efficient and easy.
3. Economic
  1. Positive for Individuals
    1. This web app will most likely be published for free (or a very low cost), meaning that users in different financial situations can all access this web app.
  2. Negative for Dad Joke Generators
    1. This web app puts other dad joke generators that are costly at risk, because users are more likely to use an option that is free or a lower cost.
Developer Problem
1. Data
  1. Data Source Options
    1. Dad Joke API - "icanhazdadjoke.com"
      1. Pros
        Provides documentation for searching the API and outputting the dad jokes as images.
        Provides additional data, such as total joke numbers and status codes (success codes).
        Allows output to be JSON data, HTML data or plain text.
      2. Cons
        Anyone can add to the API - doesn't ensure safety and appropriateness of jokes, especially for Alex, who's a teacher.
        APIs are generally unsecure, meaning that SQL injection attacks are frequent, and there is a high risk of security breaches. Security measures should be taken to ensure that data isn't risked when retrieving dad jokes from the API.
      3. Interesting
        The API allows for data retrieval into GraphQL Statements, which lets users have more freedom with what they do with their data and retrieved outputs.
        Just as anyone can submit a joke to the API, there is no authentication required for the retrieval of data.
  2. Required Data
    1. Dad Joke - Data Type: varchar/string - Data Type Length: 255 - Constraints: NOT NULL
    2. Search Bar Dad Joke Results - Data Type: varchar/string - Data Type Length - 1000 characters - Constraints: NA
  3. Data Storage and Retrieval
    1. "icanhazdadjoke.com" API
    2. For retrieving random dad joke: Objects: "id", "joke", "status"
    3. For searching with key term: Objects: "current_page", "limit", "next_page", "previous_page", "results" (Array inside that holds Objects: "id", "joke"), "search_term", "status", "total_jokes", "total_pages".
2. Coding Environment
  1. Key Algorithms
    1. Data retrieval - search the API for a new, random dad joke with "GET" requests and retrieve to display on the web page.
    2. Search bar - retrieve user input data to search the API (with "GET" requests) with a specific query in the URL for the data response.
  2. Development Tools
    1. Thonny - used to create the Flask Web Application and connect to the API, along with sending the requests.
    2. Notepad++ - used to create the HTML and CSS for the web app that forms and styles how the web page is going to look for the user.
    3. "icanhazdadjoke.com" - stores all dad jokes that can be retrieved and displayed on the web app for users like Alex Terry.
3. User Interface
  1. User Interface Components
    1. Buttons and Links
      1. Used to send queries to the API (i.e. retrieving a new dad joke by clicking the button). Used in forms to submit user input and information to Python (i.e. search bar).
    2. Text
      1. Represents the headings and instructions on the web app page, and the dad joke once it has been outputted,
    3. Menu Bar
      1. Gives a space for the search bar, if needed. Gives an overall outline for the webpage and ties it altogether. Helps determine colour scheme and palette.
  2. Usability Principles
    1. Effectiveness
      1. Ensuring that dad jokes are outputted correctly and efficiently to the web app for the users to see and use.
    2. Utility
      1. That the user can find jokes of the style and topic that they want. For example, a search bar allows users to enter key terms in a joke, and view all of the jokes with that key term in it.
    3. Accessibility
      1. Ensuring that text and buttons are large enough for users to see and work with.
    4. Learnability
      1. Ensuring that any symbols on the web app are distinguishable and easy-to-understand. That the web app is not overly-complicated, and the user knows what to press to gain dad jokes.
    5. Safety
      1. That the users' data is not at risk (cannot enter any personal details), or that they can recover from any mistakes.
  3. Features
    1. Search Bar?
      1. Users may have an idea of the punchline of a joke/type of joke they want, so a search bar would let search a key word/term to get the jokes they want (e.g. Physics-related jokes for Alex).
    2. User Login?
      1. If users have their own profile, they can save their preferred jokes for later - helpful for Alex who doesn't have time to search through jokes.
    3. Dark Mode?
      1. Dark Mode may make the web app more engaging for Alex's students, or make it easier to see the jokes for people with low visibility of some colours.

Next up

Dad Joke API/Web App

Description

Resource summary

Media attachments

Similar

	Created by Rebbecca Stanley over 2 years ago