MGMT 1601: Management Software and Technology
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
MGMT 1601: Management Software and Technology
Design an App’s Front-End
On the 12th of November 2023, Dalhousie University partnered with Volta Labs to launch the 2023 Halifax Generative AI Hackathon, a one-day application building competition between students and community members to build the best Generative AI apps. As part of that competition, Dr. Conrad created SnapTutor, a demonstration of how someone could make a simple generative AI app. The app could hypothetically be spun out into a SaaS product with the following elements business model elements:
• Customer segment: Universities in North America.
• Value proposition: Rapid feedback for a superior textbook experience.
• Revenue model: Subscription model; sold with a textbook.
• Other details: Regular SaaS channels, built on AWS, advertised online.
As mentioned in the summary and the lecture, building an app is just a small part of the overall development of new software. You will help design the app’s font end, that is the HTML and Cascading Style Sheets (CSS) code, to make it more usable for students. Last week we focused on then HTML, the building blocks of a webpage’s design. This week, we will focus a bit more on the CSS.
Step 1: Watch the Demonstration
Watch the demonstration either in your tutorial or through the online video. This will demonstrate the SnapTutor app in action. It does not have a public online interface (yet) though the demonstration will give you an idea of the core functionality of the minimum viable product (MVP). After watching the demonstration, proceed to the nextstep.
Step 2: Open and Edit the SnapTutor HTML File
You have been provided with an HTML file, but it is not properly configured for static viewing. If you try to open it now, it won’t look like the video. It’s because this file was an excerpt from the functional web application, and it contains many bad references that need to be changed.
This time, we are not going to give you rigorous instructions on how to do it. Fortunately, there are great resources to help guide you, such as W3Schools. You can use sites like this to learn what you need to modify websites.
In this case you will need to change the following:
• Modify the logo link in the head so that it properly refers to the static/book.PNG image (you can learn about how images work in HTMLhere).
• Modify the CSS link in the head so that it reads the CSS stylesheet (you can learn about the connection between HTML and CSShere).
• Modify the img in the body such that it points to the image.
• Delete the redundant code at the bottom.
Figure 1 illustrates these lines in the HTML file. Open the file using your editor and make your changes accordingly. When you open the corrected file in your browser, it should look like Figure 2 below.
Figure 1 - Modify the logo, CSS reference, picture link and redundant code
Figure 2 - The app frontend, when opened in the browser
Step 3: Consider Design Options
Consider the way that reflective assignments are graded now. The business process involves entering a reflection, which is evaluated, often two weeks later. This process involves multiple activities. Figure 3 illustrates how such process might go.
Figure 3 - Grading Process Without SnapTutor
However, SnapTutor automates many of these processes. Figure 4 illustrates this automation. The streamlined business processes can be thought of as the applications value proposition.
Figure 4 - Grading Process with SnapTutor
We can also consider the way that the application works now from a technical perspective. Users essentially enter a prompt and OpenAI evaluates the entered information based on a instructions that it has been given on the backend. The instructions that OpenAI is given are provided below, in their original JavaScript Object Notation (JSON) format:
{"role": "system","content": "Students will provide you with short reflections on emerging trends in the business world. Evaluate the reflections in terms of spelling and grammar, and in terms of evidence of critical thought. Provide a grade between 0 and 10, where 0 represents a very poor response and 10 represents a fantastic response."}
From this you can envision how OpenAI works on the back end. A message is sent form SnapTutor to the OpenAI server. It then returns the response which is rendered in the web page.
We will have a discussion together in the tutorial groups. From what you know, ask yourself how you could improve the business model of the application. Some questions to consider:
• What should the rubric evaluate? What do the customers want?
• Which designs web page designs or colours should be changed?
• How usable is this application? Should this design be changed entirely?
Consider forming an opinion on this topic. It will be requested as a challenge question.
Step 4: Review CSS Tags, HTML, and Edit Accordingly
With an idea in-hand, implement it in your HTML and CSS code. The teaching assistants will help you with this step as needed. Take a screen shot of your result and retain it for this week’s submission.
References
OpenAI (2023). ChatGPT (GPT 3.5) [large language model].https://chat.openai.com/chat
2023-11-25
Design an App’s Front-End