diff --git a/404.html b/404.html index a49c489..85dc2e8 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file +404: This page could not be found

404

This page could not be found.

\ No newline at end of file diff --git a/_next/static/chunks/nextra-data-en-US.json b/_next/static/chunks/nextra-data-en-US.json index 7be8e69..99cd1a0 100644 --- a/_next/static/chunks/nextra-data-en-US.json +++ b/_next/static/chunks/nextra-data-en-US.json @@ -1 +1 @@ -{"/_app":{"title":" App","data":{"":""}},"/_app":{"title":" App","data":{"":""}},"/archive/mobile":{"title":"Mobile Cloud Application","data":{"":"This assignment has been archived and no longer in-use. It is kept for\nreference purposes.","general-overview#General Overview":"In recent years, mobile cloud computing has been one of the hottest topics regarding technological advancement. So what exactly is mobile cloud computing, and why has it gotten so much attention?Smartphones and tablets have become ubiquitous. Owing to these technologies, people have found new ways to spend their time more fruitfully by doing more with their mobile devices. Mobile cloud computing is a crossover between mobile web and cloud, offering greater possibilities in terms of power and productivity.The mobile web refers to browser-based web applications for mobile devices. Compared to native ones, these applications used to be handicapped by the lack of features such as offline storage and support for hardware such as cameras. To address this situation, W3C has standards that browsers can implement, giving developers a consistent API to access features that would otherwise require writing a native application. The gap between mobile web and native applications is thus narrowing.Cloud computing is where data and processing power are accessed from a pool of shared online resources known as the cloud. You can visualise it as a supercomputer containing all the applications and data belonging to its users. A user can run their applications and process the data in the cloud using any connected device as a remote controller.Combining their characteristics results in mobile cloud applications with the following strengths:\nAvailability - With all data and configurations stored in the cloud, the user will be able to enjoy the same experience any time and anywhere using any mobile device.\nProductivity - What we previously could do only at home or in the office can now be done on the go. We are now able to read emails the moment they are received, edit documents or even catch up with friends over Facebook and WhatsApp during a commute.\nDevice-independent - Want to replace your iPhone with the latest Android? A web application runs in any modern browser, so there is no need to worry if your favourite application has yet to be ported to other platforms.\nLow hardware requirements - All heavy computations are offloaded from the client to the servers, reducing the application's role to an interface for sending commands to the cloud. In addition, parts of the data backed up in the cloud can be served on demand. The mobile device, therefore, does not need to have large processing power and storage capacity.","grading-and-admin#Grading and Admin":"This assignment can be done in groups of three or four students. If you are unable to find yourself a group, you will be randomly assigned one.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of mobile cloud application development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.With that said, you have a lot of freedom to express your creativity. You are free to develop any application you choose. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition at least one week before the assignment is due. Your petition is subject to approval.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you (pleasantly!) surprise us with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated.For example, WebVR and geolocation might be the latest and coolest feature supported by most mobile browsers, but they may not contribute to the user experience in a document editor. In fact, implementing features for the sake of doing so may work against you (and your grades) by confusing the user.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The high-level goal of this assignment is simple: a working Progressive Web Application that utilises the capabilities of a mobile device and is able to persist the users' data in the cloud. Your task is to demonstrate that you can design and implement RESTful APIs, as well as build a Progressive Web Application that consumes your API. You can use any backend language and/or framework you desire.Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference. If you can make a difference by just doing very little work, that is fine with us.Before you begin, please read through the whole assignment once to get a sense of what is required. The grading scheme can be found at the end of this handout.\nPlease read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of a mobile cloud\napplication.","phase-0-introduction#Phase 0: Introduction":"The reward for doing good work is more work.– Ben Leong\nThis assignment comprises 4 weeks of intensive learning that provides you with another opportunity to express your creativity. We will be focusing on mobile cloud applications, typically with the following components:\nClients - Clients reside on mobile devices belonging to users. They could be (1) native applications, which run only on their intended platforms or (2) HTML5 web applications with the potential to work on any device with an HTML5-enabled browser. The client application provides the user with an interface to view and manipulate data. For this assignment, you will be building a web app, not a native app.\nServer - The server runs on the cloud and serves data to the client. For example, transactions on an e-commerce app are requested by the client and processed on the server. Often, heavier computations such as video transcoding are also handled by the server because the computational power of mobile web browsers is limited.\nDatabase - The database does exactly what we would expect of it in any other context, which is to store all of the application's data.\n\nDepending on the size of the service, differing amounts of hardware may be deployed to keep up with the demands of its users. Obviously, large services will require more than a single server and database. There are many ways to configure multiple servers and databases to work together so that the service scales. You may read more about distributed systems in this article. Several server instances can be run simultaneously while using load balancers to split the work evenly among them. Data can also be replicated over several databases and/or sharded based on predefined hash functions for higher reliability and availability. Such are issues to consider as you extend your reach to more users, but we shall start small for this assignment. In its simplest form, a mobile cloud application can be hosted with the server and database sharing an AWS instance.One of the benefits of having a client-server architecture is that different kinds of clients (Web, iOS, Android, Mac, etc.) can reuse the API exposed by the same server. You will not need to rewrite your server if you need to cater to a new client.\n\nOn a native iOS/Android app, users will normally download the clients from the online application stores for their respective platforms. In our case, the workflow differs a little from native applications. Since our client is created with HTML5 and supporting web technologies such as JavaScript and CSS3, it is essentially a web page. During the user's first visit to the site, we will tell the browser to quietly download and save the program for future use. A Service Worker will help retain resources through the Cache API, which could then be used to serve the \"web page\" in the absence of an Internet connection.\n\nWhen this happens, the client can operate with limited functionality when offline and communicate with the server using AJAX calls while it has Internet access. Requests typically take the form of JSON-formatted messages, and they contain details of a job to be processed by the server, such as querying the database for some information or updating its records. The server then replies with a similarly formatted message response, which the client is responsible for decoding and displaying to the user.","phase-1-design#Phase 1: Design":"","idea-generation#Idea Generation":"The best way to predict the future is to create it.– Abraham Lincoln\nAs an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than Facebook, Twitter and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil.Before you jump into developing the specifications of your application, a very important question to ask yourself is, \"Does my application solve any problem for the users?\". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user's life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the fans that will help you spread the message about your application via word-of-mouth.\nMilestone 0: Describe the problem that your application solves. (Not graded)\nBuilding a killer application requires more than just technical skills. In CS3216, we expect you to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment.You should choose an application that fully utilises the potential of the platform. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why developing a mobile cloud application would best achieve your application's objectives.\nMilestone 1: Describe your application and explain how you intend to exploit the characteristics of mobile cloud computing to achieve your application's objectives, i.e. why does it make the most sense to implement your application as a mobile cloud application?\nIt is no good to have a killer app that nobody uses. Hence, you will need to think a little harder about how you plan to \"market\" your app to potential users. You must identify your target users, determine the relevance of your application to them (i.e. why they should care about your application) and explain how you plan to reach out and persuade them to use your application.In order to promote the use of your application, good marketing strategies are crucial in raising awareness of your application among targeted users. After introducing potential users to your application, how would you try to persuade them to continue using the application, and perhaps, even share or introduce it to others? What value do the users derive from using your application?Ideally, you should also think of ways to provide motivation for users to share your application with their friends. The application should be designed such that while individual users may derive some value using your application, it is in their interest to promote your application (e.g. a reward scheme can be set up to give out benefits for referrals).The number of users with mobile devices has grown rapidly in recent years. Given this trend, how would you take advantage of this growth to increase the number of people using your application?\nMilestone 2: Describe your target users. Explain how you plan to promote your application to attract your target users.\nNow that you have a solid idea of what you want to build, it is a good time to pick a suitable name for your mobile cloud application if you haven't already done so.","an-overview-of-relational-databases#An Overview of Relational Databases":"A relational database is a type of database that models stored data as tables with columns and rows. It is called \"relational\" because you can link a table to another table through foreign keys.In this section, we will be going through simple relational database concepts. There are some other more advanced concepts that you can read up online.A database application may store several databases. Hence, while each application will usually use its own database, several applications may share the same database application running on the same server (e.g. if you and a friend each have a blog, even if each blog needs 1 database, you could still house both blogs on the same MySQL instance).To visualize a database at the highest level, we can think about its schema, which is basically a blueprint of the database's tables, their structural details, and the relationships between them.Schemas define two things: tables and relations. Tables contain one or more columns each. For example, we can imagine a students table containing 5 columns: matric_no, name, address, phone, birthdate. Each column has a type that you need to specify (e.g. name is of type TEXT, birthdate is of type DATE). Actual data will then be simply stored as rows in the table.Each row needs to be uniquely identifiable. If two rows happen to be completely identical, you will run into trouble trying to update or delete them since there is no way to pinpoint exactly which one you mean. Thus, we usually have a column (or a set of columns in combination) that we require to be unique for each row. We call this the primary key. In the students table example, the matric_no column is an excellent candidate for the primary key since no two students share the same matric number. MySQL (and any other proper database system) will prevent you from inserting a row if there already exists another row with an identical primary key.Relations indicate relationships between tables. For example, suppose we add a home_faculties table containing two columns: matric_no and faculty – a simple mapping of student to faculty. We can link this table to the previous students table using the matric_no column, which both tables share. We say that matric_no in the home_faculties table is a foreign key that references the matric_no column in the students table. Note that a foreign key column set must reference a primary key column set of another table. Note also that our two-table set-up allows students to become members of two faculties (e.g. when doing double degrees). It would not be possible to fully go through all the details about relational database concepts here. For a better or further understanding, you might want to look up additional readings about the topic online.\nWhat is the primary key of the home_faculties table? (Not graded)\nOther important concepts include indexed columns (allowing searches to be fast), unique keys (enforcing uniqueness for non-primary key columns), and relation cascades (where deleting a student from the students table can automatically update/delete all entries in other tables that reference this table). It's up to you to learn about all these on your own.After this section, you should be ready to produce a schema for your application. Do consider how efficient your schema will be; specifically, think about the number of queries required to accomplish common tasks and the number of tables accessed to complete a single user query. Your schema should be graphical and should indicate clearly the table names, column names/types, primary keys, and relationships.As a rule of thumb, you should remember that database schemas should be designed with a design once use forever principle in mind. You should spend a good amount of thinking on a good schema design, after which you should not need to come back and make drastic changes to it. Make sure you take some time to plan a good schema design. Having to perform a large schema migration when you realise your original schema wasn't flexible enough to support some feature can be a painful process, especially so if you already have a considerably large user base.\nMilestone 3: Draw an Entity-Relationship diagram for your database schema.\n\nIf you are using MySQL Workbench, there is a feature to automatically create\nan EER diagram from your existing database\nschema.\nYou may simply export this as a PNG file and include this in your milestone\nsubmission.","restful-api#RESTful API":"Much as we would love to immediately begin building the application, there is still one final thing we need to draw up plans for - the RESTful API itself. Being the bridge between the client and the server, both sides should be very clear of the specifications to avoid unnecessary confusion during development. If you only decide on parts of the interface while you program the application, you risk having an inconsistent API. It pays off to plan this well; who knows, your application may become so prominent that you might want to open the API to third-party developers.Representational State Transfer, or REST in short, is an architecture for networked applications. Being one of the simplest architectures to deploy, it is a popular choice for many web services. REST is a client-server architecture where a client initiates a request to the server to be processed and receives a response with updated data. It is stateless, meaning that the server does not maintain the state of the client, and every message to the server must contain all necessary information to process the request. Not having persistent connections or complex states means that the service can be set up using simple web servers, and requests can be distributed across multiple servers for greater scalability.Requests and responses can take many forms: JSON is the most common format. Note that the request and response may not necessarily be in the same format. For example, when uploading a photo to a site, usually, a request with type multipart/form-data is sent while the reply containing the photo ID is in JSON. We now take a quick detour to explore the JSON format since it is one of the easier ones to handle.JavaScript Object Notation or JSON is a text-based data-interchange format. Consider your current scenario where you are working with an object in your client using JavaScript, and you need to send it over the network to be processed by the server. JSON is a set of rules to encode and decode data to and from a universally recognised string format so it can be used with any programming language which implements these rules. JSON works on any object made up of key/value pairs and/or ordered lists of values. The resultant string is also human-readable unless encoded binary files are involved. The following JSON string could be a response from a social network's REST API to a request for information on the user with id = 0, where { } represents a dictionary and [ ] an array.\n{\n\"id\": \"0\",\n\"name\": \"James\",\n\"tel\": \"61234567\",\n\"mobile\": \"87654321\",\n\"friends\": [\n{\n\"id\": \"1\",\n\"name\": \"Andy\"\n},\n{\n\"id\": \"2\",\n\"name\": \"John\"\n}\n]\n}\nJSON is already supported by all modern browsers and server-side scripting languages, so you do not need to implement it yourself, but if you want to know more, visit https://www.json.org/json-en.html.Going back to the API, one way to start planning it is to write down a list of functionalities (which require server interaction) that you would like the client to have (e.g. send a private message, buy a product, leave a comment). Try to group related ones together (e.g. add/remove a friend), usually according to the resource/object.Next, for every operation, you establish a triplet that describes it:\nRequest Method + Relative URLWhen an address is entered into the navigation bar, the browser performs an HTTP GET request to retrieve the page located at the URL. However, a POST request is made instead when we submit a registration form on the same page. If you haven't realised, in REST, the HTTP request method describes the action we want to perform, and the URL refers to the resource to act on. Just by looking at this combination, we should already fully understand the intention of the request.By convention, REST uses four request methods for the following purposes:\nPOST /products - Create new resource.\nGET /products/12345 - Get existing resource corresponding to the id of 12345.\nPUT /products/12345 - Replace existing resource corresponding to the id of 12345.\nPATCH /products/12345 - Modify existing resource corresponding to the id of 12345.\nDELETE /products/12345 - Remove existing resource corresponding to the id of 12345.\n\nNotice how \"clean\" URLs are used instead of the query string version? Comparing /products.php?id=12345 to its clean form /products/12345, the latter is more readable and has greater semantic meaning. It also conceals implementation details of the server which is irrelevant to the client, such as the file extension of the server-side script.As limited as these request methods may seem, they are actually sufficient to describe any operation. Consider a request to make a purchase. Though there is no buy method, we do not append an action to the URL (POST /products/buy). Why make things more complicated when we already have a clean and built-in way of representing the operation? Instead, buying a product can be thought of as creating a 'transaction' (POST /transactions). The trick is to derive a noun from the action.\nRequest ParametersThis is the data required to compute results. Typically, you only need this for PUT and POST methods. Any message format may be used here. You can consider using JSON for simpler requests and multipart/form-data for larger ones, like photos.\nResponse Value(s)This is the information to return to the client after processing the request. Like the parameters, you can choose to use any message format here. Make sure that you also plan for error responses using the semantically correct HTTP response code.If your request can potentially return large amounts of data, consider using a pagination mechanism. Imagine the Facebook newsfeed API returning all entries since the day you joined the social network!\n\nYou may have the freedom of planning this however you like, but always try to keep your API consistent. It would also be pretty confusing if every API function uses different message formats.There are too many REST practices to be discussed in detail here; make sure you do some research before you continue. You can find many articles and discussions online regarding RESTful API design. Note that this topic is highly opinionated, with many differing opinions on what constitutes REST. It is not necessary to go to great lengths to follow every single rule, but you must be able to justify your decisions with regard to your application's needs. If you have a ton of time (which you probably don't), you can read up on this lengthy but informative Microsoft REST API Guidelines.","alternatives-to-rest#Alternatives to REST":"Besides REST, there have been various systems introduced more recently that support alternative ways for client-server communication. These systems have seen increased adoption by companies that benefit from the different approaches to exposing API.Here are some popular alternatives to REST\nGraphQL\ngRPC (based on RPC architecture)\n\n\nMilestone 4: Explore one alternative to REST API (may or may not be from the list above). Give a comparison of the chosen alternative against REST (pros and cons, the context of use, etc.).Between REST and your chosen alternative, identify which might be more appropriate for the application you are building for this project. Explain your choice.\nFor your application, you may choose to implement a REST API or the alternative you have explored.It is important to design the API contract between the client and the server well. With the API contract well-documented, the client can test out features relying on server data without the server implementing the API endpoint by sending mock API requests and receiving mock responses. Tools such as Apiary and Faker can help you with that. Apiary in particular, can help you document your APIs for both your client-side and server-side developers to reference. For GraphQL and gRPC, there are also tools to generate documentation from the schema and protobuf.Complete the appropriate Milestone 5 below, depending on which system you have chosen.EITHER\nMilestone 5 (REST API): Design and document all your REST API. If you already use Apiary to collaborate within your team, you can simply submit an Apiary link. The documentation should describe the requests in terms of the triplet mentioned above. Do provide us with an explanation of the purpose of each request for reference. Also, explain how your API conforms to the REST principles and why you have chosen to ignore certain practices (if any). You will be penalised if your design violates principles for no good reason.\nOR\nMilestone 5 (alternative to REST): Provide equivalent documentation of your client-server communication. For GraphQL and gRPC, you can submit your schema or protobuf with additional descriptions or use any of the tools built on top of that. Also, explain how your design leverages the features of your chosen system. You will be penalised if your design fails to utilise any key features of the chosen system.","phase-2-api-server#Phase 2: API Server":"Don't worry about failure, you only have to be right once.– Drew Houston\nNow that you are done with the planning, it is time to turn your design into a usable product. Since the client is probably required to test much of the server's functionality (the reverse is also true), you are advised to split the work well among your teammates to develop the server and the client communication components concurrently.To test out server-side APIs, a popular tool out there is Postman. Postman provides a user-friendly interface to construct your API requests to the servers; certainly easier than cURL-ing from the command line!You will have to read up on how to implement REST endpoints on your back-end stack of choice. Here are links to starting guides for some common frameworks:\nRuby on Rails\nExpressJS","sql-querying-the-database#SQL: Querying the Database":"Any decent web application should do more than returning a hard-coded array. Most of the time, you will have to query the database and construct the JSON response from the database result.SQL is a standard language designed to manage a database and to retrieve or store data in a database. In addition to SQL, most database systems will have several additional SQL-like commands that are used to perform specific administrative tasks like adding new users or modifying passwords.MySQL provides commands you can use to create and alter databases and tables, and also commands you can use to insert, update, delete, and retrieve rows from tables. We call the former \"data definition language\" (DDL) and the latter \"data manipulation language\" (DML). You should never run DDL commands from publicly accessible pages.Most of the time, it is not a good idea to write raw SQL queries yourself. We recommend that you look up database connectors and ORM tools for the language/framework you intend to use.\nMilestone 6: Share with us some queries (at least 3) in your application that require database access. Provide the actual SQL queries you use (if you are using an ORM, find out the underlying query and provide both the ORM query and the underlying SQL query). Explain what the query is supposed to be doing.","http-request-methods#HTTP Request Methods":"Now that we can obtain the results from the database queries, we can move on to providing the actual API for the client to use. We can do so by handling the common HTTP request methods used in REST services: GET, PATCH, PUT, POST and DELETE. As mentioned earlier, GET retrieves a resource, PATCH modifies it, PUT replaces it, POST creates a new resource, and DELETE removes the resource. If it is intended that users are not allowed a particular action, then you can ignore the corresponding request method.Do remember to program defensively e.g. sanitise all input. Also, as different operations may be expecting differing types of data, you should always specify the content-type of the request and response message so that the receiving end knows how to handle it.","phase-3-mobile-client#Phase 3: Mobile Client":"Global vision, local win.– Jack Ma\nWhile an HTML5 application can be used by any device with a modern web browser, the immediate tradeoff is that our HTML5 application cannot directly access some of the native functionality and libraries on the device. In this section, you will learn how to create a simple Progressive Web App, that is, an HTML5 client that is able to work even while the device does not have an Internet connection.","progressive-web-apps#Progressive Web Apps":"In recent years, Google has been pushing the concept of Progressive Web Apps. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They are:\nProgressive - Work for every user, regardless of browser choice, because they're built with progressive enhancement as a core tenet.\nResponsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.\nConnectivity independent - Enhanced with service workers to work offline or on low quality networks.\nApp-like - Feel like an app to the user with app-style interactions and navigation because they're built on the app shell model.\nFresh - Always up-to-date, thanks to the service worker update process.\nSafe - Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.\nDiscoverable - Are identifiable as \"applications\" thanks to W3C manifests and service worker registration scope allowing search engines to find them.\nRe-engageable - Make re-engagement easy through features like push notifications.\nInstallable - Allow users to \"keep\" apps they find most useful on their home screen without the hassle of an app store.\nLinkable - Easily share via URL and does not require complex installation.\n\nSource: https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/It is recommended that you go through this short tutorial on making your first Progressive Web App.Next, we'll be exploring some of the features that constitute a progressive web app.","add-to-home-screen#Add to Home Screen":"Apart from your usual HTML5 features, most mobile devices allow users to add a shortcut to a web page to their home screen.\n\n\n\nIn iOS and Android devices, when these shortcuts are run, they are opened in a standalone browser window that does not include the default browser UI controls at the top and bottom. This allows web applications that have been added to the home screen to have more space to work with and look as if they were native applications. Special metadata tags have been developed to allow developers to set icons, splash screens and even the colour of the device's status bar. As much as users may like your application, adding a blank icon does not help users identify your application among the others they have installed. If users are willing to shortcut your application, capitalise on their goodwill by making it easy for them to return to your application.You can find the documentation for doing that on Safari and Chrome. If you plan to release your application, it is a good idea to do the same for other platforms that we may not have covered here.\nMilestone 7: Create an attractive icon and splash screen for your application. Try adding your application to the home screen to make sure that they are working properly. Include an image of the icon and a screenshot of the splash screen in your write-up. If you did not implement a splash screen, justify your decision with a short paragraph. Add your application to the home screen to make sure that they are working properly. Make sure at least Safari on iOS and Chrome on Android are supported.","presentation#Presentation":"Your team (or maybe just your user interface designer) should spend some time designing a good UI; a good UI helps keep users. Although the functionality of your application is important, the way it provides the functionality is just as important. Users will not continue using an application that is difficult to use, regardless of how technically superior your application is or what functionality it provides. If your users do not like it, they simply won't use it.All you have to do is spend some time testing your application. In most cases, you will quickly know if your UI makes or breaks it. It's common sense!After the UI has been designed, the UI needs to be implemented. Cascading Style Sheets (CSS) would be used since the application is actually just a fancy web page. All styles should be contained within CSS files, linked to the main page using tags. It is generally a bad practice to mix CSS with HTML.Good CSS is not easy to write, and many applications end up with messy CSS after an extended period of development as the application grows bigger. To solve this problem, front end developers have come up with methodologies to structure your CSS code:\nObject Oriented CSS (https://github.com/stubbornella/oocss/wiki)\nScalable and Modular Architecture for CSS (https://smacss.com/)\nBlock Element Modified (http://getbem.com/)\n\nRead up on them and choose one (or more) to use in your code.\nMilestone 8: Style different UI components within your application using CSS in a structured way (i.e. marks will be deducted if you submit messy code). Explain why your UI design is the best possible UI for your application. Choose one of the CSS methodologies (or others if you know of them) and implement it in your application. Justify your choice of methodology.","https#HTTPS":"By default, your application should be accessible through the Hypertext Transfer Protocol (HTTP). However, that is considered a bad practice as HTTP data are transmitted through the network in plaintext, allowing anyone located between the web host and the client to be able to sniff and view any HTTP data, which may include passwords or tokens.HTTPS (HTTP over SSL/HTTP Secure) is a protocol for secure communication over a computer network. HTTPS is not a separate protocol; it refers to the use of ordinary HTTP over an encrypted SSL/TLS connection. Almost everything in the HTTPS payload is encrypted, including the headers, request and response load.If your application requests for personal identifiable information (PII) or credentials from the users, it is good practice to deploy HTTPS to protect your users against man-in-the-middle (MITM) attacks.To prepare a web server to accept HTTPS connections, the administrator must create a public key certificate for the web server. This certificate must be signed by a trusted certificate authority for the web browser to accept it without warning. The authority certifies that the certificate holder is the operator of the web server that presents it. Web browsers are generally distributed with a list of signing certificates of major certificate authorities so that they can verify certificates signed by them.SSL certificates are issued by certificate authorities (CA), whose certificates are by default installed into your machines, and obtaining them usually requires paying a bit of money (~8 USD to 70 USD per year). However, you can also obtain a certificate from Let's Encrypt for free. Let's Encrypt launched in April 2016 and provides free and automated SSL/TLS certifications to websites. PWAs have to be served via HTTPS in order to make use of service workers. More on that later 😉.\nMilestone 9: Set up HTTPS for your application, and also redirect users to the https:// version if the user tries to access your site via http://. HTTPS doesn't automatically make your end-to-end communication secure. List 3 best practices for adopting HTTPS for your application.","offline-operability-and-data-persistence#Offline Operability and Data Persistence":"Very often, it is a good idea to provide the user with some level of offline operability. Even without an Internet connection, your application should not be totally dysfunctional. If there is something that can obviously be done offline, users will expect to be able to do so.For example, photo sharing applications should allow users to organise and edit photos at any time. These jobs can be saved in a queue if the application is not connected, and these operations can be played back on the server when the device goes back online.The Facebook mobile app allows users to draft posts and write comments while offline, which will be posted when the device goes online.One last example is the Dropbox iOS application. An Internet connection is required to retrieve files that the user has stored in the online folder. However, it also allows users to flag selected files for the application to cache locally in the phone's internal memory, making them available at all times.We shall now look at some technologies that will enable you to realise this for your application.","1-service-workers#1. Service Workers":"A service worker is a script that runs in the background and responds to events from your webpage, which includes network requests. This ability to intercept the request and respond to them, whether through the network or cache, helps to provide a consistent experience even when there is no connection.\nSupport for service workers are relatively new and are still in development,\nwhich may result in browser compatibility issues. Most features have been\nimplemented in modern browsers. Check out\nhttps://jakearchibald.github.io/isserviceworkerready for the current state of\nsupport.\nEven if the targeted browser does not support service workers, your application should still degrade gracefully! Offline support is just a good-to-have; the core functionality of your site should still work!To get started, we first need to register a service worker with our browser. Create two files:\nA service worker file named service-worker.js in your application root\napp.js/main.js file that will be included in your application, and add the following code to it:\n\n\n\nIn this example, we first check to see if the browser supports service workers. If the browser does support it, we will then register our service worker script.Caching required filesIn order for your application to work offline, the service worker will need to have all the files related to your application. When your application page is visited for the first time, an install event will be fired. The service worker can then listen to this event and cache the required files through the Cache API.Add the following code to service-worker.js to handle the install event:\nself.addEventListener('install', function (event) {\nevent.waitUntil(\ncaches.open('cache_name').then(function (cache) {\nreturn cache.addAll([\n'/',\n'/style.css',\n// ...\n]);\n}),\n);\n});\nThe service worker first opens the cache with the cache_name, before calling addAll that takes in an array of URLs and retrieves all the response objects associated with the URLs. These response objects are then cached for future usage.Serving the cached filesNow that the required files have been cached by the Service Worker, we can serve the page directly to the user without sending new network requests to retrieve these files. Similar to the install event when a page is first visited, a fetch event will be fired if the page is visited again. The service worker can then handle this event to return the cached response.\nself.addEventListener('fetch', function (event) {\nevent.respondWith(\ncaches.match(event.request).then(function (response) {\n// Response for the request is found in cache, return the response\nif (response) {\nreturn response;\n}\n\n// Response is not found in cache, make a network request instead\n// You might need to polyfill `fetch` or replace with other forms of ajax calls\nreturn fetch(event.request);\n}),\n);\n});\nIn this example, the event request is matched against the cache for a cached response. If a corresponding response is found, the cached response will be returned instantly. If not, the request will be passed on to the server to retrieve the response.Cache ManagementNext, we need to ensure that the service worker and cache are up to date. For the service worker, the browser will automatically update and install the new service worker script once changes are detected from the server. This will kick off a new sequence of install events, followed by an activate event when the new service worker takes over.However, cache management, such as purging unused cached data, has to be managed by the service worker itself. This should be done in the activate callback to ensure that the latest script is used to manage the cache:\nself.addEventListener('activate', function (event) {\n// Cache management. E.g. Purging unused data\n});\nAdditional ResourcesThis is just a basic introduction to service workers, which can be utilised more efficiently to provide more comprehensive Progressive Web App experiences. For example, rather than caching everything during the install phase, we could also cache new requests progressively as the user explores the application. Service workers can also handle the push event, which can be used to create web notifications that will create a native-like experience. More info can be found here.There are tons of resources available online for service workers. Here are a few resources to kickstart your learning process:\nhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers\nhttps://jakearchibald.github.io/isserviceworkerready/resources.html","2-web-storage#2. Web Storage":"Service workers allow resources to be retained locally, but JavaScript variables do not survive past the lifetime of the application. When the application is restarted, it is reset to a clean state. Prior to HTML5, cookies have been used to retain client state; however, this method creates a burden on the network as all cookies associated with a domain are sent with every request. Web Storage is a storage API that allows the storing of data associated with a site, which persists across sessions without the drawbacks of using cookies.Web Storage is a key/value store and can be accessed through the localStorage object or the sessionStorage object. On your own, find out the difference between sessionStorage and localStorage. We will cover localStorage in the next example.\n\nIn the example above, nothing is observed when the user first loads the page. However, we define a new user object containing the user's ID as well as his name and add it into the key/value store. When the page loads in future, we will see that the user has already been set and will show up in the console. We can also clear the localStorage object or remove a specific key/value pair. As Web Storage does not support storing objects, one workaround is to store the object in stringified-JSON format.For a complete list of Web Storage's capability, visit https://html.spec.whatwg.org/multipage/webstorage.html.","3-onlineoffline-events#3. Online/Offline Events":"Storing data is easy; the tricky part comes when having to deal with synchronisation of states between the client and server.How does the server update a client when it connects with outdated data? How will a client post outstanding jobs when it goes online? What happens if both cases occur at the same time with conflicting instructions (e.g. client tries to comment on a thread that has already been deleted from the server)? These are but a few out of many possibilities that have to be considered.How you handle the problem depends on your application; prior to that, your application would actually need a means to determine if there is an Internet connection:\n\nnavigator.onLine is a boolean value containing the device's current Internet connection state. You can also register callbacks for the online and offline events. Try visiting the page on your mobile device and watch the events fire as you toggle your Wi-Fi on and off.Word of caution - the behaviour of navigator.onLine is flaky on desktop browsers but works fine on mobile browsers (Chrome). It is not the most reliable method of testing network connectivity.\nMilestone 10: Implement and briefly describe the offline functionality of your application. Explain why the offline functionality of your application fits users' expectations. Implement and explain how you will keep your client synchronised with the server if your application is being used offline. Elaborate on the cases you have taken into consideration and how they will be handled.","communicating-with-the-server#Communicating with the Server":"Your application needs to be able to communicate the user's actions to the server. Since our application runs in the browser, we can use an AJAX call to do so. AJAX allows you to make HTTP requests using JavaScript without a page reload. The following example uses jQuery to make a request to the REST server we have created earlier:\n\nWithin the AJAX call, the type refers to the HTTP request method. Just by looking at the parameters, we should already know that PUT /products/12345 is a request to modify the information of the product with id = 12345. Therefore, it makes sense to send the new information to the server through the data parameter. If you are expecting JSON to be returned, set the dataType to json, and jQuery will decode it for you. Also, the contentType defaults to urlencoded – remember to specify this parameter if the server expects the data to be in some other encoding.Finally, callbacks can be used to perform actions when the AJAX call succeeds or fails. Make sure that users are notified of a failure instead of being kept in suspense. Visit https://api.jquery.com/jQuery.ajax/ for a full list of options that $.ajax() has to offer.","authentication#Authentication":"Being able to communicate with a server is cool, but more work has to be done. With the right tools, anyone can send a request to your server, and you need to protect important API calls so that only the rightful users can make them (e.g. only the blog owner should be able to delete their own articles). To do so, we need some ways of determining the identity of the user making the request.One simple approach is to make use of JSON Web Token (JWT), which is a digitally signed JSON object for transmitting information between different parties. JWT consist of three parts:\nHeader - Contain the token metadata, which usually consists of the type of token and the encryption algorithm.\nPayload - The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata.\nSignature - The headers and payload digitally signed with the encryption algorithm.\n\n\n// Header\n{\n\"alg\": \"HS256\",\n\"typ\": \"JWT\"\n}\n\n// Payload\n{\n\"sub\": \"1234567890\",\n\"name\": \"John Doe\",\n\"admin\": true\n}\nGiven this header and payload, the JWT string will then be created in the following manner:\n\nHence a JWT consists of the encoded header, payload and signature, which is then appended together with periods as the delimiter.When the user is first authenticated with your app using their credentials, the JWT will be returned to the user and stored locally. This token can then be added to the Authorization header in future API requests as part of the authentication.\nAuthorization: Bearer \nThe JWT may look cryptic, but it is, in fact, reversible. You should use SSL when using such a scheme. Once again, the choice of authentication protocols for RESTful APIs has always been a point of debate with no hard-and-fast rules. It is your job to identify the most practical choice for the requirements of your application. JSON Web Tokens should be sufficient in most cases, but feel free to use any methods you deem fit. More reading about JWTs can be found here: https://jwt.io.\nMilestone 11: Compare the advantages and disadvantages of token-based authentication against session-based authentication. Justify why your choice of authentication scheme is the best for your application.","native-look-and-feel#Native Look and Feel":"Although your application may not be native, it may be a good idea to style it to look and feel like one. Owners of mobile devices have probably become accustomed to the user interface provided by the operating system, so they instinctively know how to use a native application when faced with one. When there seems to be more information, they try to scroll down. When they perform a swipe, they expect to see the next page. Likewise, to navigate through the application, looking for tabs at the bottom of the screen is the first thing that comes to mind. By making your application native-like, its learning curve becomes less steep. In addition, as a lot of research have been done by the mobile device creators to arrive at the current interface, we are less likely to make design mistakes by replicating it. Read about this research study by Google and AnswerLab.How can we emulate a native application? As part of the goal to improve the mobile web, HTML5 and CSS3 have been loaded with many new features. These features include animations, 3D transformations, visual effects and events which can reproduce the native look and feel when used in parallel. To do so, however, is time-consuming and is a sizable project on its own. Fortunately, others have done the dirty work, and there are many open-sourced frameworks and libraries you can use to easily recreate the native experience.The following are some options you can consider:\nIonic - http://ionicframework.com/\nRatchet - http://goratchet.com/\nFramework7 - https://framework7.io/\nOnsen UI - https://onsen.io/\nVuetify - https://vuetifyjs.com/en/\nMaterial-UI - http://www.material-ui.com/\n\nThe following are some options you should avoid. They look horrid:\njQuery Mobile - http://jquerymobile.com/\njQTouch - http://jqtouch.com/\n\nYou probably know this by now, but using others' code does not come without any cost. Some have very steep learning curves, others may require you to adopt a totally different style of programming, and certain ones may be hardly or badly documented. Worst of all, the code may be littered with bugs, and you certainly do not have the time to be fixing someone else's problems. Be sure to do a thorough evaluation before making a decision. Also, be warned that the teaching staff may be unfamiliar and thus unable to assist with problems encountered with external frameworks/libraries.\nMilestone 12: Justify your choice of framework/library by comparing it against others. Explain why the one you have chosen best fulfills your needs. Lastly, list down some (at least 5) of the mobile site design principles and which pages/screens demonstrate them.","user-experience#User Experience":"Another important part of your application is the user experience. Please note that user experience (UX) is different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Reddit and Craigslist still have a ton of daily active users despite their UI. 😵UX encompasses all aspects of the end-user's interaction with the application. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design.UX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas.\nMilestone 13: Describe 3 common workflows within your application. Explain why those workflows were chosen over alternatives with regards to improving the user's overall experience with your application.","google-analytics#Google Analytics":"You should be interested in the usage statistics of your application. Google Analytics is one popular way to collect insights. It can be set up easily — the following examples are using the analytics.js snippet, part of Universal Analytics. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services.If your application's interface is predominantly built with a JavaScript MVC framework, it is very likely that you have a Single-Page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 pushState API. Pages can still be tracked using Virtual Pageviews by executing the following code instead. Refer to https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications for more information.\nga('set', 'pageview', '/your_virtual_page_path');\nEvent Tracking can provide more fine-grained control over user actions. They can be used to track more events such as successful AJAX calls, buttons pressed, or even videos downloaded. The following code can be embedded in the click callback of a button that publishes a new blog post:\nga('send', 'event', 'button', 'click', 'publish');\nIn particular, Social Interaction Analytics can be used to track clicks on social buttons on your application, such as Like, Share or Tweet buttons. To learn how to track social network activity, check out https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions.Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that your application is being tracked:\nCheck the Network tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.\nUse \"Real-Time\" mode in the Analytics dashboard, which allows you to view activities on your application in near real-time.\nUse the official Google Analytics Debugger Chrome Extension (recommended)\n\nMore information and examples at https://developers.google.com/analytics/devguides/collection/analyticsjs/.\nMilestone 14: Embed Google Analytics or equivalent alternatives in your application and give us a screenshot of the report. Make sure you embed the tracker at least 48 hours before the submission deadline as updates for Google Analytics are reported once per day.","google-lighthouse#Google Lighthouse":"To guide you in building more performant and accessible progressive web apps, you can use Lighthouse to audit your app. This open-source auditing tool provides scores, individual metrics and feedback for four categories:\nProgressive Web App - To what extent your application can be considered a progressive web application.\nPerformance - Audits to measure your application's overall performance.\nAccessibility - Audits to improve the accessibility of your app. For example, ensuring all image elements should have an alt attribute.\nBest Practices - Advisory audits that provide recommendations to modernise your app and counter performance pitfalls.\nSEO - Audits to estimate how well your page is optimised for search engine results ranking.\n\nHere are some links to get you started on using Lighthouse:\nhttps://developers.google.com/web/tools/lighthouse/\nhttps://www.keycdn.com/blog/google-lighthouse/\nhttps://youtu.be/NoRYn6gOtVo\n\n\nMilestone 15: Achieve a score of at least 8/9 for the Progressive Web App category on mobile (automated checks only) and include the Lighthouse HTML report in your repository.","phase-4-coolness-factor#Phase 4: Coolness Factor":"It's very easy to be different, but very difficult to be better.– Jonathan Ive\nThis section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor.Several suggestions have been provided. We emphasise that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use.","social-integration-optional#Social Integration (Optional)":"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application.Facebook Social Plugins or Twitter for Websites creates a wall post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base.Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it.\nMilestone 16: Identify and integrate with social network(s) containing users in your target audience. State the social plugins you have used. Explain your choice of social network(s) and plugins. (Optional)","geolocation-optional#Geolocation (Optional)":"Geolocation services are becoming increasingly popular with people. Many services have made their applications location-aware to provide users with more relevant results.Fortunately, Geolocation is specified in HTML5, so non-native applications can also make use of this powerful feature. The Geolocation API consists of three simple functions you can use to make your application location-aware. When calling these functions, callbacks are passed to handle success and failure cases.\ngetCurrentPosition: Invokes a callback with the user's current position passed as the first parameter.\nwatchPosition: Does the same as getCurrentPosition. In addition, it starts monitoring the user's position and invokes the provided callback whenever it changes. The new position is passed to the callback as the first parameter.\nclearWatch: Stop monitoring user's position.\n\nThis code will continue to output the user's position as they walk about with their mobile device:\n\nShowing the user their coordinates may hardly be of any use to them at all. You could take it up one level by plotting it on a map and perhaps places of interest near them.For complete documentation of Geolocation API and Google Maps, visit https://w3c.github.io/geolocation-api/ and https://developers.google.com/maps/documentation/javascript/reference respectively. Mapbox is a nice alternative to plotting maps and allow more customisation of the map for more UI goodness.\nMilestone 17: Make use of the Geolocation API in your application. (Optional)","other-emerging-features-and-useful-resources#Other Emerging Features and Useful Resources":"There are a lot more cool and useful web APIs than what has been described in this document. For example, notification APIs let you send out notifications at the system level; device APIs allow you to interact with users' hardware directly, including detect changes in ambient light, check battery status or trigger vibration; imagine playing a web-based game, and when you set off some explosives, your phone vibrates!Here are some useful links:\nhttps://developer.mozilla.org/en-US/docs/Web/Reference/API\nhttps://developer.chrome.com/extensions/api_other\nhttp://caniuse.com\n\nYou can also check out this video by Google that recaps some of the things we covered above.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 17 milestones in total: two are optional (Milestones 16 and 17). That leaves you with 15 compulsory milestones. Milestone 4 is worth 3%, and Milestone 9 is worth 2%. The rest are worth 5% each.The bonus milestones and the optional milestones will contribute towards the remaining 30%.Overall, the mobile cloud application assignment is worth 20% of your final grade.","mode-of-submission#Mode of Submission":"The following will need to be both submitted to Coursemology (under \"Assignment 3 - Mobile Cloud Application\") and included in your GitHub repository:\nA write-up, group--milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your application is clearly stated in the write-up for the convenience of the teaching staff.\nA one/two-page pitch of your application, group--pitch.pdf, pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. Restrictions: no longer than 2 A4 sides.\n\nThe following will only need to be included in your GitHub repository:\nA README.md file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:\nThe list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment.\nThe URL to your application, i.e. your application must be accessible online somewhere.\nThe name of your application.\nSet-up instructions for local testing (good to have).\n\n\nThe code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits).\nLighthouse HTML report, group--lighthouse.html.\n\nNot following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted to the Coursemology Forum.Good luck and have fun!"}},"/cohorts/AY201516":{"title":"AY2015/16","data":{"":"","students#Students":""}},"/cohorts/AY201617":{"title":"AY2016/17","data":{"":"","students#Students":""}},"/cohorts/AY201718":{"title":"AY2017/18","data":{"":"","students#Students":""}},"/cohorts/AY201819":{"title":"AY2018/19","data":{"":"","students#Students":""}},"/cohorts/AY201920":{"title":"AY2019/20","data":{"":"","students#Students":""}},"/cohorts/AY202021":{"title":"AY2020/21","data":{"":"","students#Students":""}},"/cohorts/AY202122":{"title":"AY2021/22","data":{"":"","students#Students":""}},"/cohorts/AY202223":{"title":"AY2022/23","data":{"":"","students#Students":""}},"/cohorts/AY202324":{"title":"AY2023/24","data":{"":"","teaching-staff#Teaching Staff":"","students#Students":""}},"/coursework":{"title":"Coursework Overview","data":{"":"","assignment-1--product-design#Assignment 1 — Product Design":"In this assignment, you will put on your designer hat and learn how to design a software product, and come up with ideas, features and designs.","assignment-2--innovation-seminar#Assignment 2 — Innovation Seminar":"In order to build good and original applications, it is important to learn what other people have already done, and think critically about what is good and bad, as well as explore ways to improve and to generate new ideas. In addition, it is important to learn how to articulate one's ideas in a clear and succinct way both orally and in writing. The innovation seminar is designed to help students (i) identify innovative ideas; (ii) gain a better understanding of existing applications; (iii) learn how to present (or sell one's ideas) and (iv) learn how to articulate their ideas in writing.","assignment-3--artificial-intelligence-application#Assignment 3 — Artificial Intelligence Application":"The high-level goal of this assignment is to utilize generative AI (large language models (LLMs) in particular) to build a meaningful digital product and is able to persist users' data in the cloud. Your task is to demonstrate that you can build a web application that integrates with LLM services using well-designed prompts. You can use any backend language and/or framework you desire.","final-project#Final Project":"The Final Project is where you will showcase to the world your creativity and talents. There are no limits on what students can do for the final problem, though the expectation is that it must be a \"cool\" application or product"}},"/coursework/artificial-intelligence":{"title":"Assignment 3 — Artificial Intelligence","data":{"":"Item\tDue\tIssue date\t\tFinal submission","general-overview#General Overview":"In recent times, the landscape of software development has been profoundly reshaped by the remarkable strides made in artificial intelligence (AI) and, more specifically, generative AI and large language models (LLMs). These advancements have revolutionized how applications are conceived, designed, and experienced, opening up a realm of possibilities that were once confined to the realm of science fiction.At the heart of this transformation lie LLMs, such as GPT-3.5 and Claude, which stand as towering pillars of AI ingenuity. These models possess an unprecedented ability to comprehend and generate human language with impressive fluency and nuance. As a result, a new era of app development has emerged — one characterized by applications that are not merely tools, but intelligent and empathetic companions.The key merits of building apps that harness the power of LLMs include:\nNatural language understanding and generation: LLMs enable apps to not only understand user inputs with remarkable accuracy but also respond in a manner that mirrors human conversation. This grants users a level of interaction that transcends traditional interfaces, fostering more engaging and meaningful experiences.\nContextual awareness: These models possess an inherent understanding of context, allowing apps to tailor responses and actions based on the evolving conversation. This adaptability creates a sense of fluidity and responsiveness, akin to conversing with a knowledgeable friend.\nContent creation and enhancement: Apps can leverage LLMs to generate a wide array of content, from articles and reports to creative writing and marketing copy. This capability has the potential to revolutionize content-driven industries, amplifying efficiency and creativity.\nPersonalization: By tapping into the vast expanse of language data, apps can deliver personalized experiences that cater to individual preferences, needs, and emotions. This personal touch fosters a deeper sense of connection and resonance.\n\nRecent enhancements in AI have propelled LLMs to even greater heights. Techniques such as unsupervised fine-tuning and transfer learning have imbued these models with the ability to adapt to specific tasks and domains. Moreover, efforts to democratize AI have led to increased accessibility, empowering a broader spectrum of developers to harness the potential of these models.In this era of AI-powered app development, the boundaries of creativity are expanding. Whether it's a virtual personal assistant that understands nuanced voice commands, a language-learning app that adapts to each user's proficiency, or a content creation tool that seamlessly generates tailored content, the possibilities are limited only by imagination.The convergence of LLMs and app development is ushering in a new wave of innovation, redefining the way we interact with technology. As these models continue to evolve and mature, they will undoubtedly leave an indelible mark on the fabric of our digital experiences, enriching and enhancing our lives in ways that were once unfathomable.As a CS3216 student, you do not want to miss out the opportunity of a lifetime to be at the forefront of this new AI wave!P.S. In the spirit of exploring AIs/LLMs, parts of this assignment have been written with the assistance of LLMs 😉.","grading-and-admin#Grading and Admin":"This assignment can be done in groups of three or four students, which should have been formed by now. If you were unable to find yourself a group, you will be randomly assigned one.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of AI software development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.With that said, you have a lot of freedom to express your creativity. You are free to develop any idea you like. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition via email at least one week before the assignment is due. Your petition is subject to approval.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you will surprise us (pleasantly!) with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated.For example, LLMs can be used to easily add chatbots to any applications, but chatbots may not contribute as much value to certain domains. In fact, implementing features for the sake of doing so may work against you (and your grades) as these \"non-value add\" features detract users from the main purpose of your app.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The high-level goal of this assignment is to utilize generative AI (LLMs in particular) to build a meaningful digital product.You should approach this assignment with the mindset of an entrepreneur — you own every decision, and each decision you make (from design to engineering) will directly translate to the \"success\" of your product.Like all previous assignments, we designed milestones such that you can hopefully have a sense of direction on where we expect you to reach, but these milestones are broadly described so that you are not restricted on how to get there.In this assignment, your task is to demonstrate that you can design and implement a web application that utilizes the capabilities of LLMs, persist the users' data in the cloud and leverage the user's identity in a meaningful manner.You should utilize this assignment to showcase your product sense and engineering capabilities. You should also consolidate learnings from Assignment 1 (on Product Design) and Assignment 2 (on identifying innovations, and gaps in the market) to build a fuller product for this assignment.Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference.\nPlease read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of an AI\napplication. The grading scheme can be found at the end of this handout.","phase-0-introduction#Phase 0: Introduction":"","background#Background":"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions.Notably, technology giants such as Google, Microsoft, and Meta have fully embraced the AI \"arms race\" by entering the fray with their own formidable models and chatbots. A clear testament to this paradigm shift was the recurring theme of AI at Google I/O 2023, underscoring the pervasive influence of AI across industries. As these tech titans continue to dedicate resources to AI research and development, the integration of AI into their existing products is poised to unlock new dimensions of functionality and user experience.However, the transformative power of generative AI and LLMs is not confined to established players alone. A burgeoning ecosystem of AI startups has taken root, propelling the domain forward with innovative applications primarily in copywriting and customer support. These startups, leveraging the remarkable capabilities of generative AI, are reshaping how businesses communicate with their users to provide support, setting the stage for more personalized and efficient engagement. Case in point – 35% of Y Combinator's 2023 Summer batch were AI startups!As this new wave of apps, empowered by generative AI and LLMs, continues to unfold, the boundaries of innovation are rapidly expanding. The convergence of AI and human ingenuity is reshaping how we interact with technology, and the journey ahead is going to be really interesting. It's an exciting time to be a software engineer!","new-ai-landscape#New AI Landscape":"Within the generative AI startup landscape, there are a few common categories of products:\nText: Create and manipulate textual content. Tools that can draft articles, generate product descriptions, and even assist in creative writing. Examples: Copy.ai, Jasper, Hypotenuse AI.\nImage: Generate, modify, or enhance images. Tools for artists, designers, and photographers to generate artwork, edit photos, and visualize ideas. Examples: Midjourney, Runway ML, Pebblely, Adobe Photoshop.\nAudio: Compose music, generate sound effects, and even mimic specific voices.\nCode: Assist in software development tasks, including generating code snippets, offering coding suggestions, and even automating parts of the coding process. Examples: GitHub Copilot, Sourcegraph Cody.\nChatbot: Create conversational agents powered by generative AI. These chatbots can engage in natural conversations, answer queries, and provide support based on custom data. Examples: Mendable, Chatbase, Glean, AskMore. AskMore uses AI to conduct your user research so you get more feedback, faster, and in any language; an AI can even do your Assignment 1 milestone for you!\nDesign: Design your brand, logo, websites, presentations, and marketing collateral with a prompt. Examples: Framer AI, Designs.ai, Uizard, Tome.\nVideo: Manipulate and create video content. These tools can be used for video editing, special effects, and even automated video creation. Examples: Synthesia, Lumen5.\nData and Analytics: Analyze and generate datasets for testing and simulation purposes. Query data using natural language. Examples: Defog.\nAgents: Create virtual agents powered by generative AI. These agents can emulate human interactions and assist with tasks like scheduling, information retrieval, and more. Examples: Cognosys, Spell.\nGaming: Create dynamic game environments, generate levels, adapt game mechanics based on player behavior, NPCs can engage in personalized conversation with players.\n\nWhile most companies are part of the AI \"gold rush\", some prefer to follow the saying \"during a gold rush, sell shovels\". These \"shovel\" companies build services around LLMs, selling API access to LLMs and platforms to make it easier to build AI products:\nAPIs: Access to the LLMs hosted on the cloud. Examples: ChatGPT & GPT-3.5 by OpenAI, Claude by Antropic, Command by Cohere.\nToolchains: Simplify common LLM-related operations. Examples: LangSmith by LangChain, Cohere platform, Humanloop.\nVector databases: Stores data in a format that enables semantic information retrieval and long-term memory for LLMs. Examples: Supabase Vector, Pinecone, Weaviate.\n\n\n\nSource: https://www.antler.co/blog/generative-aiOther lists to find AI products:\n152 Fun AI Tools You've Never Heard Of\nAntler Gen-AI Landscape\nThere's An AI For That\n\n\nFor this assignment, you are required to use LLMs to build an AI software\nproduct as LLMs are easy to get started with, and require less server\nresources as compared to other forms of generative AI like image/audio\ngeneration.","phase-1-product-strategy#Phase 1: Product Strategy":"","idea-generation-problem-space#Idea Generation, Problem Space":"As an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than ChatGPT, TikTok, Netflix, and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil.Before you jump into developing the specifications of your application, a very important question to ask yourself is, \"Does my application solve any problem for the users?\". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user's life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the advocates that will help you spread the message about your application via word-of-mouth.When deciding on the problem space that you want to build for, it is also helpful to consider the market attractiveness. Is this an attractive market to enter? In order to assess a market's attractiveness, you can look into the market size, and its expected growth rate. The market attractiveness of the problem space you intend to tackle can guide you on the expected \"impact\" that your product can potentially bring.Guides on estimating the market size can be found all over the internet, and a useful one we found is https://pear.vc/market-sizing-guide/.\nDescribe the problem that your application solves.","competitive-landscape#Competitive Landscape":"Understanding the competitive landscape provides critical insights into existing market players, their offerings, strengths, and weaknesses. By comprehending competitors' strategies and customer perceptions, you can likely make informed decisions, anticipate challenges, and tailor your approach to effectively capture market share and deliver unique value to their target audience.The AI product ecosystem is very crowded, and new AI companies are emerging everyday. This statement will continue to be accurate for years to come.While AI has undoubtedly opened doors to a multitude of possibilities, it has also given rise to the phenomenon of \"thin wrapper\" products. These products often rely heavily on existing AI frameworks and APIs, offering minimal value beyond the underlying technology. In this assignment, you should not create such products as they can be easily cloned, leading to a lack of differentiation and diminished long-term viability.\n\nIn trying to understand the competitive landscape, you may find it useful to do a competitive analysis. Questions you may find useful include:\nIn the problem space that you are trying to \"enter\", is the market competitive?\nWill you be able to capture meaningful market share?\nHow much market share does each competitor have?\nWhat are the competitive advantages of your competitors?\n\n\nGood-to-know!You may consolidate your findings into a Competitive Profile Weighted Matrix to better gauge your competitors' products (Not graded).The competitive profile matrix is used commonly by strategic management to compare their firm with major players of the industry. In order to do a competitive profile matrix well, you need to identify what are the key success factors that determine your product's success in the market, and use these factors to compare your competition.\n\nSource: https://thinkinsights.net/strategy/competitive-profile-matrix/\n\nList down your 3 closest competitors and their pros and cons. Explain how your\nproduct is better.","product-capabilities#Product Capabilities":"Building a killer application requires more than just technical skills. In CS3216, you are expected to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment.You should choose an application that fully utilizes the potential of the chosen technology. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why using LLMs would best achieve your application's objectives.In addition to LLMs, it is a requirement that your application has user authentication, and makes use of user authentication meaningfully. From the assignment standpoint, we are looking for products that are more than one-page tools. From a product standpoint, having user authentication should increase your ability to provide personalization features, and forces you to consider the security aspect to protect your users' data. You should also therefore include reasons why having user authentication alongside LLMs can help you achieve your application's objectives.A common pitfall for engineering-focused students is their bias towards technologically-complex products, failing to consider how the product \"serves\" the problem in the process. The focus here is for you to consider your product's capabilities - does your product have the capabilities to succeed in your chosen problem space?\nAll teams should first create a post on Coursemology under the Assignment 3 topic containing the proposed product for the teaching team's approval before starting on the project!\n\nDescribe your application briefly. List its objectives and the associated\n(major) user stories.","moat#Moat":"In the context of product strategy, a \"moat\" refers to a sustainable competitive advantage that a product possesses, which helps protect its market share and profitability from competitors. Just like a moat around a medieval castle provides protection and makes it difficult for enemies to breach the walls, a business \"moat\" creates barriers that deter competitors from easily entering the market or replicating the company's success.A moat can take various forms, including (but not limited to):\nBrand\nTechnological Innovation\nEconomies of Scale\nInvestor Confidence\nEthics and Responsible AI\nCustomisation and Personalisation\n\nFor example, one of Google's moat is its advantage of scale. Google Search continues to dominate the search engine market.\n\nSource: https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/One of Apple's moat is its integrated ecosystem of products. Apple's products, from iPhone, Macs, and services like iCloud, are tightly integrated into a single ecosystem, creating a seamless user experience that is difficult for competitors to match. This tight integration also makes it difficult for consumers to switch out of Apple.Disney's intellectual property and content library forms a significant moat. Disney owns the intellectual property of various iconic characters, like Mickey Mouse, to beloved franchises like Star Wars and Marvel. This competitive advantage cannot be easily eroded.Closer to AI products, ChatGPT has multiple \"moats\", including:\nFirst-mover advantage: Being the first-mover, it has gained a strong \"brand recognition\" as consumers remember and trust it as the pioneering product - it is challenging for competitors and later entrants to establish the same level of recognition.\nDeveloper-friendly APIs: OpenAI offers APIs that allow developers to easily integrate ChatGPT into their applications, products, or services. This developer-friendly approach facilitates the use of ChatGPT's capabilities without requiring extensive AI expertise.\nDemand scale: The widespread use of ChatGPT and the large volumes of interaction contribute to its data collection and training improvements, enhancing the model's performance over time.\n\nFor startups especially in the AI sector, establishing a moat is essential to stand out in a rapidly evolving landscape.\nWhat's your secret sauce / moat? Elaborate on your strategy to prevent\ncompetitors and big players from cloning your app and its features?","phase-2-go-to-market#Phase 2: Go-To-Market":"","product-lifecycle--product-market-fit#Product Lifecycle & Product-Market Fit":"The product life cycle, a term commonly used by marketing professionals and management, describes the stages of a product when it is first introduced to the market, up to when the product is sunsetted. In this assignment, your product is positioned in the introduction stage, a period which demands your proactive engagement with prospective users in your target market to persuade them to become your first-time users.While the primary goal of the introduction stage is not necessarily to achieve an optimal product-market fit, it does lay the foundation for eventually reaching that fit in the growth stage and beyond.During the introduction stage, the focus is more on creating awareness, generating interest, and attracting early adopters. The product may not have achieved its perfect fit with the market at this point, but it is a crucial period for collecting feedback, understanding user preferences, and making initial adjustments to move closer to that ideal fit.Therefore, a user acquisition plan should allow you to reach out to more users in your target market segment.Your user acquisition plan might also influence the features that you include in your application. For example, you could think of ways to provide motivation for users to share your application with their friends; you could design features such that while individual users may derive some value using your application, it is also in their interest to promote your application (e.g. rewarding users for referrals).Illuminate the strategies, channels, and tactics you intend to employ to captivate and convert potential users into loyal patrons. As you delve into this milestone, articulate how your understanding of your target users informs your approach and elucidate the measures you will implement to foster a compelling product-market fit.Note: You should approach this milestone by describing your strategy or plan on how you intend to \"bring\" this product to market, utilizing all resources you have.\nDescribe your target users. Explain how you plan to acquire your target users.","scoping#Scoping":"With the key problem and target users at the forefront of your mind, it is timely to discuss what features should go into the product submitted for Assignment 3.You would realize that time-to-submission is extremely limited. Just as real companies must navigate the constraints of deadlines and customer expectations, you will be required to optimize the use of your time in Assignment 3 to deliver a simple, lovable and complete Minimum Viable Product (MVP).In this pursuit, the art of scoping takes center stage.Scoping is the process of carefully selecting specific features to be included. In scoping and selecting features, justification is important: this requires a keen understanding of user needs, potential impact, and the overarching project goals. In this process, some questions you may find useful include:\nUser Experience: How does each proposed feature address a specific user pain point or problem? What value does it bring to the user experience or overall product? (Not graded)\nResource: What are the resource implications (time, effort, cost) of including each feature? Are there technical limitations or dependencies that need to be considered? (Not graded)\nUser Impact: How many users will benefit from each feature? Is the feature essential for a significant portion of the user base, or is it a niche requirement? (Not graded)\nCompetitive Advantage: Will the inclusion of a particular feature give the product a competitive edge in the market? How does it compare to what similar products are offering? (Not graded)\n\nGiven that you are introducing a new product, the initial scope is extremely important. By having a first set of features, you can develop the MVP, release it to users, gather feedback, and thereafter iteratively refine the product. This process aligns seamlessly with the agile methodology, where \"agility\" empowers teams to respond swiftly to changing market dynamics and evolving user preferences.As you set out to prioritize features for the MVP, it is important to carry out a delicate balancing act with time. The features chosen must align harmoniously with your MVP, so that the core functionalities are addressed comprehensively. Yet, you must simultaneously stay keenly aware of time constraints.Therefore, a key part of scoping also includes planning and estimation. You can use this assignment as a chance to grow in your ability to dissect a project into actionable tasks, foresee potential challenges, allocate resources judiciously, and estimate timeframes. These skills enable project managers, product leaders, and engineers to craft realistic timelines, allocate resources optimally, and identify potential bottlenecks before they impede progress.You can consider dividing the 3-4 weeks into sprints, and use one sprint to better estimate the workload required for the next. That said, since this is a short project, strictly adhering to the sprints may impede your success. It is up to you to decide what works best for your MVP.\nList down the features that should go into the MVP (your assignment\ndeliverable). How did you decide on them? What are future features and\nexpansions you can think of?","business-model#Business Model":"In any problem, a real consideration is whether the investment in the product will be \"successful\". Few things impact the \"success\" of your product as much as pricing.The determinant of \"success\" differs as the product enters different stages of growth. Most of the time, we want to maximize the profits of a product. However, there are times when a company would want to instead maximize market share, or number of users.Depending on your goals, your pricing strategy to achieve \"success\" differs.Generally, there are three ways to price:\nPricing based on costs\nHow much does it cost to produce and maintain your product?\nWhat is the profit margin that you are aiming to achieve?\n\n\nPricing based on value\nWhat benefits does this product provide to its users?\nHow much \"value\" does this provide to users?\n\n\nPricing based on competition\nHow much do competitors price their products for?\nHow does your product compare?\n\n\n\nComing up with a monetisation strategy is useful from the get-go. It allows you to evaluate what is the most suitable price for which stage of product you are at. For example, a consideration for a product in the early stage is market share, and also how long would it take to break even.In the digital product market today, there are multitude of ways to price. Here are some blog articles we felt were useful to helping you ideate on your pricing strategy:\nThe Ultimate Guide To Saas Pricing Models, Strategies & Psychological Hacks considers seven of the most common way digital SaaS products are priced today.\nMapping the Generative AI landscape's section on \"Looking into the future—Gen-AI revenue models\".\n\nNote: It is possible that the currency of \"success\" may not always be the dollar. You are not restricted to build a product that has the dollar as its currency of success. If not the dollar, what are some other metrics you can use to consider? E.g. If you build a social chat bot, then a key metric to determine success could be the volume of messages.\nCome up with a monetization and pricing strategy (e.g. tiers and features).\nExplain why you think this pricing strategy is suitable for your target users\nand problem space. Explain the factors that influenced your pricing decisions,\nsuch as production costs, perceived value, competition, etc. It would be\nuseful here to consider possible revenue streams of your product.","phase-3-artificial-intelligence-integration#Phase 3: Artificial Intelligence Integration":"","introduction-to-large-language-models#Introduction to Large Language Models":"LLMs are a type of artificial intelligence technology designed to understand and generate human-like text based on the input they receive (a prompt). These models are built using deep learning techniques, particularly a type of neural network architecture called transformers.Transformers are a class of deep learning models that have revolutionized natural language processing (NLP) tasks. They excel at handling sequential data, such as text, and have become the foundation for many state-of-the-art language models. One of the most well-known and influential transformer architectures is the Generative Pre-trained Transformer (GPT), developed by OpenAI.LLMs like GPT-3 (the third iteration of the GPT series) have billions of parameters, which are tunable components that the model learns from massive amounts of text data. These parameters allow the model to capture complex patterns and relationships within language, enabling it to perform a wide range of language-related tasks, such as:\nText generation: LLMs can generate coherent and contextually relevant text based on a given prompt or seed text.\nLanguage translation: They can translate text from one language to another.\nSummarization: LLMs can produce concise summaries of longer pieces of text.\nQuestion answering: They can answer questions by extracting relevant information from a given text.\nText classification: LLMs can classify text into predefined categories or labels.\nSentiment analysis: They can determine the emotional tone or sentiment expressed in a piece of text.\nChatbots and conversational agents: LLMs can simulate human-like conversations and provide interactive responses.\nCode generation: They can generate code snippets based on high-level descriptions.\n\nThe training process for these models involves exposing them to vast amounts of text data and having them predict the next word or token in a sequence. This process enables the models to learn grammar, syntax, semantics, and even some aspects of world knowledge from the data.LLMs are revolutionary as compared to traditional machine learning techniques because they can/are:\nPerform more diverse and complex tasks: Traditional machine learning models are typically limited to performing simple tasks, such as classification or regression. LLMs, on the other hand, can perform more complex tasks, such as text generation, translation, question answering, all through a single and flexible natural language prompt.\nReadily available and accessible: Many LLMs are made available through APIs, making their capabilities accessible to a broader range of developers without requiring much experience / deep expertise in machine learning. These diverse capabilities can be accessed through natural language, no learning of new syntax or documentation needed.\nTrained on a vast scale of data: Traditional machine learning models are typically trained on a small dataset of labeled data. This can be limiting, as it may not be representative of the real world. LLMs, on the other hand, can be trained on a massive dataset of unlabeled data. This allows them to learn the statistical relationships between words and phrases without being explicitly told what they are.\nFew-shot and zero-shot learning: LLMs can perform new tasks with minimal examples or even zero examples by leveraging their pre-trained knowledge and generalizing to new tasks or categories without the need for extensive task-specific training data. This capability is particularly valuable in scenarios where acquiring labeled training data is expensive, time-consuming, or impractical, whereas traditional machine learning often requires a substantial amount of labeled data for each task.\nUnderstanding language: LLMs can understand nuances in languages, including idioms, metaphors, and cultural references, which is a challenging task for traditional models.\n\nResources:\nA Compact Guide to Large Language Models by Databricks.\nHow ChatGPT works by Sau Sheong Chang, a Singaporean tech industry veteran and leader. This article looks under the hood to understand the basic concepts behind ChatGPT. He has kindly provided CS3216 students with free access to this article.\n\n\nExplain how you are using LLMs in your product and why LLMs are a good\napproach to meet the product's objectives.","prompt-engineeringdesign#Prompt Engineering/Design":"A prompt is a specific input or instruction given to a language model to guide its behavior and generate desired output. In the context of LLMs, such as GPT-3, a prompt serves as the initial text or question that you provide to the model to elicit a response or generate text based on that input.Prompts can take various forms depending on the task you want the LLM to perform. They can be as short as a single sentence or as long as a paragraph. The key is to provide clear and contextually relevant instructions that guide the model toward producing the desired output.As prompts are the main interface between users and the LLMs, the importance of writing a good prompt cannot be overstated. The choice of words, phrasing, and clarity of the instruction can significantly influence the quality and relevance of the generated output.","elements-of-a-prompt#Elements of a Prompt":"A prompt typically includes several elements that help guide the response or output generated by the LLM. Here are some common elements of a prompt:\nTopic/subject: The topic or theme of the prompt provides a broad area of focus for the response. For example, a prompt might ask a language model to generate text about a specific topic like \"climate change\" or \"artificial intelligence.\"\nTask/goal/purpose: The task or goal of the prompt specifies what kind of response is desired. Is it to persuade, inform, entertain or something else? For example, a prompt might ask a language model to generate a persuasive essay on a particular topic or to write a short story that meets certain criteria.\nTarget audience / perspective: The target audience of the prompt identifies the intended audience for the response. For example, a prompt might ask a language model to generate text that is suitable for a general audience or for a specific age group. For example, \"Respond as if you are a teacher providing advice to a student.\"\nTone/style: The tone or style of the prompt can influence the tone or style of the response. For example, a prompt might ask a language model to generate text that is formal, informal, humorous, or serious.\nContext / background information: Providing relevant background information helps set the stage for an informed response.\nLength/format: The length or word count of the prompt can specify the amount of content that is expected in the response. For example, a prompt might ask a language model to generate a response that is between 500 and 1000 words.\nSpecific instructions/guidelines: The prompt may include specific instructions or guidelines that must be followed in the response. For example, a prompt might ask a language model to generate text that includes specific keywords or phrases, or that adheres to a particular format or structure. For example, \"List 3 reasons why...\"\n\nBy including these elements, a prompt can help guide the response generated by a language model or AI system, while also providing a degree of flexibility and creativity in the output. The most effective prompts will combine several of these elements to provide enough direction without overly restricting the response. Vague or overly broad prompts can lead to unfocused and inconsistent responses.Prompt engineering is a broad topic and cannot be covered sufficiently within an assignment writeup. Here are some recommended resources for learning more about prompt engineering:\nBest practices for prompt engineering with OpenAI API by OpenAI. One-pager that goes straight to the point, with examples.\nGPT best practices by OpenAI. A longer list of techniques and best practices.\nChatGPT Prompt Engineering for Developers by DeepLearning.AI. This video-based course takes around an hour to complete and Yangshun has written a summary of the important points: Part 1 & Part 2.\nPrompt Engineering Guide by DAIR.AI. Well-rounded useful guide that covers Prompt Engineering and various topics related to LLMs.\nPrompt Engineering Guide by Brex. Tips and tricks for working with LLMs like OpenAI's GPT-4.\nPrompt Engineering by Cohere.\n\nPrompt engineering is just one of the concepts relevant to using LLMs effectively. Some other important concepts include:","tokenization#Tokenization":"Tokens in the context of LLMs refer to the individual elements or units of language that the model processes and generates. These tokens can be subwords, words, or characters, and they are the basic building blocks of the language that the model understands and generates.For example, in a language model that uses subwords as tokens, each subword would correspond to a specific part of a word, such as a prefix, suffix, or root. The model would then use these subwords to generate words and sentences by combining them in different ways.In contrast, a language model that uses words as tokens would process and generate complete words, rather than subwords. And a model that uses characters as tokens would work with individual characters, such as letters or digits, to generate text.The choice of token granularity can affect the performance of the language model, as well as the type of tasks it can be used for. For example, a model that uses subwords as tokens may be better at generating words and sentences that contain prefixes and suffixes, while a model that uses words as tokens may be better at generating complete sentences and paragraphs.It's worth noting that the tokenization of language can be a complex process, and different models may use different tokenization strategies depending on the specific task and the type of language they are processing.Both input and output tokens make up the total number of tokens in an API call, which affects:\nHow much the API costs, as LLM providers usually charge per token.\nHow long the API call takes, as more time is needed if there are more input tokens to process and output tokens to generate.\nThe functionality of the API call, since the total tokens must remain within the model's maximum threshold (e.g. 4096 tokens for gpt-3.5-turbo).\n\nFurther reading on tokens:\nGPT - OpenAI API\nTokens | Cohere","fine-tuning#Fine-tuning":"One of the techniques to improve prompt design is called \"few-shot prompting\", which is to provide examples within the prompt. With fine-tuning, examples (training data) can be provided to a model outside of the prompts and the model is being \"fine-tuned\". Prompts to a fine-tuned model will make use of the training data when generating output. These fine-tuned modules result in:\nBetter results than prompt design.\nAbility to train on more examples than can fit in a prompt.\nToken savings due to shorter prompts.\nLower latency requests as there are fewer tokens to process.\n\nFine-tuning is an improvement over few-shot learning as many more examples can be provided and don't count towards prompt tokens. Once a model has been fine-tuned, you won't need to provide as many examples in the prompt. This results in faster and cheaper requests.In general, fine-tuning involves the following steps:\nPrepare and upload training data.\nTrain a new fine-tuned model.\nUse your fine-tuned model.\n\nFine-tuning is specific to models and not every LLM API offers the functionality. As of Aug 2023, OpenAI allows fine-tuning for gpt-3.5-turbo.Further reading on fine-tuning:\nFine-tuning - OpenAI API\nGPT-3.5 Fine Tuning: Unlock the True Potential with This Comprehensive Guide\nThe Challenges, Costs, and Considerations of Building or Fine-Tuning an LLM\n\n\nGive two to three examples of prompts you used and explain how you designed\nthem to be effective. What techniques did you use to improve the effectiveness\nof your prompts?","using-the-right-model-for-the-job#Using the Right Model for the Job":"Not all models are built equally. Each model has its own advantages, limitations, and customization parameters. The key is to find the most suitable model for your application.","popular-llms-and-providers#Popular LLMs and Providers":"OpenAI: OpenAI is one of the pioneers in the field of LLMs and needs no further introduction. They have released a number of LLMs, including GPT-3 and GPT-4. OpenAI's LLMs are known for their large size and their ability to generate realistic and creative text.\nCommand by Cohere: Cohere develops an LLM called Command and their platform offers a huge range of services that can be viewed as a batteries-included version of OpenAI API.\nLlama 2 by Meta AI: Open source LLM by Meta that's free to use. There's no official hosted API available so if you want to use it you will need to host it yourself. Check out Web LLM for a version that runs in the browser.\nHugging Face: Hugging Face is a community-driven platform for LLMs. They provide a number of tools and resources for developers who want to use LLMs. Hugging Face's LLMs are known for their diversity and their availability.\nBard by Google AI: While ChatGPT's data is only up till September 2021 (using GPT-3.5), Bard which is a chatbot by Google uses PaLM 2 and is based on real-time current events pulled from Google Search. However, Bard API access is still in beta and requires a Google Cloud project.\nClaude by Anthropic: Claude is an LLM developed by Anthropic, a company that is focused on developing safe and beneficial artificial intelligence. As of Aug 2023, the API is not yet generally available.\n\nVercel AI Playground allows you to compare output of different models by the various providers using the same prompt. Super handy!When choosing LLMs and providers, it is important to consider your specific needs and requirements. Some factors to consider include the type and size of the training data, the type of applications you want to build, context window size (maximum tokens allowed), and the price per token.Certain LLMs are more suited for certain tasks from specific domains. If your app is dealing with code like GitHub Co-pilot, you may find that Code Llama and WizardCoder is more suited for the job. If you require real time data/knowledge for your output, GPT-3.5 might not be the best choice because the data is not updated since September 2021. It's important to select the model that is the most suitable for your product!\nChances are, the LLM API you're using isn't free. However, the costs should be quite low for an assignment's usage volume. If you're facing difficulties gaining access to the APIs, please email the teaching staff.","model-settings#Model Settings":"Beyond prompt design, most LLM models also provide the following settings to allow for more control over the output:\nMax tokens: The maximum number of tokens to generate.\nTemperature: Temperature is a hyperparameter in language models that controls the creativity and diversity of the generated text. A high temperature means that the model is less confident in its predictions, and will therefore generate text that is more creative and diverse, but may also be less accurate and random. A low temperature means that the model is more confident in its predictions, and will therefore generate text that is more accurate and consistent. The best temperature setting will depend on the specific application. For example, if you are using a language model to generate text for a news article, you would want to use a low temperature to ensure that the output is factually accurate and grammatically correct. However, if you are using a language model to generate creative text, such as poetry or fiction, you might want to use a higher temperature to allow for more creativity and diversity.\nTop-P: Top-P limits the probability mass that is considered when sampling. For example, if you set Top-P to 0.75, then the model will only consider tokens whose probability is at least 75%. This can help to reduce the randomness of the output and make it more likely that the model will generate text that is relevant to the prompt. It is recommended to customize either temperature or Top-P, not both.\nFrequency/presence penalties: Coefficients that penalize tokens based on how much / whether they exist in the text to reduce the likelihood that they show up again.\n\n\nJustify your choice of LLM and provider by comparing it against at least two\nalternatives. Explain why the one you have chosen best fulfills your needs.\nElaborate on your choice of model parameters.\nEvaluating effectivenessOnce the LLM integrations are up and running, you may want to set up an evaluation pipeline to sanity check whether your fine-tuning or prompt engineering efforts are working across multiple test examples. There are two broad classes of Natural Language Generation Metrics:\nN-gram-based metrics measure word or token overlap against the reference. E.g., BLEU, METEOR.\nModel-based metrics use a neural model to measure similarity against the reference. E.g., BLEURT, BERTScore.\n\nN-gram-based metrics are more appropriate when you expect precise wording, and model-based typically allows for more open-ended generation. Different metrics tell us about different aspects of natural language generation and there's typically no single correct evaluation metric. However, there are metrics traditionally associated with NLP tasks. E.g., BLEU for Translation and ROUGE for Summarisation. It's safe enough to use the default metric for your specific task as there should be available implementations in your preferred language. Note that it's possible to have multiple correct references for a single test sentence.Further Reading:\nNeural Language Generation, Chris Manning, Stanford: Slides 51 to 65\nA Comprehensive Assessment of Dialog Evaluation Metrics\nHolistic Evaluation of Language Models, Percy Liang et al. (2023), Stanford NLP Group\nInstruction Tuning for Large Language Models: A Survey","other-resources#Other Resources":"","courses-and-tutorials#Courses and Tutorials":"DeepLearning.AI by Andrew Ng provides a series of short practical-focused courses on generative AI if you prefer video lesson style learning that includes some hands-on exercises using Jupyter Notebook.\nCreating a private QA over local documents application using Llama-2 by Sau Sheong Chang: How to create a private QA application that runs on your laptop for your answering questions over your documents.","tools#Tools":"Using LLMs comes with some inconveniences such as unstructured output, preserving context and memory across completions, and a huge amount of boilerplate code. Here are some tools that can help during development with LLMs:\nLangChain: LangChain is a powerful tool that can be used to build a wide variety of applications that use LLMs. It has abstractions to achieve common LLM operations quickly such as loading/transforming/storing data, sequential operations on data, remembering previous interactions, and acting on LLM output.\nVercel AI SDK: An open source library designed to help developers build AI-powered user interfaces in JavaScript and TypeScript. It makes building streaming-based AI chat user interfaces effortless.\nTypeChat: TypeChat helps get well-typed and structured responses from LLMs without the need to parse the output yourself.\nWeb LLM: This project brings large-language model and LLM-based chatbot to web browsers, which makes using LLMs free! However, there might be certain technical requirements for devices.\nLlamaIndex: A \"data framework\" to help you build LLM apps by providing data connectors to ingest existing data sources and formats (APIs, PDFs, docs, SQL), retrieval/query interfaces over your data, and more.\n\nThe following platforms improve the experience of using LLMs in production. They might be overkill for your assignment/projects but mentioned here for your consideration:\nLangSmith: By the creators of LangChain, LangSmith helps you visualize, debug, and improve your LLM apps.\nHumanloop: A platform that empowers teams to build reliable and performant AI systems by providing monitoring, A/B testing, a collaborative prompt workspace, private data storage, and fine-tuning.","open-source-llms#Open Source LLMs":"Platforms like Hugging Face offer support for popular open source language models born out of community efforts to recreate existing proprietary LLMs provided by miscellaneous companies via APIs or software. These open source LLMs are easily fine-tunable and lightweight. While not as powerful as commercially available LLMs, they offer a free, discounted, yet surprisingly expressive experience in terms of text generation and reasoning capabilities. Here are a few popular models and associated guides to fine-tune them:\nModel\tResources\tLlama 2\tGitHub, Fine-tuning guide, Paper\tVicuna-13B\tGitHub, Fine-tuning guide\tAlpaca\tGitHub, Fine-tuning guide\tMPT-7B\tGitHub, Fine-tuning guide, Documentation\tGPT-J-6B\tGitHub, Fine-tuning guide 1, Fine-tuning guide 2\nIt is recommended that users interested in fine-tuning such models have access high performance compute clusters with available GPUs (suggestions: NVIDIA RTX 3090, NVIDIA RTX4090, NVIDIA H100 Tensor Core, etc). Alternatively, you can look into online cloud compute platforms like Lambda Labs, Paperspace, or Google Colab Pro/Pro+.You can also apply for free cloud credits through Google Cloud Platform's Research and Education program (however, no guarantees of definitely getting it since it's application-based, but try your luck!).","phase-4-design#Phase 4: Design":"Design here refers to many things: branding, technology/engineering, and the product.","branding-your-product#Branding your Product":"Every product has a name. This name is how people find, refer, and remember the product. Most products have logos. This logo is how people recognize and associate relationships with the product. Names, logos, color schemes, fonts, etc. of a product or company collectively form a persona to which people can relate and associate. This persona is exactly a brand.A brand encompasses the essence of a company: its values, promises, and the emotional connection it establishes with its audience. With the vast number of companies and products in today's competitive business landscape, these sentiments are almost always never accidental, rather carefully crafted and tested over hundreds of iterations.Think McDonald's golden arches. It transcends language barriers and cultural differences. They embody the company's promise of consistency, quick service, and affordability. When people see those golden arches, they immediately associate them with familiar tastes, convenience, and an entire spectrum of shared experiences. You yourself would probably remember memories of your first date, gathering with friends, or late night supper when crunching due assignments. In this aspect, McDonald's golden arches are more than just a logo; they capture feelings, stories, and memories.Some brands even become linguistic cues. When you want to find out about something, you'd google it. If you missed the bus and train, you'd grab to the office. If you want to express your frustration with Ruby on Rails or Angular, you'd tweet about it. Oh, look; this place is so picturesque, it's instagrammable! And the example goes even deeper with cultural contexts. In Indonesia, people colloquially refer to laundry detergents as \"rinso\" rather than the dictionary translation deterjen pakaian, or baby diapers as \"pampers\" rather than popok bayi. In Singapore, people colloquially refer to instant noodles as \"maggi mee\", or recently, video conferencing as \"zoom calls\". The list goes on: velcros (hook-and-loop fasteners), aspirin (acetylsalicylic acid), xeroxing (photocopying), scotch tapes (adhesive tapes), post-it notes (sticky notes), band-aids (bandages), q-tips (cotton buds), etc. Notably, the brands that form these verbs or nouns are often recognized as the standard of their respective product categories. This is the power of a good brand. They not only evoke feelings and trust, but also bring revenues.These reasons are why it is important to build a good brand. Even choosing names is often tedious. Think about:\nLength of the name. Will it be too hard to remember?\nReproducibility of the name by spelling. If A were to hear B say \"I use Whatchamacallit to build this website,\" would A be able to type it and find it on search engines?\nDomain name availability. Some may even get clever with domain hacks, e.g., del.icio.us, but can it be easily shared verbally?\nSocial handles availability. Is @mynextstartup available on major social media sites, e.g., Instagram, X, Threads, TikTok, etc.? If you're not quick to claim the handle, adversaries may claim it first, and you might have to either buy it from them, or file a dispute.\nSimilarities with other brands. Could people think your product Zwitter is just a cheap clone of Twitter?\nCultural references. Did you know the toothpaste brand Darlie was originally known as Darkie? It was changed in 1989 due to \"darky\" or \"darkie\" being considered a racial slur.\nPossibility of being caught in web filters. In April 1998, \"shitakemushrooms.com\" was blocked by DNS filters because it contained the word \"shit\". This is known as the Scunthorpe problem. If you want to see more examples, check out the article \"30 Unintentionally Inappropriate Domain Names\".\n\nThese are just a fraction of factors that one should think about when choosing names. Different factors apply when you are choosing logos and color schemes. Think about how they'd look if they are printed on different materials. Do the logos have any resemblance to a potentially derogatory subject, seen from any angles? How easy is it to be reproduced by hand? Can it be a vector (so that it is scalable on different media)? How'd it look if it was black-and-white, or against a busy background? Think about Apple's first logo.It always pays off to build a relatively strong brand identity when you enter the market, because rebrands can be a nightmare. Recently, Twitter was renamed to X, and the platform is visioned to become a superapp. In 2020, ZEIT was renamed to Vercel. In 2021, The Facebook Company was renamed to Meta. In every rebrand, companies (usually) pay the price: mockery, money to pay for taken domain names, and customer adaptation. Tropicana was probably the best known example of a bad redesign. Notably, not all rebrands are terrible. Some may even resurrect a dying business. The challenge comes from the fact that there is an existing identity as a comparison, and transition introduces major friction.There are many logo generators out there, but after reading this far, you'd probably realize that a good brand makes for a good logo; it is not standalone, it is an integral part of a brand. To make a good brand identity (name, logo, fonts, color schemes, etc.), you should reflect on the persona that you wish your company or product to convey to your users, then work forwards. Use Pinterest, Dribbble, Midjourney, Coolors, Google Fonts, or even the many logo generators to brainstorm for inspirations. Then choose a comfortable medium to sketch, e.g., pen and paper, Figma, Microsoft Paint, etc., to stitch everything together. Test your brand identity prototypes with your friends and family, and see if they can guess what app you're building just by seeing your logo.\nNotably, a good brand identity requires tons of research and testing. Schools\nof design talk about branding for one whole semester. Due to the density of\nthis assignment, you are expected to build a decent enough brand identity,\ni.e., with proper considerations. You shouldn't dwell too long on this\nmilestone. It is maybe even best to first build your MVP with a codename, only\nafter then collaboratively think about the best logo to slap on your app. If\nyou did well enough, you may even earn brownie points for coolness!\n\nCome up with a product name and create an attractive logo. Explain the meaning\nbehind the name, the alternatives you've considered, and why this was chosen.","technology-stack#Technology Stack":"A functional software product is backed by a multitude of technologies, each supporting the attainment of the business logic. Together, these technologies are collectively described as a technology stack, or tech stack. Notably, your users wouldn't really know about the inner machinations of your software. However, choosing the wrong tech stack could backfire your development in the long run.One factor that most people consider is popularity. It's hard to keep track of the latest libraries and frameworks because they keep coming. Newer technologies usually get the most attention because they attempt to fix the irks of the current \"standard\" technologies. For example, Svelte syntax is easier to read than React, Deno has a better package management system than Node, or esbuild is astronomically faster than webpack. Notably, the newer the technologies are, the lesser the community support will be compared to the ones that have been around for the longest time. Some may not even be battle-tested enough for all edge use cases. Some gained headlines for a while, then fell short and inevitably forgotten. You can see how Stack Overflow compared how some web technologies stood up to their hype in their 2023 survey here.While it may be tempting to live on the edge and try exciting new technologies, one should be prudent with their choice. Consider the following:\nYour team's familiarity with the technologies.\nHow the technologies scale with your users and (potentially increasing) business logic.\nThe maturity of the ecosystem around the technologies; can you find help if you face a mysterious bug?\nThe credentials of the backers of the technologies; will the maintainer abandon this framework in near future?\nYour reliance on the technology; if you decide to pivot in the future, how easy or difficult will it be? Choosing a tech stack is no different than choosing the right vendor for outsourcing a tender in your company.\n\nGenerally, it's better to just choose one with which most team members are familiar, and start building and failing fast. Of course with any advice, exercise your own wisdom. The Browser Company decided to build the Windows version of Arc Browser by extending the (as at time of writing, rather barebone) Swift compiler for Windows to support SwiftUI, instead of going with the most obvious choice of Electron. You can watch the CTO talk about it here, and see why they chose to challenge the status quo for their use case.\nRemember that your users won't probably care about your tech stack. They won't know if your codebase hails a tribute to Robert C. Martin's Clean Architecture or looks like rotten spaghetti. With every choice is a list of trade-offs. What you compromise today is what you'll pay tomorrow. This is what is known as a technical debt.\nSome of the stacks that you may wish to consider revolve around the following domains.\nFront end: This is what your users will interface with. Examples: React, Vue.js, Next.js, Svelte, etc.\nStyling: These libraries make it easier to include UI elements, e.g., buttons, menus, cards, etc., in your app. Different libraries have different customisation flexibilities. Depending on your design language, you might not even need any styling libraries and just build everything from scratch! Examples: Tailwind CSS/UI, Bootstrap, Bulma, MUI, etc.\nData persistence: SQL or NoSQL? SQL is used to manage relational databases, e.g., MySQL, PostgreSQL, etc. NoSQL is essentially anything that isn't SQL, e.g., MongoDB, Redis, etc. You may even use a higher level database systems like Firebase Realtime Database or Cloud Firestore, Supabase, or couple your choice of database system with GraphQL for easier queries. Remember that the choice of database system and how it's structured almost directly dictates the scalability and performance of your app. Depending on your schema, it may make it hard to represent some models, or slow to query. Migrations aren't always reversible and are almost always painful. See below note.\nAuthentication: Most apps will have some sort of user account system. OAuth is a great choice due to ease of integration and ease of use without the need for entering emails and passwords. Some sensitive apps may choose to roll their own authentication system (think banks, government systems). Self-rolling authentication gives you more control, but outsourcing it to a (reputable) third-party service may give you assurance of security because it's probably been battle-tested and regularly maintained. Examples: self-rolled, Firebase Authentication, Auth0, etc.\nBack end server: This is where most, if not all, of your business logic will live. Think of the front end client as the shell, and back end server as the core of your app. This server communicates with everyone (third-party APIs, database systems, caching servers, etc.) and serves anything that the client needs. Examples: Go, Django, Ruby on Rails, Express, etc.\nHosting: After everything is built on your local computer, you need to deploy it somewhere so that your software is available to everyone. You'd engage with these platforms to deploy your app. Some are as simple as providing you with a CDN to host your static files, e.g., Cloudflare, Netlify, GitHub Pages. Some are a little more batteries-included, providing you with cloud functions, authentication services, and database systems, e.g., Vercel, Firebase. Some literally give you only a bunch of remote servers, e.g., Google Cloud, Amazon Web Services, etc. Notably, it is a trade-off between complexity, flexibility, and cost.\nContinuous integration, delivery, and deployment platforms: These platforms help you prepare your code for release (continuous integration) and deploy to production (continuous deployment), all in an automated fashion to increase productivity. They can also help your team spot errors asynchronously, and ensure consistency when deploying. Depending on your use case, you might or might not benefit from one. Examples: CircleCI, Travis CI, GitHub Actions, etc.\nMiscellaneous services: Your app may need some domain-specific technologies, e.g., LLM-backed services (see below), maps (Google Maps Platform, HERE WeGo, OpenStreetMap, etc.), search engines (Algolia, Elasticsearch, etc.), computer vision (OpenCV, TensorFlow Graphics, etc.), etc. Spend some time to take stock of what your app will need, and see your options out there. Remember, the less code you need to write, the faster you will be able to launch.\n\nIf some of the services you choose are not free, you might need to pool all operational costs together and consider them when deciding on your business model. Notably, your revenue must cover all operational costs for your business to be sustainable, even way before it's profitable.\nMigration is almost always not fun. Migrations are usually intended to keep the same behavior, so often no business logic (features) changes. It is a really expensive and risky attempt, because with every change is a disturbance of stability. With usually no change in features, increased risk of disturbed stability and data integrity, and a huge investment of engineering hours, migrations are one of the most dreaded operations in software engineering. Therefore, any decisions that minimize the need for migrations is often favorable.\n\nExplain choice of technologies for the following: UI, Database, Web Server,\nHosting, Authentication, etc. and the alternatives you've considered.","user-experience#User Experience":"User experience (UX) is very different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Craigslist still have a ton of daily active users despite their UI! 😵UX encompasses all aspects of the end-user's interaction with a product. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design.If the product is a TV, UX starts from how the product is placed on the shelves at the store, how the packaging allows for the customer to bring it to the cashier, whether it can fit in someone's car trunk, how far one should read through the manual to assemble the TV, up until the TV breaks down, repaired, or even recycled. Notably, UX differs from UI because UX is not limited to software products. Don Norman and Jakob Nielsen, two of the forefathers of UX, defined UX, in contrast to UI, very well here. The Nielsen Norman Group's website also provides many resources about UX that you may wish to check out.UX is about research. It requires understanding of your user. Not just when they are using your product, but also the environments around the time of usage, the different agents surrounding the product and its implications, and ultimately their objectives. If you are building an app that is used in rowdy buses or busy places, can your users tap on those small buttons (this is known as a situational disability)? If you are building an app for teachers to input grades, how do you think it will impact the parents of the teachers, and the students (they are known as primary, secondary, and tertiary users)? There are no right questions, just as there are no right answers. Talk to your users, and empathize with their objectives. Return to the drawing board and devise a prototype. Test it with them, collect feedback, be surprised, and iterate. Just like software engineering, product development is an iterative (read: agile) process.\nYou are not your own user. Repeat it. You are not your own user. It\ndoesn't matter if you think you fall into the target audience of your own app,\nyou are still not, and never will be, your own user. It is therefore important\nto distance oneself when researching user behaviors: be ready for surprises,\nand be humble to counterintuitions. If you're interested, the field that\nheavily studies these subjects in the context of computers is called\nHuman-Computer Interaction\n(HCI).\nUX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas.You can probably guess now that UX is somewhat related to branding. Dictions that prefer colloquialism over specificity may convey a relaxed, friendly sentiment (In 2018, Gojek revamped their app to relate better to the locals, and Don Norman talked about designs that make people happy). Smooth transitions and tidy designs may convey a sense of stability and trust (known as the aesthetic-usability effect). Animations and choice of materials (gradients, acrylic, shadows, elevations, etc.) give a sense of space and control, that the user knows the relationships between elements in the UI. You can probably now appreciate how most, if not all, UI decisions inherently stem from UX considerations.\nIt is implored that you can now appreciate how expensive a UX research process can be. But don't sweat too much—generally, it is better to launch with decent coverage and constructive outlook, than supposedly exhaustive coverage but obstinate outlook.\n\nDescribe three common workflows within your application. Explain why those\nworkflows were chosen over alternatives with regards to improving the user's\noverall experience in the context of an AI application.","user-interface#User Interface":"UI is the space where interactions between humans and computers occur to achieve their objectives. You'd probably already be familiar with some of the concepts of UI from Assignment 1. But UI design is more than just typography or color theory.Something unique in this assignment is the incorporation of AI technologies in your app. Frankly, this is a rather new development, and there are no hard and fast rules in designing interfaces for AI apps. However, there are some aspects that one should consider when incorporating intelligence in their app.Ethics is a big deal when it comes to design in general, not just apps. Since AI is an emerging technology, you should be transparent about what your novel technology can and cannot do. Provide third-party sources where possible, hedge, or even admit if some actions are not possible. This eventually influences the claims and endorsements you will make in your app. It is even a bigger stake if your app deals with sensitive fields like health or engineering, because an overconfident recommendation is as good as a misjudgement. For every recommendation, ensure that the user eventually has control over their decisions. Don't assume, automate, and commit critical actions on the user's behalf; rather give them control to accept, reject, and/or suggest feedback on your recommendation. For every intelligent UI element or feature you choose to develop, always remember that the intelligence is artificial, and ultimately humans get the last say.This goes without saying: privacy and data collection. Be transparent about what, when, and where you are collecting analytics and/or heuristics from a user's interactions. Explain and give users the choice to opt out from certain intelligent features. Give users control over what they want or don't want to share (think app permissions settings on iOS and Android). You'd quickly realize that these considerations are not new or unique to AI apps; they apply to any apps. Ethics and privacy are the nicher part of UI design, and it's even more so when your app handles sensitive data and performs sensitive actions. Google has a great guidebook to designing AI apps that centers around humans.Needless to say, the basic principles of UI design still apply in this milestone. The paragraphs above aimed to shed a light on points of attention when building AI apps.\nShow and explain considerations/decisions in your UI that were specially made\nfor an app that leverages AI. Provide examples, citations, or justifications\nwhere necessary. You may also show different prototypes and outline their\ntrade-offs.","phase-5-launch#Phase 5: Launch":"","landing-page#Landing Page":"Similar to what you have read in Assignment 1, launching your product site only when the app is ready is often suboptimal. In this milestone, you are building a product site (a real one, this time) that showcases your product. Some decent examples include Remix, JetBrains Fleet, and GitHub Copilot. A great product site should achieve: explaining why it exists, informing about the features, and calling for an action (a call-to-action).Since this site relates to your product launch in a later milestone, it is also worthy to think about how your site is seen when shared. Think about what happens when you share a URL via Telegram, WhatsApp, or LinkedIn. Nowadays, people don't just see the URL, they also see a thumbnail, title of the site (truncated if it's too long), and first few sentences of the site description. This metadata is a standard known as the Open Graph Protocol. Optimizing this is extremely beneficial because it influences the users even before the link is clicked.\nCreate a landing page for marketing purposes with the following sections:\nhero, features, pricing section. Feel free to add more relevant sections if\nyou wish.","analytics#Analytics":"You should be interested in the usage statistics of your application. Google Analytics 4 is one popular way to collect user insights. It can be set up easily — the following examples are using the gtag.js snippet. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services.Event tracking can provide more fine-grained insights over user actions. They can be used to track more events such as network request statuses, buttons pressed, or even form fields interactions. The following JavaScript code can be used to log a custom event to GA4:\ngtag('event', '', {\n\n});\nIn particular, recommended events helps you measure additional features and behavior as well as generate more useful reports.If your application's interface is predominantly built with a JavaScript MVC framework like React, it is very likely that you have a Single-page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 pushState API. Pageviews can still be tracked using virtual pageviews by executing the following code instead during a client-side route change.\ngtag('event', 'page_view', {\npage_title: '',\npage_location: '',\n});\nRefer to GA4's documentation on how to \"Measure virtual pageviews\" for more information. Alternatively your framework might have provided dedicated documentation on how to send page_view events for route changes.Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that tracking is working in your application:\nUse the official Google Analytics Debugger Chrome Extension (recommended)\nCheck the \"Network\" tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.\nGo to Reports > Realtime in the Analytics dashboard, which allows you to view activities on your application in near real-time.\n\nMore information and examples can be found from the official Google Analytics 4 documentation.\nEmbed Google Analytics or equivalent alternatives in your application and give\nus a screenshot of the report. Make sure you embed the tracker at least 48\nhours before the submission deadline as updates for Google Analytics are\nreported once per day.","launch-campaign#Launch Campaign":"Once you get that amazing software ready for production, it's time to announce it to the world. You'll need to designate a launch time, plan what happens coming to the launch time, and most importantly, retain users after the launch.It's just like a press conference; you'll need people to help you spread the word that you decide to spread your wings. So, collect your closest connections, forums, social media sites (Facebook, Instagram, etc.), communities (e.g., Reddit, X, HackerNews, Discord, etc.), and influencers. Decide and plan what content will best represent your product. Make some drafts (text, video, banners, depending on the nature of the media), mock them, and revise until your team agrees on the best launch announcement. Your team should have all these collaterals ready, so that on the launch second, everything is published at the same time.Some products may even decide to do soft launches. Think Clubhouse and Arc Browser with their invite-only schemes. From the developers' point of view, soft launches are great for beta-testing and garnering feedback agilely. With a limited user acquisition, it is easier to attend to issues, and your servers have a lower chance of exploding. It also gives a sense of exclusivity; it makes those who have joined feel exclusive, and those who have not joined envy. Referral systems also encourage word-of-mouth, so that's a bonus. This exclusivity can potentially create buzz and hype, with people watching for when the waitlist is over, or joining the waitlist—after which you can use it as a channel to share updates and ensure they still remember your product. But waitlists can even retard user acquisition (well, it's literally limiting acquisitions), which means lower usage, active users, and feedback. Arc Browser's CEO actually talked about how they are losing up to 80% of sign-ups because of having a waitlist. Also, code has to be written to support this waitlist, and that's something else to maintain, only to be stripped when the waitlist is gone. Hence one should exercise prudence when deciding to go with soft launches and/or waitlists, because they will modulate the acquisition curve of your app.After the launch, monitor all your analytics and watch the growth. Ensure that you have technicians ready to fix bugs or restart the server should the situation call for it. Ensure that you have the customer support team ready to answer any queries around the launch time. User acquisition isn't instant, and it needs repetitions and reminders for the sentiment to retain. One of the biggest mistakes one can make after launch is resting on their laurels after seeing the active users curve grow upwards. Your team should start planning on the next cadence (next release, next announcements, etc.) so that when that curve starts to plateau, you have something in store to bring it back up.Product Hunt is a renowned site to discover new products in tech. It is backed by Y Combinator and has brought light to some recent famous software, e.g., Notion, Obsidian, Otter, and BeReal. It is a great inclusion for a software product launch due to its community and great outreach. To launch on Product Hunt, you'll need several content ready to submit: a product site, logo, first comment, demo video, marketing pitch, etc. Product Hunt has a list of what should be included in your product post, and an excellent site on preparing for a Product Hunt launch. You might also want to check out how AI products are launched on Product Hunt.Here's a sample launch checklist Yangshun and his team used to launch Docusaurus 2.0 in 2022 which contributed to Docusaurus 2.0 attaining the \"Product of the day\" award.\nEven though this milestone is about launching on Product Hunt, the knowledge\nof launching a software product is going to be useful for your final project.\n\nAssume you were launching on Product Hunt. Come up with content and marketing\nmaterials that you will use for your Product Hunt submission. You may even\nwant to launch on Product Hunt for real if you think your product is ready.","phase-6-going-above-and-beyond#Phase 6: Going Above and Beyond":"This section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor.Several suggestions have been provided. We emphasize that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use.","embeddings-optional#Embeddings (Optional)":"A recommended technique to improve the generated results is to supplement the model with high quality, relevant, and updated information about the query and instruct the model to use the information when generating the output. This is especially useful if the query is about recent events or information that the model has not been trained on.Embeddings refer to the method of representing words or phrases as vectors (list) of floating point numbers. These embeddings capture semantic meanings based on the context in which words appear in the text data. Words with similar meanings will have similar vector representations in the embedding space.Embeddings can thus be used to implement efficient knowledge retrieval. In particular, a text corpus can be split up into chunks, and each chunk is embedded (converted into a vector of numbers) and stored. A given query can then be embedded and vector search is performed to find the embedded chunks of text from the corpus that are most similar/related to the query.To quickly search across multiple vectors, it is recommended to store your vectors in vector databases which provide ways to query your collection of vectors given a query.\nSupabase Vector: Supabase is an open source Firebase alternative built on PostgreSQL. With the pgvector extension, you can store vector data. This is recommended because you can use Supabase for both relational and vector data, using one database for all your application needs.\nWeaviate: Open source vector database that also offers a fully managed option.\nPinecone: Fully-managed, developer-friendly, and easily scalable vector database.\nChroma: AI-native open source embedding database. As of Aug 2023, it does not offer managed hosting.\n\nFor example, an e-commerce website owner could embed information about the company and products to build a customer support chatbot. The chatbot answers user queries by fetching the vectors related to the query and passing both the query and necessary information to an LLM.Further reading on embeddings:\nEmbeddings - OpenAI API\nEmbeddings - Cohere\n\n\nUse embeddings in your app. Explain why it was useful for your product to use\nembeddings.","seo-and-social-sharing-optional#SEO and Social Sharing (Optional)":"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application.Facebook Social Plugins or Twitter for Websites creates a timeline post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base.Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it.Also ensure that the social sharing preview images are attractive. Vercel provides a useful tool for dynamic OG image generation.\nIdentify and integrate with social network(s) containing users in your target\naudience. State the social plugins you have used. Explain your choice of\nsocial network(s) and plugins.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 16 compulsory milestones in total. Milestone 1, 2, 3 and 10 are worth 2.5% each. The rest are worth 5% each.The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this.Overall, the AI application assignment is worth 20% of your final grade.","mode-of-submission#Mode of Submission":"The final submission is due .The following will need to be both submitted to Coursemology (under \"Assignment 3 — Artificial Intelligence Application\") and included in your GitHub repository:\nA write-up, group--milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your live application and link to the public GitHub repository is clearly stated in the write-up for the convenience of the teaching staff.\nA one/two-page pitch of your application, group--pitch.pdf, pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. Restriction: no longer than 2 A4 sides.\n\nThe following will only need to be included in your GitHub repository:\nA README.md file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:\nThe list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment.\nThe name of your application.\nThe URL to your application, i.e. your application must be accessible online somewhere.\nSet-up instructions for local testing (good to have).\nResources you have used significantly to build your app (e.g. tutorials, source code references, design references, UI templates, etc.).\n\n\nThe code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits). You're encouraged to use monorepos instead (e.g., via Turborepo) so that you only have to submit one repository.\n\nNot following the submission instructions (e.g., incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted to the Coursemology Forum.Good luck and have fun!","acknowledgements#Acknowledgements":"Thank you to the following individuals who have contributed to this assignment in one way or another:\nSau Sheong Chang\nSuzanna Sia\nTong Hui Kang\nRishabh Anand"}},"/coursework/product-design":{"title":"Assignment 1 — Product Design","data":{"":"Item\tDue\tIssue date\t\tFinal submission","general-overview#General Overview":"In this assignment, you will put on your designer hat and learn how to design a software product, coming up with ideas, features and designs. You will be guided on the various phases in designing your (possibly first) tech product.","grading-and-admin#Grading and Admin":"This assignment is designed for groups of three or four students. Groupings for all assignments will be formed in the first week of the course.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various phases of app design, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to design an application that stands out from the rest. We will not limit your potential by restricting the kind of applications you can build. We expect that you (pleasantly!) surprise us with what you are capable of doing.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The objective of this assignment is to ideate and design an app that solves a real problem, and use empirical user testing to validate your idea and design.\nYour team will pick and target an audience to solve a common problem they face.\nYou will need to think critically about the features and user interactions needed within the product, and how each of these supports the user in solving the problem.\nYou will interview users and use your user research and user testing data to iterate on the product's UI design and user interactions.\nThe final deliverable will be a high fidelity interactive prototype that is sufficiently detailed to be handed off to a developer and turned into a working app.\n\n\nPlease read the entire assignment before starting.","terminologies#Terminologies":"In this assignment, we will use the following three terms when describing the designs we expect to see from you:\nWireframes: Low fidelity designs without any design-specific elements such as colours or fonts.\nMockups: High fidelity designs that are static. These designs may look close to the final product, but they cannot be interacted with.\nPrototypes: High fidelity designs that are interactive, i.e. a user can click on a button, and the prototype will transition to the appropriate screen or state.\n\nWe will also be asking for the submission of \"user flows\". In traditional user interface (UI) / user experience (UX) circles, these refer to flow chart diagrams that represent each screen as shapes. However, we will instead refer to what Nielsen Norman Group calls wireflows as user flows.More information will be shared in the relevant sections.","phase-0#Phase 0":"For this assignment, you will be designing and building a prototype that demonstrates your app's user flows. There are a large number of available UX design tools in the industry, but we recommend using Figma.Figma is a design tool that is available as both a web and desktop application. Its most prominent feature is its support for real-time collaboration, allowing team members to work on the same wireframe, mockup or prototype simultaneously. As of 2022, Figma has been acquired by Adobe and is dominating the design tools market.Figma also has community plugins available for additional functionality, such as Iconify, which collates over 50,000 icons for use within your designs! Furthermore, students and educators can obtain a pro license from Figma for free. We recommend snagging your free pro license as soon as possible.\nFigma community plugins\nFigma template gallery\n\nFigma variables were unveiled during Config 2023 (Figma's annual user conference), and prototyping capabilities were drastically enhanced with new features that allow for more dynamic and realistic prototypes using fewer frames and interactions. It's even possible to build a playable Flappy Bird game prototype using Figma variables.Export your designs out as a .fig file when submitting. Instructions can be found here at the very bottom.Apart from Figma, here are some other tools you may choose from:\nInVision: Their free plan allows users to have one prototype with unlimited screens and unlimited collaborators for an unlimited period of time.\nSketch: An industry standard, but it is not free and available only on macOS.\nAdobe XD: We used to recommend Adobe XD as an alternative but ever since Figma was acquired by Adobe, the app is discontinued.\nPowerPoint.\nPaper and pencil for wireframe sketches.\n\nWhatever tool you choose, it has to be able to produce a prototype that fulfils all of the assignment's requirements. In particular, the final prototype needs to be interactive and demonstrate user flows through the app. Feel free to check with the teaching team if you are unsure about the tool you plan to use.\nDescribe your app in one paragraph. What does your app do and why? (You can\ncome back and complete this milestone retroactively.)\n\nExplore the available tools, pick a tool, and make sure everyone on your team\nis familiar with it.\n\nRead through Elly: Room/roommate finder mobile\napplication. This case study helps\nyou to understand the importance of the User-Centered Design process and why\nthe assignment is structured in this way.","phase-1--user-requirements-gathering#Phase 1 — User Requirements Gathering":"Every good app/platform/website/service begins with a problem they are looking to solve for a target user. As this assignment is due on , we recommend you pick a target user who is abundantly available around you, e.g. your fellow NUS students. This way, you can easily conduct your user testing.Study your users. Think of a problem / pain point you think they are facing now. List down and substantiate the problems / pain points and assumptions you have about:\nWhy are they facing this problem?\nHow are they living/dealing with this problem now?\nHow can your product/service solve this problem?\nWhat platform (desktop/mobile/app) will best serve to solve this problem?\nWill your product/service solve this problem in a way that does not cause them more stress, effort and time?\n\nList the above in a user persona card. A persona is a fictional representation of an ideal user of your product. You can have more than one user persona card if that helps you to better define your audience. There is no fixed format for this, but it should contain at the very least:\nA portrait (you can use a stock photo)\nFictitious name for your user persona\nAge, gender, current occupation\nAnswers to the problem / pain point and questions above\n\n\n\nSource: Meetup: A Usability Case StudyYou can fill in more information if you feel that that will help you better visualise your product, such as personality, brand affiliation, life goals and aspirations, level of experience with technology and more. The goal of the user persona is to allow you to think in the shoes of your user, so try to include details that make this easy.Please also list down any assumptions about your user that will help us understand what you are validating about your users in the subsequent milestones.\nPick a primary user persona, list down and substantiate some assumptions about\nthe problems they're facing now.\nOnce you have listed these down, it is time to proceed to user interviews. The goal of this round of interviews is to validate your problem and assumptions about your users. It is important to remember that the earlier you reject a bad idea, the less costly it is.\nIdentify users that fit your user persona cards\nInterview them about the problem(s) you think you are trying to solve\nValidate your assumptions\nAvoid asking leading questions\n\n\nFormulate a set of questions that you think will help you validate your\nassumptions and understand the users' needs.\n\nInterview your users and validate your assumptions. Summarise the key findings\nand conclusions you draw from your interviews.","phase-2--prototyping#Phase 2 — Prototyping":"After your interviews, list down at most three primary user goals your product should achieve. As a team, brainstorm features that would lead users to achieve these three primary user goals.The features you pick should answer why they are necessary and how they reinforce your business idea. You should focus on quality and on the impact each feature will bring. Products are not successful just because of the number of features they have.In general, remember that you are building a Minimum Viable Product (MVP). The goal is not to build a complete feature set of the product; instead, the number of features should be just enough to test out your idea and validate that it is worth executing.A good example is Instagram. They hit 100k users in a week without features such as hashtags or explore. Check out their product timeline.\nRemember, more isn't always better. If you come up with fifteen features, you\nare doing it wrong! There should definitely be less than ten features that\nmeet your three primary user goals.\nAt the same time, you should not omit essentials such as authentication and settings or the lack thereof. A large part of WhatsApp's popularity was due to simply having the phone number as the user account and their focus on the core essentials of messaging! Threads, Meta's \"Twitter killer\", saw over 100 million sign ups in less than five days due to the ease of onboarding. It uses Instagram login and users can easily follow the same accounts they follow on Instagram.As you are designing a product for the real world, it is also important to ensure that your ideas and business logic are sound, realistic, and executable. Answer these questions:\nHow will your product acquire users? Why will users use your product over what they are currently doing to solve the problem? Here are some guiding questions that might assist you in answering these questions:\nWhat does your product bring to the table?\nWhat differentiates it over the competition?\nWhy would someone choose your solution over another?\n\n\nHow will your product be executed? Here are some guiding questions that might assist you in answering this question:\nWhat resources or data does your product need?\nWhat are some stakeholders that you might have to work with?\nAre there legal/bureaucratic restrictions and/or limitations in introducing such a product?\nAre there social issues or barriers to consider, that might affect the adoption of your product?\nWhat are some potential dealbreakers that could stop your product from reaching the market?\n\n\n\n\nBased on the interview results, come up with a list of goals and features for\nyour app. Be sure to answer the questions above.","digression-good-artists-copy-great-artists-steal#Digression: Good Artists Copy; Great Artists Steal":"You should do some research before starting to work on the designs. Professional designers do that all the time. Here are some articles and references to learn more about user interaction design:\n10 Usability Heuristics for User Interface Design\nUsability 101: Introduction to Usability\n\nYou might also find pattern libraries useful. A pattern library is a collection of user interface design elements, such as a login page, a news feed, a profile page, a credit card entry screen, etc. They are recurring solutions that solve common design problems.\nMobbin: A website that showcases the various screens found within popular mobile and web apps that's very popular among the design community. It is founded by School of Computing alumni Jiho Lim and Liau Jian Jie (CS3216 AY2019/20).\nPage Flows: Covers user flows, screens and emails across various devices. Generous amount of free content.\nUI Sources: Another source for UI flow inspirations focusing on mobile apps and includes recordings of end to end user journeys (paid).\n\nPlatform-specific design resources:\nMaterial Design Tools: Official resource hub for Material Design, Google's open source design system. Useful if you want to pursue a Material design theme.\nApple Design Resources: Assets and tools for designing for Apple devices.\n\nOther good resources for design inspiration include Behance and Dribbble. They are websites used by designers to showcase their portfolio/work. You could think of them as LinkedIn for designers.Now it is time to get your hands dirty!\n\n\n\nWireframes are \"low-fidelity\" designs. This means that they should not contain any design-specific elements such as colours, font or unnecessary details like user-generated content and images. These distract from the aspects that are more important at this current stage of development, and slow down the speed at which they are produced. Instead, focus on the relative size and position of elements, key user interface elements, and interactions such as which elements can be clicked or tapped, dragged, and so on.\n\nSource: https://www.flickr.com/photos/anthonyarmendariz/4448219885/in/pool-1070674@N20/Use any tool you want — we recommend just plain paper, markers, and pencil. At this point, we value speed over quality since you will likely need to change them based on user feedback, so use whichever tool that allows you to do up wireframes the fastest.Whichever tool you use to design your wireframes, make sure you can \"transition\" from different screens and states easily. If you are designing on paper, this means using a different page for each screen and sticky notes for modals, popups and other ephemeral UI elements, and if you are designing on PowerPoint, make each screen or state a slide. When you create your design, keep your user personas in mind.\nWireframes should be low-fidelity. It is tempting to \"skip steps\" by using\ncomponent kits or colourful designs that might add to the aesthetic of your\nwireframe. However, the point of wireframes is to be \"ugly\" and bare-bones so\nthat you can be focused on iterating on the idea and user flows quickly,\nwithout being distracted by the aesthetics or colours for both you and your\nuser. Please ensure that your wireframes are low-fidelity.\nThis set of wireframes will be shown to the user during testing. As such, keep a copy without the links between buttons and screens and without more than one screen showing at once — after all, users can't do that in the actual app! (You may add annotations or comments for your own reference, but remember to hide them before starting user testing.)\n\nSource: https://www.flickr.com/photos/mockupbuilder/12987528713/in/pool-ilovewireframes/\nDesign the first draft of your wireframes and save them under a folder named\n\"Draft 1a\". Your wireframes should adhere to the requirements above. If your\ndraft is hand-drawn, scan or take a high-quality photo of it (make sure all\nimportant details are visible).\nNow, on top of your wireframes, sketch out the user flows for each of the major features you have listed above, e.g. links between buttons and screens. You may have more than one flow for each feature, and the flow can even start from outside your app. Similar to before, keep your user personas in mind when designing the user flows. Please keep these user flows as a separate copy, and you may bring all the screens together in a single document/image to better illustrate the flows between different screens.These are some examples of user flows you may want to sketch out. In some cases, you may also have an explicit hypothesis you may wish to test.\nWhen the user hears about your app from a friend and visits your website or your app store page.\nWhat should you write on that website to entice users to click the \"Sign Up\" or \"Download App\" button?\nWhen users click \"Sign Up\", what do they see next? What details do they have to fill in? Are you making users go through too many steps before even signing up?\nWhen users login or use the app for the first time, what do they see? What can they click on?\nWhen users login or use the app for the second time, what do they see? What can they click on?\n\nUser flows should naturally intersect with each other. This is fine — real apps do not artificially limit the user in the ways they can be interacted with.\nSave a copy of these user flows under a folder named \"Draft 1b\". Clearly\nidentify the main user flows. If your user flows are hand-drawn, scan or take\na high-quality photo of it (make sure all important details are visible).","phase-3--user-interviews--iterations#Phase 3 — User Interviews + Iterations":"Now it's time to put your draft design to the test! The test we are conducting is sometimes called \"Wizard of Oz\" — we will simulate user interactions by taking the place of the computer. This may seem silly at first, but it is an important tool to validate your design at this stage. Here is a video that shows an example of this form of testing using paper prototypes.","playing-the-wizard-of-oz#Playing the Wizard of Oz":"You may find it easier to conduct this form of testing in pairs. One of you will need to act as the computer, so you need a second person to record your results. Test with only one user at a time, not a group. This is to avoid one user's actions and opinions from influencing the results of other users.Ask them for five to ten minutes of their time, and if they agree, start by giving them a little context for what you are about to show them. For instance, if the app in question is NUSMods, you might tell them that they have just received a link from a friend telling them to check out a new app for organising their NUS timetable. You may also give them an explicit goal to accomplish, such as \"you would like to sign up for an account\". They will need to achieve this goal by interacting with your wireframes. If you are conducting this virtually, the person acting as the computer can share their screen.Instruct them to think aloud and use their finger to point at where they will click or tap, or if you are doing this virtually, you can try using the tools available on your conferencing application (Zoom has Spotlight and Arrow available under its annotations panel). A quick way to explain \"Think Aloud\" to your users is \"Vocalise your thoughts. Let us know what you're thinking throughout the way\". Explain that you will be acting the part of the computer, and reassure them that there is no wrong answer. Do also tell the user to notify you if they are done using the app / website or do not have anything else to do. This will make it clear to you when the user has totally lost interest, given up on your UI, or has no more use for your website / app.Now show the first wireframe they are supposed to see. Observe what they interact with first, second, third, etc. Remember to \"transition\" between your wireframes as illustrated in your user flows as the user interacts with them. Do not say anything during the whole process. If users become lost or confused, let them be lost or confused. Only prompt them for what they are thinking if it appears that they are not thinking aloud. If they get stuck, simply move onto the next set of wireframes.At the same time, keep an eye out for their body language. See if they looked hesitant or disinterested at any point in time. Perhaps, they had to squint and lean in to read certain text that was too small. A lot of times, the users will not report such issues as they would assume that the problem lies with them and not with your design.For any buttons or screens that you have not designed, you can reuse any existing wireframes and tell the users what they should see — \"You clicked the School of Computing link. We don't have those screens today. So please pretend that you see results for the School of Computing on this screen. Okay?\". Alternatively, you can describe the result of the action to the user in words instead — \"You see a pop up open with a yellow warning triangle, the text 'This will delete your results. Proceed?', and the buttons 'Okay' and 'Cancel'\".Remain as neutral as possible during testing. Only ask follow-up questions after the user testing session is completely over. This would be your chance to ask:\nDid you notice \"X\" button on this screen?\nWhy did you click here and not there? What did you expect to happen when you clicked here?\nYou seemed lost on this page. Why were you lost? What did you expect to happen?\n\nRinse and repeat with three to five different users. Does this seem too small a sample? See Why You Only Need to Test with 5 Users.\nDocument the results gathered from this round of testing with three to five\ndifferent users. Be as detailed as possible. Things that would be good to\ndocument include user flow being tested currently, your observations, the\nquestions you asked, their responses, and the issues identified. Save these\ninto a new \"Draft 1 Testing\" folder.\nAfter you have completed the testing, it is now time to review the results and improve your user flow. For example, you may want to ask yourself:\nWhat did the user click on first? Was that what you wanted the user to click on first?\nWhich features did users totally miss? Does that mean that those features are not important? If they're not important, throw them away. If they are, how can you revise your design so that users notice the features and actually click on them?\nAre there too many steps for the user to accomplish their goal? At which point did the user become visibly frustrated?\nWhat assumptions did you make when you created this design? Did the user testing confirm or reject these assumptions?\n\n\nReview your results documented in Milestone 6, and revise both your wireframes\nand your user flows. Save the updated designs in folders named \"Draft 2a\" and\n\"Draft 2b\" respectively, and write about how the results from your interview\nhave led to the changes in both the design and the flows.\nAs you iterate on your design, remember to refine your sketches and improve their quality. Be bold in your earlier iterations. It is perfectly normal to throw out entire screens at this early stage. With each iteration, you should solidify your design — while earlier iterations may require large redesign, later iterations should only produce minor tweaks. Of course, make sure these changes are well-substantiated and well-documented.","phase-4--design-mockupsprototypes--more-iterations#Phase 4 — Design Mockups/Prototypes + More Iterations":"Now that you have the basic information architecture and user interactions planned out, it is time to add more meat to your wireframe. Convert your wireframe into a mockup using your chosen prototyping tool.\nIf you feel that you are not ready for this stage yet, you may perform more\nrounds of design iteration and user testing with wireframes. Be sure to\ninclude the results and name the folders appropriately.\nCompared to a wireframe, a mockup will usually look more similar to how the final app will turn out. Colours, fonts, logos, images and user interface elements from the target platform are used in place of wire boxes. However, like wireframes, mockups remain static and will require manual transitioning when doing user testing with them.\n\nSource: https://www.nngroup.com/articles/wireflowsYou may find it useful to develop a set of shared assets such as the app's logo, colour scheme, font and common UI elements so your mockup looks coherent when it is built by different members of the team. Figma supports Components, which is a way to build elements you can reuse across your designs. You can give Figma components properties and compose them together, similar to UI library components in React/Vue/Angular. Untitled UI and Riddle UI are Figma UI kits / design systems that contain a good amount of free design system components you can use in your prototype. Figma components, used with Figma variables, empower teams to build consistent designs.If your team is feeling up to the task, you may also choose to jump right into building a prototype, which is of higher fidelity than wireframes and is interactive. Testing with a high fidelity prototype should be the next best thing from testing with an actual working prototype. This allows for a stronger suspension of disbelief, allowing the user to act more realistically. Your chosen prototyping tool should allow the user to directly click on elements, which should transition the prototype to the next screen or state. This also frees you from acting as the computer, which gives you more time to observe the user instead.If you are planning to work on a prototype, there is no need to submit the design and user flows separately. Simply submit the interactive file in a single folder, as the prototype transitions / interactions are basically your user flows.\n\nSource: http://www.tifftam.co/goji/A well-developed app has many moving components — login, sign-up, active, inactive states and so on. While you do not have to include every single possibility that your user will encounter, it should be sufficient for your users to test it satisfactorily.\nConvert your wireframes into a high fidelity mockup or prototype. If you are\ndesigning a mockup, put the mockup in a folder called \"Draft 3a\", and the user\nflows (which should be based on the same mockup) in a folder called \"Draft\n3b\". If you are building a prototype, submit the interactive file in a single\n\"Draft 3\" folder.","more-testing-more-iterations#More testing! More iterations!":"Similar to Milestone 6, you must now test your high fidelity mockup or prototype with real users. At this stage, your mockup should be more complete, so there should be less shuffling around paper or clicking through slides. You can still step in for the computer for any screens or states which you have not added, or for interactions like drag and drop, which are less easy to prototype, but there should be less intervention on your part.We strongly recommend testing at least once with an interactive prototype. Modern prototyping tools allow for precise configuration of transitions, and it would be good to test whether the transitions you plan to use between screens are intuitive to the users.As you should already be fairly confident in your information structure and basic user interaction, you can instead focus on design details, usability and user experience. For instance, you may wish to check if the chosen colour and design of your primary call to action button is sufficiently differentiated and noticeable. In addition, because you are using \"production\" colours, fonts and UI elements, you can test for a wider range of issues, such as legibility, engagement, and affordance (an object's properties that show the possible actions users can take with it, thereby suggesting how they may interact with that object).However, remember that the primary goal of the testing is still to observe the user interact with the app. If you need to ask specific questions about elements of the design which the user did not comment on during testing, you should only do so at the end of the test.\nConduct two more rounds of user testing and iteration sessions. This means you\nshould have \"Draft 3 Testing\", \"Draft 4\" (or \"Draft 4a\" and \"Draft 4b\" if\nyou're building a mockup) and \"Draft 4 Testing\", each containing their\nrespective drafts and testing results.","final-prototype#Final Prototype":"With the previous draft's user testing results, you should come to a good conclusion on what your MVP should act and look like. The final interactive prototype should be complete and sufficiently detailed to be handed off to a developer to realise them. Your prototype should include the onboarding, first use, and (if applicable) login flows. Refer to Phase 0 instructions for the expected submission format for each of the prototyping tools.Now, it's time to demonstrate how your app should work! Come together as a team (i.e., all members of your team should be present) and record a demo going through the happy paths of your application, i.e. the main success scenarios for your identified user flows. Keep the video short and sweet — give a short introduction about the problem your team is trying to solve before demonstrating the user flows. The video must be less than 5 minutes long and be submitted as a .mp4 file.\nFinalise the prototype, record the demo video and save both of them under a\nnew folder \"Final\". Once again, since a prototype demonstrates the user flows,\njust submitting the prototype is sufficient.\nWe want you to be aware that the different milestones in Assignment 1 have been structured for you to gain a good sense of what it takes to produce a Product Requirements Document (PRD), a document used in companies (Meta, Amazon, Google, many other tech companies...) to describe the product being built. The PRD is usually produced by the Product Manager and has to be approved before further product development can take place. Once produced, it drives the efforts of the entire product team and the company's sales, marketing and customer support efforts.The broad structure of the PRD is as such:\nProduct Purpose (Milestones 1-3)\nDescription of the problem that you are trying to solve\nHigh-level description of what the product does and how it solves the problem\nWho is the product for\n\n\nCompetitive Analysis (Not included in Assignment 1)\nIdentify competitors who are launching similar products\nIdentify features of competitor's products worth emulating or avoiding\nIdentify the ways in which our product's features can deliver greater value than the competition\n\n\nFeatures (Milestones 4-8)\nDescribe each feature at the level of interaction designs and use cases\nRequirement traceability — identifying which requirements are in support of which objective\nMetrics to be measured (Not covered in Assignment 1)\n\n\nSchedule for Product Development (Not covered in Assignment 1)\nKey milestones and overall timeline for product development\n\n\n\nIn particular, most of the PRD's importance is in the articulation of the product purpose (Milestones 1-3) and the features built to serve its purpose (Milestones 4-8). This is also what we are focusing on in this assignment. Hence, besides being mindful of how and why Assignment 1 is structured in this manner, you should also illustrate (to the best of your ability) how each feature addresses a particular aspect of a problem that your target user faces — what is known as requirements traceability — to demonstrate that your feature was developed and iterated with thought for the problem faced by the target user and not simply because it's cool or funky.For further reading regarding PRDs during your free time, feel free to check out this link.","phase-5--growth-hacking#Phase 5 — Growth Hacking":"Growth hacking is defined as the process of rapid experimentation across a marketing funnel, product development, sales segments, and other areas of the business to identify the most efficient ways to grow a business. A common misconception about the term is that it has to do with coding.A wonderful application is useless if there are no users using it! In this section we will discuss some ways to get users.","landing-page#Landing Page":"When should you launch a website for your app? If your answer is to launch only after the app has been released, you are missing out! Just like movie trailers, which are released months before the actual launch of the movie, you can launch a landing page, which is a website designed to gauge interest and convert visitors into leads/users.A landing page for an app that hasn't been launched should:\nExplain what your app is about and aims to generate interest in it.\nContain a form that allows you to record a visitor's information (e.g. email). Businesses often promise some sort of deal or promo for the first X users who sign up. Another smart marketing tactic is to allow users to claim/reserve their username on your product, which creates a sense of scarcity (e.g. Cal.com).\n\nHere are some resources and examples for building attractive landing pages:\nOne Page Love\nSaaS landing page examples\n6 Coming Soon Landing Page Examples to Build A Waitlist For Your Next Launch\nLanding Page Design Examples to Inspire Your Own in 2023\n20 Great Landing Page Examples You'll Want to Copy in 2023\n\n\nDesign and launch a landing page for your app that is publicly accessible. You\nshould consider hosting it on Vercel or GitHub\npages, but you can host it anywhere that works and\njust let us have the URL. It should have a sign-up form for users to indicate\ninterest (it doesn't have to actually save any data).\nUse a CSS library/framework like Tailwind UI or Bootstrap to save yourself some time. Remember that the design has to be attractive and that your message has to be succinct! You can even consider no/low code solutions like like Framer or MailChimp landing pages to skip all the work.","marketing-strategy#Marketing Strategy":"A landing page cannot effectively convert visitors into leads/users if there are no visitors to begin with! Going back to the movie trailers example, it would be like creating a movie trailer but not showing it through public display screens and television advertisements. Hence, you should think of some potential marketing strategies to get the word out about your app.Positive examples:\nMake promotional videos. View past CS3216 final project videos here.\nGriddit, a live chat room app, got Prof Ben Leong to do an AMA using their service.\nLetterbox had a member going around the school on an Airwheel and giving out flyers.\n\nDO NOT:\nPaste unremovable stickers on the benches of the School of Computing.\nPut up posters in inappropriate places like restrooms.\n\nVideos are not the only way to market an app — to obtain marks in the coveted 30%, think out of the box for non-disruptive, creative and effective marketing strategies. We want a well-thought-out marketing plan including details on how you would implement it. Your strategy must obviously be realistic, i.e. do not suggest giving out $10 to each user who downloads your app if you do not have a good plan of getting those funds or a millionaire on your team.\nDesign a small marketing campaign for your app. Explain which marketing\nchannels you would use and how you would use them to get the word out about\nyour app to attract more users. Provide implementation details (e.g. if you\ndecide to make a promotional video, write out a brief outline of the video\ncontents). Explain why you think your marketing strategy would be effective in\ngathering users.","final-assignment-write-up#Final Assignment Write-up":"Your submission will include a write-up that describes how your group has met all the milestones for this assignment:\nIt should contain answers to Milestones 1-4 and 10-11.\nIt should also summarise your Milestones 5-9. More specifically, it should:\nMake it clear how the designs are organised. Which ones are wireframes, mockups or prototypes?\nBriefly recap the results and observations from your user testing results.\nHighlight the main user flows presented in each draft / iteration submitted.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 11 compulsory milestones in total, along with an optional Milestone 8b. Milestones 5a and 5b are each worth 2.5%. Milestones 6, 7 and 9 are each worth 10%. The rest are worth 5% each.The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this.Overall, the product design assignment is worth 10% of your final grade.","mode-of-submission#Mode of Submission":"By , you should upload the following to Coursemology:\nYour final write-up named group--milestones.pdf\nYour designs and testing results — zipped together — named group--designs.zip\n\nFor submissions that are >1GB in size (which is the maximum upload size that Coursemology currently has), upload the zip file to Google Drive and submit a PDF file containing the link to your designs and testing results. Please make sure the last modified date time of your uploaded ZIP file on Google Drive is before the submission deadline.\nAs a final reminder, you should have written answers for six milestones,\nthree or more drafts comprising separate folders for the design, the user\nflows and user testing results and conclusions, one final prototype, and\none demo video in your submission. Failure to adhere to these\ninstructions will result in the deduction of marks. Only one member of your\ngroup needs to submit on Coursemology on behalf of your group.\nClarifications and questions related to this assignment should be posted to the Coursemology forum.Good luck and have fun!"}},"/coursework/project":{"title":"Final Project","data":{"":"Item\tDue\tIssue date\t\tTeam formation deadline\t\tProposal\t\tProgress report 1\t\tProgress report 2\t\tIn-Class progress report\t\tPoster session\t\tFinal report","general-overview#General Overview":"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents.For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the by . Each team is to submit a project proposal by (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester.Your team can design the whole application, but if the scope is too large to be completed in one semester and you intend to continue to develop your application for a business venture, you can implement a prototype with some basic (or limited) functionality to satisfy the requirements for the class. Please state such intentions clearly in your proposals. The teaching staff will evaluate your proposals carefully and provide you with our feedback within a week.There are no limits on what students can do for the final problem, though the expectation is that it must be a \"cool\" application or product. The following are possibilities:\nA real-time HTML5 game\nA FB Messenger / Telegram bot\nA new e-commerce application. This can be the basis for a submission to the Start-Up@Singapore contest\nA mobile application. You may choose to build a native app if you like\nAn entry for the Microsoft Imagine Cup\nSome amusement – cute and useless, but fun and popular\nAn e-learning application of sorts\nAn Internet of Things hack\nAn application to improve school life, something along the lines of NUSMods / NUSWhispers?\n\nThe possibilities are endless. If you plan to develop a social networking application, you are expected to deploy your Final Project at least two to three weeks before the end of the semester because the \"proof of the pudding is in the eating\". You should get real people to use your applications, and the popularity of your application can be (but is not the only) criteria for the evaluation.If one of the apps you developed for one of the previous assignments turned out to be to very popular (i.e. has lots of users or a high growth rate) or has perceived potential, you may also choose to further develop it as your Final Project. The only minor complication is that you might be \"locked-in\" to work with the same team members. We leave you to sort such things out by yourself.","course-policy-on-final-project-groupings#Course Policy on Final Project Groupings":"People can be in two Final Project groups. This often happens when someone from an assignment group gets distracted and want to try something new but cannot really bear to \"leave their baby\" and still want to be a part of that group. Fair enough.However, your Final Project grade will come from ONE project that you will specify/declare right at the onset, i.e. by the end of the mid-term break. The rationale for this policy is that we don't want people to jump ship halfway and leave others high and dry. With this policy, everyone knows everyone's priorities. The \"extra\" members don't count towards the 4-member limit for a project team.If you decide to work with external parties, we do not have any official guide on what compensation you should negotiate. We leave it to you to decide for yourselves what is fair. However, DO NOT work for companies that clearly neither value nor respect you.","final-project-proposal#Final Project Proposal":"Your team should submit a project proposal by . The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:\nDescription of the application you plan to develop.\nJustification for choosing this project idea. Briefly mention the 3 key points: \"Problem is real? Problem can be solved in CS3216? Problem has impact?\"\nProject schedule: milestones and timeline, including an implementation plan and deployment plan.\nIndividual contribution and roles. Contributions and/or support from external partners, if any.\nLong-term plan and business model (if applicable).\nMarketing and strategies to be employed.\nHigh-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used).","development-of-final-project#Development of Final Project":"Each team will meet with the teaching staff (probably lecturer + TA) for a one-hour preliminary meeting after receiving your feedback on your Final Project proposal. The meetings will be biweekly. Look out in your emails for the meeting schedules.These are compulsory sessions where the schedule is flexible and should be determined by both parties.","customer-contact-reports#Customer Contact Reports":"We have told you time and again to \"go out there and talk to your customers\", and we're serious. 10% of your project grade will come from your \"Customer Contact Reports\". Use any reasonable report format to record your customer contact details and the interactions with your potential users. You are expected to produce a contact report at every consultation session.","progress-reports#Progress Reports":"Each team will be required to submit a progress report on . The progress report should include minimally the following:\nApplication prototype. Minimally as functional as what was achieved in Assignment 3.\nIs your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule?\nWhat were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them?\nAny changes to the application since the initial project proposal?\nAssuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with?\nUpdated project schedule: milestones and timeline.\n\nA second progress report will be due on . The contents of which would be similar to the first progress report.Please try to keep your reports to within two pages, or a maximum of 3 pages if you really must.","final-project-presentation#Final Project Presentation":"On , each team will make a presentation to the rest of the class on your project. This session will be another round of peer-appraisal by your peers. Your goal is to convince your fellow coursemates that your project is really cool, and that you have done a lot of work and great work. Think of it as round 2 of your innovation seminar, but you are selling your own dog food.","preliminary-security-scanning#Preliminary Security Scanning":"At this juncture , you should have a preliminary website for your app up and running, even if it is not fully functional. You are expected to provide us with a URL, and the tutors will be using security tools to scan your site. You will be provided with a security report, and you are expected to address the cited issues for your final project. Clearly, if your project is very incomplete, very little will be found, but you then risk more bad things being found after your final project is submitted. We will be doing another round of security scanning after your final project is submitted.","soc-steps#SoC STePS":"In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on from 3pm to 7pm as part of the School of Computing Term Projects Showcase (STePS).Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the \"show-and-tell\". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from \"other people\" — NUS staff, students, alumni, guests — who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses.Again, you can choose how you want to present your work. You can bring along other materials in addition to the posters, such as your iPads, or set up your laptops to do a demo also. We'll leave it up to you!","final-project-video#Final Project Video":"Traditionally, every team is required to make a 1-minute video to be submitted to the STePS organising committee. Here's a playlist of past years' videos.","marketing-efforts#Marketing Efforts":"As part of the user acquisition process, many teams set up their own social media page to publicise their products and gain initial traction before the actual STePS event. Here's what the top three teams of AY2015/16 did on Facebook:\nLetterbox went around the school on a hoverboard and handed out flyers. They also managed to launch their apps to the iOS App Store and Google Play Store before the event (a seriously impressive feat).\nGriddit created an anonymous chatroom for NUSWhispers and organised an AMA with Prof Ben Leong, which saw over 400 participants.\nPaperbaton launched a blog with helpful tips and also a complementing product, NUSExam, a Past-Year Question Paper Downloader for NUS Students.\n\nThese three teams also created Facebook pages to engage users continually. Have a look at the Facebook pages of Letterbox, Griddit and Paperbaton to get a sense of what sort of pre-STePS publicity can be done.","final-project-poster#Final Project Poster":"The final A1-sized project poster should (at least) include the following points:\nDescription of the application you have developed.\nWhat makes your application special?\nScreenshots, graphics, diagrams and tables. Probably fewer words.\nPrepare a snappy yet catchy 1-2 minute pitch that you can use (over and over) when presenting your poster.\n\nRemember, avoid overloading the poster with too much (small) text. This will ensure that people won't want to read what's on your poster. Add in pictures, graphics, diagrams and tables when appropriate. You are there to \"sell\" people your idea, to make them convinced that your application is unique and creative, and NOT to put them to sleep.Some examples of past STePS posters:","final-project-report#Final Project Report":"Like most other classes, the Final Project report is due on (to be uploaded to Coursemology by 23:59, please). The final report should (at least) include the following points:\nDescription of the application you have developed.\nAre there any existing applications out there that are similar? What makes your application special?\nReview of milestones and timeline for the project (which ones did you hit, what ones did you miss?).\nIndividual contribution and roles. Acknowledgement of resources/help provided by external parties.\nApplication design (e.g. database schema, UML, etc., but no code please).\nReport on the current number of users who have installed, active users, etc. Perhaps Google Analytics data and screenshots (or similar analytics tools) to support your claims.\nFuture plans and strategies.\nInsights gained from the project. What did you learn from doing the Final Project?\n\nWe do not specify a required page length, though we expect that most reports will be about 10 to 15 pages in length. The report definitely SHOULD NOT exceed 20 pages, please. Once you submit the Final Project report, you are done with CS3216! Congratulations!","assessment-scheme#Assessment Scheme":"The Final Project is worth 50% of the total grade for CS3216. The Final Project will be graded according to the following weightage:\n5% Project Proposal\n10% Customer Contact Report\n5% Progress Report\n10% Progress Report 2\n10% In-class Final Project presentation (awarded by your peers)\n30% Poster Presentation (awarded by the panel of judges)\n30% Final Report\n\nThe fact that 30% of the grade for the Final Project is determined by the outcome of your poster presentation might make it seem somewhat random and arbitrary, but this mimics life. Success comes not only from how well you do something but from how well you can sell it (or convince suckers to buy your stuff even if it's completely useless and they don't actually need it 😜). This is also where the marketing people make themselves useful. You are graded on the quality and relevance of your posters, your sales pitch, marketing collaterals, the quality of your apps, etc.For those of you doing external projects, your team is treated as a consultancy. You are graded by how well you manage your consultancy, e.g., frequency of meetings with your clients, quality of questions asked, quality of solutions proposed, and how you negotiate your compensation package. For those doing your own project, you are treated as a startup. We assess you on how well you manage your market validation, how well you design your marketing campaign, how you go out and bring in users, etc.","mode-of-submission#Mode of Submission":"The following is the list of deliverables to be pushed to your GitHub repository:\nSource code.\nYou should also upload a copy of your poster to your repository.\nProof of working application: You may either (a) Publish the application publicly (in the application settings, untick the Developer Mode); or (b) Add all the members of the teaching staff to the Developers part in the application settings so that we can assess your application (of course you need to add us as your friends first). In both cases, you should provide us with a link to your application's canvas page.\nYour Final Project report, in PDF format.\n\nPush all of the above to your GitHub repository. Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted on the Coursemology Forum.Good luck, have fun. Live long and prosper!"}},"/coursework/seminar":{"title":"Assignment 2 — Innovation Seminar","data":{"":"Item\tDue\tIssue date\t\tInnovation submission\t\tSlides submission\t\tPresentation\t\tInnovation critiques\t\tMutual critiques","general-overview#General Overview":"In order to build good and original innovations, it is important to learn what other people have already done — and think critically about what is good and bad, as well as explore ways to improve and generate new ideas. In addition, it is important to learn how to articulate one's ideas clearly and succinctly, both orally and in writing. The innovation seminar is designed to help students:\nLearn how to identify and assess innovative ideas.\nGain a better understanding of existing innovations.\nLearn how to present (or sell one's ideas).\nLearn how to articulate their ideas in writing.\n\nYou will form teams of up to four people, and each team will have to find a new innovation and share it with the class.Before you meet as a team, each member is to try their hand at identifying a recent relevant innovation. Your team is to then meet and discuss to finally decide on the most innovative idea and make a presentation about it to the rest of the class on . Each team is to put up their choice of the most innovative idea on the as soon as possible (latest by ). Note that duplicates are not allowed, and it will be first-come, first-served. Please double check that another group has not taken up your team's choice before adding it to the Google Sheet.","nature-of-chosen-innovation#Nature of Chosen Innovation":"Your chosen innovation should be an application (software / hardware / mixture of the two) of Generative Artificial Intelligence (AI). Some famous examples are ChatGPT, Midjourney, Landing AI, Tome, etc. Note that you are expected to look for new applications that are not well known (yet).","target-audience--level-of-technicality#Target Audience & Level of Technicality":"You can assume the target audience to be your fellow classmates, and the whole goal of this assignment is for you to convince your classmates that your chosen idea is the coolest! A suitable level of technicality is allowed in the presentation. That is, you are allowed to use technical terms that you think your classmates will be able to understand, but please don't start going through the steps of Dijkstra's algorithm line-by-line during your presentation.","grading-and-admin#Grading and Admin":"The presentations should attempt to cover the following points about the chosen innovation:\nDescription of the innovation.\nWhy we should care about the innovation you chose (i.e. the potential impact).\nWhat is good about the innovation.\nWhat are the limitations of the innovation, and suggestions on how they can be overcome.\nWhat are some the aspects of innovation you will design / implement differently, and why.\n\nFor engaging and excitingly quick pace presentation, we are using a format called Pecha Kucha (see this video for an example).In brief, each presentation is limited to 20 slides, and each slide should have exactly 20 seconds of air time. This means that each presentation should be approximately 7 minutes (6 minutes 40 seconds to be precise) long. Please stay within this time limit. You can choose to have a single person present or have more than one, but keep in mind that you have a limited time. The teaching staff WILL cut you off after the time limit.Perhaps it is impossible to cover all the suggested points above in 7 minutes? Well, the point here is to make a thoughtful presentation. You need to work out as a group exactly what to do if you can't fit everything into 7 minutes. Sometimes less is more. Sometimes it's not. Life is full of hard questions.You can present using PowerPoint, Keynote, Google Slides, or whatever tools you wish to use. Surprise us (in a good way) if you can. BEFORE submitting, please ensure that your slides auto-advance every 20 seconds. No cheating! 😜Following the presentation, there will be a short Q&A session opened to the rest of the class for a maximum of 3 minutes.","innovation-critique#Innovation Critique":"After listening to all the presentations, each student will be randomly assigned to write about two of the innovations that were presented (not their own presentation) and have to write about the following:\nBased on what the presenting team has shared, describe and explain what the innovation or technology is about. Please don't regurgitate the entire presentation. Summarise the points and keep them unopinionated. (5%)\nWas the presentation effective? Did the group show that they fully internalised the presentation techniques discussed in Lecture 3 (PUNCH->WIIFY->Plan)? (6%)\nWhat are your (original) thoughts? (9%)\n\nThe fun part is that the assignment of the presentations each student has to write about will be done only AFTER all the presentations are over. This means that every student will have to pay attention to every presentation 😎. Those who like Russian Roulette are welcome to skip and sleep for some presentations.This is not a literature class, and you are not required to write in poetry. We only ask that you think carefully about what you heard and express your ideas clearly. Points will not be taken off for typos or grammatical errors as long as the ideas are expressed clearly and can be understood easily. There is no minimum length, but do have some mercy on your poor lecturer and try to keep each innovation critique within 300 words. What matters is not how much you write but the quality of your thoughts and ideas and how much you actually learnt from the process.You are, of course, also welcome to write about other aspects of the seminar and also about lessons learnt in addition to this assignment. The innovation critiques should be submitted on Coursemology by (i.e. the next day).","response-and-follow-up-of-critique#Response and Follow-up of Critique":"Once all the innovation critiques are submitted, a new forum will appear, and you will post your critiques there. You will read the critiques written by your coursemates on your presentation and have an online discussion. If your coursemates think that your team's innovation is not innovative, you should try to convince them otherwise.Just bear in mind that the goal of CS3216 is to learn. You do not do better in this segment of the assignment by being nasty and running your coursemates down. Be civil. Be polite. Be kind. If others post comments disagreeing with you, do not be too defensive. All these comments should be posted by .How many comments should you post? As many as you think is appropriate and sufficient to earn the 10% grade for this part of the assignment.Remember: everything will go well (including your grade) if you demonstrate that you actually learnt something and have approached this innovation seminar in a thoughtful way 😃.You will also get points if your friends post stuff on your forum posts. The idea here is that whether you can write stuff that is thoughtful enough to attract readers and people to post comments is also a measure of \"quality\".","assessment-scheme#Assessment Scheme":"The following are the weightages for the two components:\n50% Group presentation\n40% Innovation critique x 2 (what you write in your posts)\n10% Response and follow-up of critiques (addressing critiques on your chosen innovation and responses to your posts)\n\nOverall, the innovation seminar is worth 10% of your final grade.","mode-of-submission#Mode of Submission":"The slides for the presentation should be named group--seminar.{pptx|key} and uploaded to Coursemology by , because we will be downloading the slides to project on-screen or screen-share during class.\n\nIf you are using Google Slides\n\nInstead of the above instructions, upload a PDF version of your slides group--seminar.pdf and upload a text file group--seminar.txt containing just the publicly-accessible view-only link to your slides to Coursemology by .\n\n\n\nDo not make any changes to your slides after the submission deadline, even if it is just tweaking animations. During the presentation day and right before your team presents, one of your team members should be ready with the revision history and show us that there has been no changes past the deadline. If there are any, we will ask you to rollback the presentation's version to right before the submission deadline, before your presentation starts.\n\nThe innovation critiques should be submitted within 24 hours of the innovation seminar, by . Your comments for the mutual critique part should be made by .\nMarks will be deducted if you fail to follow the submission instructions (e.g.\nincorrect file naming).\nClarifications and questions related to this assignment should be posted to the Coursemology forum.The way this assignment is structured, it might seem very stressful — but it's really not quite as bad as it seems. It's actually fun if taken in the right spirit.Good luck and have fun! 🙂"}},"/":{"title":"Why CS3216?","data":{"":"","its-not-the-same#It's not the same":"CS3216 is not your traditional software engineering course. You will not have lectures teaching you how to write in a particular programming language. You will not have assignments that assess you only for the quality of your code. You will not have a bar set for you. In fact, we don't even know how high the bar is.","its-about-your-dreams#It's about your dreams":"Inspired by The Last Lecture (or \"Really Achieving Your Childhood Dreams\"), this course is your chance to start realising your dreams today. You will get the chance to show off your creativity to do something different.You are free to build almost anything under the sun.","its-about-change#It's about change":"It will be a mistake to think that CS3216 is about teaching you how to work on new platforms. The world changes so fast that it will be obsolete by the time you graduate. In fact, you are more or less expected to learn them on your own.It's not about learning how to work on a platform. It's about learning how to learn. It's about equipping yourself with the ability to pick up new skills on the fly to face a changing world.","its-not-just-about-coding#It's not just about coding":"Enrolment to this course is open to students of all faculties and students. You will work in small inter-disciplinary teams to create your killer applications.Programming experience for non-School of Computing (SoC) students is not a pre-requisite since work will be done in teams. In previous years, we have had students from Science, Arts and Social Sciences, Business (including an MBA student) and Engineering in addition to SoC."}}} \ No newline at end of file +{"/_app":{"title":" App","data":{"":""}},"/_app":{"title":" App","data":{"":""}},"/archive/mobile":{"title":"Mobile Cloud Application","data":{"":"This assignment has been archived and no longer in-use. It is kept for\nreference purposes.","general-overview#General Overview":"In recent years, mobile cloud computing has been one of the hottest topics regarding technological advancement. So what exactly is mobile cloud computing, and why has it gotten so much attention?Smartphones and tablets have become ubiquitous. Owing to these technologies, people have found new ways to spend their time more fruitfully by doing more with their mobile devices. Mobile cloud computing is a crossover between mobile web and cloud, offering greater possibilities in terms of power and productivity.The mobile web refers to browser-based web applications for mobile devices. Compared to native ones, these applications used to be handicapped by the lack of features such as offline storage and support for hardware such as cameras. To address this situation, W3C has standards that browsers can implement, giving developers a consistent API to access features that would otherwise require writing a native application. The gap between mobile web and native applications is thus narrowing.Cloud computing is where data and processing power are accessed from a pool of shared online resources known as the cloud. You can visualise it as a supercomputer containing all the applications and data belonging to its users. A user can run their applications and process the data in the cloud using any connected device as a remote controller.Combining their characteristics results in mobile cloud applications with the following strengths:\nAvailability - With all data and configurations stored in the cloud, the user will be able to enjoy the same experience any time and anywhere using any mobile device.\nProductivity - What we previously could do only at home or in the office can now be done on the go. We are now able to read emails the moment they are received, edit documents or even catch up with friends over Facebook and WhatsApp during a commute.\nDevice-independent - Want to replace your iPhone with the latest Android? A web application runs in any modern browser, so there is no need to worry if your favourite application has yet to be ported to other platforms.\nLow hardware requirements - All heavy computations are offloaded from the client to the servers, reducing the application's role to an interface for sending commands to the cloud. In addition, parts of the data backed up in the cloud can be served on demand. The mobile device, therefore, does not need to have large processing power and storage capacity.","grading-and-admin#Grading and Admin":"This assignment can be done in groups of three or four students. If you are unable to find yourself a group, you will be randomly assigned one.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of mobile cloud application development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.With that said, you have a lot of freedom to express your creativity. You are free to develop any application you choose. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition at least one week before the assignment is due. Your petition is subject to approval.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you (pleasantly!) surprise us with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated.For example, WebVR and geolocation might be the latest and coolest feature supported by most mobile browsers, but they may not contribute to the user experience in a document editor. In fact, implementing features for the sake of doing so may work against you (and your grades) by confusing the user.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The high-level goal of this assignment is simple: a working Progressive Web Application that utilises the capabilities of a mobile device and is able to persist the users' data in the cloud. Your task is to demonstrate that you can design and implement RESTful APIs, as well as build a Progressive Web Application that consumes your API. You can use any backend language and/or framework you desire.Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference. If you can make a difference by just doing very little work, that is fine with us.Before you begin, please read through the whole assignment once to get a sense of what is required. The grading scheme can be found at the end of this handout.\nPlease read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of a mobile cloud\napplication.","phase-0-introduction#Phase 0: Introduction":"The reward for doing good work is more work.– Ben Leong\nThis assignment comprises 4 weeks of intensive learning that provides you with another opportunity to express your creativity. We will be focusing on mobile cloud applications, typically with the following components:\nClients - Clients reside on mobile devices belonging to users. They could be (1) native applications, which run only on their intended platforms or (2) HTML5 web applications with the potential to work on any device with an HTML5-enabled browser. The client application provides the user with an interface to view and manipulate data. For this assignment, you will be building a web app, not a native app.\nServer - The server runs on the cloud and serves data to the client. For example, transactions on an e-commerce app are requested by the client and processed on the server. Often, heavier computations such as video transcoding are also handled by the server because the computational power of mobile web browsers is limited.\nDatabase - The database does exactly what we would expect of it in any other context, which is to store all of the application's data.\n\nDepending on the size of the service, differing amounts of hardware may be deployed to keep up with the demands of its users. Obviously, large services will require more than a single server and database. There are many ways to configure multiple servers and databases to work together so that the service scales. You may read more about distributed systems in this article. Several server instances can be run simultaneously while using load balancers to split the work evenly among them. Data can also be replicated over several databases and/or sharded based on predefined hash functions for higher reliability and availability. Such are issues to consider as you extend your reach to more users, but we shall start small for this assignment. In its simplest form, a mobile cloud application can be hosted with the server and database sharing an AWS instance.One of the benefits of having a client-server architecture is that different kinds of clients (Web, iOS, Android, Mac, etc.) can reuse the API exposed by the same server. You will not need to rewrite your server if you need to cater to a new client.\n\nOn a native iOS/Android app, users will normally download the clients from the online application stores for their respective platforms. In our case, the workflow differs a little from native applications. Since our client is created with HTML5 and supporting web technologies such as JavaScript and CSS3, it is essentially a web page. During the user's first visit to the site, we will tell the browser to quietly download and save the program for future use. A Service Worker will help retain resources through the Cache API, which could then be used to serve the \"web page\" in the absence of an Internet connection.\n\nWhen this happens, the client can operate with limited functionality when offline and communicate with the server using AJAX calls while it has Internet access. Requests typically take the form of JSON-formatted messages, and they contain details of a job to be processed by the server, such as querying the database for some information or updating its records. The server then replies with a similarly formatted message response, which the client is responsible for decoding and displaying to the user.","phase-1-design#Phase 1: Design":"","idea-generation#Idea Generation":"The best way to predict the future is to create it.– Abraham Lincoln\nAs an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than Facebook, Twitter and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil.Before you jump into developing the specifications of your application, a very important question to ask yourself is, \"Does my application solve any problem for the users?\". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user's life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the fans that will help you spread the message about your application via word-of-mouth.\nMilestone 0: Describe the problem that your application solves. (Not graded)\nBuilding a killer application requires more than just technical skills. In CS3216, we expect you to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment.You should choose an application that fully utilises the potential of the platform. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why developing a mobile cloud application would best achieve your application's objectives.\nMilestone 1: Describe your application and explain how you intend to exploit the characteristics of mobile cloud computing to achieve your application's objectives, i.e. why does it make the most sense to implement your application as a mobile cloud application?\nIt is no good to have a killer app that nobody uses. Hence, you will need to think a little harder about how you plan to \"market\" your app to potential users. You must identify your target users, determine the relevance of your application to them (i.e. why they should care about your application) and explain how you plan to reach out and persuade them to use your application.In order to promote the use of your application, good marketing strategies are crucial in raising awareness of your application among targeted users. After introducing potential users to your application, how would you try to persuade them to continue using the application, and perhaps, even share or introduce it to others? What value do the users derive from using your application?Ideally, you should also think of ways to provide motivation for users to share your application with their friends. The application should be designed such that while individual users may derive some value using your application, it is in their interest to promote your application (e.g. a reward scheme can be set up to give out benefits for referrals).The number of users with mobile devices has grown rapidly in recent years. Given this trend, how would you take advantage of this growth to increase the number of people using your application?\nMilestone 2: Describe your target users. Explain how you plan to promote your application to attract your target users.\nNow that you have a solid idea of what you want to build, it is a good time to pick a suitable name for your mobile cloud application if you haven't already done so.","an-overview-of-relational-databases#An Overview of Relational Databases":"A relational database is a type of database that models stored data as tables with columns and rows. It is called \"relational\" because you can link a table to another table through foreign keys.In this section, we will be going through simple relational database concepts. There are some other more advanced concepts that you can read up online.A database application may store several databases. Hence, while each application will usually use its own database, several applications may share the same database application running on the same server (e.g. if you and a friend each have a blog, even if each blog needs 1 database, you could still house both blogs on the same MySQL instance).To visualize a database at the highest level, we can think about its schema, which is basically a blueprint of the database's tables, their structural details, and the relationships between them.Schemas define two things: tables and relations. Tables contain one or more columns each. For example, we can imagine a students table containing 5 columns: matric_no, name, address, phone, birthdate. Each column has a type that you need to specify (e.g. name is of type TEXT, birthdate is of type DATE). Actual data will then be simply stored as rows in the table.Each row needs to be uniquely identifiable. If two rows happen to be completely identical, you will run into trouble trying to update or delete them since there is no way to pinpoint exactly which one you mean. Thus, we usually have a column (or a set of columns in combination) that we require to be unique for each row. We call this the primary key. In the students table example, the matric_no column is an excellent candidate for the primary key since no two students share the same matric number. MySQL (and any other proper database system) will prevent you from inserting a row if there already exists another row with an identical primary key.Relations indicate relationships between tables. For example, suppose we add a home_faculties table containing two columns: matric_no and faculty – a simple mapping of student to faculty. We can link this table to the previous students table using the matric_no column, which both tables share. We say that matric_no in the home_faculties table is a foreign key that references the matric_no column in the students table. Note that a foreign key column set must reference a primary key column set of another table. Note also that our two-table set-up allows students to become members of two faculties (e.g. when doing double degrees). It would not be possible to fully go through all the details about relational database concepts here. For a better or further understanding, you might want to look up additional readings about the topic online.\nWhat is the primary key of the home_faculties table? (Not graded)\nOther important concepts include indexed columns (allowing searches to be fast), unique keys (enforcing uniqueness for non-primary key columns), and relation cascades (where deleting a student from the students table can automatically update/delete all entries in other tables that reference this table). It's up to you to learn about all these on your own.After this section, you should be ready to produce a schema for your application. Do consider how efficient your schema will be; specifically, think about the number of queries required to accomplish common tasks and the number of tables accessed to complete a single user query. Your schema should be graphical and should indicate clearly the table names, column names/types, primary keys, and relationships.As a rule of thumb, you should remember that database schemas should be designed with a design once use forever principle in mind. You should spend a good amount of thinking on a good schema design, after which you should not need to come back and make drastic changes to it. Make sure you take some time to plan a good schema design. Having to perform a large schema migration when you realise your original schema wasn't flexible enough to support some feature can be a painful process, especially so if you already have a considerably large user base.\nMilestone 3: Draw an Entity-Relationship diagram for your database schema.\n\nIf you are using MySQL Workbench, there is a feature to automatically create\nan EER diagram from your existing database\nschema.\nYou may simply export this as a PNG file and include this in your milestone\nsubmission.","restful-api#RESTful API":"Much as we would love to immediately begin building the application, there is still one final thing we need to draw up plans for - the RESTful API itself. Being the bridge between the client and the server, both sides should be very clear of the specifications to avoid unnecessary confusion during development. If you only decide on parts of the interface while you program the application, you risk having an inconsistent API. It pays off to plan this well; who knows, your application may become so prominent that you might want to open the API to third-party developers.Representational State Transfer, or REST in short, is an architecture for networked applications. Being one of the simplest architectures to deploy, it is a popular choice for many web services. REST is a client-server architecture where a client initiates a request to the server to be processed and receives a response with updated data. It is stateless, meaning that the server does not maintain the state of the client, and every message to the server must contain all necessary information to process the request. Not having persistent connections or complex states means that the service can be set up using simple web servers, and requests can be distributed across multiple servers for greater scalability.Requests and responses can take many forms: JSON is the most common format. Note that the request and response may not necessarily be in the same format. For example, when uploading a photo to a site, usually, a request with type multipart/form-data is sent while the reply containing the photo ID is in JSON. We now take a quick detour to explore the JSON format since it is one of the easier ones to handle.JavaScript Object Notation or JSON is a text-based data-interchange format. Consider your current scenario where you are working with an object in your client using JavaScript, and you need to send it over the network to be processed by the server. JSON is a set of rules to encode and decode data to and from a universally recognised string format so it can be used with any programming language which implements these rules. JSON works on any object made up of key/value pairs and/or ordered lists of values. The resultant string is also human-readable unless encoded binary files are involved. The following JSON string could be a response from a social network's REST API to a request for information on the user with id = 0, where { } represents a dictionary and [ ] an array.\n{\n\"id\": \"0\",\n\"name\": \"James\",\n\"tel\": \"61234567\",\n\"mobile\": \"87654321\",\n\"friends\": [\n{\n\"id\": \"1\",\n\"name\": \"Andy\"\n},\n{\n\"id\": \"2\",\n\"name\": \"John\"\n}\n]\n}\nJSON is already supported by all modern browsers and server-side scripting languages, so you do not need to implement it yourself, but if you want to know more, visit https://www.json.org/json-en.html.Going back to the API, one way to start planning it is to write down a list of functionalities (which require server interaction) that you would like the client to have (e.g. send a private message, buy a product, leave a comment). Try to group related ones together (e.g. add/remove a friend), usually according to the resource/object.Next, for every operation, you establish a triplet that describes it:\nRequest Method + Relative URLWhen an address is entered into the navigation bar, the browser performs an HTTP GET request to retrieve the page located at the URL. However, a POST request is made instead when we submit a registration form on the same page. If you haven't realised, in REST, the HTTP request method describes the action we want to perform, and the URL refers to the resource to act on. Just by looking at this combination, we should already fully understand the intention of the request.By convention, REST uses four request methods for the following purposes:\nPOST /products - Create new resource.\nGET /products/12345 - Get existing resource corresponding to the id of 12345.\nPUT /products/12345 - Replace existing resource corresponding to the id of 12345.\nPATCH /products/12345 - Modify existing resource corresponding to the id of 12345.\nDELETE /products/12345 - Remove existing resource corresponding to the id of 12345.\n\nNotice how \"clean\" URLs are used instead of the query string version? Comparing /products.php?id=12345 to its clean form /products/12345, the latter is more readable and has greater semantic meaning. It also conceals implementation details of the server which is irrelevant to the client, such as the file extension of the server-side script.As limited as these request methods may seem, they are actually sufficient to describe any operation. Consider a request to make a purchase. Though there is no buy method, we do not append an action to the URL (POST /products/buy). Why make things more complicated when we already have a clean and built-in way of representing the operation? Instead, buying a product can be thought of as creating a 'transaction' (POST /transactions). The trick is to derive a noun from the action.\nRequest ParametersThis is the data required to compute results. Typically, you only need this for PUT and POST methods. Any message format may be used here. You can consider using JSON for simpler requests and multipart/form-data for larger ones, like photos.\nResponse Value(s)This is the information to return to the client after processing the request. Like the parameters, you can choose to use any message format here. Make sure that you also plan for error responses using the semantically correct HTTP response code.If your request can potentially return large amounts of data, consider using a pagination mechanism. Imagine the Facebook newsfeed API returning all entries since the day you joined the social network!\n\nYou may have the freedom of planning this however you like, but always try to keep your API consistent. It would also be pretty confusing if every API function uses different message formats.There are too many REST practices to be discussed in detail here; make sure you do some research before you continue. You can find many articles and discussions online regarding RESTful API design. Note that this topic is highly opinionated, with many differing opinions on what constitutes REST. It is not necessary to go to great lengths to follow every single rule, but you must be able to justify your decisions with regard to your application's needs. If you have a ton of time (which you probably don't), you can read up on this lengthy but informative Microsoft REST API Guidelines.","alternatives-to-rest#Alternatives to REST":"Besides REST, there have been various systems introduced more recently that support alternative ways for client-server communication. These systems have seen increased adoption by companies that benefit from the different approaches to exposing API.Here are some popular alternatives to REST\nGraphQL\ngRPC (based on RPC architecture)\n\n\nMilestone 4: Explore one alternative to REST API (may or may not be from the list above). Give a comparison of the chosen alternative against REST (pros and cons, the context of use, etc.).Between REST and your chosen alternative, identify which might be more appropriate for the application you are building for this project. Explain your choice.\nFor your application, you may choose to implement a REST API or the alternative you have explored.It is important to design the API contract between the client and the server well. With the API contract well-documented, the client can test out features relying on server data without the server implementing the API endpoint by sending mock API requests and receiving mock responses. Tools such as Apiary and Faker can help you with that. Apiary in particular, can help you document your APIs for both your client-side and server-side developers to reference. For GraphQL and gRPC, there are also tools to generate documentation from the schema and protobuf.Complete the appropriate Milestone 5 below, depending on which system you have chosen.EITHER\nMilestone 5 (REST API): Design and document all your REST API. If you already use Apiary to collaborate within your team, you can simply submit an Apiary link. The documentation should describe the requests in terms of the triplet mentioned above. Do provide us with an explanation of the purpose of each request for reference. Also, explain how your API conforms to the REST principles and why you have chosen to ignore certain practices (if any). You will be penalised if your design violates principles for no good reason.\nOR\nMilestone 5 (alternative to REST): Provide equivalent documentation of your client-server communication. For GraphQL and gRPC, you can submit your schema or protobuf with additional descriptions or use any of the tools built on top of that. Also, explain how your design leverages the features of your chosen system. You will be penalised if your design fails to utilise any key features of the chosen system.","phase-2-api-server#Phase 2: API Server":"Don't worry about failure, you only have to be right once.– Drew Houston\nNow that you are done with the planning, it is time to turn your design into a usable product. Since the client is probably required to test much of the server's functionality (the reverse is also true), you are advised to split the work well among your teammates to develop the server and the client communication components concurrently.To test out server-side APIs, a popular tool out there is Postman. Postman provides a user-friendly interface to construct your API requests to the servers; certainly easier than cURL-ing from the command line!You will have to read up on how to implement REST endpoints on your back-end stack of choice. Here are links to starting guides for some common frameworks:\nRuby on Rails\nExpressJS","sql-querying-the-database#SQL: Querying the Database":"Any decent web application should do more than returning a hard-coded array. Most of the time, you will have to query the database and construct the JSON response from the database result.SQL is a standard language designed to manage a database and to retrieve or store data in a database. In addition to SQL, most database systems will have several additional SQL-like commands that are used to perform specific administrative tasks like adding new users or modifying passwords.MySQL provides commands you can use to create and alter databases and tables, and also commands you can use to insert, update, delete, and retrieve rows from tables. We call the former \"data definition language\" (DDL) and the latter \"data manipulation language\" (DML). You should never run DDL commands from publicly accessible pages.Most of the time, it is not a good idea to write raw SQL queries yourself. We recommend that you look up database connectors and ORM tools for the language/framework you intend to use.\nMilestone 6: Share with us some queries (at least 3) in your application that require database access. Provide the actual SQL queries you use (if you are using an ORM, find out the underlying query and provide both the ORM query and the underlying SQL query). Explain what the query is supposed to be doing.","http-request-methods#HTTP Request Methods":"Now that we can obtain the results from the database queries, we can move on to providing the actual API for the client to use. We can do so by handling the common HTTP request methods used in REST services: GET, PATCH, PUT, POST and DELETE. As mentioned earlier, GET retrieves a resource, PATCH modifies it, PUT replaces it, POST creates a new resource, and DELETE removes the resource. If it is intended that users are not allowed a particular action, then you can ignore the corresponding request method.Do remember to program defensively e.g. sanitise all input. Also, as different operations may be expecting differing types of data, you should always specify the content-type of the request and response message so that the receiving end knows how to handle it.","phase-3-mobile-client#Phase 3: Mobile Client":"Global vision, local win.– Jack Ma\nWhile an HTML5 application can be used by any device with a modern web browser, the immediate tradeoff is that our HTML5 application cannot directly access some of the native functionality and libraries on the device. In this section, you will learn how to create a simple Progressive Web App, that is, an HTML5 client that is able to work even while the device does not have an Internet connection.","progressive-web-apps#Progressive Web Apps":"In recent years, Google has been pushing the concept of Progressive Web Apps. Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They are:\nProgressive - Work for every user, regardless of browser choice, because they're built with progressive enhancement as a core tenet.\nResponsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.\nConnectivity independent - Enhanced with service workers to work offline or on low quality networks.\nApp-like - Feel like an app to the user with app-style interactions and navigation because they're built on the app shell model.\nFresh - Always up-to-date, thanks to the service worker update process.\nSafe - Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.\nDiscoverable - Are identifiable as \"applications\" thanks to W3C manifests and service worker registration scope allowing search engines to find them.\nRe-engageable - Make re-engagement easy through features like push notifications.\nInstallable - Allow users to \"keep\" apps they find most useful on their home screen without the hassle of an app store.\nLinkable - Easily share via URL and does not require complex installation.\n\nSource: https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/It is recommended that you go through this short tutorial on making your first Progressive Web App.Next, we'll be exploring some of the features that constitute a progressive web app.","add-to-home-screen#Add to Home Screen":"Apart from your usual HTML5 features, most mobile devices allow users to add a shortcut to a web page to their home screen.\n\n\n\nIn iOS and Android devices, when these shortcuts are run, they are opened in a standalone browser window that does not include the default browser UI controls at the top and bottom. This allows web applications that have been added to the home screen to have more space to work with and look as if they were native applications. Special metadata tags have been developed to allow developers to set icons, splash screens and even the colour of the device's status bar. As much as users may like your application, adding a blank icon does not help users identify your application among the others they have installed. If users are willing to shortcut your application, capitalise on their goodwill by making it easy for them to return to your application.You can find the documentation for doing that on Safari and Chrome. If you plan to release your application, it is a good idea to do the same for other platforms that we may not have covered here.\nMilestone 7: Create an attractive icon and splash screen for your application. Try adding your application to the home screen to make sure that they are working properly. Include an image of the icon and a screenshot of the splash screen in your write-up. If you did not implement a splash screen, justify your decision with a short paragraph. Add your application to the home screen to make sure that they are working properly. Make sure at least Safari on iOS and Chrome on Android are supported.","presentation#Presentation":"Your team (or maybe just your user interface designer) should spend some time designing a good UI; a good UI helps keep users. Although the functionality of your application is important, the way it provides the functionality is just as important. Users will not continue using an application that is difficult to use, regardless of how technically superior your application is or what functionality it provides. If your users do not like it, they simply won't use it.All you have to do is spend some time testing your application. In most cases, you will quickly know if your UI makes or breaks it. It's common sense!After the UI has been designed, the UI needs to be implemented. Cascading Style Sheets (CSS) would be used since the application is actually just a fancy web page. All styles should be contained within CSS files, linked to the main page using tags. It is generally a bad practice to mix CSS with HTML.Good CSS is not easy to write, and many applications end up with messy CSS after an extended period of development as the application grows bigger. To solve this problem, front end developers have come up with methodologies to structure your CSS code:\nObject Oriented CSS (https://github.com/stubbornella/oocss/wiki)\nScalable and Modular Architecture for CSS (https://smacss.com/)\nBlock Element Modified (http://getbem.com/)\n\nRead up on them and choose one (or more) to use in your code.\nMilestone 8: Style different UI components within your application using CSS in a structured way (i.e. marks will be deducted if you submit messy code). Explain why your UI design is the best possible UI for your application. Choose one of the CSS methodologies (or others if you know of them) and implement it in your application. Justify your choice of methodology.","https#HTTPS":"By default, your application should be accessible through the Hypertext Transfer Protocol (HTTP). However, that is considered a bad practice as HTTP data are transmitted through the network in plaintext, allowing anyone located between the web host and the client to be able to sniff and view any HTTP data, which may include passwords or tokens.HTTPS (HTTP over SSL/HTTP Secure) is a protocol for secure communication over a computer network. HTTPS is not a separate protocol; it refers to the use of ordinary HTTP over an encrypted SSL/TLS connection. Almost everything in the HTTPS payload is encrypted, including the headers, request and response load.If your application requests for personal identifiable information (PII) or credentials from the users, it is good practice to deploy HTTPS to protect your users against man-in-the-middle (MITM) attacks.To prepare a web server to accept HTTPS connections, the administrator must create a public key certificate for the web server. This certificate must be signed by a trusted certificate authority for the web browser to accept it without warning. The authority certifies that the certificate holder is the operator of the web server that presents it. Web browsers are generally distributed with a list of signing certificates of major certificate authorities so that they can verify certificates signed by them.SSL certificates are issued by certificate authorities (CA), whose certificates are by default installed into your machines, and obtaining them usually requires paying a bit of money (~8 USD to 70 USD per year). However, you can also obtain a certificate from Let's Encrypt for free. Let's Encrypt launched in April 2016 and provides free and automated SSL/TLS certifications to websites. PWAs have to be served via HTTPS in order to make use of service workers. More on that later 😉.\nMilestone 9: Set up HTTPS for your application, and also redirect users to the https:// version if the user tries to access your site via http://. HTTPS doesn't automatically make your end-to-end communication secure. List 3 best practices for adopting HTTPS for your application.","offline-operability-and-data-persistence#Offline Operability and Data Persistence":"Very often, it is a good idea to provide the user with some level of offline operability. Even without an Internet connection, your application should not be totally dysfunctional. If there is something that can obviously be done offline, users will expect to be able to do so.For example, photo sharing applications should allow users to organise and edit photos at any time. These jobs can be saved in a queue if the application is not connected, and these operations can be played back on the server when the device goes back online.The Facebook mobile app allows users to draft posts and write comments while offline, which will be posted when the device goes online.One last example is the Dropbox iOS application. An Internet connection is required to retrieve files that the user has stored in the online folder. However, it also allows users to flag selected files for the application to cache locally in the phone's internal memory, making them available at all times.We shall now look at some technologies that will enable you to realise this for your application.","1-service-workers#1. Service Workers":"A service worker is a script that runs in the background and responds to events from your webpage, which includes network requests. This ability to intercept the request and respond to them, whether through the network or cache, helps to provide a consistent experience even when there is no connection.\nSupport for service workers are relatively new and are still in development,\nwhich may result in browser compatibility issues. Most features have been\nimplemented in modern browsers. Check out\nhttps://jakearchibald.github.io/isserviceworkerready for the current state of\nsupport.\nEven if the targeted browser does not support service workers, your application should still degrade gracefully! Offline support is just a good-to-have; the core functionality of your site should still work!To get started, we first need to register a service worker with our browser. Create two files:\nA service worker file named service-worker.js in your application root\napp.js/main.js file that will be included in your application, and add the following code to it:\n\n\n\nIn this example, we first check to see if the browser supports service workers. If the browser does support it, we will then register our service worker script.Caching required filesIn order for your application to work offline, the service worker will need to have all the files related to your application. When your application page is visited for the first time, an install event will be fired. The service worker can then listen to this event and cache the required files through the Cache API.Add the following code to service-worker.js to handle the install event:\nself.addEventListener('install', function (event) {\nevent.waitUntil(\ncaches.open('cache_name').then(function (cache) {\nreturn cache.addAll([\n'/',\n'/style.css',\n// ...\n]);\n}),\n);\n});\nThe service worker first opens the cache with the cache_name, before calling addAll that takes in an array of URLs and retrieves all the response objects associated with the URLs. These response objects are then cached for future usage.Serving the cached filesNow that the required files have been cached by the Service Worker, we can serve the page directly to the user without sending new network requests to retrieve these files. Similar to the install event when a page is first visited, a fetch event will be fired if the page is visited again. The service worker can then handle this event to return the cached response.\nself.addEventListener('fetch', function (event) {\nevent.respondWith(\ncaches.match(event.request).then(function (response) {\n// Response for the request is found in cache, return the response\nif (response) {\nreturn response;\n}\n\n// Response is not found in cache, make a network request instead\n// You might need to polyfill `fetch` or replace with other forms of ajax calls\nreturn fetch(event.request);\n}),\n);\n});\nIn this example, the event request is matched against the cache for a cached response. If a corresponding response is found, the cached response will be returned instantly. If not, the request will be passed on to the server to retrieve the response.Cache ManagementNext, we need to ensure that the service worker and cache are up to date. For the service worker, the browser will automatically update and install the new service worker script once changes are detected from the server. This will kick off a new sequence of install events, followed by an activate event when the new service worker takes over.However, cache management, such as purging unused cached data, has to be managed by the service worker itself. This should be done in the activate callback to ensure that the latest script is used to manage the cache:\nself.addEventListener('activate', function (event) {\n// Cache management. E.g. Purging unused data\n});\nAdditional ResourcesThis is just a basic introduction to service workers, which can be utilised more efficiently to provide more comprehensive Progressive Web App experiences. For example, rather than caching everything during the install phase, we could also cache new requests progressively as the user explores the application. Service workers can also handle the push event, which can be used to create web notifications that will create a native-like experience. More info can be found here.There are tons of resources available online for service workers. Here are a few resources to kickstart your learning process:\nhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers\nhttps://jakearchibald.github.io/isserviceworkerready/resources.html","2-web-storage#2. Web Storage":"Service workers allow resources to be retained locally, but JavaScript variables do not survive past the lifetime of the application. When the application is restarted, it is reset to a clean state. Prior to HTML5, cookies have been used to retain client state; however, this method creates a burden on the network as all cookies associated with a domain are sent with every request. Web Storage is a storage API that allows the storing of data associated with a site, which persists across sessions without the drawbacks of using cookies.Web Storage is a key/value store and can be accessed through the localStorage object or the sessionStorage object. On your own, find out the difference between sessionStorage and localStorage. We will cover localStorage in the next example.\n\nIn the example above, nothing is observed when the user first loads the page. However, we define a new user object containing the user's ID as well as his name and add it into the key/value store. When the page loads in future, we will see that the user has already been set and will show up in the console. We can also clear the localStorage object or remove a specific key/value pair. As Web Storage does not support storing objects, one workaround is to store the object in stringified-JSON format.For a complete list of Web Storage's capability, visit https://html.spec.whatwg.org/multipage/webstorage.html.","3-onlineoffline-events#3. Online/Offline Events":"Storing data is easy; the tricky part comes when having to deal with synchronisation of states between the client and server.How does the server update a client when it connects with outdated data? How will a client post outstanding jobs when it goes online? What happens if both cases occur at the same time with conflicting instructions (e.g. client tries to comment on a thread that has already been deleted from the server)? These are but a few out of many possibilities that have to be considered.How you handle the problem depends on your application; prior to that, your application would actually need a means to determine if there is an Internet connection:\n\nnavigator.onLine is a boolean value containing the device's current Internet connection state. You can also register callbacks for the online and offline events. Try visiting the page on your mobile device and watch the events fire as you toggle your Wi-Fi on and off.Word of caution - the behaviour of navigator.onLine is flaky on desktop browsers but works fine on mobile browsers (Chrome). It is not the most reliable method of testing network connectivity.\nMilestone 10: Implement and briefly describe the offline functionality of your application. Explain why the offline functionality of your application fits users' expectations. Implement and explain how you will keep your client synchronised with the server if your application is being used offline. Elaborate on the cases you have taken into consideration and how they will be handled.","communicating-with-the-server#Communicating with the Server":"Your application needs to be able to communicate the user's actions to the server. Since our application runs in the browser, we can use an AJAX call to do so. AJAX allows you to make HTTP requests using JavaScript without a page reload. The following example uses jQuery to make a request to the REST server we have created earlier:\n\nWithin the AJAX call, the type refers to the HTTP request method. Just by looking at the parameters, we should already know that PUT /products/12345 is a request to modify the information of the product with id = 12345. Therefore, it makes sense to send the new information to the server through the data parameter. If you are expecting JSON to be returned, set the dataType to json, and jQuery will decode it for you. Also, the contentType defaults to urlencoded – remember to specify this parameter if the server expects the data to be in some other encoding.Finally, callbacks can be used to perform actions when the AJAX call succeeds or fails. Make sure that users are notified of a failure instead of being kept in suspense. Visit https://api.jquery.com/jQuery.ajax/ for a full list of options that $.ajax() has to offer.","authentication#Authentication":"Being able to communicate with a server is cool, but more work has to be done. With the right tools, anyone can send a request to your server, and you need to protect important API calls so that only the rightful users can make them (e.g. only the blog owner should be able to delete their own articles). To do so, we need some ways of determining the identity of the user making the request.One simple approach is to make use of JSON Web Token (JWT), which is a digitally signed JSON object for transmitting information between different parties. JWT consist of three parts:\nHeader - Contain the token metadata, which usually consists of the type of token and the encryption algorithm.\nPayload - The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata.\nSignature - The headers and payload digitally signed with the encryption algorithm.\n\n\n// Header\n{\n\"alg\": \"HS256\",\n\"typ\": \"JWT\"\n}\n\n// Payload\n{\n\"sub\": \"1234567890\",\n\"name\": \"John Doe\",\n\"admin\": true\n}\nGiven this header and payload, the JWT string will then be created in the following manner:\n\nHence a JWT consists of the encoded header, payload and signature, which is then appended together with periods as the delimiter.When the user is first authenticated with your app using their credentials, the JWT will be returned to the user and stored locally. This token can then be added to the Authorization header in future API requests as part of the authentication.\nAuthorization: Bearer \nThe JWT may look cryptic, but it is, in fact, reversible. You should use SSL when using such a scheme. Once again, the choice of authentication protocols for RESTful APIs has always been a point of debate with no hard-and-fast rules. It is your job to identify the most practical choice for the requirements of your application. JSON Web Tokens should be sufficient in most cases, but feel free to use any methods you deem fit. More reading about JWTs can be found here: https://jwt.io.\nMilestone 11: Compare the advantages and disadvantages of token-based authentication against session-based authentication. Justify why your choice of authentication scheme is the best for your application.","native-look-and-feel#Native Look and Feel":"Although your application may not be native, it may be a good idea to style it to look and feel like one. Owners of mobile devices have probably become accustomed to the user interface provided by the operating system, so they instinctively know how to use a native application when faced with one. When there seems to be more information, they try to scroll down. When they perform a swipe, they expect to see the next page. Likewise, to navigate through the application, looking for tabs at the bottom of the screen is the first thing that comes to mind. By making your application native-like, its learning curve becomes less steep. In addition, as a lot of research have been done by the mobile device creators to arrive at the current interface, we are less likely to make design mistakes by replicating it. Read about this research study by Google and AnswerLab.How can we emulate a native application? As part of the goal to improve the mobile web, HTML5 and CSS3 have been loaded with many new features. These features include animations, 3D transformations, visual effects and events which can reproduce the native look and feel when used in parallel. To do so, however, is time-consuming and is a sizable project on its own. Fortunately, others have done the dirty work, and there are many open-sourced frameworks and libraries you can use to easily recreate the native experience.The following are some options you can consider:\nIonic - http://ionicframework.com/\nRatchet - http://goratchet.com/\nFramework7 - https://framework7.io/\nOnsen UI - https://onsen.io/\nVuetify - https://vuetifyjs.com/en/\nMaterial-UI - http://www.material-ui.com/\n\nThe following are some options you should avoid. They look horrid:\njQuery Mobile - http://jquerymobile.com/\njQTouch - http://jqtouch.com/\n\nYou probably know this by now, but using others' code does not come without any cost. Some have very steep learning curves, others may require you to adopt a totally different style of programming, and certain ones may be hardly or badly documented. Worst of all, the code may be littered with bugs, and you certainly do not have the time to be fixing someone else's problems. Be sure to do a thorough evaluation before making a decision. Also, be warned that the teaching staff may be unfamiliar and thus unable to assist with problems encountered with external frameworks/libraries.\nMilestone 12: Justify your choice of framework/library by comparing it against others. Explain why the one you have chosen best fulfills your needs. Lastly, list down some (at least 5) of the mobile site design principles and which pages/screens demonstrate them.","user-experience#User Experience":"Another important part of your application is the user experience. Please note that user experience (UX) is different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Reddit and Craigslist still have a ton of daily active users despite their UI. 😵UX encompasses all aspects of the end-user's interaction with the application. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design.UX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas.\nMilestone 13: Describe 3 common workflows within your application. Explain why those workflows were chosen over alternatives with regards to improving the user's overall experience with your application.","google-analytics#Google Analytics":"You should be interested in the usage statistics of your application. Google Analytics is one popular way to collect insights. It can be set up easily — the following examples are using the analytics.js snippet, part of Universal Analytics. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services.If your application's interface is predominantly built with a JavaScript MVC framework, it is very likely that you have a Single-Page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 pushState API. Pages can still be tracked using Virtual Pageviews by executing the following code instead. Refer to https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications for more information.\nga('set', 'pageview', '/your_virtual_page_path');\nEvent Tracking can provide more fine-grained control over user actions. They can be used to track more events such as successful AJAX calls, buttons pressed, or even videos downloaded. The following code can be embedded in the click callback of a button that publishes a new blog post:\nga('send', 'event', 'button', 'click', 'publish');\nIn particular, Social Interaction Analytics can be used to track clicks on social buttons on your application, such as Like, Share or Tweet buttons. To learn how to track social network activity, check out https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions.Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that your application is being tracked:\nCheck the Network tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.\nUse \"Real-Time\" mode in the Analytics dashboard, which allows you to view activities on your application in near real-time.\nUse the official Google Analytics Debugger Chrome Extension (recommended)\n\nMore information and examples at https://developers.google.com/analytics/devguides/collection/analyticsjs/.\nMilestone 14: Embed Google Analytics or equivalent alternatives in your application and give us a screenshot of the report. Make sure you embed the tracker at least 48 hours before the submission deadline as updates for Google Analytics are reported once per day.","google-lighthouse#Google Lighthouse":"To guide you in building more performant and accessible progressive web apps, you can use Lighthouse to audit your app. This open-source auditing tool provides scores, individual metrics and feedback for four categories:\nProgressive Web App - To what extent your application can be considered a progressive web application.\nPerformance - Audits to measure your application's overall performance.\nAccessibility - Audits to improve the accessibility of your app. For example, ensuring all image elements should have an alt attribute.\nBest Practices - Advisory audits that provide recommendations to modernise your app and counter performance pitfalls.\nSEO - Audits to estimate how well your page is optimised for search engine results ranking.\n\nHere are some links to get you started on using Lighthouse:\nhttps://developers.google.com/web/tools/lighthouse/\nhttps://www.keycdn.com/blog/google-lighthouse/\nhttps://youtu.be/NoRYn6gOtVo\n\n\nMilestone 15: Achieve a score of at least 8/9 for the Progressive Web App category on mobile (automated checks only) and include the Lighthouse HTML report in your repository.","phase-4-coolness-factor#Phase 4: Coolness Factor":"It's very easy to be different, but very difficult to be better.– Jonathan Ive\nThis section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor.Several suggestions have been provided. We emphasise that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use.","social-integration-optional#Social Integration (Optional)":"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application.Facebook Social Plugins or Twitter for Websites creates a wall post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base.Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it.\nMilestone 16: Identify and integrate with social network(s) containing users in your target audience. State the social plugins you have used. Explain your choice of social network(s) and plugins. (Optional)","geolocation-optional#Geolocation (Optional)":"Geolocation services are becoming increasingly popular with people. Many services have made their applications location-aware to provide users with more relevant results.Fortunately, Geolocation is specified in HTML5, so non-native applications can also make use of this powerful feature. The Geolocation API consists of three simple functions you can use to make your application location-aware. When calling these functions, callbacks are passed to handle success and failure cases.\ngetCurrentPosition: Invokes a callback with the user's current position passed as the first parameter.\nwatchPosition: Does the same as getCurrentPosition. In addition, it starts monitoring the user's position and invokes the provided callback whenever it changes. The new position is passed to the callback as the first parameter.\nclearWatch: Stop monitoring user's position.\n\nThis code will continue to output the user's position as they walk about with their mobile device:\n\nShowing the user their coordinates may hardly be of any use to them at all. You could take it up one level by plotting it on a map and perhaps places of interest near them.For complete documentation of Geolocation API and Google Maps, visit https://w3c.github.io/geolocation-api/ and https://developers.google.com/maps/documentation/javascript/reference respectively. Mapbox is a nice alternative to plotting maps and allow more customisation of the map for more UI goodness.\nMilestone 17: Make use of the Geolocation API in your application. (Optional)","other-emerging-features-and-useful-resources#Other Emerging Features and Useful Resources":"There are a lot more cool and useful web APIs than what has been described in this document. For example, notification APIs let you send out notifications at the system level; device APIs allow you to interact with users' hardware directly, including detect changes in ambient light, check battery status or trigger vibration; imagine playing a web-based game, and when you set off some explosives, your phone vibrates!Here are some useful links:\nhttps://developer.mozilla.org/en-US/docs/Web/Reference/API\nhttps://developer.chrome.com/extensions/api_other\nhttp://caniuse.com\n\nYou can also check out this video by Google that recaps some of the things we covered above.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 17 milestones in total: two are optional (Milestones 16 and 17). That leaves you with 15 compulsory milestones. Milestone 4 is worth 3%, and Milestone 9 is worth 2%. The rest are worth 5% each.The bonus milestones and the optional milestones will contribute towards the remaining 30%.Overall, the mobile cloud application assignment is worth 20% of your final grade.","mode-of-submission#Mode of Submission":"The following will need to be both submitted to Coursemology (under \"Assignment 3 - Mobile Cloud Application\") and included in your GitHub repository:\nA write-up, group--milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your application is clearly stated in the write-up for the convenience of the teaching staff.\nA one/two-page pitch of your application, group--pitch.pdf, pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. Restrictions: no longer than 2 A4 sides.\n\nThe following will only need to be included in your GitHub repository:\nA README.md file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:\nThe list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment.\nThe URL to your application, i.e. your application must be accessible online somewhere.\nThe name of your application.\nSet-up instructions for local testing (good to have).\n\n\nThe code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits).\nLighthouse HTML report, group--lighthouse.html.\n\nNot following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted to the Coursemology Forum.Good luck and have fun!"}},"/cohorts/AY201516":{"title":"AY2015/16","data":{"":"","students#Students":""}},"/cohorts/AY201617":{"title":"AY2016/17","data":{"":"","students#Students":""}},"/cohorts/AY201718":{"title":"AY2017/18","data":{"":"","students#Students":""}},"/cohorts/AY201819":{"title":"AY2018/19","data":{"":"","students#Students":""}},"/cohorts/AY201920":{"title":"AY2019/20","data":{"":"","students#Students":""}},"/cohorts/AY202021":{"title":"AY2020/21","data":{"":"","students#Students":""}},"/cohorts/AY202122":{"title":"AY2021/22","data":{"":"","students#Students":""}},"/cohorts/AY202223":{"title":"AY2022/23","data":{"":"","students#Students":""}},"/cohorts/AY202324":{"title":"AY2023/24","data":{"":"","teaching-staff#Teaching Staff":"","students#Students":""}},"/coursework":{"title":"Coursework Overview","data":{"":"","assignment-1--product-design#Assignment 1 — Product Design":"In this assignment, you will put on your designer hat and learn how to design a software product, and come up with ideas, features and designs.","assignment-2--innovation-seminar#Assignment 2 — Innovation Seminar":"In order to build good and original applications, it is important to learn what other people have already done, and think critically about what is good and bad, as well as explore ways to improve and to generate new ideas. In addition, it is important to learn how to articulate one's ideas in a clear and succinct way both orally and in writing. The innovation seminar is designed to help students (i) identify innovative ideas; (ii) gain a better understanding of existing applications; (iii) learn how to present (or sell one's ideas) and (iv) learn how to articulate their ideas in writing.","assignment-3--artificial-intelligence-application#Assignment 3 — Artificial Intelligence Application":"The high-level goal of this assignment is to utilize generative AI (large language models (LLMs) in particular) to build a meaningful digital product and is able to persist users' data in the cloud. Your task is to demonstrate that you can build a web application that integrates with LLM services using well-designed prompts. You can use any backend language and/or framework you desire.","final-project#Final Project":"The Final Project is where you will showcase to the world your creativity and talents. There are no limits on what students can do for the final problem, though the expectation is that it must be a \"cool\" application or product"}},"/coursework/artificial-intelligence":{"title":"Assignment 3 — Artificial Intelligence","data":{"":"Item\tDue\tIssue date\t\tFinal submission","general-overview#General Overview":"In recent times, the landscape of software development has been profoundly reshaped by the remarkable strides made in artificial intelligence (AI) and, more specifically, generative AI and large language models (LLMs). These advancements have revolutionized how applications are conceived, designed, and experienced, opening up a realm of possibilities that were once confined to the realm of science fiction.At the heart of this transformation lie LLMs, such as GPT-3.5 and Claude, which stand as towering pillars of AI ingenuity. These models possess an unprecedented ability to comprehend and generate human language with impressive fluency and nuance. As a result, a new era of app development has emerged — one characterized by applications that are not merely tools, but intelligent and empathetic companions.The key merits of building apps that harness the power of LLMs include:\nNatural language understanding and generation: LLMs enable apps to not only understand user inputs with remarkable accuracy but also respond in a manner that mirrors human conversation. This grants users a level of interaction that transcends traditional interfaces, fostering more engaging and meaningful experiences.\nContextual awareness: These models possess an inherent understanding of context, allowing apps to tailor responses and actions based on the evolving conversation. This adaptability creates a sense of fluidity and responsiveness, akin to conversing with a knowledgeable friend.\nContent creation and enhancement: Apps can leverage LLMs to generate a wide array of content, from articles and reports to creative writing and marketing copy. This capability has the potential to revolutionize content-driven industries, amplifying efficiency and creativity.\nPersonalization: By tapping into the vast expanse of language data, apps can deliver personalized experiences that cater to individual preferences, needs, and emotions. This personal touch fosters a deeper sense of connection and resonance.\n\nRecent enhancements in AI have propelled LLMs to even greater heights. Techniques such as unsupervised fine-tuning and transfer learning have imbued these models with the ability to adapt to specific tasks and domains. Moreover, efforts to democratize AI have led to increased accessibility, empowering a broader spectrum of developers to harness the potential of these models.In this era of AI-powered app development, the boundaries of creativity are expanding. Whether it's a virtual personal assistant that understands nuanced voice commands, a language-learning app that adapts to each user's proficiency, or a content creation tool that seamlessly generates tailored content, the possibilities are limited only by imagination.The convergence of LLMs and app development is ushering in a new wave of innovation, redefining the way we interact with technology. As these models continue to evolve and mature, they will undoubtedly leave an indelible mark on the fabric of our digital experiences, enriching and enhancing our lives in ways that were once unfathomable.As a CS3216 student, you do not want to miss out the opportunity of a lifetime to be at the forefront of this new AI wave!P.S. In the spirit of exploring AIs/LLMs, parts of this assignment have been written with the assistance of LLMs 😉.","grading-and-admin#Grading and Admin":"This assignment can be done in groups of three or four students, which should have been formed by now. If you were unable to find yourself a group, you will be randomly assigned one.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of AI software development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.With that said, you have a lot of freedom to express your creativity. You are free to develop any idea you like. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition via email at least one week before the assignment is due. Your petition is subject to approval.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you will surprise us (pleasantly!) with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated.For example, LLMs can be used to easily add chatbots to any applications, but chatbots may not contribute as much value to certain domains. In fact, implementing features for the sake of doing so may work against you (and your grades) as these \"non-value add\" features detract users from the main purpose of your app.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The high-level goal of this assignment is to utilize generative AI (LLMs in particular) to build a meaningful digital product.You should approach this assignment with the mindset of an entrepreneur — you own every decision, and each decision you make (from design to engineering) will directly translate to the \"success\" of your product.Like all previous assignments, we designed milestones such that you can hopefully have a sense of direction on where we expect you to reach, but these milestones are broadly described so that you are not restricted on how to get there.In this assignment, your task is to demonstrate that you can design and implement a web application that utilizes the capabilities of LLMs, persist the users' data in the cloud and leverage the user's identity in a meaningful manner.You should utilize this assignment to showcase your product sense and engineering capabilities. You should also consolidate learnings from Assignment 1 (on Product Design) and Assignment 2 (on identifying innovations, and gaps in the market) to build a fuller product for this assignment.Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference.\nPlease read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of an AI\napplication. The grading scheme can be found at the end of this handout.","phase-0-introduction#Phase 0: Introduction":"","background#Background":"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions.Notably, technology giants such as Google, Microsoft, and Meta have fully embraced the AI \"arms race\" by entering the fray with their own formidable models and chatbots. A clear testament to this paradigm shift was the recurring theme of AI at Google I/O 2023, underscoring the pervasive influence of AI across industries. As these tech titans continue to dedicate resources to AI research and development, the integration of AI into their existing products is poised to unlock new dimensions of functionality and user experience.However, the transformative power of generative AI and LLMs is not confined to established players alone. A burgeoning ecosystem of AI startups has taken root, propelling the domain forward with innovative applications primarily in copywriting and customer support. These startups, leveraging the remarkable capabilities of generative AI, are reshaping how businesses communicate with their users to provide support, setting the stage for more personalized and efficient engagement. Case in point – 35% of Y Combinator's 2023 Summer batch were AI startups!As this new wave of apps, empowered by generative AI and LLMs, continues to unfold, the boundaries of innovation are rapidly expanding. The convergence of AI and human ingenuity is reshaping how we interact with technology, and the journey ahead is going to be really interesting. It's an exciting time to be a software engineer!","new-ai-landscape#New AI Landscape":"Within the generative AI startup landscape, there are a few common categories of products:\nText: Create and manipulate textual content. Tools that can draft articles, generate product descriptions, and even assist in creative writing. Examples: Copy.ai, Jasper, Hypotenuse AI.\nImage: Generate, modify, or enhance images. Tools for artists, designers, and photographers to generate artwork, edit photos, and visualize ideas. Examples: Midjourney, Runway ML, Pebblely, Adobe Photoshop.\nAudio: Compose music, generate sound effects, and even mimic specific voices.\nCode: Assist in software development tasks, including generating code snippets, offering coding suggestions, and even automating parts of the coding process. Examples: GitHub Copilot, Sourcegraph Cody.\nChatbot: Create conversational agents powered by generative AI. These chatbots can engage in natural conversations, answer queries, and provide support based on custom data. Examples: Mendable, Chatbase, Glean, AskMore. AskMore uses AI to conduct your user research so you get more feedback, faster, and in any language; an AI can even do your Assignment 1 milestone for you!\nDesign: Design your brand, logo, websites, presentations, and marketing collateral with a prompt. Examples: Framer AI, Designs.ai, Uizard, Tome.\nVideo: Manipulate and create video content. These tools can be used for video editing, special effects, and even automated video creation. Examples: Synthesia, Lumen5.\nData and Analytics: Analyze and generate datasets for testing and simulation purposes. Query data using natural language. Examples: Defog.\nAgents: Create virtual agents powered by generative AI. These agents can emulate human interactions and assist with tasks like scheduling, information retrieval, and more. Examples: Cognosys, Spell.\nGaming: Create dynamic game environments, generate levels, adapt game mechanics based on player behavior, NPCs can engage in personalized conversation with players.\n\nWhile most companies are part of the AI \"gold rush\", some prefer to follow the saying \"during a gold rush, sell shovels\". These \"shovel\" companies build services around LLMs, selling API access to LLMs and platforms to make it easier to build AI products:\nAPIs: Access to the LLMs hosted on the cloud. Examples: ChatGPT & GPT-3.5 by OpenAI, Claude by Antropic, Command by Cohere.\nToolchains: Simplify common LLM-related operations. Examples: LangSmith by LangChain, Cohere platform, Humanloop.\nVector databases: Stores data in a format that enables semantic information retrieval and long-term memory for LLMs. Examples: Supabase Vector, Pinecone, Weaviate.\n\n\n\nSource: https://www.antler.co/blog/generative-aiOther lists to find AI products:\n152 Fun AI Tools You've Never Heard Of\nAntler Gen-AI Landscape\nThere's An AI For That\n\n\nFor this assignment, you are required to use LLMs to build an AI software\nproduct as LLMs are easy to get started with, and require less server\nresources as compared to other forms of generative AI like image/audio\ngeneration.","phase-1-product-strategy#Phase 1: Product Strategy":"","idea-generation-problem-space#Idea Generation, Problem Space":"As an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than ChatGPT, TikTok, Netflix, and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil.Before you jump into developing the specifications of your application, a very important question to ask yourself is, \"Does my application solve any problem for the users?\". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user's life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the advocates that will help you spread the message about your application via word-of-mouth.When deciding on the problem space that you want to build for, it is also helpful to consider the market attractiveness. Is this an attractive market to enter? In order to assess a market's attractiveness, you can look into the market size, and its expected growth rate. The market attractiveness of the problem space you intend to tackle can guide you on the expected \"impact\" that your product can potentially bring.Guides on estimating the market size can be found all over the internet, and a useful one we found is https://pear.vc/market-sizing-guide/.\nDescribe the problem that your application solves.","competitive-landscape#Competitive Landscape":"Understanding the competitive landscape provides critical insights into existing market players, their offerings, strengths, and weaknesses. By comprehending competitors' strategies and customer perceptions, you can likely make informed decisions, anticipate challenges, and tailor your approach to effectively capture market share and deliver unique value to their target audience.The AI product ecosystem is very crowded, and new AI companies are emerging everyday. This statement will continue to be accurate for years to come.While AI has undoubtedly opened doors to a multitude of possibilities, it has also given rise to the phenomenon of \"thin wrapper\" products. These products often rely heavily on existing AI frameworks and APIs, offering minimal value beyond the underlying technology. In this assignment, you should not create such products as they can be easily cloned, leading to a lack of differentiation and diminished long-term viability.\n\nIn trying to understand the competitive landscape, you may find it useful to do a competitive analysis. Questions you may find useful include:\nIn the problem space that you are trying to \"enter\", is the market competitive?\nWill you be able to capture meaningful market share?\nHow much market share does each competitor have?\nWhat are the competitive advantages of your competitors?\n\n\nGood-to-know!You may consolidate your findings into a Competitive Profile Weighted Matrix to better gauge your competitors' products (Not graded).The competitive profile matrix is used commonly by strategic management to compare their firm with major players of the industry. In order to do a competitive profile matrix well, you need to identify what are the key success factors that determine your product's success in the market, and use these factors to compare your competition.\n\nSource: https://thinkinsights.net/strategy/competitive-profile-matrix/\n\nList down your 3 closest competitors and their pros and cons. Explain how your\nproduct is better.","product-capabilities#Product Capabilities":"Building a killer application requires more than just technical skills. In CS3216, you are expected to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment.You should choose an application that fully utilizes the potential of the chosen technology. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why using LLMs would best achieve your application's objectives.In addition to LLMs, it is a requirement that your application has user authentication, and makes use of user authentication meaningfully. From the assignment standpoint, we are looking for products that are more than one-page tools. From a product standpoint, having user authentication should increase your ability to provide personalization features, and forces you to consider the security aspect to protect your users' data. You should also therefore include reasons why having user authentication alongside LLMs can help you achieve your application's objectives.A common pitfall for engineering-focused students is their bias towards technologically-complex products, failing to consider how the product \"serves\" the problem in the process. The focus here is for you to consider your product's capabilities - does your product have the capabilities to succeed in your chosen problem space?\nAll teams should first create a post on Coursemology under the Assignment 3 topic containing the proposed product for the teaching team's approval before starting on the project!\n\nDescribe your application briefly. List its objectives and the associated\n(major) user stories.","moat#Moat":"In the context of product strategy, a \"moat\" refers to a sustainable competitive advantage that a product possesses, which helps protect its market share and profitability from competitors. Just like a moat around a medieval castle provides protection and makes it difficult for enemies to breach the walls, a business \"moat\" creates barriers that deter competitors from easily entering the market or replicating the company's success.A moat can take various forms, including (but not limited to):\nBrand\nTechnological Innovation\nEconomies of Scale\nInvestor Confidence\nEthics and Responsible AI\nCustomisation and Personalisation\n\nFor example, one of Google's moat is its advantage of scale. Google Search continues to dominate the search engine market.\n\nSource: https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/One of Apple's moat is its integrated ecosystem of products. Apple's products, from iPhone, Macs, and services like iCloud, are tightly integrated into a single ecosystem, creating a seamless user experience that is difficult for competitors to match. This tight integration also makes it difficult for consumers to switch out of Apple.Disney's intellectual property and content library forms a significant moat. Disney owns the intellectual property of various iconic characters, like Mickey Mouse, to beloved franchises like Star Wars and Marvel. This competitive advantage cannot be easily eroded.Closer to AI products, ChatGPT has multiple \"moats\", including:\nFirst-mover advantage: Being the first-mover, it has gained a strong \"brand recognition\" as consumers remember and trust it as the pioneering product - it is challenging for competitors and later entrants to establish the same level of recognition.\nDeveloper-friendly APIs: OpenAI offers APIs that allow developers to easily integrate ChatGPT into their applications, products, or services. This developer-friendly approach facilitates the use of ChatGPT's capabilities without requiring extensive AI expertise.\nDemand scale: The widespread use of ChatGPT and the large volumes of interaction contribute to its data collection and training improvements, enhancing the model's performance over time.\n\nFor startups especially in the AI sector, establishing a moat is essential to stand out in a rapidly evolving landscape.\nWhat's your secret sauce / moat? Elaborate on your strategy to prevent\ncompetitors and big players from cloning your app and its features?","phase-2-go-to-market#Phase 2: Go-To-Market":"","product-lifecycle--product-market-fit#Product Lifecycle & Product-Market Fit":"The product life cycle, a term commonly used by marketing professionals and management, describes the stages of a product when it is first introduced to the market, up to when the product is sunsetted. In this assignment, your product is positioned in the introduction stage, a period which demands your proactive engagement with prospective users in your target market to persuade them to become your first-time users.While the primary goal of the introduction stage is not necessarily to achieve an optimal product-market fit, it does lay the foundation for eventually reaching that fit in the growth stage and beyond.During the introduction stage, the focus is more on creating awareness, generating interest, and attracting early adopters. The product may not have achieved its perfect fit with the market at this point, but it is a crucial period for collecting feedback, understanding user preferences, and making initial adjustments to move closer to that ideal fit.Therefore, a user acquisition plan should allow you to reach out to more users in your target market segment.Your user acquisition plan might also influence the features that you include in your application. For example, you could think of ways to provide motivation for users to share your application with their friends; you could design features such that while individual users may derive some value using your application, it is also in their interest to promote your application (e.g. rewarding users for referrals).Illuminate the strategies, channels, and tactics you intend to employ to captivate and convert potential users into loyal patrons. As you delve into this milestone, articulate how your understanding of your target users informs your approach and elucidate the measures you will implement to foster a compelling product-market fit.Note: You should approach this milestone by describing your strategy or plan on how you intend to \"bring\" this product to market, utilizing all resources you have.\nDescribe your target users. Explain how you plan to acquire your target users.","scoping#Scoping":"With the key problem and target users at the forefront of your mind, it is timely to discuss what features should go into the product submitted for Assignment 3.You would realize that time-to-submission is extremely limited. Just as real companies must navigate the constraints of deadlines and customer expectations, you will be required to optimize the use of your time in Assignment 3 to deliver a simple, lovable and complete Minimum Viable Product (MVP).In this pursuit, the art of scoping takes center stage.Scoping is the process of carefully selecting specific features to be included. In scoping and selecting features, justification is important: this requires a keen understanding of user needs, potential impact, and the overarching project goals. In this process, some questions you may find useful include:\nUser Experience: How does each proposed feature address a specific user pain point or problem? What value does it bring to the user experience or overall product? (Not graded)\nResource: What are the resource implications (time, effort, cost) of including each feature? Are there technical limitations or dependencies that need to be considered? (Not graded)\nUser Impact: How many users will benefit from each feature? Is the feature essential for a significant portion of the user base, or is it a niche requirement? (Not graded)\nCompetitive Advantage: Will the inclusion of a particular feature give the product a competitive edge in the market? How does it compare to what similar products are offering? (Not graded)\n\nGiven that you are introducing a new product, the initial scope is extremely important. By having a first set of features, you can develop the MVP, release it to users, gather feedback, and thereafter iteratively refine the product. This process aligns seamlessly with the agile methodology, where \"agility\" empowers teams to respond swiftly to changing market dynamics and evolving user preferences.As you set out to prioritize features for the MVP, it is important to carry out a delicate balancing act with time. The features chosen must align harmoniously with your MVP, so that the core functionalities are addressed comprehensively. Yet, you must simultaneously stay keenly aware of time constraints.Therefore, a key part of scoping also includes planning and estimation. You can use this assignment as a chance to grow in your ability to dissect a project into actionable tasks, foresee potential challenges, allocate resources judiciously, and estimate timeframes. These skills enable project managers, product leaders, and engineers to craft realistic timelines, allocate resources optimally, and identify potential bottlenecks before they impede progress.You can consider dividing the 3-4 weeks into sprints, and use one sprint to better estimate the workload required for the next. That said, since this is a short project, strictly adhering to the sprints may impede your success. It is up to you to decide what works best for your MVP.\nList down the features that should go into the MVP (your assignment\ndeliverable). How did you decide on them? What are future features and\nexpansions you can think of?","business-model#Business Model":"In any problem, a real consideration is whether the investment in the product will be \"successful\". Few things impact the \"success\" of your product as much as pricing.The determinant of \"success\" differs as the product enters different stages of growth. Most of the time, we want to maximize the profits of a product. However, there are times when a company would want to instead maximize market share, or number of users.Depending on your goals, your pricing strategy to achieve \"success\" differs.Generally, there are three ways to price:\nPricing based on costs\nHow much does it cost to produce and maintain your product?\nWhat is the profit margin that you are aiming to achieve?\n\n\nPricing based on value\nWhat benefits does this product provide to its users?\nHow much \"value\" does this provide to users?\n\n\nPricing based on competition\nHow much do competitors price their products for?\nHow does your product compare?\n\n\n\nComing up with a monetisation strategy is useful from the get-go. It allows you to evaluate what is the most suitable price for which stage of product you are at. For example, a consideration for a product in the early stage is market share, and also how long would it take to break even.In the digital product market today, there are multitude of ways to price. Here are some blog articles we felt were useful to helping you ideate on your pricing strategy:\nThe Ultimate Guide To Saas Pricing Models, Strategies & Psychological Hacks considers seven of the most common way digital SaaS products are priced today.\nMapping the Generative AI landscape's section on \"Looking into the future—Gen-AI revenue models\".\n\nNote: It is possible that the currency of \"success\" may not always be the dollar. You are not restricted to build a product that has the dollar as its currency of success. If not the dollar, what are some other metrics you can use to consider? E.g. If you build a social chat bot, then a key metric to determine success could be the volume of messages.\nCome up with a monetization and pricing strategy (e.g. tiers and features).\nExplain why you think this pricing strategy is suitable for your target users\nand problem space. Explain the factors that influenced your pricing decisions,\nsuch as production costs, perceived value, competition, etc. It would be\nuseful here to consider possible revenue streams of your product.","phase-3-artificial-intelligence-integration#Phase 3: Artificial Intelligence Integration":"","introduction-to-large-language-models#Introduction to Large Language Models":"LLMs are a type of artificial intelligence technology designed to understand and generate human-like text based on the input they receive (a prompt). These models are built using deep learning techniques, particularly a type of neural network architecture called transformers.Transformers are a class of deep learning models that have revolutionized natural language processing (NLP) tasks. They excel at handling sequential data, such as text, and have become the foundation for many state-of-the-art language models. One of the most well-known and influential transformer architectures is the Generative Pre-trained Transformer (GPT), developed by OpenAI.LLMs like GPT-3 (the third iteration of the GPT series) have billions of parameters, which are tunable components that the model learns from massive amounts of text data. These parameters allow the model to capture complex patterns and relationships within language, enabling it to perform a wide range of language-related tasks, such as:\nText generation: LLMs can generate coherent and contextually relevant text based on a given prompt or seed text.\nLanguage translation: They can translate text from one language to another.\nSummarization: LLMs can produce concise summaries of longer pieces of text.\nQuestion answering: They can answer questions by extracting relevant information from a given text.\nText classification: LLMs can classify text into predefined categories or labels.\nSentiment analysis: They can determine the emotional tone or sentiment expressed in a piece of text.\nChatbots and conversational agents: LLMs can simulate human-like conversations and provide interactive responses.\nCode generation: They can generate code snippets based on high-level descriptions.\n\nThe training process for these models involves exposing them to vast amounts of text data and having them predict the next word or token in a sequence. This process enables the models to learn grammar, syntax, semantics, and even some aspects of world knowledge from the data.LLMs are revolutionary as compared to traditional machine learning techniques because they can/are:\nPerform more diverse and complex tasks: Traditional machine learning models are typically limited to performing simple tasks, such as classification or regression. LLMs, on the other hand, can perform more complex tasks, such as text generation, translation, question answering, all through a single and flexible natural language prompt.\nReadily available and accessible: Many LLMs are made available through APIs, making their capabilities accessible to a broader range of developers without requiring much experience / deep expertise in machine learning. These diverse capabilities can be accessed through natural language, no learning of new syntax or documentation needed.\nTrained on a vast scale of data: Traditional machine learning models are typically trained on a small dataset of labeled data. This can be limiting, as it may not be representative of the real world. LLMs, on the other hand, can be trained on a massive dataset of unlabeled data. This allows them to learn the statistical relationships between words and phrases without being explicitly told what they are.\nFew-shot and zero-shot learning: LLMs can perform new tasks with minimal examples or even zero examples by leveraging their pre-trained knowledge and generalizing to new tasks or categories without the need for extensive task-specific training data. This capability is particularly valuable in scenarios where acquiring labeled training data is expensive, time-consuming, or impractical, whereas traditional machine learning often requires a substantial amount of labeled data for each task.\nUnderstanding language: LLMs can understand nuances in languages, including idioms, metaphors, and cultural references, which is a challenging task for traditional models.\n\nResources:\nA Compact Guide to Large Language Models by Databricks.\nHow ChatGPT works by Sau Sheong Chang, a Singaporean tech industry veteran and leader. This article looks under the hood to understand the basic concepts behind ChatGPT. He has kindly provided CS3216 students with free access to this article.\n\n\nExplain how you are using LLMs in your product and why LLMs are a good\napproach to meet the product's objectives.","prompt-engineeringdesign#Prompt Engineering/Design":"A prompt is a specific input or instruction given to a language model to guide its behavior and generate desired output. In the context of LLMs, such as GPT-3, a prompt serves as the initial text or question that you provide to the model to elicit a response or generate text based on that input.Prompts can take various forms depending on the task you want the LLM to perform. They can be as short as a single sentence or as long as a paragraph. The key is to provide clear and contextually relevant instructions that guide the model toward producing the desired output.As prompts are the main interface between users and the LLMs, the importance of writing a good prompt cannot be overstated. The choice of words, phrasing, and clarity of the instruction can significantly influence the quality and relevance of the generated output.","elements-of-a-prompt#Elements of a Prompt":"A prompt typically includes several elements that help guide the response or output generated by the LLM. Here are some common elements of a prompt:\nTopic/subject: The topic or theme of the prompt provides a broad area of focus for the response. For example, a prompt might ask a language model to generate text about a specific topic like \"climate change\" or \"artificial intelligence.\"\nTask/goal/purpose: The task or goal of the prompt specifies what kind of response is desired. Is it to persuade, inform, entertain or something else? For example, a prompt might ask a language model to generate a persuasive essay on a particular topic or to write a short story that meets certain criteria.\nTarget audience / perspective: The target audience of the prompt identifies the intended audience for the response. For example, a prompt might ask a language model to generate text that is suitable for a general audience or for a specific age group. For example, \"Respond as if you are a teacher providing advice to a student.\"\nTone/style: The tone or style of the prompt can influence the tone or style of the response. For example, a prompt might ask a language model to generate text that is formal, informal, humorous, or serious.\nContext / background information: Providing relevant background information helps set the stage for an informed response.\nLength/format: The length or word count of the prompt can specify the amount of content that is expected in the response. For example, a prompt might ask a language model to generate a response that is between 500 and 1000 words.\nSpecific instructions/guidelines: The prompt may include specific instructions or guidelines that must be followed in the response. For example, a prompt might ask a language model to generate text that includes specific keywords or phrases, or that adheres to a particular format or structure. For example, \"List 3 reasons why...\"\n\nBy including these elements, a prompt can help guide the response generated by a language model or AI system, while also providing a degree of flexibility and creativity in the output. The most effective prompts will combine several of these elements to provide enough direction without overly restricting the response. Vague or overly broad prompts can lead to unfocused and inconsistent responses.Prompt engineering is a broad topic and cannot be covered sufficiently within an assignment writeup. Here are some recommended resources for learning more about prompt engineering:\nBest practices for prompt engineering with OpenAI API by OpenAI. One-pager that goes straight to the point, with examples.\nGPT best practices by OpenAI. A longer list of techniques and best practices.\nChatGPT Prompt Engineering for Developers by DeepLearning.AI. This video-based course takes around an hour to complete and Yangshun has written a summary of the important points: Part 1 & Part 2.\nPrompt Engineering Guide by DAIR.AI. Well-rounded useful guide that covers Prompt Engineering and various topics related to LLMs.\nPrompt Engineering Guide by Brex. Tips and tricks for working with LLMs like OpenAI's GPT-4.\nPrompt Engineering by Cohere.\n\nPrompt engineering is just one of the concepts relevant to using LLMs effectively. Some other important concepts include:","tokenization#Tokenization":"Tokens in the context of LLMs refer to the individual elements or units of language that the model processes and generates. These tokens can be subwords, words, or characters, and they are the basic building blocks of the language that the model understands and generates.For example, in a language model that uses subwords as tokens, each subword would correspond to a specific part of a word, such as a prefix, suffix, or root. The model would then use these subwords to generate words and sentences by combining them in different ways.In contrast, a language model that uses words as tokens would process and generate complete words, rather than subwords. And a model that uses characters as tokens would work with individual characters, such as letters or digits, to generate text.The choice of token granularity can affect the performance of the language model, as well as the type of tasks it can be used for. For example, a model that uses subwords as tokens may be better at generating words and sentences that contain prefixes and suffixes, while a model that uses words as tokens may be better at generating complete sentences and paragraphs.It's worth noting that the tokenization of language can be a complex process, and different models may use different tokenization strategies depending on the specific task and the type of language they are processing.Both input and output tokens make up the total number of tokens in an API call, which affects:\nHow much the API costs, as LLM providers usually charge per token.\nHow long the API call takes, as more time is needed if there are more input tokens to process and output tokens to generate.\nThe functionality of the API call, since the total tokens must remain within the model's maximum threshold (e.g. 4096 tokens for gpt-3.5-turbo).\n\nFurther reading on tokens:\nGPT - OpenAI API\nTokens | Cohere","fine-tuning#Fine-tuning":"One of the techniques to improve prompt design is called \"few-shot prompting\", which is to provide examples within the prompt. With fine-tuning, examples (training data) can be provided to a model outside of the prompts and the model is being \"fine-tuned\". Prompts to a fine-tuned model will make use of the training data when generating output. These fine-tuned modules result in:\nBetter results than prompt design.\nAbility to train on more examples than can fit in a prompt.\nToken savings due to shorter prompts.\nLower latency requests as there are fewer tokens to process.\n\nFine-tuning is an improvement over few-shot learning as many more examples can be provided and don't count towards prompt tokens. Once a model has been fine-tuned, you won't need to provide as many examples in the prompt. This results in faster and cheaper requests.In general, fine-tuning involves the following steps:\nPrepare and upload training data.\nTrain a new fine-tuned model.\nUse your fine-tuned model.\n\nFine-tuning is specific to models and not every LLM API offers the functionality. As of Aug 2023, OpenAI allows fine-tuning for gpt-3.5-turbo.Further reading on fine-tuning:\nFine-tuning - OpenAI API\nGPT-3.5 Fine Tuning: Unlock the True Potential with This Comprehensive Guide\nThe Challenges, Costs, and Considerations of Building or Fine-Tuning an LLM\n\n\nGive two to three examples of prompts you used and explain how you designed\nthem to be effective. What techniques did you use to improve the effectiveness\nof your prompts?","using-the-right-model-for-the-job#Using the Right Model for the Job":"Not all models are built equally. Each model has its own advantages, limitations, and customization parameters. The key is to find the most suitable model for your application.","popular-llms-and-providers#Popular LLMs and Providers":"OpenAI: OpenAI is one of the pioneers in the field of LLMs and needs no further introduction. They have released a number of LLMs, including GPT-3 and GPT-4. OpenAI's LLMs are known for their large size and their ability to generate realistic and creative text.\nCommand by Cohere: Cohere develops an LLM called Command and their platform offers a huge range of services that can be viewed as a batteries-included version of OpenAI API.\nLlama 2 by Meta AI: Open source LLM by Meta that's free to use. There's no official hosted API available so if you want to use it you will need to host it yourself. Check out Web LLM for a version that runs in the browser.\nHugging Face: Hugging Face is a community-driven platform for LLMs. They provide a number of tools and resources for developers who want to use LLMs. Hugging Face's LLMs are known for their diversity and their availability.\nBard by Google AI: While ChatGPT's data is only up till September 2021 (using GPT-3.5), Bard which is a chatbot by Google uses PaLM 2 and is based on real-time current events pulled from Google Search. However, Bard API access is still in beta and requires a Google Cloud project.\nClaude by Anthropic: Claude is an LLM developed by Anthropic, a company that is focused on developing safe and beneficial artificial intelligence. As of Aug 2023, the API is not yet generally available.\n\nVercel AI Playground allows you to compare output of different models by the various providers using the same prompt. Super handy!When choosing LLMs and providers, it is important to consider your specific needs and requirements. Some factors to consider include the type and size of the training data, the type of applications you want to build, context window size (maximum tokens allowed), and the price per token.Certain LLMs are more suited for certain tasks from specific domains. If your app is dealing with code like GitHub Co-pilot, you may find that Code Llama and WizardCoder is more suited for the job. If you require real time data/knowledge for your output, GPT-3.5 might not be the best choice because the data is not updated since September 2021. It's important to select the model that is the most suitable for your product!\nChances are, the LLM API you're using isn't free. However, the costs should be quite low for an assignment's usage volume. If you're facing difficulties gaining access to the APIs, please email the teaching staff.","model-settings#Model Settings":"Beyond prompt design, most LLM models also provide the following settings to allow for more control over the output:\nMax tokens: The maximum number of tokens to generate.\nTemperature: Temperature is a hyperparameter in language models that controls the creativity and diversity of the generated text. A high temperature means that the model is less confident in its predictions, and will therefore generate text that is more creative and diverse, but may also be less accurate and random. A low temperature means that the model is more confident in its predictions, and will therefore generate text that is more accurate and consistent. The best temperature setting will depend on the specific application. For example, if you are using a language model to generate text for a news article, you would want to use a low temperature to ensure that the output is factually accurate and grammatically correct. However, if you are using a language model to generate creative text, such as poetry or fiction, you might want to use a higher temperature to allow for more creativity and diversity.\nTop-P: Top-P limits the probability mass that is considered when sampling. For example, if you set Top-P to 0.75, then the model will only consider tokens whose probability is at least 75%. This can help to reduce the randomness of the output and make it more likely that the model will generate text that is relevant to the prompt. It is recommended to customize either temperature or Top-P, not both.\nFrequency/presence penalties: Coefficients that penalize tokens based on how much / whether they exist in the text to reduce the likelihood that they show up again.\n\n\nJustify your choice of LLM and provider by comparing it against at least two\nalternatives. Explain why the one you have chosen best fulfills your needs.\nElaborate on your choice of model parameters.\nEvaluating effectivenessOnce the LLM integrations are up and running, you may want to set up an evaluation pipeline to sanity check whether your fine-tuning or prompt engineering efforts are working across multiple test examples. There are two broad classes of Natural Language Generation Metrics:\nN-gram-based metrics measure word or token overlap against the reference. E.g., BLEU, METEOR.\nModel-based metrics use a neural model to measure similarity against the reference. E.g., BLEURT, BERTScore.\n\nN-gram-based metrics are more appropriate when you expect precise wording, and model-based typically allows for more open-ended generation. Different metrics tell us about different aspects of natural language generation and there's typically no single correct evaluation metric. However, there are metrics traditionally associated with NLP tasks. E.g., BLEU for Translation and ROUGE for Summarisation. It's safe enough to use the default metric for your specific task as there should be available implementations in your preferred language. Note that it's possible to have multiple correct references for a single test sentence.Further Reading:\nNeural Language Generation, Chris Manning, Stanford: Slides 51 to 65\nA Comprehensive Assessment of Dialog Evaluation Metrics\nHolistic Evaluation of Language Models, Percy Liang et al. (2023), Stanford NLP Group\nInstruction Tuning for Large Language Models: A Survey","other-resources#Other Resources":"","courses-and-tutorials#Courses and Tutorials":"DeepLearning.AI by Andrew Ng provides a series of short practical-focused courses on generative AI if you prefer video lesson style learning that includes some hands-on exercises using Jupyter Notebook.\nCreating a private QA over local documents application using Llama-2 by Sau Sheong Chang: How to create a private QA application that runs on your laptop for your answering questions over your documents.","tools#Tools":"Using LLMs comes with some inconveniences such as unstructured output, preserving context and memory across completions, and a huge amount of boilerplate code. Here are some tools that can help during development with LLMs:\nLangChain: LangChain is a powerful tool that can be used to build a wide variety of applications that use LLMs. It has abstractions to achieve common LLM operations quickly such as loading/transforming/storing data, sequential operations on data, remembering previous interactions, and acting on LLM output.\nVercel AI SDK: An open source library designed to help developers build AI-powered user interfaces in JavaScript and TypeScript. It makes building streaming-based AI chat user interfaces effortless.\nTypeChat: TypeChat helps get well-typed and structured responses from LLMs without the need to parse the output yourself.\nWeb LLM: This project brings large-language model and LLM-based chatbot to web browsers, which makes using LLMs free! However, there might be certain technical requirements for devices.\nLlamaIndex: A \"data framework\" to help you build LLM apps by providing data connectors to ingest existing data sources and formats (APIs, PDFs, docs, SQL), retrieval/query interfaces over your data, and more.\n\nThe following platforms improve the experience of using LLMs in production. They might be overkill for your assignment/projects but mentioned here for your consideration:\nLangSmith: By the creators of LangChain, LangSmith helps you visualize, debug, and improve your LLM apps.\nHumanloop: A platform that empowers teams to build reliable and performant AI systems by providing monitoring, A/B testing, a collaborative prompt workspace, private data storage, and fine-tuning.","open-source-llms#Open Source LLMs":"Platforms like Hugging Face offer support for popular open source language models born out of community efforts to recreate existing proprietary LLMs provided by miscellaneous companies via APIs or software. These open source LLMs are easily fine-tunable and lightweight. While not as powerful as commercially available LLMs, they offer a free, discounted, yet surprisingly expressive experience in terms of text generation and reasoning capabilities. Here are a few popular models and associated guides to fine-tune them:\nModel\tResources\tLlama 2\tGitHub, Fine-tuning guide, Paper\tVicuna-13B\tGitHub, Fine-tuning guide\tAlpaca\tGitHub, Fine-tuning guide\tMPT-7B\tGitHub, Fine-tuning guide, Documentation\tGPT-J-6B\tGitHub, Fine-tuning guide 1, Fine-tuning guide 2\nIt is recommended that users interested in fine-tuning such models have access high performance compute clusters with available GPUs (suggestions: NVIDIA RTX 3090, NVIDIA RTX4090, NVIDIA H100 Tensor Core, etc). Alternatively, you can look into online cloud compute platforms like Lambda Labs, Paperspace, or Google Colab Pro/Pro+.You can also apply for free cloud credits through Google Cloud Platform's Research and Education program (however, no guarantees of definitely getting it since it's application-based, but try your luck!).","phase-4-design#Phase 4: Design":"Design here refers to many things: branding, technology/engineering, and the product.","branding-your-product#Branding your Product":"Every product has a name. This name is how people find, refer, and remember the product. Most products have logos. This logo is how people recognize and associate relationships with the product. Names, logos, color schemes, fonts, etc. of a product or company collectively form a persona to which people can relate and associate. This persona is exactly a brand.A brand encompasses the essence of a company: its values, promises, and the emotional connection it establishes with its audience. With the vast number of companies and products in today's competitive business landscape, these sentiments are almost always never accidental, rather carefully crafted and tested over hundreds of iterations.Think McDonald's golden arches. It transcends language barriers and cultural differences. They embody the company's promise of consistency, quick service, and affordability. When people see those golden arches, they immediately associate them with familiar tastes, convenience, and an entire spectrum of shared experiences. You yourself would probably remember memories of your first date, gathering with friends, or late night supper when crunching due assignments. In this aspect, McDonald's golden arches are more than just a logo; they capture feelings, stories, and memories.Some brands even become linguistic cues. When you want to find out about something, you'd google it. If you missed the bus and train, you'd grab to the office. If you want to express your frustration with Ruby on Rails or Angular, you'd tweet about it. Oh, look; this place is so picturesque, it's instagrammable! And the example goes even deeper with cultural contexts. In Indonesia, people colloquially refer to laundry detergents as \"rinso\" rather than the dictionary translation deterjen pakaian, or baby diapers as \"pampers\" rather than popok bayi. In Singapore, people colloquially refer to instant noodles as \"maggi mee\", or recently, video conferencing as \"zoom calls\". The list goes on: velcros (hook-and-loop fasteners), aspirin (acetylsalicylic acid), xeroxing (photocopying), scotch tapes (adhesive tapes), post-it notes (sticky notes), band-aids (bandages), q-tips (cotton buds), etc. Notably, the brands that form these verbs or nouns are often recognized as the standard of their respective product categories. This is the power of a good brand. They not only evoke feelings and trust, but also bring revenues.These reasons are why it is important to build a good brand. Even choosing names is often tedious. Think about:\nLength of the name. Will it be too hard to remember?\nReproducibility of the name by spelling. If A were to hear B say \"I use Whatchamacallit to build this website,\" would A be able to type it and find it on search engines?\nDomain name availability. Some may even get clever with domain hacks, e.g., del.icio.us, but can it be easily shared verbally?\nSocial handles availability. Is @mynextstartup available on major social media sites, e.g., Instagram, X, Threads, TikTok, etc.? If you're not quick to claim the handle, adversaries may claim it first, and you might have to either buy it from them, or file a dispute.\nSimilarities with other brands. Could people think your product Zwitter is just a cheap clone of Twitter?\nCultural references. Did you know the toothpaste brand Darlie was originally known as Darkie? It was changed in 1989 due to \"darky\" or \"darkie\" being considered a racial slur.\nPossibility of being caught in web filters. In April 1998, \"shitakemushrooms.com\" was blocked by DNS filters because it contained the word \"shit\". This is known as the Scunthorpe problem. If you want to see more examples, check out the article \"30 Unintentionally Inappropriate Domain Names\".\n\nThese are just a fraction of factors that one should think about when choosing names. Different factors apply when you are choosing logos and color schemes. Think about how they'd look if they are printed on different materials. Do the logos have any resemblance to a potentially derogatory subject, seen from any angles? How easy is it to be reproduced by hand? Can it be a vector (so that it is scalable on different media)? How'd it look if it was black-and-white, or against a busy background? Think about Apple's first logo.It always pays off to build a relatively strong brand identity when you enter the market, because rebrands can be a nightmare. Recently, Twitter was renamed to X, and the platform is visioned to become a superapp. In 2020, ZEIT was renamed to Vercel. In 2021, The Facebook Company was renamed to Meta. In every rebrand, companies (usually) pay the price: mockery, money to pay for taken domain names, and customer adaptation. Tropicana was probably the best known example of a bad redesign. Notably, not all rebrands are terrible. Some may even resurrect a dying business. The challenge comes from the fact that there is an existing identity as a comparison, and transition introduces major friction.There are many logo generators out there, but after reading this far, you'd probably realize that a good brand makes for a good logo; it is not standalone, it is an integral part of a brand. To make a good brand identity (name, logo, fonts, color schemes, etc.), you should reflect on the persona that you wish your company or product to convey to your users, then work forwards. Use Pinterest, Dribbble, Midjourney, Coolors, Google Fonts, or even the many logo generators to brainstorm for inspirations. Then choose a comfortable medium to sketch, e.g., pen and paper, Figma, Microsoft Paint, etc., to stitch everything together. Test your brand identity prototypes with your friends and family, and see if they can guess what app you're building just by seeing your logo.\nNotably, a good brand identity requires tons of research and testing. Schools\nof design talk about branding for one whole semester. Due to the density of\nthis assignment, you are expected to build a decent enough brand identity,\ni.e., with proper considerations. You shouldn't dwell too long on this\nmilestone. It is maybe even best to first build your MVP with a codename, only\nafter then collaboratively think about the best logo to slap on your app. If\nyou did well enough, you may even earn brownie points for coolness!\n\nCome up with a product name and create an attractive logo. Explain the meaning\nbehind the name, the alternatives you've considered, and why this was chosen.","technology-stack#Technology Stack":"A functional software product is backed by a multitude of technologies, each supporting the attainment of the business logic. Together, these technologies are collectively described as a technology stack, or tech stack. Notably, your users wouldn't really know about the inner machinations of your software. However, choosing the wrong tech stack could backfire your development in the long run.One factor that most people consider is popularity. It's hard to keep track of the latest libraries and frameworks because they keep coming. Newer technologies usually get the most attention because they attempt to fix the irks of the current \"standard\" technologies. For example, Svelte syntax is easier to read than React, Deno has a better package management system than Node, or esbuild is astronomically faster than webpack. Notably, the newer the technologies are, the lesser the community support will be compared to the ones that have been around for the longest time. Some may not even be battle-tested enough for all edge use cases. Some gained headlines for a while, then fell short and inevitably forgotten. You can see how Stack Overflow compared how some web technologies stood up to their hype in their 2023 survey here.While it may be tempting to live on the edge and try exciting new technologies, one should be prudent with their choice. Consider the following:\nYour team's familiarity with the technologies.\nHow the technologies scale with your users and (potentially increasing) business logic.\nThe maturity of the ecosystem around the technologies; can you find help if you face a mysterious bug?\nThe credentials of the backers of the technologies; will the maintainer abandon this framework in near future?\nYour reliance on the technology; if you decide to pivot in the future, how easy or difficult will it be? Choosing a tech stack is no different than choosing the right vendor for outsourcing a tender in your company.\n\nGenerally, it's better to just choose one with which most team members are familiar, and start building and failing fast. Of course with any advice, exercise your own wisdom. The Browser Company decided to build the Windows version of Arc Browser by extending the (as at time of writing, rather barebone) Swift compiler for Windows to support SwiftUI, instead of going with the most obvious choice of Electron. You can watch the CTO talk about it here, and see why they chose to challenge the status quo for their use case.\nRemember that your users won't probably care about your tech stack. They won't know if your codebase hails a tribute to Robert C. Martin's Clean Architecture or looks like rotten spaghetti. With every choice is a list of trade-offs. What you compromise today is what you'll pay tomorrow. This is what is known as a technical debt.\nSome of the stacks that you may wish to consider revolve around the following domains.\nFront end: This is what your users will interface with. Examples: React, Vue.js, Next.js, Svelte, etc.\nStyling: These libraries make it easier to include UI elements, e.g., buttons, menus, cards, etc., in your app. Different libraries have different customisation flexibilities. Depending on your design language, you might not even need any styling libraries and just build everything from scratch! Examples: Tailwind CSS/UI, Bootstrap, Bulma, MUI, etc.\nData persistence: SQL or NoSQL? SQL is used to manage relational databases, e.g., MySQL, PostgreSQL, etc. NoSQL is essentially anything that isn't SQL, e.g., MongoDB, Redis, etc. You may even use a higher level database systems like Firebase Realtime Database or Cloud Firestore, Supabase, or couple your choice of database system with GraphQL for easier queries. Remember that the choice of database system and how it's structured almost directly dictates the scalability and performance of your app. Depending on your schema, it may make it hard to represent some models, or slow to query. Migrations aren't always reversible and are almost always painful. See below note.\nAuthentication: Most apps will have some sort of user account system. OAuth is a great choice due to ease of integration and ease of use without the need for entering emails and passwords. Some sensitive apps may choose to roll their own authentication system (think banks, government systems). Self-rolling authentication gives you more control, but outsourcing it to a (reputable) third-party service may give you assurance of security because it's probably been battle-tested and regularly maintained. Examples: self-rolled, Firebase Authentication, Auth0, etc.\nBack end server: This is where most, if not all, of your business logic will live. Think of the front end client as the shell, and back end server as the core of your app. This server communicates with everyone (third-party APIs, database systems, caching servers, etc.) and serves anything that the client needs. Examples: Go, Django, Ruby on Rails, Express, etc.\nHosting: After everything is built on your local computer, you need to deploy it somewhere so that your software is available to everyone. You'd engage with these platforms to deploy your app. Some are as simple as providing you with a CDN to host your static files, e.g., Cloudflare, Netlify, GitHub Pages. Some are a little more batteries-included, providing you with cloud functions, authentication services, and database systems, e.g., Vercel, Firebase. Some literally give you only a bunch of remote servers, e.g., Google Cloud, Amazon Web Services, etc. Notably, it is a trade-off between complexity, flexibility, and cost.\nContinuous integration, delivery, and deployment platforms: These platforms help you prepare your code for release (continuous integration) and deploy to production (continuous deployment), all in an automated fashion to increase productivity. They can also help your team spot errors asynchronously, and ensure consistency when deploying. Depending on your use case, you might or might not benefit from one. Examples: CircleCI, Travis CI, GitHub Actions, etc.\nMiscellaneous services: Your app may need some domain-specific technologies, e.g., LLM-backed services (see below), maps (Google Maps Platform, HERE WeGo, OpenStreetMap, etc.), search engines (Algolia, Elasticsearch, etc.), computer vision (OpenCV, TensorFlow Graphics, etc.), etc. Spend some time to take stock of what your app will need, and see your options out there. Remember, the less code you need to write, the faster you will be able to launch.\n\nIf some of the services you choose are not free, you might need to pool all operational costs together and consider them when deciding on your business model. Notably, your revenue must cover all operational costs for your business to be sustainable, even way before it's profitable.\nMigration is almost always not fun. Migrations are usually intended to keep the same behavior, so often no business logic (features) changes. It is a really expensive and risky attempt, because with every change is a disturbance of stability. With usually no change in features, increased risk of disturbed stability and data integrity, and a huge investment of engineering hours, migrations are one of the most dreaded operations in software engineering. Therefore, any decisions that minimize the need for migrations is often favorable.\n\nExplain choice of technologies for the following: UI, Database, Web Server,\nHosting, Authentication, etc. and the alternatives you've considered.","user-experience#User Experience":"User experience (UX) is very different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Craigslist still have a ton of daily active users despite their UI! 😵UX encompasses all aspects of the end-user's interaction with a product. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design.If the product is a TV, UX starts from how the product is placed on the shelves at the store, how the packaging allows for the customer to bring it to the cashier, whether it can fit in someone's car trunk, how far one should read through the manual to assemble the TV, up until the TV breaks down, repaired, or even recycled. Notably, UX differs from UI because UX is not limited to software products. Don Norman and Jakob Nielsen, two of the forefathers of UX, defined UX, in contrast to UI, very well here. The Nielsen Norman Group's website also provides many resources about UX that you may wish to check out.UX is about research. It requires understanding of your user. Not just when they are using your product, but also the environments around the time of usage, the different agents surrounding the product and its implications, and ultimately their objectives. If you are building an app that is used in rowdy buses or busy places, can your users tap on those small buttons (this is known as a situational disability)? If you are building an app for teachers to input grades, how do you think it will impact the parents of the teachers, and the students (they are known as primary, secondary, and tertiary users)? There are no right questions, just as there are no right answers. Talk to your users, and empathize with their objectives. Return to the drawing board and devise a prototype. Test it with them, collect feedback, be surprised, and iterate. Just like software engineering, product development is an iterative (read: agile) process.\nYou are not your own user. Repeat it. You are not your own user. It\ndoesn't matter if you think you fall into the target audience of your own app,\nyou are still not, and never will be, your own user. It is therefore important\nto distance oneself when researching user behaviors: be ready for surprises,\nand be humble to counterintuitions. If you're interested, the field that\nheavily studies these subjects in the context of computers is called\nHuman-Computer Interaction\n(HCI).\nUX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas.You can probably guess now that UX is somewhat related to branding. Dictions that prefer colloquialism over specificity may convey a relaxed, friendly sentiment (In 2018, Gojek revamped their app to relate better to the locals, and Don Norman talked about designs that make people happy). Smooth transitions and tidy designs may convey a sense of stability and trust (known as the aesthetic-usability effect). Animations and choice of materials (gradients, acrylic, shadows, elevations, etc.) give a sense of space and control, that the user knows the relationships between elements in the UI. You can probably now appreciate how most, if not all, UI decisions inherently stem from UX considerations.\nIt is implored that you can now appreciate how expensive a UX research process can be. But don't sweat too much—generally, it is better to launch with decent coverage and constructive outlook, than supposedly exhaustive coverage but obstinate outlook.\n\nDescribe three common workflows within your application. Explain why those\nworkflows were chosen over alternatives with regards to improving the user's\noverall experience in the context of an AI application.","user-interface#User Interface":"UI is the space where interactions between humans and computers occur to achieve their objectives. You'd probably already be familiar with some of the concepts of UI from Assignment 1. But UI design is more than just typography or color theory.Something unique in this assignment is the incorporation of AI technologies in your app. Frankly, this is a rather new development, and there are no hard and fast rules in designing interfaces for AI apps. However, there are some aspects that one should consider when incorporating intelligence in their app.Ethics is a big deal when it comes to design in general, not just apps. Since AI is an emerging technology, you should be transparent about what your novel technology can and cannot do. Provide third-party sources where possible, hedge, or even admit if some actions are not possible. This eventually influences the claims and endorsements you will make in your app. It is even a bigger stake if your app deals with sensitive fields like health or engineering, because an overconfident recommendation is as good as a misjudgement. For every recommendation, ensure that the user eventually has control over their decisions. Don't assume, automate, and commit critical actions on the user's behalf; rather give them control to accept, reject, and/or suggest feedback on your recommendation. For every intelligent UI element or feature you choose to develop, always remember that the intelligence is artificial, and ultimately humans get the last say.This goes without saying: privacy and data collection. Be transparent about what, when, and where you are collecting analytics and/or heuristics from a user's interactions. Explain and give users the choice to opt out from certain intelligent features. Give users control over what they want or don't want to share (think app permissions settings on iOS and Android). You'd quickly realize that these considerations are not new or unique to AI apps; they apply to any apps. Ethics and privacy are the nicher part of UI design, and it's even more so when your app handles sensitive data and performs sensitive actions. Google has a great guidebook to designing AI apps that centers around humans.Needless to say, the basic principles of UI design still apply in this milestone. The paragraphs above aimed to shed a light on points of attention when building AI apps.\nShow and explain considerations/decisions in your UI that were specially made\nfor an app that leverages AI. Provide examples, citations, or justifications\nwhere necessary. You may also show different prototypes and outline their\ntrade-offs.","phase-5-launch#Phase 5: Launch":"","landing-page#Landing Page":"Similar to what you have read in Assignment 1, launching your product site only when the app is ready is often suboptimal. In this milestone, you are building a product site (a real one, this time) that showcases your product. Some decent examples include Remix, JetBrains Fleet, and GitHub Copilot. A great product site should achieve: explaining why it exists, informing about the features, and calling for an action (a call-to-action).Since this site relates to your product launch in a later milestone, it is also worthy to think about how your site is seen when shared. Think about what happens when you share a URL via Telegram, WhatsApp, or LinkedIn. Nowadays, people don't just see the URL, they also see a thumbnail, title of the site (truncated if it's too long), and first few sentences of the site description. This metadata is a standard known as the Open Graph Protocol. Optimizing this is extremely beneficial because it influences the users even before the link is clicked.\nCreate a landing page for marketing purposes with the following sections:\nhero, features, pricing section. Feel free to add more relevant sections if\nyou wish.","analytics#Analytics":"You should be interested in the usage statistics of your application. Google Analytics 4 is one popular way to collect user insights. It can be set up easily — the following examples are using the gtag.js snippet. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services.Event tracking can provide more fine-grained insights over user actions. They can be used to track more events such as network request statuses, buttons pressed, or even form fields interactions. The following JavaScript code can be used to log a custom event to GA4:\ngtag('event', '', {\n\n});\nIn particular, recommended events helps you measure additional features and behavior as well as generate more useful reports.If your application's interface is predominantly built with a JavaScript MVC framework like React, it is very likely that you have a Single-page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 pushState API. Pageviews can still be tracked using virtual pageviews by executing the following code instead during a client-side route change.\ngtag('event', 'page_view', {\npage_title: '',\npage_location: '',\n});\nRefer to GA4's documentation on how to \"Measure virtual pageviews\" for more information. Alternatively your framework might have provided dedicated documentation on how to send page_view events for route changes.Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that tracking is working in your application:\nUse the official Google Analytics Debugger Chrome Extension (recommended)\nCheck the \"Network\" tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.\nGo to Reports > Realtime in the Analytics dashboard, which allows you to view activities on your application in near real-time.\n\nMore information and examples can be found from the official Google Analytics 4 documentation.\nEmbed Google Analytics or equivalent alternatives in your application and give\nus a screenshot of the report. Make sure you embed the tracker at least 48\nhours before the submission deadline as updates for Google Analytics are\nreported once per day.","launch-campaign#Launch Campaign":"Once you get that amazing software ready for production, it's time to announce it to the world. You'll need to designate a launch time, plan what happens coming to the launch time, and most importantly, retain users after the launch.It's just like a press conference; you'll need people to help you spread the word that you decide to spread your wings. So, collect your closest connections, forums, social media sites (Facebook, Instagram, etc.), communities (e.g., Reddit, X, HackerNews, Discord, etc.), and influencers. Decide and plan what content will best represent your product. Make some drafts (text, video, banners, depending on the nature of the media), mock them, and revise until your team agrees on the best launch announcement. Your team should have all these collaterals ready, so that on the launch second, everything is published at the same time.Some products may even decide to do soft launches. Think Clubhouse and Arc Browser with their invite-only schemes. From the developers' point of view, soft launches are great for beta-testing and garnering feedback agilely. With a limited user acquisition, it is easier to attend to issues, and your servers have a lower chance of exploding. It also gives a sense of exclusivity; it makes those who have joined feel exclusive, and those who have not joined envy. Referral systems also encourage word-of-mouth, so that's a bonus. This exclusivity can potentially create buzz and hype, with people watching for when the waitlist is over, or joining the waitlist—after which you can use it as a channel to share updates and ensure they still remember your product. But waitlists can even retard user acquisition (well, it's literally limiting acquisitions), which means lower usage, active users, and feedback. Arc Browser's CEO actually talked about how they are losing up to 80% of sign-ups because of having a waitlist. Also, code has to be written to support this waitlist, and that's something else to maintain, only to be stripped when the waitlist is gone. Hence one should exercise prudence when deciding to go with soft launches and/or waitlists, because they will modulate the acquisition curve of your app.After the launch, monitor all your analytics and watch the growth. Ensure that you have technicians ready to fix bugs or restart the server should the situation call for it. Ensure that you have the customer support team ready to answer any queries around the launch time. User acquisition isn't instant, and it needs repetitions and reminders for the sentiment to retain. One of the biggest mistakes one can make after launch is resting on their laurels after seeing the active users curve grow upwards. Your team should start planning on the next cadence (next release, next announcements, etc.) so that when that curve starts to plateau, you have something in store to bring it back up.Product Hunt is a renowned site to discover new products in tech. It is backed by Y Combinator and has brought light to some recent famous software, e.g., Notion, Obsidian, Otter, and BeReal. It is a great inclusion for a software product launch due to its community and great outreach. To launch on Product Hunt, you'll need several content ready to submit: a product site, logo, first comment, demo video, marketing pitch, etc. Product Hunt has a list of what should be included in your product post, and an excellent site on preparing for a Product Hunt launch. You might also want to check out how AI products are launched on Product Hunt.Here's a sample launch checklist Yangshun and his team used to launch Docusaurus 2.0 in 2022 which contributed to Docusaurus 2.0 attaining the \"Product of the day\" award.\nEven though this milestone is about launching on Product Hunt, the knowledge\nof launching a software product is going to be useful for your final project.\n\nAssume you were launching on Product Hunt. Come up with content and marketing\nmaterials that you will use for your Product Hunt submission. You may even\nwant to launch on Product Hunt for real if you think your product is ready.","phase-6-going-above-and-beyond#Phase 6: Going Above and Beyond":"This section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor.Several suggestions have been provided. We emphasize that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use.","embeddings-optional#Embeddings (Optional)":"A recommended technique to improve the generated results is to supplement the model with high quality, relevant, and updated information about the query and instruct the model to use the information when generating the output. This is especially useful if the query is about recent events or information that the model has not been trained on.Embeddings refer to the method of representing words or phrases as vectors (list) of floating point numbers. These embeddings capture semantic meanings based on the context in which words appear in the text data. Words with similar meanings will have similar vector representations in the embedding space.Embeddings can thus be used to implement efficient knowledge retrieval. In particular, a text corpus can be split up into chunks, and each chunk is embedded (converted into a vector of numbers) and stored. A given query can then be embedded and vector search is performed to find the embedded chunks of text from the corpus that are most similar/related to the query.To quickly search across multiple vectors, it is recommended to store your vectors in vector databases which provide ways to query your collection of vectors given a query.\nSupabase Vector: Supabase is an open source Firebase alternative built on PostgreSQL. With the pgvector extension, you can store vector data. This is recommended because you can use Supabase for both relational and vector data, using one database for all your application needs.\nWeaviate: Open source vector database that also offers a fully managed option.\nPinecone: Fully-managed, developer-friendly, and easily scalable vector database.\nChroma: AI-native open source embedding database. As of Aug 2023, it does not offer managed hosting.\n\nFor example, an e-commerce website owner could embed information about the company and products to build a customer support chatbot. The chatbot answers user queries by fetching the vectors related to the query and passing both the query and necessary information to an LLM.Further reading on embeddings:\nEmbeddings - OpenAI API\nEmbeddings - Cohere\n\n\nUse embeddings in your app. Explain why it was useful for your product to use\nembeddings.","seo-and-social-sharing-optional#SEO and Social Sharing (Optional)":"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application.Facebook Social Plugins or Twitter for Websites creates a timeline post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base.Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it.Also ensure that the social sharing preview images are attractive. Vercel provides a useful tool for dynamic OG image generation.\nIdentify and integrate with social network(s) containing users in your target\naudience. State the social plugins you have used. Explain your choice of\nsocial network(s) and plugins.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 16 compulsory milestones in total. Milestone 1, 2, 3 and 10 are worth 2.5% each. The rest are worth 5% each.The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this.Overall, the AI application assignment is worth 20% of your final grade.","mode-of-submission#Mode of Submission":"The final submission is due .The following will need to be both submitted to Coursemology (under \"Assignment 3 — Artificial Intelligence Application\") and included in your GitHub repository:\nA write-up, group--milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your live application and link to the public GitHub repository is clearly stated in the write-up for the convenience of the teaching staff.\nA one/two-page pitch of your application, group--pitch.pdf, pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. Restriction: no longer than 2 A4 sides.\n\nThe following will only need to be included in your GitHub repository:\nA README.md file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:\nThe list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment.\nThe name of your application.\nThe URL to your application, i.e. your application must be accessible online somewhere.\nSet-up instructions for local testing (good to have).\nResources you have used significantly to build your app (e.g. tutorials, source code references, design references, UI templates, etc.).\n\n\nThe code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits). You're encouraged to use monorepos instead (e.g., via Turborepo) so that you only have to submit one repository.\n\nNot following the submission instructions (e.g., incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted to the Coursemology Forum.Good luck and have fun!","acknowledgements#Acknowledgements":"Thank you to the following individuals who have contributed to this assignment in one way or another:\nSau Sheong Chang\nSuzanna Sia\nTong Hui Kang\nRishabh Anand"}},"/coursework/product-design":{"title":"Assignment 1 — Product Design","data":{"":"Item\tDue\tIssue date\t\tFinal submission","general-overview#General Overview":"In this assignment, you will put on your designer hat and learn how to design a software product, coming up with ideas, features and designs. You will be guided on the various phases in designing your (possibly first) tech product.","grading-and-admin#Grading and Admin":"This assignment is designed for groups of three or four students. Groupings for all assignments will be formed in the first week of the course.This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various phases of app design, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade.While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work.To score the coveted remaining 30%, use your creativity to design an application that stands out from the rest. We will not limit your potential by restricting the kind of applications you can build. We expect that you (pleasantly!) surprise us with what you are capable of doing.Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at cs3216-staff@googlegroups.com.","objectives#Objectives":"The objective of this assignment is to ideate and design an app that solves a real problem, and use empirical user testing to validate your idea and design.\nYour team will pick and target an audience to solve a common problem they face.\nYou will need to think critically about the features and user interactions needed within the product, and how each of these supports the user in solving the problem.\nYou will interview users and use your user research and user testing data to iterate on the product's UI design and user interactions.\nThe final deliverable will be a high fidelity interactive prototype that is sufficiently detailed to be handed off to a developer and turned into a working app.\n\n\nPlease read the entire assignment before starting.","terminologies#Terminologies":"In this assignment, we will use the following three terms when describing the designs we expect to see from you:\nWireframes: Low fidelity designs without any design-specific elements such as colours or fonts.\nMockups: High fidelity designs that are static. These designs may look close to the final product, but they cannot be interacted with.\nPrototypes: High fidelity designs that are interactive, i.e. a user can click on a button, and the prototype will transition to the appropriate screen or state.\n\nWe will also be asking for the submission of \"user flows\". In traditional user interface (UI) / user experience (UX) circles, these refer to flow chart diagrams that represent each screen as shapes. However, we will instead refer to what Nielsen Norman Group calls wireflows as user flows.More information will be shared in the relevant sections.","phase-0#Phase 0":"For this assignment, you will be designing and building a prototype that demonstrates your app's user flows. There are a large number of available UX design tools in the industry, but we recommend using Figma.Figma is a design tool that is available as both a web and desktop application. Its most prominent feature is its support for real-time collaboration, allowing team members to work on the same wireframe, mockup or prototype simultaneously. As of 2022, Figma has been acquired by Adobe and is dominating the design tools market.Figma also has community plugins available for additional functionality, such as Iconify, which collates over 50,000 icons for use within your designs! Furthermore, students and educators can obtain a pro license from Figma for free. We recommend snagging your free pro license as soon as possible.\nFigma community plugins\nFigma template gallery\n\nFigma variables were unveiled during Config 2023 (Figma's annual user conference), and prototyping capabilities were drastically enhanced with new features that allow for more dynamic and realistic prototypes using fewer frames and interactions. It's even possible to build a playable Flappy Bird game prototype using Figma variables.Export your designs out as a .fig file when submitting. Instructions can be found here at the very bottom.Apart from Figma, here are some other tools you may choose from:\nInVision: Their free plan allows users to have one prototype with unlimited screens and unlimited collaborators for an unlimited period of time.\nSketch: An industry standard, but it is not free and available only on macOS.\nAdobe XD: We used to recommend Adobe XD as an alternative but ever since Figma was acquired by Adobe, the app is discontinued.\nPowerPoint.\nPaper and pencil for wireframe sketches.\n\nWhatever tool you choose, it has to be able to produce a prototype that fulfils all of the assignment's requirements. In particular, the final prototype needs to be interactive and demonstrate user flows through the app. Feel free to check with the teaching team if you are unsure about the tool you plan to use.\nDescribe your app in one paragraph. What does your app do and why? (You can\ncome back and complete this milestone retroactively.)\n\nExplore the available tools, pick a tool, and make sure everyone on your team\nis familiar with it.\n\nRead through Elly: Room/roommate finder mobile\napplication. This case study helps\nyou to understand the importance of the User-Centered Design process and why\nthe assignment is structured in this way.","phase-1--user-requirements-gathering#Phase 1 — User Requirements Gathering":"Every good app/platform/website/service begins with a problem they are looking to solve for a target user. As this assignment is due on , we recommend you pick a target user who is abundantly available around you, e.g. your fellow NUS students. This way, you can easily conduct your user testing.Study your users. Think of a problem / pain point you think they are facing now. List down and substantiate the problems / pain points and assumptions you have about:\nWhy are they facing this problem?\nHow are they living/dealing with this problem now?\nHow can your product/service solve this problem?\nWhat platform (desktop/mobile/app) will best serve to solve this problem?\nWill your product/service solve this problem in a way that does not cause them more stress, effort and time?\n\nList the above in a user persona card. A persona is a fictional representation of an ideal user of your product. You can have more than one user persona card if that helps you to better define your audience. There is no fixed format for this, but it should contain at the very least:\nA portrait (you can use a stock photo)\nFictitious name for your user persona\nAge, gender, current occupation\nAnswers to the problem / pain point and questions above\n\n\n\nSource: Meetup: A Usability Case StudyYou can fill in more information if you feel that that will help you better visualise your product, such as personality, brand affiliation, life goals and aspirations, level of experience with technology and more. The goal of the user persona is to allow you to think in the shoes of your user, so try to include details that make this easy.Please also list down any assumptions about your user that will help us understand what you are validating about your users in the subsequent milestones.\nPick a primary user persona, list down and substantiate some assumptions about\nthe problems they're facing now.\nOnce you have listed these down, it is time to proceed to user interviews. The goal of this round of interviews is to validate your problem and assumptions about your users. It is important to remember that the earlier you reject a bad idea, the less costly it is.\nIdentify users that fit your user persona cards\nInterview them about the problem(s) you think you are trying to solve\nValidate your assumptions\nAvoid asking leading questions\n\n\nFormulate a set of questions that you think will help you validate your\nassumptions and understand the users' needs.\n\nInterview your users and validate your assumptions. Summarise the key findings\nand conclusions you draw from your interviews.","phase-2--prototyping#Phase 2 — Prototyping":"After your interviews, list down at most three primary user goals your product should achieve. As a team, brainstorm features that would lead users to achieve these three primary user goals.The features you pick should answer why they are necessary and how they reinforce your business idea. You should focus on quality and on the impact each feature will bring. Products are not successful just because of the number of features they have.In general, remember that you are building a Minimum Viable Product (MVP). The goal is not to build a complete feature set of the product; instead, the number of features should be just enough to test out your idea and validate that it is worth executing.A good example is Instagram. They hit 100k users in a week without features such as hashtags or explore. Check out their product timeline.\nRemember, more isn't always better. If you come up with fifteen features, you\nare doing it wrong! There should definitely be less than ten features that\nmeet your three primary user goals.\nAt the same time, you should not omit essentials such as authentication and settings or the lack thereof. A large part of WhatsApp's popularity was due to simply having the phone number as the user account and their focus on the core essentials of messaging! Threads, Meta's \"Twitter killer\", saw over 100 million sign ups in less than five days due to the ease of onboarding. It uses Instagram login and users can easily follow the same accounts they follow on Instagram.As you are designing a product for the real world, it is also important to ensure that your ideas and business logic are sound, realistic, and executable. Answer these questions:\nHow will your product acquire users? Why will users use your product over what they are currently doing to solve the problem? Here are some guiding questions that might assist you in answering these questions:\nWhat does your product bring to the table?\nWhat differentiates it over the competition?\nWhy would someone choose your solution over another?\n\n\nHow will your product be executed? Here are some guiding questions that might assist you in answering this question:\nWhat resources or data does your product need?\nWhat are some stakeholders that you might have to work with?\nAre there legal/bureaucratic restrictions and/or limitations in introducing such a product?\nAre there social issues or barriers to consider, that might affect the adoption of your product?\nWhat are some potential dealbreakers that could stop your product from reaching the market?\n\n\n\n\nBased on the interview results, come up with a list of goals and features for\nyour app. Be sure to answer the questions above.","digression-good-artists-copy-great-artists-steal#Digression: Good Artists Copy; Great Artists Steal":"You should do some research before starting to work on the designs. Professional designers do that all the time. Here are some articles and references to learn more about user interaction design:\n10 Usability Heuristics for User Interface Design\nUsability 101: Introduction to Usability\n\nYou might also find pattern libraries useful. A pattern library is a collection of user interface design elements, such as a login page, a news feed, a profile page, a credit card entry screen, etc. They are recurring solutions that solve common design problems.\nMobbin: A website that showcases the various screens found within popular mobile and web apps that's very popular among the design community. It is founded by School of Computing alumni Jiho Lim and Liau Jian Jie (CS3216 AY2019/20).\nPage Flows: Covers user flows, screens and emails across various devices. Generous amount of free content.\nUI Sources: Another source for UI flow inspirations focusing on mobile apps and includes recordings of end to end user journeys (paid).\n\nPlatform-specific design resources:\nMaterial Design Tools: Official resource hub for Material Design, Google's open source design system. Useful if you want to pursue a Material design theme.\nApple Design Resources: Assets and tools for designing for Apple devices.\n\nOther good resources for design inspiration include Behance and Dribbble. They are websites used by designers to showcase their portfolio/work. You could think of them as LinkedIn for designers.Now it is time to get your hands dirty!\n\n\n\nWireframes are \"low-fidelity\" designs. This means that they should not contain any design-specific elements such as colours, font or unnecessary details like user-generated content and images. These distract from the aspects that are more important at this current stage of development, and slow down the speed at which they are produced. Instead, focus on the relative size and position of elements, key user interface elements, and interactions such as which elements can be clicked or tapped, dragged, and so on.\n\nSource: https://www.flickr.com/photos/anthonyarmendariz/4448219885/in/pool-1070674@N20/Use any tool you want — we recommend just plain paper, markers, and pencil. At this point, we value speed over quality since you will likely need to change them based on user feedback, so use whichever tool that allows you to do up wireframes the fastest.Whichever tool you use to design your wireframes, make sure you can \"transition\" from different screens and states easily. If you are designing on paper, this means using a different page for each screen and sticky notes for modals, popups and other ephemeral UI elements, and if you are designing on PowerPoint, make each screen or state a slide. When you create your design, keep your user personas in mind.\nWireframes should be low-fidelity. It is tempting to \"skip steps\" by using\ncomponent kits or colourful designs that might add to the aesthetic of your\nwireframe. However, the point of wireframes is to be \"ugly\" and bare-bones so\nthat you can be focused on iterating on the idea and user flows quickly,\nwithout being distracted by the aesthetics or colours for both you and your\nuser. Please ensure that your wireframes are low-fidelity.\nThis set of wireframes will be shown to the user during testing. As such, keep a copy without the links between buttons and screens and without more than one screen showing at once — after all, users can't do that in the actual app! (You may add annotations or comments for your own reference, but remember to hide them before starting user testing.)\n\nSource: https://www.flickr.com/photos/mockupbuilder/12987528713/in/pool-ilovewireframes/\nDesign the first draft of your wireframes and save them under a folder named\n\"Draft 1a\". Your wireframes should adhere to the requirements above. If your\ndraft is hand-drawn, scan or take a high-quality photo of it (make sure all\nimportant details are visible).\nNow, on top of your wireframes, sketch out the user flows for each of the major features you have listed above, e.g. links between buttons and screens. You may have more than one flow for each feature, and the flow can even start from outside your app. Similar to before, keep your user personas in mind when designing the user flows. Please keep these user flows as a separate copy, and you may bring all the screens together in a single document/image to better illustrate the flows between different screens.These are some examples of user flows you may want to sketch out. In some cases, you may also have an explicit hypothesis you may wish to test.\nWhen the user hears about your app from a friend and visits your website or your app store page.\nWhat should you write on that website to entice users to click the \"Sign Up\" or \"Download App\" button?\nWhen users click \"Sign Up\", what do they see next? What details do they have to fill in? Are you making users go through too many steps before even signing up?\nWhen users login or use the app for the first time, what do they see? What can they click on?\nWhen users login or use the app for the second time, what do they see? What can they click on?\n\nUser flows should naturally intersect with each other. This is fine — real apps do not artificially limit the user in the ways they can be interacted with.\nSave a copy of these user flows under a folder named \"Draft 1b\". Clearly\nidentify the main user flows. If your user flows are hand-drawn, scan or take\na high-quality photo of it (make sure all important details are visible).","phase-3--user-interviews--iterations#Phase 3 — User Interviews + Iterations":"Now it's time to put your draft design to the test! The test we are conducting is sometimes called \"Wizard of Oz\" — we will simulate user interactions by taking the place of the computer. This may seem silly at first, but it is an important tool to validate your design at this stage. Here is a video that shows an example of this form of testing using paper prototypes.","playing-the-wizard-of-oz#Playing the Wizard of Oz":"You may find it easier to conduct this form of testing in pairs. One of you will need to act as the computer, so you need a second person to record your results. Test with only one user at a time, not a group. This is to avoid one user's actions and opinions from influencing the results of other users.Ask them for five to ten minutes of their time, and if they agree, start by giving them a little context for what you are about to show them. For instance, if the app in question is NUSMods, you might tell them that they have just received a link from a friend telling them to check out a new app for organising their NUS timetable. You may also give them an explicit goal to accomplish, such as \"you would like to sign up for an account\". They will need to achieve this goal by interacting with your wireframes. If you are conducting this virtually, the person acting as the computer can share their screen.Instruct them to think aloud and use their finger to point at where they will click or tap, or if you are doing this virtually, you can try using the tools available on your conferencing application (Zoom has Spotlight and Arrow available under its annotations panel). A quick way to explain \"Think Aloud\" to your users is \"Vocalise your thoughts. Let us know what you're thinking throughout the way\". Explain that you will be acting the part of the computer, and reassure them that there is no wrong answer. Do also tell the user to notify you if they are done using the app / website or do not have anything else to do. This will make it clear to you when the user has totally lost interest, given up on your UI, or has no more use for your website / app.Now show the first wireframe they are supposed to see. Observe what they interact with first, second, third, etc. Remember to \"transition\" between your wireframes as illustrated in your user flows as the user interacts with them. Do not say anything during the whole process. If users become lost or confused, let them be lost or confused. Only prompt them for what they are thinking if it appears that they are not thinking aloud. If they get stuck, simply move onto the next set of wireframes.At the same time, keep an eye out for their body language. See if they looked hesitant or disinterested at any point in time. Perhaps, they had to squint and lean in to read certain text that was too small. A lot of times, the users will not report such issues as they would assume that the problem lies with them and not with your design.For any buttons or screens that you have not designed, you can reuse any existing wireframes and tell the users what they should see — \"You clicked the School of Computing link. We don't have those screens today. So please pretend that you see results for the School of Computing on this screen. Okay?\". Alternatively, you can describe the result of the action to the user in words instead — \"You see a pop up open with a yellow warning triangle, the text 'This will delete your results. Proceed?', and the buttons 'Okay' and 'Cancel'\".Remain as neutral as possible during testing. Only ask follow-up questions after the user testing session is completely over. This would be your chance to ask:\nDid you notice \"X\" button on this screen?\nWhy did you click here and not there? What did you expect to happen when you clicked here?\nYou seemed lost on this page. Why were you lost? What did you expect to happen?\n\nRinse and repeat with three to five different users. Does this seem too small a sample? See Why You Only Need to Test with 5 Users.\nDocument the results gathered from this round of testing with three to five\ndifferent users. Be as detailed as possible. Things that would be good to\ndocument include user flow being tested currently, your observations, the\nquestions you asked, their responses, and the issues identified. Save these\ninto a new \"Draft 1 Testing\" folder.\nAfter you have completed the testing, it is now time to review the results and improve your user flow. For example, you may want to ask yourself:\nWhat did the user click on first? Was that what you wanted the user to click on first?\nWhich features did users totally miss? Does that mean that those features are not important? If they're not important, throw them away. If they are, how can you revise your design so that users notice the features and actually click on them?\nAre there too many steps for the user to accomplish their goal? At which point did the user become visibly frustrated?\nWhat assumptions did you make when you created this design? Did the user testing confirm or reject these assumptions?\n\n\nReview your results documented in Milestone 6, and revise both your wireframes\nand your user flows. Save the updated designs in folders named \"Draft 2a\" and\n\"Draft 2b\" respectively, and write about how the results from your interview\nhave led to the changes in both the design and the flows.\nAs you iterate on your design, remember to refine your sketches and improve their quality. Be bold in your earlier iterations. It is perfectly normal to throw out entire screens at this early stage. With each iteration, you should solidify your design — while earlier iterations may require large redesign, later iterations should only produce minor tweaks. Of course, make sure these changes are well-substantiated and well-documented.","phase-4--design-mockupsprototypes--more-iterations#Phase 4 — Design Mockups/Prototypes + More Iterations":"Now that you have the basic information architecture and user interactions planned out, it is time to add more meat to your wireframe. Convert your wireframe into a mockup using your chosen prototyping tool.\nIf you feel that you are not ready for this stage yet, you may perform more\nrounds of design iteration and user testing with wireframes. Be sure to\ninclude the results and name the folders appropriately.\nCompared to a wireframe, a mockup will usually look more similar to how the final app will turn out. Colours, fonts, logos, images and user interface elements from the target platform are used in place of wire boxes. However, like wireframes, mockups remain static and will require manual transitioning when doing user testing with them.\n\nSource: https://www.nngroup.com/articles/wireflowsYou may find it useful to develop a set of shared assets such as the app's logo, colour scheme, font and common UI elements so your mockup looks coherent when it is built by different members of the team. Figma supports Components, which is a way to build elements you can reuse across your designs. You can give Figma components properties and compose them together, similar to UI library components in React/Vue/Angular. Untitled UI and Riddle UI are Figma UI kits / design systems that contain a good amount of free design system components you can use in your prototype. Figma components, used with Figma variables, empower teams to build consistent designs.If your team is feeling up to the task, you may also choose to jump right into building a prototype, which is of higher fidelity than wireframes and is interactive. Testing with a high fidelity prototype should be the next best thing from testing with an actual working prototype. This allows for a stronger suspension of disbelief, allowing the user to act more realistically. Your chosen prototyping tool should allow the user to directly click on elements, which should transition the prototype to the next screen or state. This also frees you from acting as the computer, which gives you more time to observe the user instead.If you are planning to work on a prototype, there is no need to submit the design and user flows separately. Simply submit the interactive file in a single folder, as the prototype transitions / interactions are basically your user flows.\n\nSource: http://www.tifftam.co/goji/A well-developed app has many moving components — login, sign-up, active, inactive states and so on. While you do not have to include every single possibility that your user will encounter, it should be sufficient for your users to test it satisfactorily.\nConvert your wireframes into a high fidelity mockup or prototype. If you are\ndesigning a mockup, put the mockup in a folder called \"Draft 3a\", and the user\nflows (which should be based on the same mockup) in a folder called \"Draft\n3b\". If you are building a prototype, submit the interactive file in a single\n\"Draft 3\" folder.","more-testing-more-iterations#More testing! More iterations!":"Similar to Milestone 6, you must now test your high fidelity mockup or prototype with real users. At this stage, your mockup should be more complete, so there should be less shuffling around paper or clicking through slides. You can still step in for the computer for any screens or states which you have not added, or for interactions like drag and drop, which are less easy to prototype, but there should be less intervention on your part.We strongly recommend testing at least once with an interactive prototype. Modern prototyping tools allow for precise configuration of transitions, and it would be good to test whether the transitions you plan to use between screens are intuitive to the users.As you should already be fairly confident in your information structure and basic user interaction, you can instead focus on design details, usability and user experience. For instance, you may wish to check if the chosen colour and design of your primary call to action button is sufficiently differentiated and noticeable. In addition, because you are using \"production\" colours, fonts and UI elements, you can test for a wider range of issues, such as legibility, engagement, and affordance (an object's properties that show the possible actions users can take with it, thereby suggesting how they may interact with that object).However, remember that the primary goal of the testing is still to observe the user interact with the app. If you need to ask specific questions about elements of the design which the user did not comment on during testing, you should only do so at the end of the test.\nConduct two more rounds of user testing and iteration sessions. This means you\nshould have \"Draft 3 Testing\", \"Draft 4\" (or \"Draft 4a\" and \"Draft 4b\" if\nyou're building a mockup) and \"Draft 4 Testing\", each containing their\nrespective drafts and testing results.","final-prototype#Final Prototype":"With the previous draft's user testing results, you should come to a good conclusion on what your MVP should act and look like. The final interactive prototype should be complete and sufficiently detailed to be handed off to a developer to realise them. Your prototype should include the onboarding, first use, and (if applicable) login flows. Refer to Phase 0 instructions for the expected submission format for each of the prototyping tools.Now, it's time to demonstrate how your app should work! Come together as a team (i.e., all members of your team should be present) and record a demo going through the happy paths of your application, i.e. the main success scenarios for your identified user flows. Keep the video short and sweet — give a short introduction about the problem your team is trying to solve before demonstrating the user flows. The video must be less than 5 minutes long and be submitted as a .mp4 file.\nFinalise the prototype, record the demo video and save both of them under a\nnew folder \"Final\". Once again, since a prototype demonstrates the user flows,\njust submitting the prototype is sufficient.\nWe want you to be aware that the different milestones in Assignment 1 have been structured for you to gain a good sense of what it takes to produce a Product Requirements Document (PRD), a document used in companies (Meta, Amazon, Google, many other tech companies...) to describe the product being built. The PRD is usually produced by the Product Manager and has to be approved before further product development can take place. Once produced, it drives the efforts of the entire product team and the company's sales, marketing and customer support efforts.The broad structure of the PRD is as such:\nProduct Purpose (Milestones 1-3)\nDescription of the problem that you are trying to solve\nHigh-level description of what the product does and how it solves the problem\nWho is the product for\n\n\nCompetitive Analysis (Not included in Assignment 1)\nIdentify competitors who are launching similar products\nIdentify features of competitor's products worth emulating or avoiding\nIdentify the ways in which our product's features can deliver greater value than the competition\n\n\nFeatures (Milestones 4-8)\nDescribe each feature at the level of interaction designs and use cases\nRequirement traceability — identifying which requirements are in support of which objective\nMetrics to be measured (Not covered in Assignment 1)\n\n\nSchedule for Product Development (Not covered in Assignment 1)\nKey milestones and overall timeline for product development\n\n\n\nIn particular, most of the PRD's importance is in the articulation of the product purpose (Milestones 1-3) and the features built to serve its purpose (Milestones 4-8). This is also what we are focusing on in this assignment. Hence, besides being mindful of how and why Assignment 1 is structured in this manner, you should also illustrate (to the best of your ability) how each feature addresses a particular aspect of a problem that your target user faces — what is known as requirements traceability — to demonstrate that your feature was developed and iterated with thought for the problem faced by the target user and not simply because it's cool or funky.For further reading regarding PRDs during your free time, feel free to check out this link.","phase-5--growth-hacking#Phase 5 — Growth Hacking":"Growth hacking is defined as the process of rapid experimentation across a marketing funnel, product development, sales segments, and other areas of the business to identify the most efficient ways to grow a business. A common misconception about the term is that it has to do with coding.A wonderful application is useless if there are no users using it! In this section we will discuss some ways to get users.","landing-page#Landing Page":"When should you launch a website for your app? If your answer is to launch only after the app has been released, you are missing out! Just like movie trailers, which are released months before the actual launch of the movie, you can launch a landing page, which is a website designed to gauge interest and convert visitors into leads/users.A landing page for an app that hasn't been launched should:\nExplain what your app is about and aims to generate interest in it.\nContain a form that allows you to record a visitor's information (e.g. email). Businesses often promise some sort of deal or promo for the first X users who sign up. Another smart marketing tactic is to allow users to claim/reserve their username on your product, which creates a sense of scarcity (e.g. Cal.com).\n\nHere are some resources and examples for building attractive landing pages:\nOne Page Love\nSaaS landing page examples\n6 Coming Soon Landing Page Examples to Build A Waitlist For Your Next Launch\nLanding Page Design Examples to Inspire Your Own in 2023\n20 Great Landing Page Examples You'll Want to Copy in 2023\n\n\nDesign and launch a landing page for your app that is publicly accessible. You\nshould consider hosting it on Vercel or GitHub\npages, but you can host it anywhere that works and\njust let us have the URL. It should have a sign-up form for users to indicate\ninterest (it doesn't have to actually save any data).\nUse a CSS library/framework like Tailwind UI or Bootstrap to save yourself some time. Remember that the design has to be attractive and that your message has to be succinct! You can even consider no/low code solutions like like Framer or MailChimp landing pages to skip all the work.","marketing-strategy#Marketing Strategy":"A landing page cannot effectively convert visitors into leads/users if there are no visitors to begin with! Going back to the movie trailers example, it would be like creating a movie trailer but not showing it through public display screens and television advertisements. Hence, you should think of some potential marketing strategies to get the word out about your app.Positive examples:\nMake promotional videos. View past CS3216 final project videos here.\nGriddit, a live chat room app, got Prof Ben Leong to do an AMA using their service.\nLetterbox had a member going around the school on an Airwheel and giving out flyers.\n\nDO NOT:\nPaste unremovable stickers on the benches of the School of Computing.\nPut up posters in inappropriate places like restrooms.\n\nVideos are not the only way to market an app — to obtain marks in the coveted 30%, think out of the box for non-disruptive, creative and effective marketing strategies. We want a well-thought-out marketing plan including details on how you would implement it. Your strategy must obviously be realistic, i.e. do not suggest giving out $10 to each user who downloads your app if you do not have a good plan of getting those funds or a millionaire on your team.\nDesign a small marketing campaign for your app. Explain which marketing\nchannels you would use and how you would use them to get the word out about\nyour app to attract more users. Provide implementation details (e.g. if you\ndecide to make a promotional video, write out a brief outline of the video\ncontents). Explain why you think your marketing strategy would be effective in\ngathering users.","final-assignment-write-up#Final Assignment Write-up":"Your submission will include a write-up that describes how your group has met all the milestones for this assignment:\nIt should contain answers to Milestones 1-4 and 10-11.\nIt should also summarise your Milestones 5-9. More specifically, it should:\nMake it clear how the designs are organised. Which ones are wireframes, mockups or prototypes?\nBriefly recap the results and observations from your user testing results.\nHighlight the main user flows presented in each draft / iteration submitted.","assessment-scheme#Assessment Scheme":"The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are 11 compulsory milestones in total, along with an optional Milestone 8b. Milestones 5a and 5b are each worth 2.5%. Milestones 6, 7 and 9 are each worth 10%. The rest are worth 5% each.The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this.Overall, the product design assignment is worth 10% of your final grade.","mode-of-submission#Mode of Submission":"By , you should upload the following to Coursemology:\nYour final write-up named group--milestones.pdf\nYour designs and testing results — zipped together — named group--designs.zip\n\nFor submissions that are >1GB in size (which is the maximum upload size that Coursemology currently has), upload the zip file to Google Drive and submit a PDF file containing the link to your designs and testing results. Please make sure the last modified date time of your uploaded ZIP file on Google Drive is before the submission deadline.\nAs a final reminder, you should have written answers for six milestones,\nthree or more drafts comprising separate folders for the design, the user\nflows and user testing results and conclusions, one final prototype, and\none demo video in your submission. Failure to adhere to these\ninstructions will result in the deduction of marks. Only one member of your\ngroup needs to submit on Coursemology on behalf of your group.\nClarifications and questions related to this assignment should be posted to the Coursemology forum.Good luck and have fun!"}},"/coursework/project":{"title":"Final Project","data":{"":"Item\tDue\tIssue date\t\tTeam formation deadline\t\tProposal\t\tProgress report 1\t\tProgress report 2\t\tIn-class progress report\t\tPoster session\t\tFinal report","general-overview#General Overview":"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents.For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the by . Each team is to submit a project proposal by (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester.Your team can design the whole application, but if the scope is too large to be completed in one semester and you intend to continue to develop your application for a business venture, you can implement a prototype with some basic (or limited) functionality to satisfy the requirements for the class. Please state such intentions clearly in your proposals. The teaching staff will evaluate your proposals carefully and provide you with our feedback within a week.There are no limits on what students can do for the final problem, though the expectation is that it must be a \"cool\" application or product. The following are possibilities:\nA real-time HTML5 game\nA FB Messenger / Telegram bot\nA new e-commerce application. This can be the basis for a submission to the Start-Up@Singapore contest\nA mobile application. You may choose to build a native app if you like\nAn entry for the Microsoft Imagine Cup\nSome amusement – cute and useless, but fun and popular\nAn e-learning application of sorts\nAn Internet of Things hack\nAn application to improve school life, something along the lines of NUSMods / NUSWhispers?\n\nThe possibilities are endless. If you plan to develop a social networking application, you are expected to deploy your Final Project at least two to three weeks before the end of the semester because the \"proof of the pudding is in the eating\". You should get real people to use your applications, and the popularity of your application can be (but is not the only) criteria for the evaluation.If one of the apps you developed for one of the previous assignments turned out to be to very popular (i.e. has lots of users or a high growth rate) or has perceived potential, you may also choose to further develop it as your Final Project. The only minor complication is that you might be \"locked-in\" to work with the same team members. We leave you to sort such things out by yourself.","course-policy-on-final-project-groupings#Course Policy on Final Project Groupings":"People can be in two Final Project groups. This often happens when someone from an assignment group gets distracted and want to try something new but cannot really bear to \"leave their baby\" and still want to be a part of that group. Fair enough.However, your Final Project grade will come from ONE project that you will specify/declare right at the onset, i.e. by the end of the mid-term break. The rationale for this policy is that we don't want people to jump ship halfway and leave others high and dry. With this policy, everyone knows everyone's priorities. The \"extra\" members don't count towards the 4-member limit for a project team.If you decide to work with external parties, we do not have any official guide on what compensation you should negotiate. We leave it to you to decide for yourselves what is fair. However, DO NOT work for companies that clearly neither value nor respect you.","final-project-proposal#Final Project Proposal":"Your team should submit a project proposal by to the Coursemology workbin. The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:\nDescription of the application you plan to develop.\nJustification for choosing this project idea. Briefly mention the 3 key points: \"Problem is real? Problem can be solved in CS3216? Problem has impact?\"\nProject schedule: milestones and timeline, including an implementation plan and deployment plan.\nIndividual contribution and roles. Contributions and/or support from external partners, if any.\nLong-term plan and business model (if applicable).\nMarketing and strategies to be employed.\nHigh-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used).","development-of-final-project#Development of Final Project":"Each team will meet with the teaching staff (probably lecturer + TA) for a one-hour preliminary meeting after receiving your feedback on your Final Project proposal. The meetings will be biweekly. Look out in your emails for the meeting schedules.These are compulsory sessions where the schedule is flexible and should be determined by both parties.","customer-contact-reports#Customer Contact Reports":"We have told you time and again to \"go out there and talk to your customers\", and we're serious. 10% of your project grade will come from your \"Customer Contact Reports\". Use any reasonable report format to record your customer contact details and the interactions with your potential users. You are expected to produce a contact report at every consultation session.","progress-reports#Progress Reports":"Each team will be required to submit a progress report on to the Coursemology workbin. The progress report should include minimally the following:\nApplication prototype. Minimally as functional as what was achieved in Assignment 3.\nIs your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule?\nWhat were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them?\nAny changes to the application since the initial project proposal?\nAssuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with?\nUpdated project schedule: milestones and timeline.\n\nA second progress report will be due on . The contents of which would be similar to the first progress report.Please try to keep your reports to within two pages, or a maximum of 3 pages if you really must.","final-project-presentation#Final Project Presentation":"On , each team will make a presentation to the rest of the class on your project. This session will be another round of peer-appraisal by your peers. Your goal is to convince your fellow coursemates that your project is really cool, and that you have done a lot of work and great work. Think of it as round 2 of your innovation seminar, but you are selling your own dog food.","preliminary-security-scanning#Preliminary Security Scanning":"At this juncture , you should have a preliminary website for your app up and running, even if it is not fully functional. You are expected to provide us with a URL, and the tutors will be using security tools to scan your site. You will be provided with a security report, and you are expected to address the cited issues for your final project. Clearly, if your project is very incomplete, very little will be found, but you then risk more bad things being found after your final project is submitted. We will be doing another round of security scanning after your final project is submitted.","soc-steps#SoC STePS":"In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on from 3pm to 7pm as part of the School of Computing Term Projects Showcase (STePS).Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the \"show-and-tell\". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from \"other people\" — NUS staff, students, alumni, guests — who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses.Again, you can choose how you want to present your work. You can bring along other materials in addition to the posters, such as your iPads, or set up your laptops to do a demo also. We'll leave it up to you!","final-project-video#Final Project Video":"Traditionally, every team is required to make a 1-minute video to be submitted to the STePS organising committee. Here's a playlist of past years' videos.","marketing-efforts#Marketing Efforts":"As part of the user acquisition process, many teams set up their own social media page to publicise their products and gain initial traction before the actual STePS event. Here's what the top three teams of AY2015/16 did on Facebook:\nLetterbox went around the school on a hoverboard and handed out flyers. They also managed to launch their apps to the iOS App Store and Google Play Store before the event (a seriously impressive feat).\nGriddit created an anonymous chatroom for NUSWhispers and organised an AMA with Prof Ben Leong, which saw over 400 participants.\nPaperbaton launched a blog with helpful tips and also a complementing product, NUSExam, a Past-Year Question Paper Downloader for NUS Students.\n\nThese three teams also created Facebook pages to engage users continually. Have a look at the Facebook pages of Letterbox, Griddit and Paperbaton to get a sense of what sort of pre-STePS publicity can be done.","final-project-poster#Final Project Poster":"The final A1-sized project poster should (at least) include the following points:\nDescription of the application you have developed.\nWhat makes your application special?\nScreenshots, graphics, diagrams and tables. Probably fewer words.\nPrepare a snappy yet catchy 1-2 minute pitch that you can use (over and over) when presenting your poster.\n\nRemember, avoid overloading the poster with too much (small) text. This will ensure that people won't want to read what's on your poster. Add in pictures, graphics, diagrams and tables when appropriate. You are there to \"sell\" people your idea, to make them convinced that your application is unique and creative, and NOT to put them to sleep.Some examples of past STePS posters:","final-project-report#Final Project Report":"Like most other classes, the Final Project report is to be submitted by to the Coursemology workbin. The final report should (at least) include the following points:\nDescription of the application you have developed.\nAre there any existing applications out there that are similar? What makes your application special?\nReview of milestones and timeline for the project (which ones did you hit, what ones did you miss?).\nIndividual contribution and roles. Acknowledgement of resources/help provided by external parties.\nApplication design (e.g. database schema, UML, etc., but no code please).\nReport on the current number of users who have installed, active users, etc. Perhaps Google Analytics data and screenshots (or similar analytics tools) to support your claims.\nFuture plans and strategies.\nInsights gained from the project. What did you learn from doing the Final Project?\n\nWe do not specify a required page length, though we expect that most reports will be about 10 to 15 pages in length. The report definitely SHOULD NOT exceed 20 pages, please. Once you submit the Final Project report, you are done with CS3216! Congratulations!","assessment-scheme#Assessment Scheme":"The Final Project is worth 50% of the total grade for CS3216. The Final Project will be graded according to the following weightage:\n5% Project Proposal\n10% Customer Contact Report\n5% Progress Report\n10% Progress Report 2\n10% In-class Final Project presentation (awarded by your peers)\n30% Poster Presentation (awarded by the panel of judges)\n30% Final Report\n\nThe fact that 30% of the grade for the Final Project is determined by the outcome of your poster presentation might make it seem somewhat random and arbitrary, but this mimics life. Success comes not only from how well you do something but from how well you can sell it (or convince suckers to buy your stuff even if it's completely useless and they don't actually need it 😜). This is also where the marketing people make themselves useful. You are graded on the quality and relevance of your posters, your sales pitch, marketing collaterals, the quality of your apps, etc.For those of you doing external projects, your team is treated as a consultancy. You are graded by how well you manage your consultancy, e.g., frequency of meetings with your clients, quality of questions asked, quality of solutions proposed, and how you negotiate your compensation package. For those doing your own project, you are treated as a startup. We assess you on how well you manage your market validation, how well you design your marketing campaign, how you go out and bring in users, etc.","mode-of-submission#Mode of Submission":"The following is the list of deliverables to be pushed to your GitHub repository:\nSource code.\nYou should also upload a copy of your poster to your repository.\nProof of working application: You may either (a) Publish the application publicly (in the application settings, untick the Developer Mode); or (b) Add all the members of the teaching staff to the Developers part in the application settings so that we can assess your application (of course you need to add us as your friends first). In both cases, you should provide us with a link to your application's canvas page.\nYour Final Project report, in PDF format.\n\nPush all of the above to your GitHub repository. Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.Clarifications and questions related to this assignment should be posted on the Coursemology Forum.Good luck, have fun. Live long and prosper!"}},"/coursework/seminar":{"title":"Assignment 2 — Innovation Seminar","data":{"":"Item\tDue\tIssue date\t\tInnovation submission\t\tSlides submission\t\tPresentation\t\tInnovation critiques\t\tMutual critiques","general-overview#General Overview":"In order to build good and original innovations, it is important to learn what other people have already done — and think critically about what is good and bad, as well as explore ways to improve and generate new ideas. In addition, it is important to learn how to articulate one's ideas clearly and succinctly, both orally and in writing. The innovation seminar is designed to help students:\nLearn how to identify and assess innovative ideas.\nGain a better understanding of existing innovations.\nLearn how to present (or sell one's ideas).\nLearn how to articulate their ideas in writing.\n\nYou will form teams of up to four people, and each team will have to find a new innovation and share it with the class.Before you meet as a team, each member is to try their hand at identifying a recent relevant innovation. Your team is to then meet and discuss to finally decide on the most innovative idea and make a presentation about it to the rest of the class on . Each team is to put up their choice of the most innovative idea on the as soon as possible (latest by ). Note that duplicates are not allowed, and it will be first-come, first-served. Please double check that another group has not taken up your team's choice before adding it to the Google Sheet.","nature-of-chosen-innovation#Nature of Chosen Innovation":"Your chosen innovation should be an application (software / hardware / mixture of the two) of Generative Artificial Intelligence (AI). Some famous examples are ChatGPT, Midjourney, Landing AI, Tome, etc. Note that you are expected to look for new applications that are not well known (yet).","target-audience--level-of-technicality#Target Audience & Level of Technicality":"You can assume the target audience to be your fellow classmates, and the whole goal of this assignment is for you to convince your classmates that your chosen idea is the coolest! A suitable level of technicality is allowed in the presentation. That is, you are allowed to use technical terms that you think your classmates will be able to understand, but please don't start going through the steps of Dijkstra's algorithm line-by-line during your presentation.","grading-and-admin#Grading and Admin":"The presentations should attempt to cover the following points about the chosen innovation:\nDescription of the innovation.\nWhy we should care about the innovation you chose (i.e. the potential impact).\nWhat is good about the innovation.\nWhat are the limitations of the innovation, and suggestions on how they can be overcome.\nWhat are some the aspects of innovation you will design / implement differently, and why.\n\nFor engaging and excitingly quick pace presentation, we are using a format called Pecha Kucha (see this video for an example).In brief, each presentation is limited to 20 slides, and each slide should have exactly 20 seconds of air time. This means that each presentation should be approximately 7 minutes (6 minutes 40 seconds to be precise) long. Please stay within this time limit. You can choose to have a single person present or have more than one, but keep in mind that you have a limited time. The teaching staff WILL cut you off after the time limit.Perhaps it is impossible to cover all the suggested points above in 7 minutes? Well, the point here is to make a thoughtful presentation. You need to work out as a group exactly what to do if you can't fit everything into 7 minutes. Sometimes less is more. Sometimes it's not. Life is full of hard questions.You can present using PowerPoint, Keynote, Google Slides, or whatever tools you wish to use. Surprise us (in a good way) if you can. BEFORE submitting, please ensure that your slides auto-advance every 20 seconds. No cheating! 😜Following the presentation, there will be a short Q&A session opened to the rest of the class for a maximum of 3 minutes.","innovation-critique#Innovation Critique":"After listening to all the presentations, each student will be randomly assigned to write about two of the innovations that were presented (not their own presentation) and have to write about the following:\nBased on what the presenting team has shared, describe and explain what the innovation or technology is about. Please don't regurgitate the entire presentation. Summarise the points and keep them unopinionated. (5%)\nWas the presentation effective? Did the group show that they fully internalised the presentation techniques discussed in Lecture 3 (PUNCH->WIIFY->Plan)? (6%)\nWhat are your (original) thoughts? (9%)\n\nThe fun part is that the assignment of the presentations each student has to write about will be done only AFTER all the presentations are over. This means that every student will have to pay attention to every presentation 😎. Those who like Russian Roulette are welcome to skip and sleep for some presentations.This is not a literature class, and you are not required to write in poetry. We only ask that you think carefully about what you heard and express your ideas clearly. Points will not be taken off for typos or grammatical errors as long as the ideas are expressed clearly and can be understood easily. There is no minimum length, but do have some mercy on your poor lecturer and try to keep each innovation critique within 300 words. What matters is not how much you write but the quality of your thoughts and ideas and how much you actually learnt from the process.You are, of course, also welcome to write about other aspects of the seminar and also about lessons learnt in addition to this assignment. The innovation critiques should be submitted on Coursemology by (i.e. the next day).","response-and-follow-up-of-critique#Response and Follow-up of Critique":"Once all the innovation critiques are submitted, a new forum will appear, and you will post your critiques there. You will read the critiques written by your coursemates on your presentation and have an online discussion. If your coursemates think that your team's innovation is not innovative, you should try to convince them otherwise.Just bear in mind that the goal of CS3216 is to learn. You do not do better in this segment of the assignment by being nasty and running your coursemates down. Be civil. Be polite. Be kind. If others post comments disagreeing with you, do not be too defensive. All these comments should be posted by .How many comments should you post? As many as you think is appropriate and sufficient to earn the 10% grade for this part of the assignment.Remember: everything will go well (including your grade) if you demonstrate that you actually learnt something and have approached this innovation seminar in a thoughtful way 😃.You will also get points if your friends post stuff on your forum posts. The idea here is that whether you can write stuff that is thoughtful enough to attract readers and people to post comments is also a measure of \"quality\".","assessment-scheme#Assessment Scheme":"The following are the weightages for the two components:\n50% Group presentation\n40% Innovation critique x 2 (what you write in your posts)\n10% Response and follow-up of critiques (addressing critiques on your chosen innovation and responses to your posts)\n\nOverall, the innovation seminar is worth 10% of your final grade.","mode-of-submission#Mode of Submission":"The slides for the presentation should be named group--seminar.{pptx|key} and uploaded to Coursemology by , because we will be downloading the slides to project on-screen or screen-share during class.\n\nIf you are using Google Slides\n\nInstead of the above instructions, upload a PDF version of your slides group--seminar.pdf and upload a text file group--seminar.txt containing just the publicly-accessible view-only link to your slides to Coursemology by .\n\n\n\nDo not make any changes to your slides after the submission deadline, even if it is just tweaking animations. During the presentation day and right before your team presents, one of your team members should be ready with the revision history and show us that there has been no changes past the deadline. If there are any, we will ask you to rollback the presentation's version to right before the submission deadline, before your presentation starts.\n\nThe innovation critiques should be submitted within 24 hours of the innovation seminar, by . Your comments for the mutual critique part should be made by .\nMarks will be deducted if you fail to follow the submission instructions (e.g.\nincorrect file naming).\nClarifications and questions related to this assignment should be posted to the Coursemology forum.The way this assignment is structured, it might seem very stressful — but it's really not quite as bad as it seems. It's actually fun if taken in the right spirit.Good luck and have fun! 🙂"}},"/":{"title":"Why CS3216?","data":{"":"","its-not-the-same#It's not the same":"CS3216 is not your traditional software engineering course. You will not have lectures teaching you how to write in a particular programming language. You will not have assignments that assess you only for the quality of your code. You will not have a bar set for you. In fact, we don't even know how high the bar is.","its-about-your-dreams#It's about your dreams":"Inspired by The Last Lecture (or \"Really Achieving Your Childhood Dreams\"), this course is your chance to start realising your dreams today. You will get the chance to show off your creativity to do something different.You are free to build almost anything under the sun.","its-about-change#It's about change":"It will be a mistake to think that CS3216 is about teaching you how to work on new platforms. The world changes so fast that it will be obsolete by the time you graduate. In fact, you are more or less expected to learn them on your own.It's not about learning how to work on a platform. It's about learning how to learn. It's about equipping yourself with the ability to pick up new skills on the fly to face a changing world.","its-not-just-about-coding#It's not just about coding":"Enrolment to this course is open to students of all faculties and students. You will work in small inter-disciplinary teams to create your killer applications.Programming experience for non-School of Computing (SoC) students is not a pre-requisite since work will be done in teams. In previous years, we have had students from Science, Arts and Social Sciences, Business (including an MBA student) and Engineering in addition to SoC."}}} \ No newline at end of file diff --git a/_next/static/chunks/pages/coursework/artificial-intelligence-0bd930cb8965fac3.js b/_next/static/chunks/pages/coursework/artificial-intelligence-8517e286e30e00bc.js similarity index 94% rename from _next/static/chunks/pages/coursework/artificial-intelligence-0bd930cb8965fac3.js rename to _next/static/chunks/pages/coursework/artificial-intelligence-8517e286e30e00bc.js index b802a0c..9f54470 100644 --- a/_next/static/chunks/pages/coursework/artificial-intelligence-0bd930cb8965fac3.js +++ b/_next/static/chunks/pages/coursework/artificial-intelligence-8517e286e30e00bc.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[976],{6138:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/coursework/artificial-intelligence",function(){return n(4007)}])},6217:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var i=n(5893),s=n(1236);function o(e){let{children:t,customNumber:n,labelSuffix:o}=e;return(0,i.jsx)(s.UW,{type:"info",emoji:"\uD83C\uDFC1",children:(0,i.jsxs)("div",{className:"milestone",style:{counterSet:n?"milestone ".concat(n):void 0},children:[(0,i.jsxs)("strong",{children:["Milestone ",null!=n?n:(0,i.jsx)("span",{className:"milestone-counter"}),o&&(0,i.jsxs)(i.Fragment,{children:[" ",o]}),":"]})," ",t]})})}},4592:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var i=n(5893);function s(e){let{date:t,emphasize:n=!0}=e,s=new Intl.DateTimeFormat("en-SG",{dateStyle:"full",timeStyle:t.includes(":")?"short":void 0,timeZone:"Asia/Singapore"}).format(new Date(t));return(0,i.jsx)(n?"strong":"span",{suppressHydrationWarning:!0,children:s})}},4007:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return y}});var i=n(5893),s=n(2673),o=n(1151),a=n(5675),r=n.n(a),l={src:"/_next/static/media/gen-ai-landscape.58326212.png",height:4008,width:3200,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAIAAABVpBlvAAAAdUlEQVR42hWKOwrDMBAF9/6ncuUzuDKkCClSWNr/rqQo0mN4MDBAx8ERWEpkzjF+maDX1eYM88zWex9jwPN6P5WUhCqXWkUMVHQtwzPCzHdFqIiCtDHRXTEv4f1I5o0+X3B3YasoTGSt+32DWZhHerTFnHKef8UyiU1RcKxtAAAAAElFTkSuQmCC",blurWidth:6,blurHeight:8},h={src:"/_next/static/media/ai-wrapper-meme.f0bfbe8f.jpg",height:666,width:500,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABgMBIgACEQEDEQH/xAAnAAEAAAAAAAAAAAAAAAAAAAAAAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAAAU//xAAdEAACAQQDAAAAAAAAAAAAAAABAwQAAgURISMy/9oACAEBAAE/AMdBDXTAcbBGgnrS4bs4Ps1//8QAGBEAAgMAAAAAAAAAAAAAAAAAAhEAAXH/2gAIAQIBAT8AOmTyf//EABcRAQADAAAAAAAAAAAAAAAAAAEAAiL/2gAIAQMBAT8Aq5J//9k=",blurWidth:6,blurHeight:8},c={src:"/_next/static/media/competitive-profile-matrix.6b504cdf.png",height:302,width:566,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAYElEQVR42h3JuwqAIBQAUP//i5qKmqKppChy83HvxRTEEh2zznrY9cs5O+eO/Zi2cd0aEC0zxgBAKSXGiICr5Er3NwyMiOqllEIICMDlIlX3YP+FtbaG954QhT61mQPxF7KjVZRCiOJcAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4},d={src:"/_next/static/media/google-search-dominance-2022.05f6ec46.png",height:1200,width:1200,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAo0lEQVR42h3BMVLCABAF0P//7gImKnoBrDyKJ7e2cKwcbSxoMgaKDAgh2XWG9/j1sw/7MwtcVSVl6/s7j7D2pgWVcwKUuHAC5W0T7goXKt04Jz87bB6h17fTcMhw7I/82NZwqu9dnqcSQJJh6o9473Ce+fKs2yUdwGWa+mF8elhu1uU2SaoCt91BlqV5pRWZQsIcVd40JHwRTVaSPo6X3W9vpn+askcv4XvUkAAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:8},u=n(1236),p=n(3470),g=n(4592),m=n(6217);function f(e){let t=Object.assign({h1:"h1",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h2:"h2",p:"p",ol:"ol",li:"li",strong:"strong",em:"em",a:"a",h3:"h3",ul:"ul",h4:"h4",code:"code",pre:"pre",span:"span"},(0,o.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Assignment 3 — Artificial Intelligence Application"}),"\n",p.oZ.Uo&&(0,i.jsx)(u.UW,{type:"warning",children:" This assignment is currently being updated. Details are tentative and will be finalised soon."}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{align:"left",children:"Item"}),(0,i.jsx)(t.th,{align:"left",children:"Due"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Issue date"}),(0,i.jsx)(t.td,{align:"left",children:(0,i.jsx)(g.Z,{date:p.oZ.Q_,emphasize:!1})})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Final submission"}),(0,i.jsx)(t.td,{align:"left",children:(0,i.jsx)(g.Z,{date:p.oZ.I8,emphasize:!1})})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"general-overview",children:"General Overview"}),"\n",(0,i.jsx)(t.p,{children:"In recent times, the landscape of software development has been profoundly reshaped by the remarkable strides made in artificial intelligence (AI) and, more specifically, generative AI and large language models (LLMs). These advancements have revolutionized how applications are conceived, designed, and experienced, opening up a realm of possibilities that were once confined to the realm of science fiction."}),"\n",(0,i.jsx)(t.p,{children:"At the heart of this transformation lie LLMs, such as GPT-3.5 and Claude, which stand as towering pillars of AI ingenuity. These models possess an unprecedented ability to comprehend and generate human language with impressive fluency and nuance. As a result, a new era of app development has emerged — one characterized by applications that are not merely tools, but intelligent and empathetic companions."}),"\n",(0,i.jsx)(t.p,{children:"The key merits of building apps that harness the power of LLMs include:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Natural language understanding and generation"}),": LLMs enable apps to not only understand user inputs with remarkable accuracy but also respond in a manner that mirrors human conversation. This grants users a level of interaction that transcends traditional interfaces, fostering more engaging and meaningful experiences."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Contextual awareness"}),": These models possess an inherent understanding of context, allowing apps to tailor responses and actions based on the evolving conversation. This adaptability creates a sense of fluidity and responsiveness, akin to conversing with a knowledgeable friend."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Content creation and enhancement"}),": Apps can leverage LLMs to generate a wide array of content, from articles and reports to creative writing and marketing copy. This capability has the potential to revolutionize content-driven industries, amplifying efficiency and creativity."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Personalization"}),": By tapping into the vast expanse of language data, apps can deliver personalized experiences that cater to individual preferences, needs, and emotions. This personal touch fosters a deeper sense of connection and resonance."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Recent enhancements in AI have propelled LLMs to even greater heights. Techniques such as unsupervised fine-tuning and transfer learning have imbued these models with the ability to adapt to specific tasks and domains. Moreover, efforts to democratize AI have led to increased accessibility, empowering a broader spectrum of developers to harness the potential of these models."}),"\n",(0,i.jsx)(t.p,{children:"In this era of AI-powered app development, the boundaries of creativity are expanding. Whether it's a virtual personal assistant that understands nuanced voice commands, a language-learning app that adapts to each user's proficiency, or a content creation tool that seamlessly generates tailored content, the possibilities are limited only by imagination."}),"\n",(0,i.jsx)(t.p,{children:"The convergence of LLMs and app development is ushering in a new wave of innovation, redefining the way we interact with technology. As these models continue to evolve and mature, they will undoubtedly leave an indelible mark on the fabric of our digital experiences, enriching and enhancing our lives in ways that were once unfathomable."}),"\n",(0,i.jsx)(t.p,{children:"As a CS3216 student, you do not want to miss out the opportunity of a lifetime to be at the forefront of this new AI wave!"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.em,{children:"P.S. In the spirit of exploring AIs/LLMs, parts of this assignment have been written with the assistance of LLMs \uD83D\uDE09."})}),"\n",(0,i.jsx)(t.h2,{id:"grading-and-admin",children:"Grading and Admin"}),"\n",(0,i.jsx)(t.p,{children:"This assignment can be done in groups of three or four students, which should have been formed by now. If you were unable to find yourself a group, you will be randomly assigned one."}),"\n",(0,i.jsx)(t.p,{children:"This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of AI software development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade."}),"\n",(0,i.jsxs)(t.p,{children:["With that said, you have a lot of freedom to express your creativity. You are free to develop any idea you like. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition via email at least one week before the assignment is due. ",(0,i.jsx)(t.strong,{children:"Your petition is subject to approval."})]}),"\n",(0,i.jsx)(t.p,{children:"While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work."}),"\n",(0,i.jsx)(t.p,{children:"To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you will surprise us (pleasantly!) with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated."}),"\n",(0,i.jsx)(t.p,{children:'For example, LLMs can be used to easily add chatbots to any applications, but chatbots may not contribute as much value to certain domains. In fact, implementing features for the sake of doing so may work against you (and your grades) as these "non-value add" features detract users from the main purpose of your app.'}),"\n",(0,i.jsxs)(t.p,{children:["Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at ",(0,i.jsx)(t.a,{href:"mailto:cs3216-staff@googlegroups.com",children:"cs3216-staff@googlegroups.com"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"objectives",children:"Objectives"}),"\n",(0,i.jsx)(t.p,{children:"The high-level goal of this assignment is to utilize generative AI (LLMs in particular) to build a meaningful digital product."}),"\n",(0,i.jsx)(t.p,{children:'You should approach this assignment with the mindset of an entrepreneur — you own every decision, and each decision you make (from design to engineering) will directly translate to the "success" of your product.'}),"\n",(0,i.jsx)(t.p,{children:"Like all previous assignments, we designed milestones such that you can hopefully have a sense of direction on where we expect you to reach, but these milestones are broadly described so that you are not restricted on how to get there."}),"\n",(0,i.jsx)(t.p,{children:"In this assignment, your task is to demonstrate that you can design and implement a web application that utilizes the capabilities of LLMs, persist the users' data in the cloud and leverage the user's identity in a meaningful manner."}),"\n",(0,i.jsxs)(t.p,{children:["You should utilize this assignment to showcase your product sense and engineering capabilities. You should also consolidate learnings from ",(0,i.jsx)(t.a,{href:"/coursework/product-design",children:"Assignment 1 (on Product Design)"})," and ",(0,i.jsx)(t.a,{href:"/coursework/innovation-seminar",children:"Assignment 2 (on identifying innovations, and gaps in the market)"})," to build a fuller product for this assignment."]}),"\n",(0,i.jsx)(t.p,{children:"Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference."}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Please read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of an AI\napplication. The grading scheme can be found at the end of this handout."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-0-introduction",children:"Phase 0: Introduction"}),"\n",(0,i.jsx)(t.h3,{id:"background",children:"Background"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions."}),"\n",(0,i.jsxs)(t.p,{children:['Notably, technology giants such as Google, Microsoft, and Meta have fully embraced the AI "arms race" by entering the fray with their own formidable models and chatbots. A clear testament to this paradigm shift was the ',(0,i.jsx)(t.a,{href:"https://blog.google/technology/ai/google-io-2023-keynote-sundar-pichai/",children:"recurring theme of AI at Google I/O 2023"}),", underscoring the pervasive influence of AI across industries. As these tech titans continue to dedicate resources to AI research and development, the integration of AI into their existing products is poised to unlock new dimensions of functionality and user experience."]}),"\n",(0,i.jsxs)(t.p,{children:["However, the transformative power of generative AI and LLMs is not confined to established players alone. A burgeoning ecosystem of AI startups has taken root, propelling the domain forward with innovative applications primarily in copywriting and customer support. These startups, leveraging the remarkable capabilities of generative AI, are reshaping how businesses communicate with their users to provide support, setting the stage for more personalized and efficient engagement. Case in point – ",(0,i.jsx)(t.a,{href:"https://www.businesstimes.com.sg/startups-tech/startups/y-combinators-latest-batch-35-ai-startups",children:"35% of Y Combinator's 2023 Summer batch were AI startups"}),"!"]}),"\n",(0,i.jsx)(t.p,{children:"As this new wave of apps, empowered by generative AI and LLMs, continues to unfold, the boundaries of innovation are rapidly expanding. The convergence of AI and human ingenuity is reshaping how we interact with technology, and the journey ahead is going to be really interesting. It's an exciting time to be a software engineer!"}),"\n",(0,i.jsx)(t.h3,{id:"new-ai-landscape",children:"New AI Landscape"}),"\n",(0,i.jsx)(t.p,{children:"Within the generative AI startup landscape, there are a few common categories of products:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text"}),": Create and manipulate textual content. Tools that can draft articles, generate product descriptions, and even assist in creative writing. Examples: ",(0,i.jsx)(t.a,{href:"https://www.copy.ai/",children:"Copy.ai"}),", ",(0,i.jsx)(t.a,{href:"https://www.jasper.ai/",children:"Jasper"}),", ",(0,i.jsx)(t.a,{href:"https://www.hypotenuse.ai/",children:"Hypotenuse AI"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Image"}),": Generate, modify, or enhance images. Tools for artists, designers, and photographers to generate artwork, edit photos, and visualize ideas. Examples: ",(0,i.jsx)(t.a,{href:"https://www.midjourney.com/",children:"Midjourney"}),", ",(0,i.jsx)(t.a,{href:"https://runwayml.com/",children:"Runway ML"}),", ",(0,i.jsx)(t.a,{href:"https://pebblely.com/",children:"Pebblely"}),", Adobe Photoshop."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Audio"}),": Compose music, generate sound effects, and even mimic specific voices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Code"}),": Assist in software development tasks, including generating code snippets, offering coding suggestions, and even automating parts of the coding process. Examples: ",(0,i.jsx)(t.a,{href:"https://github.com/features/copilot",children:"GitHub Copilot"}),", ",(0,i.jsx)(t.a,{href:"https://about.sourcegraph.com/cody",children:"Sourcegraph Cody"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Chatbot"}),": Create conversational agents powered by generative AI. These chatbots can engage in natural conversations, answer queries, and provide support based on custom data. Examples: ",(0,i.jsx)(t.a,{href:"https://www.mendable.ai/",children:"Mendable"}),", ",(0,i.jsx)(t.a,{href:"https://www.chatbase.co/",children:"Chatbase"}),", ",(0,i.jsx)(t.a,{href:"https://www.glean.com/",children:"Glean"}),", ",(0,i.jsx)(t.a,{href:"https://askmore.ai/",children:"AskMore"}),". AskMore uses AI to conduct your user research so you get more feedback, faster, and in any language; an AI can even do your Assignment 1 milestone for you!"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Design"}),": Design your brand, logo, websites, presentations, and marketing collateral with a prompt. Examples: ",(0,i.jsx)(t.a,{href:"https://www.framer.com/ai",children:"Framer AI"}),", ",(0,i.jsx)(t.a,{href:"https://designs.ai/",children:"Designs.ai"}),", ",(0,i.jsx)(t.a,{href:"https://uizard.io/",children:"Uizard"}),", ",(0,i.jsx)(t.a,{href:"https://tome.app/",children:"Tome"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Video"}),": Manipulate and create video content. These tools can be used for video editing, special effects, and even automated video creation. Examples: ",(0,i.jsx)(t.a,{href:"https://www.synthesia.io/",children:"Synthesia"}),", ",(0,i.jsx)(t.a,{href:"https://lumen5.com/",children:"Lumen5"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Data and Analytics"}),": Analyze and generate datasets for testing and simulation purposes. Query data using natural language. Examples: ",(0,i.jsx)(t.a,{href:"https://defog.ai/",children:"Defog"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Agents"}),": Create virtual agents powered by generative AI. These agents can emulate human interactions and assist with tasks like scheduling, information retrieval, and more. Examples: ",(0,i.jsx)(t.a,{href:"https://www.cognosys.ai/",children:"Cognosys"}),", ",(0,i.jsx)(t.a,{href:"https://spell.so/",children:"Spell"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Gaming"}),": Create dynamic game environments, generate levels, adapt game mechanics based on player behavior, NPCs can engage in personalized conversation with players."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:'While most companies are part of the AI "gold rush", some prefer to follow the saying "during a gold rush, sell shovels". These "shovel" companies build services around LLMs, selling API access to LLMs and platforms to make it easier to build AI products:'}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"APIs"}),": Access to the LLMs hosted on the cloud. Examples: ChatGPT & GPT-3.5 by OpenAI, Claude by Antropic, Command by Cohere."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Toolchains"}),": Simplify common LLM-related operations. Examples: LangSmith by LangChain, Cohere platform, Humanloop."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Vector databases"}),": Stores data in a format that enables semantic information retrieval and long-term memory for LLMs. Examples: Supabase Vector, Pinecone, Weaviate."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Generative AI Landscape",placeholder:"blur",src:l})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://www.antler.co/blog/generative-ai",children:"https://www.antler.co/blog/generative-ai"})]})}),"\n",(0,i.jsx)(t.p,{children:"Other lists to find AI products:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.synthesia.io/post/ai-tools",children:"152 Fun AI Tools You've Never Heard Of"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://airtable.com/shrBeWpMlxf3e14E8/tblS4TkbJbm0cqT0o",children:"Antler Gen-AI Landscape"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://theresanaiforthat.com/",children:"There's An AI For That"})}),"\n"]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"For this assignment, you are required to use LLMs to build an AI software\nproduct as LLMs are easy to get started with, and require less server\nresources as compared to other forms of generative AI like image/audio\ngeneration."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-1-product-strategy",children:"Phase 1: Product Strategy"}),"\n",(0,i.jsx)(t.h3,{id:"idea-generation-problem-space",children:"Idea Generation, Problem Space"}),"\n",(0,i.jsx)(t.p,{children:"As an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than ChatGPT, TikTok, Netflix, and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil."}),"\n",(0,i.jsx)(t.p,{children:'Before you jump into developing the specifications of your application, a very important question to ask yourself is, "Does my application solve any problem for the users?". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user\'s life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the advocates that will help you spread the message about your application via word-of-mouth.'}),"\n",(0,i.jsxs)(t.p,{children:["When deciding on the problem space that you want to build for, it is also helpful to consider the ",(0,i.jsx)(t.strong,{children:"market attractiveness"}),'. Is this an attractive market to enter? In order to assess a market\'s attractiveness, you can look into the market size, and its expected growth rate. The market attractiveness of the problem space you intend to tackle can guide you on the expected "impact" that your product can potentially bring.']}),"\n",(0,i.jsxs)(t.p,{children:["Guides on estimating the market size can be found all over the internet, and a useful one we found is ",(0,i.jsx)(t.a,{href:"https://pear.vc/market-sizing-guide/",children:"https://pear.vc/market-sizing-guide/"}),"."]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Compulsory, not graded)",children:(0,i.jsx)(t.p,{children:"Describe the problem that your application solves."})}),"\n",(0,i.jsx)(t.h3,{id:"competitive-landscape",children:"Competitive Landscape"}),"\n",(0,i.jsx)(t.p,{children:"Understanding the competitive landscape provides critical insights into existing market players, their offerings, strengths, and weaknesses. By comprehending competitors' strategies and customer perceptions, you can likely make informed decisions, anticipate challenges, and tailor your approach to effectively capture market share and deliver unique value to their target audience."}),"\n",(0,i.jsx)(t.p,{children:"The AI product ecosystem is very crowded, and new AI companies are emerging everyday. This statement will continue to be accurate for years to come."}),"\n",(0,i.jsxs)(t.p,{children:['While AI has undoubtedly opened doors to a multitude of possibilities, it has also given rise to the phenomenon of "thin wrapper" products. These products often rely heavily on existing AI frameworks and APIs, offering minimal value beyond the underlying technology. In this assignment, you ',(0,i.jsx)(t.strong,{children:"should not"})," create such products as they can be easily cloned, leading to a lack of differentiation and diminished long-term viability."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"AI wrapper meme",placeholder:"blur",src:h})}),"\n",(0,i.jsx)(t.p,{children:"In trying to understand the competitive landscape, you may find it useful to do a competitive analysis. Questions you may find useful include:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:'In the problem space that you are trying to "enter", is the market competitive?'}),"\n",(0,i.jsx)(t.li,{children:"Will you be able to capture meaningful market share?"}),"\n",(0,i.jsx)(t.li,{children:"How much market share does each competitor have?"}),"\n",(0,i.jsx)(t.li,{children:"What are the competitive advantages of your competitors?"}),"\n"]}),"\n",(0,i.jsxs)(u.UW,{children:[(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Good-to-know!"})}),(0,i.jsxs)(t.p,{children:["You may consolidate your findings into a Competitive Profile Weighted Matrix to better gauge your competitors' products (",(0,i.jsx)(t.em,{children:"Not graded"}),")."]}),(0,i.jsxs)(t.p,{children:["The competitive profile matrix is used commonly by strategic management to compare their firm with major players of the industry. In order to do a competitive profile matrix well, you need to identify what are the ",(0,i.jsx)(t.strong,{children:"key success factors"})," that determine your product's success in the market, and use these factors to compare your competition."]}),(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Competitive Profile Matrix",placeholder:"blur",src:c})}),(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://thinkinsights.net/strategy/competitive-profile-matrix/",children:"https://thinkinsights.net/strategy/competitive-profile-matrix/"})]})})]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"List down your 3 closest competitors and their pros and cons. Explain how your\nproduct is better."})}),"\n",(0,i.jsx)(t.h3,{id:"product-capabilities",children:"Product Capabilities"}),"\n",(0,i.jsx)(t.p,{children:"Building a killer application requires more than just technical skills. In CS3216, you are expected to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment."}),"\n",(0,i.jsx)(t.p,{children:"You should choose an application that fully utilizes the potential of the chosen technology. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why using LLMs would best achieve your application's objectives."}),"\n",(0,i.jsxs)(t.p,{children:["In addition to LLMs, it is a requirement that your application has ",(0,i.jsx)(t.strong,{children:"user authentication"}),", and makes use of user authentication meaningfully. From the assignment standpoint, we are looking for products that are more than one-page tools. From a product standpoint, having user authentication should increase your ability to provide personalization features, and forces you to consider the security aspect to protect your users' data. You should also therefore include reasons why having user authentication alongside LLMs can help you achieve your application's objectives."]}),"\n",(0,i.jsx)(t.p,{children:'A common pitfall for engineering-focused students is their bias towards technologically-complex products, failing to consider how the product "serves" the problem in the process. The focus here is for you to consider your product\'s capabilities - does your product have the capabilities to succeed in your chosen problem space?'}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"All teams should first create a post on Coursemology under the Assignment 3 topic containing the proposed product for the teaching team's approval before starting on the project!"})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe your application briefly. List its objectives and the associated\n(major) user stories."})}),"\n",(0,i.jsx)(t.h3,{id:"moat",children:"Moat"}),"\n",(0,i.jsx)(t.p,{children:'In the context of product strategy, a "moat" refers to a sustainable competitive advantage that a product possesses, which helps protect its market share and profitability from competitors. Just like a moat around a medieval castle provides protection and makes it difficult for enemies to breach the walls, a business "moat" creates barriers that deter competitors from easily entering the market or replicating the company\'s success.'}),"\n",(0,i.jsx)(t.p,{children:"A moat can take various forms, including (but not limited to):"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Brand"}),"\n",(0,i.jsx)(t.li,{children:"Technological Innovation"}),"\n",(0,i.jsx)(t.li,{children:"Economies of Scale"}),"\n",(0,i.jsx)(t.li,{children:"Investor Confidence"}),"\n",(0,i.jsx)(t.li,{children:"Ethics and Responsible AI"}),"\n",(0,i.jsx)(t.li,{children:"Customisation and Personalisation"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For example, one of Google's moat is its advantage of scale. Google Search continues to dominate the search engine market."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Generative AI Landscape",placeholder:"blur",src:d})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/",children:"https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/"})]})}),"\n",(0,i.jsx)(t.p,{children:"One of Apple's moat is its integrated ecosystem of products. Apple's products, from iPhone, Macs, and services like iCloud, are tightly integrated into a single ecosystem, creating a seamless user experience that is difficult for competitors to match. This tight integration also makes it difficult for consumers to switch out of Apple."}),"\n",(0,i.jsx)(t.p,{children:"Disney's intellectual property and content library forms a significant moat. Disney owns the intellectual property of various iconic characters, like Mickey Mouse, to beloved franchises like Star Wars and Marvel. This competitive advantage cannot be easily eroded."}),"\n",(0,i.jsx)(t.p,{children:'Closer to AI products, ChatGPT has multiple "moats", including:'}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"First-mover advantage"}),': Being the first-mover, it has gained a strong "brand recognition" as consumers remember and trust it as the pioneering product - it is challenging for competitors and later entrants to establish the same level of recognition.']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Developer-friendly APIs"}),": OpenAI offers APIs that allow developers to easily integrate ChatGPT into their applications, products, or services. This developer-friendly approach facilitates the use of ChatGPT's capabilities without requiring extensive AI expertise."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Demand scale"}),": The widespread use of ChatGPT and the large volumes of interaction contribute to its data collection and training improvements, enhancing the model's performance over time."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For startups especially in the AI sector, establishing a moat is essential to stand out in a rapidly evolving landscape."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"What's your secret sauce / moat? Elaborate on your strategy to prevent\ncompetitors and big players from cloning your app and its features?"})}),"\n",(0,i.jsx)(t.h2,{id:"phase-2-go-to-market",children:"Phase 2: Go-To-Market"}),"\n",(0,i.jsx)(t.h3,{id:"product-lifecycle--product-market-fit",children:"Product Lifecycle & Product-Market Fit"}),"\n",(0,i.jsxs)(t.p,{children:["The product life cycle, a term commonly used by marketing professionals and management, describes the stages of a product when it is first introduced to the market, up to when the product is sunsetted. In this assignment, your product is positioned in the ",(0,i.jsx)(t.strong,{children:"introduction stage"}),", a period which demands your proactive engagement with prospective users in your target market to persuade them to become your first-time users."]}),"\n",(0,i.jsx)(t.p,{children:"While the primary goal of the introduction stage is not necessarily to achieve an optimal product-market fit, it does lay the foundation for eventually reaching that fit in the growth stage and beyond."}),"\n",(0,i.jsx)(t.p,{children:"During the introduction stage, the focus is more on creating awareness, generating interest, and attracting early adopters. The product may not have achieved its perfect fit with the market at this point, but it is a crucial period for collecting feedback, understanding user preferences, and making initial adjustments to move closer to that ideal fit."}),"\n",(0,i.jsxs)(t.p,{children:["Therefore, a ",(0,i.jsx)(t.strong,{children:"user acquisition plan"})," should allow you to reach out to more users in your target market segment."]}),"\n",(0,i.jsx)(t.p,{children:"Your user acquisition plan might also influence the features that you include in your application. For example, you could think of ways to provide motivation for users to share your application with their friends; you could design features such that while individual users may derive some value using your application, it is also in their interest to promote your application (e.g. rewarding users for referrals)."}),"\n",(0,i.jsx)(t.p,{children:"Illuminate the strategies, channels, and tactics you intend to employ to captivate and convert potential users into loyal patrons. As you delve into this milestone, articulate how your understanding of your target users informs your approach and elucidate the measures you will implement to foster a compelling product-market fit."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Note:"}),' You should approach this milestone by describing your strategy or plan on how you intend to "bring" this product to market, utilizing all resources you have.']}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe your target users. Explain how you plan to acquire your target users."})}),"\n",(0,i.jsx)(t.h3,{id:"scoping",children:"Scoping"}),"\n",(0,i.jsx)(t.p,{children:"With the key problem and target users at the forefront of your mind, it is timely to discuss what features should go into the product submitted for Assignment 3."}),"\n",(0,i.jsx)(t.p,{children:"You would realize that time-to-submission is extremely limited. Just as real companies must navigate the constraints of deadlines and customer expectations, you will be required to optimize the use of your time in Assignment 3 to deliver a simple, lovable and complete Minimum Viable Product (MVP)."}),"\n",(0,i.jsxs)(t.p,{children:["In this pursuit, the art of ",(0,i.jsx)(t.strong,{children:"scoping"})," takes center stage."]}),"\n",(0,i.jsx)(t.p,{children:"Scoping is the process of carefully selecting specific features to be included. In scoping and selecting features, justification is important: this requires a keen understanding of user needs, potential impact, and the overarching project goals. In this process, some questions you may find useful include:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"User Experience:"})," How does each proposed feature address a specific user pain point or problem? What value does it bring to the user experience or overall product? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Resource:"})," What are the resource implications (time, effort, cost) of including each feature? Are there technical limitations or dependencies that need to be considered? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"User Impact:"})," How many users will benefit from each feature? Is the feature essential for a significant portion of the user base, or is it a niche requirement? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Competitive Advantage:"})," Will the inclusion of a particular feature give the product a competitive edge in the market? How does it compare to what similar products are offering? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Given that you are introducing a new product, the ",(0,i.jsx)(t.strong,{children:"initial scope"}),' is extremely important. By having a first set of features, you can develop the MVP, release it to users, gather feedback, and thereafter iteratively refine the product. This process aligns seamlessly with the agile methodology, where "agility" empowers teams to respond swiftly to changing market dynamics and evolving user preferences.']}),"\n",(0,i.jsx)(t.p,{children:"As you set out to prioritize features for the MVP, it is important to carry out a delicate balancing act with time. The features chosen must align harmoniously with your MVP, so that the core functionalities are addressed comprehensively. Yet, you must simultaneously stay keenly aware of time constraints."}),"\n",(0,i.jsx)(t.p,{children:"Therefore, a key part of scoping also includes planning and estimation. You can use this assignment as a chance to grow in your ability to dissect a project into actionable tasks, foresee potential challenges, allocate resources judiciously, and estimate timeframes. These skills enable project managers, product leaders, and engineers to craft realistic timelines, allocate resources optimally, and identify potential bottlenecks before they impede progress."}),"\n",(0,i.jsx)(t.p,{children:"You can consider dividing the 3-4 weeks into sprints, and use one sprint to better estimate the workload required for the next. That said, since this is a short project, strictly adhering to the sprints may impede your success. It is up to you to decide what works best for your MVP."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"List down the features that should go into the MVP (your assignment\ndeliverable). How did you decide on them? What are future features and\nexpansions you can think of?"})}),"\n",(0,i.jsx)(t.h3,{id:"business-model",children:"Business Model"}),"\n",(0,i.jsx)(t.p,{children:'In any problem, a real consideration is whether the investment in the product will be "successful". Few things impact the "success" of your product as much as pricing.'}),"\n",(0,i.jsx)(t.p,{children:'The determinant of "success" differs as the product enters different stages of growth. Most of the time, we want to maximize the profits of a product. However, there are times when a company would want to instead maximize market share, or number of users.'}),"\n",(0,i.jsx)(t.p,{children:'Depending on your goals, your pricing strategy to achieve "success" differs.'}),"\n",(0,i.jsx)(t.p,{children:"Generally, there are three ways to price:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Pricing based on costs","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much does it cost to produce and maintain your product?"}),"\n",(0,i.jsx)(t.li,{children:"What is the profit margin that you are aiming to achieve?"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["Pricing based on value","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"What benefits does this product provide to its users?"}),"\n",(0,i.jsx)(t.li,{children:'How much "value" does this provide to users?'}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["Pricing based on competition","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much do competitors price their products for?"}),"\n",(0,i.jsx)(t.li,{children:"How does your product compare?"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Coming up with a monetisation strategy is useful from the get-go. It allows you to evaluate what is the most suitable price for which stage of product you are at. For example, a consideration for a product in the early stage is market share, and also how long would it take to break even."}),"\n",(0,i.jsx)(t.p,{children:"In the digital product market today, there are multitude of ways to price. Here are some blog articles we felt were useful to helping you ideate on your pricing strategy:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.cobloom.com/blog/saas-pricing-models",children:"The Ultimate Guide To Saas Pricing Models, Strategies & Psychological Hacks"})," considers seven of the most common way digital SaaS products are priced today."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.antler.co/blog/generative-ai",children:"Mapping the Generative AI landscape"}),'\'s section on "Looking into the future—Gen-AI revenue models".']}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Note:"}),' It is possible that the currency of "success" may not always be the dollar. You are not restricted to build a product that has the dollar as its currency of success. If not the dollar, what are some other metrics you can use to consider? E.g. If you build a social chat bot, then a key metric to determine success could be the volume of messages.']}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Come up with a monetization and pricing strategy (e.g. tiers and features).\nExplain why you think this pricing strategy is suitable for your target users\nand problem space. Explain the factors that influenced your pricing decisions,\nsuch as production costs, perceived value, competition, etc. It would be\nuseful here to consider possible revenue streams of your product."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-3-artificial-intelligence-integration",children:"Phase 3: Artificial Intelligence Integration"}),"\n",(0,i.jsx)(t.h3,{id:"introduction-to-large-language-models",children:"Introduction to Large Language Models"}),"\n",(0,i.jsx)(t.p,{children:"LLMs are a type of artificial intelligence technology designed to understand and generate human-like text based on the input they receive (a prompt). These models are built using deep learning techniques, particularly a type of neural network architecture called transformers."}),"\n",(0,i.jsx)(t.p,{children:"Transformers are a class of deep learning models that have revolutionized natural language processing (NLP) tasks. They excel at handling sequential data, such as text, and have become the foundation for many state-of-the-art language models. One of the most well-known and influential transformer architectures is the Generative Pre-trained Transformer (GPT), developed by OpenAI."}),"\n",(0,i.jsx)(t.p,{children:"LLMs like GPT-3 (the third iteration of the GPT series) have billions of parameters, which are tunable components that the model learns from massive amounts of text data. These parameters allow the model to capture complex patterns and relationships within language, enabling it to perform a wide range of language-related tasks, such as:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text generation"}),": LLMs can generate coherent and contextually relevant text based on a given prompt or seed text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Language translation"}),": They can translate text from one language to another."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Summarization"}),": LLMs can produce concise summaries of longer pieces of text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Question answering"}),": They can answer questions by extracting relevant information from a given text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text classification"}),": LLMs can classify text into predefined categories or labels."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Sentiment analysis"}),": They can determine the emotional tone or sentiment expressed in a piece of text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Chatbots and conversational agents"}),": LLMs can simulate human-like conversations and provide interactive responses."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Code generation"}),": They can generate code snippets based on high-level descriptions."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The training process for these models involves exposing them to vast amounts of text data and having them predict the next word or token in a sequence. This process enables the models to learn grammar, syntax, semantics, and even some aspects of world knowledge from the data."}),"\n",(0,i.jsx)(t.p,{children:"LLMs are revolutionary as compared to traditional machine learning techniques because they can/are:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Perform more diverse and complex tasks"}),": Traditional machine learning models are typically limited to performing simple tasks, such as classification or regression. LLMs, on the other hand, can perform more complex tasks, such as text generation, translation, question answering, all through a single and flexible natural language prompt."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Readily available and accessible"}),": Many LLMs are made available through APIs, making their capabilities accessible to a broader range of developers without requiring much experience / deep expertise in machine learning. These diverse capabilities can be accessed through natural language, no learning of new syntax or documentation needed."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Trained on a vast scale of data"}),": Traditional machine learning models are typically trained on a small dataset of labeled data. This can be limiting, as it may not be representative of the real world. LLMs, on the other hand, can be trained on a massive dataset of unlabeled data. This allows them to learn the statistical relationships between words and phrases without being explicitly told what they are."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Few-shot and zero-shot learning"}),": LLMs can perform new tasks with minimal examples or even zero examples by leveraging their pre-trained knowledge and generalizing to new tasks or categories without the need for extensive task-specific training data. This capability is particularly valuable in scenarios where acquiring labeled training data is expensive, time-consuming, or impractical, whereas traditional machine learning often requires a substantial amount of labeled data for each task."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Understanding language"}),": LLMs can understand nuances in languages, including idioms, metaphors, and cultural references, which is a challenging task for traditional models."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Resources:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.databricks.com/sites/default/files/2023-06/compact-guide-to-large-language-models.pdf",children:"A Compact Guide to Large Language Models"})," by Databricks."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sausheong.com/how-chatgpt-works-af2064fc1ec4?sk=83c978daecff2adf332611b9fbafbd20",children:"How ChatGPT works"})," by Sau Sheong Chang, a Singaporean tech industry veteran and leader. This article looks under the hood to understand the basic concepts behind ChatGPT. He has kindly provided CS3216 students with free access to this article."]}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Explain how you are using LLMs in your product and why LLMs are a good\napproach to meet the product's objectives."})}),"\n",(0,i.jsx)(t.h3,{id:"prompt-engineeringdesign",children:"Prompt Engineering/Design"}),"\n",(0,i.jsx)(t.p,{children:"A prompt is a specific input or instruction given to a language model to guide its behavior and generate desired output. In the context of LLMs, such as GPT-3, a prompt serves as the initial text or question that you provide to the model to elicit a response or generate text based on that input."}),"\n",(0,i.jsx)(t.p,{children:"Prompts can take various forms depending on the task you want the LLM to perform. They can be as short as a single sentence or as long as a paragraph. The key is to provide clear and contextually relevant instructions that guide the model toward producing the desired output."}),"\n",(0,i.jsx)(t.p,{children:"As prompts are the main interface between users and the LLMs, the importance of writing a good prompt cannot be overstated. The choice of words, phrasing, and clarity of the instruction can significantly influence the quality and relevance of the generated output."}),"\n",(0,i.jsx)(t.h4,{id:"elements-of-a-prompt",children:"Elements of a Prompt"}),"\n",(0,i.jsx)(t.p,{children:"A prompt typically includes several elements that help guide the response or output generated by the LLM. Here are some common elements of a prompt:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Topic/subject"}),': The topic or theme of the prompt provides a broad area of focus for the response. For example, a prompt might ask a language model to generate text about a specific topic like "climate change" or "artificial intelligence."']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Task/goal/purpose"}),": The task or goal of the prompt specifies what kind of response is desired. Is it to persuade, inform, entertain or something else? For example, a prompt might ask a language model to generate a persuasive essay on a particular topic or to write a short story that meets certain criteria."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Target audience / perspective"}),': The target audience of the prompt identifies the intended audience for the response. For example, a prompt might ask a language model to generate text that is suitable for a general audience or for a specific age group. For example, "Respond as if you are a teacher providing advice to a student."']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Tone/style"}),": The tone or style of the prompt can influence the tone or style of the response. For example, a prompt might ask a language model to generate text that is formal, informal, humorous, or serious."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Context / background information:"})," Providing relevant background information helps set the stage for an informed response."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Length/format"}),": The length or word count of the prompt can specify the amount of content that is expected in the response. For example, a prompt might ask a language model to generate a response that is between 500 and 1000 words."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Specific instructions/guidelines"}),': The prompt may include specific instructions or guidelines that must be followed in the response. For example, a prompt might ask a language model to generate text that includes specific keywords or phrases, or that adheres to a particular format or structure. For example, "List 3 reasons why..."']}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"By including these elements, a prompt can help guide the response generated by a language model or AI system, while also providing a degree of flexibility and creativity in the output. The most effective prompts will combine several of these elements to provide enough direction without overly restricting the response. Vague or overly broad prompts can lead to unfocused and inconsistent responses."}),"\n",(0,i.jsx)(t.p,{children:"Prompt engineering is a broad topic and cannot be covered sufficiently within an assignment writeup. Here are some recommended resources for learning more about prompt engineering:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-openai-api",children:"Best practices for prompt engineering with OpenAI API"})," by OpenAI. One-pager that goes straight to the point, with examples."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/gpt-best-practices",children:"GPT best practices"})," by OpenAI. A longer list of techniques and best practices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/",children:"ChatGPT Prompt Engineering for Developers"})," by DeepLearning.AI. This video-based course takes around an hour to complete and Yangshun has written a summary of the important points: ",(0,i.jsx)(t.a,{href:"https://www.linkedin.com/feed/update/urn:li:share:7060809050602569728/",children:"Part 1"})," & ",(0,i.jsx)(t.a,{href:"https://www.linkedin.com/feed/update/urn:li:activity:7060818037679017985/",children:"Part 2"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.promptingguide.ai/",children:"Prompt Engineering Guide"})," by DAIR.AI. Well-rounded useful guide that covers Prompt Engineering and various topics related to LLMs."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/brexhq/prompt-engineering",children:"Prompt Engineering Guide"})," by Brex. Tips and tricks for working with LLMs like OpenAI's GPT-4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/prompt-engineering",children:"Prompt Engineering"})," by Cohere."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Prompt engineering is just one of the concepts relevant to using LLMs effectively. Some other important concepts include:"}),"\n",(0,i.jsx)(t.h4,{id:"tokenization",children:"Tokenization"}),"\n",(0,i.jsx)(t.p,{children:"Tokens in the context of LLMs refer to the individual elements or units of language that the model processes and generates. These tokens can be subwords, words, or characters, and they are the basic building blocks of the language that the model understands and generates."}),"\n",(0,i.jsx)(t.p,{children:"For example, in a language model that uses subwords as tokens, each subword would correspond to a specific part of a word, such as a prefix, suffix, or root. The model would then use these subwords to generate words and sentences by combining them in different ways."}),"\n",(0,i.jsx)(t.p,{children:"In contrast, a language model that uses words as tokens would process and generate complete words, rather than subwords. And a model that uses characters as tokens would work with individual characters, such as letters or digits, to generate text."}),"\n",(0,i.jsx)(t.p,{children:"The choice of token granularity can affect the performance of the language model, as well as the type of tasks it can be used for. For example, a model that uses subwords as tokens may be better at generating words and sentences that contain prefixes and suffixes, while a model that uses words as tokens may be better at generating complete sentences and paragraphs."}),"\n",(0,i.jsx)(t.p,{children:"It's worth noting that the tokenization of language can be a complex process, and different models may use different tokenization strategies depending on the specific task and the type of language they are processing."}),"\n",(0,i.jsx)(t.p,{children:"Both input and output tokens make up the total number of tokens in an API call, which affects:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much the API costs, as LLM providers usually charge per token."}),"\n",(0,i.jsx)(t.li,{children:"How long the API call takes, as more time is needed if there are more input tokens to process and output tokens to generate."}),"\n",(0,i.jsxs)(t.li,{children:["The functionality of the API call, since the total tokens must remain within the model's maximum threshold (e.g. 4096 tokens for ",(0,i.jsx)(t.code,{children:"gpt-3.5-turbo"}),")."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Further reading on tokens:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/gpt/managing-tokens",children:"GPT - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/tokens",children:"Tokens | Cohere"})}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"fine-tuning",children:"Fine-tuning"}),"\n",(0,i.jsx)(t.p,{children:'One of the techniques to improve prompt design is called "few-shot prompting", which is to provide examples within the prompt. With fine-tuning, examples (training data) can be provided to a model outside of the prompts and the model is being "fine-tuned". Prompts to a fine-tuned model will make use of the training data when generating output. These fine-tuned modules result in:'}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Better results than prompt design."}),"\n",(0,i.jsx)(t.li,{children:"Ability to train on more examples than can fit in a prompt."}),"\n",(0,i.jsx)(t.li,{children:"Token savings due to shorter prompts."}),"\n",(0,i.jsx)(t.li,{children:"Lower latency requests as there are fewer tokens to process."}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Fine-tuning is an improvement over few-shot learning as many more examples can be provided and don't count towards prompt tokens. Once a model has been fine-tuned, you won't need to provide as many examples in the prompt. This results in faster and cheaper requests."}),"\n",(0,i.jsx)(t.p,{children:"In general, fine-tuning involves the following steps:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Prepare and upload training data."}),"\n",(0,i.jsx)(t.li,{children:"Train a new fine-tuned model."}),"\n",(0,i.jsx)(t.li,{children:"Use your fine-tuned model."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Fine-tuning is specific to models and not every LLM API offers the functionality. As of Aug 2023, OpenAI allows fine-tuning for ",(0,i.jsx)(t.code,{children:"gpt-3.5-turbo"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Further reading on fine-tuning:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/fine-tuning",children:"Fine-tuning - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://boldercloud.com.au/gpt-3-5-fine-tuning-unlock-the-true-potential-with-this-comprehensive-guide/",children:"GPT-3.5 Fine Tuning: Unlock the True Potential with This Comprehensive Guide"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hackernoon.com/the-challenges-costs-and-considerations-of-building-or-fine-tuning-an-llm",children:"The Challenges, Costs, and Considerations of Building or Fine-Tuning an LLM"})}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Give two to three examples of prompts you used and explain how you designed\nthem to be effective. What techniques did you use to improve the effectiveness\nof your prompts?"})}),"\n",(0,i.jsx)(t.h3,{id:"using-the-right-model-for-the-job",children:"Using the Right Model for the Job"}),"\n",(0,i.jsx)(t.p,{children:"Not all models are built equally. Each model has its own advantages, limitations, and customization parameters. The key is to find the most suitable model for your application."}),"\n",(0,i.jsx)(t.h4,{id:"popular-llms-and-providers",children:"Popular LLMs and Providers"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/overview",children:"OpenAI"})}),": OpenAI is one of the pioneers in the field of LLMs and needs no further introduction. They have released a number of LLMs, including GPT-3 and GPT-4. OpenAI's LLMs are known for their large size and their ability to generate realistic and creative text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://cohere.com/models/command",children:"Command"})," by ",(0,i.jsx)(t.a,{href:"https://cohere.com/",children:"Cohere"})]}),": Cohere develops an LLM called Command and their platform offers a huge range of services that can be viewed as a batteries-included version of OpenAI API."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://ai.meta.com/llama/",children:"Llama 2"})," by ",(0,i.jsx)(t.a,{href:"https://ai.meta.com/",children:"Meta AI"})]}),": Open source LLM by Meta that's free to use. There's no official hosted API available so if you want to use it you will need to host it yourself. Check out ",(0,i.jsx)(t.a,{href:"https://webllm.mlc.ai/",children:"Web LLM"})," for a version that runs in the browser."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://huggingface.co/",children:"Hugging Face"})}),": Hugging Face is a community-driven platform for LLMs. They provide a number of tools and resources for developers who want to use LLMs. Hugging Face's LLMs are known for their diversity and their availability."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://bard.google.com/",children:"Bard"})," by ",(0,i.jsx)(t.a,{href:"https://ai.google/",children:"Google AI"})]}),": While ChatGPT's data is only up till September 2021 (using GPT-3.5), Bard which is a chatbot by Google uses PaLM 2 and is based on real-time current events pulled from Google Search. However, Bard API access is still in beta and ",(0,i.jsx)(t.a,{href:"https://www.cloudbooklet.com/googles-bard-api-key/",children:"requires a Google Cloud project"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://claude.ai/",children:"Claude"})," by ",(0,i.jsx)(t.a,{href:"https://www.anthropic.com/",children:"Anthropic"})]}),": Claude is an LLM developed by Anthropic, a company that is focused on developing safe and beneficial artificial intelligence. As of Aug 2023, the API is not yet generally available."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://sdk.vercel.ai/",children:"Vercel AI Playground"})," allows you to compare output of different models by the various providers using the same prompt. Super handy!"]}),"\n",(0,i.jsx)(t.p,{children:"When choosing LLMs and providers, it is important to consider your specific needs and requirements. Some factors to consider include the type and size of the training data, the type of applications you want to build, context window size (maximum tokens allowed), and the price per token."}),"\n",(0,i.jsxs)(t.p,{children:["Certain LLMs are more suited for certain tasks from specific domains. If your app is dealing with code like GitHub Co-pilot, you may find that ",(0,i.jsx)(t.a,{href:"https://ai.meta.com/blog/code-llama-large-language-model-coding/",children:"Code Llama"})," and ",(0,i.jsx)(t.a,{href:"https://huggingface.co/WizardLM/WizardCoder-Python-34B-V1.0",children:"WizardCoder"})," is more suited for the job. If you require real time data/knowledge for your output, GPT-3.5 might not be the best choice because the data is not updated since September 2021. It's important to select the model that is the most suitable for your product!"]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"Chances are, the LLM API you're using isn't free. However, the costs should be quite low for an assignment's usage volume. If you're facing difficulties gaining access to the APIs, please email the teaching staff."})}),"\n",(0,i.jsx)(t.h4,{id:"model-settings",children:"Model Settings"}),"\n",(0,i.jsx)(t.p,{children:"Beyond prompt design, most LLM models also provide the following settings to allow for more control over the output:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Max tokens"}),": The maximum number of tokens to generate."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Temperature"}),": Temperature is a hyperparameter in language models that controls the creativity and diversity of the generated text. A high temperature means that the model is less confident in its predictions, and will therefore generate text that is more creative and diverse, but may also be less accurate and random. A low temperature means that the model is more confident in its predictions, and will therefore generate text that is more accurate and consistent. The best temperature setting will depend on the specific application. For example, if you are using a language model to generate text for a news article, you would want to use a low temperature to ensure that the output is factually accurate and grammatically correct. However, if you are using a language model to generate creative text, such as poetry or fiction, you might want to use a higher temperature to allow for more creativity and diversity."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Top-P"}),": Top-P limits the probability mass that is considered when sampling. For example, if you set Top-P to 0.75, then the model will only consider tokens whose probability is at least 75%. This can help to reduce the randomness of the output and make it more likely that the model will generate text that is relevant to the prompt. It is recommended to customize either temperature or Top-P, not both."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Frequency/presence penalties"}),": Coefficients that penalize tokens based on how much / whether they exist in the text to reduce the likelihood that they show up again."]}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Justify your choice of LLM and provider by comparing it against at least two\nalternatives. Explain why the one you have chosen best fulfills your needs.\nElaborate on your choice of model parameters."})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Evaluating effectiveness"})}),"\n",(0,i.jsx)(t.p,{children:"Once the LLM integrations are up and running, you may want to set up an evaluation pipeline to sanity check whether your fine-tuning or prompt engineering efforts are working across multiple test examples. There are two broad classes of Natural Language Generation Metrics:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"N-gram-based"})," metrics measure word or token overlap against the reference. E.g., BLEU, METEOR."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Model-based"})," metrics use a neural model to measure similarity against the reference. E.g., BLEURT, BERTScore."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"N-gram-based metrics are more appropriate when you expect precise wording, and model-based typically allows for more open-ended generation. Different metrics tell us about different aspects of natural language generation and there's typically no single correct evaluation metric. However, there are metrics traditionally associated with NLP tasks. E.g., BLEU for Translation and ROUGE for Summarisation. It's safe enough to use the default metric for your specific task as there should be available implementations in your preferred language. Note that it's possible to have multiple correct references for a single test sentence."}),"\n",(0,i.jsx)(t.p,{children:"Further Reading:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1224/slides/cs224n-2022-lecture12-generation-final.pdf",children:"Neural Language Generation"}),", Chris Manning, Stanford: Slides 51 to 65"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2106.03706",children:"A Comprehensive Assessment of Dialog Evaluation Metrics"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2211.09110",children:"Holistic Evaluation of Language Models"}),", Percy Liang et al. (2023), Stanford NLP Group"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2308.10792",children:"Instruction Tuning for Large Language Models: A Survey"})}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"other-resources",children:"Other Resources"}),"\n",(0,i.jsx)(t.h4,{id:"courses-and-tutorials",children:"Courses and Tutorials"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://deeplearning.ai/",children:"DeepLearning.AI"})," by Andrew Ng provides a ",(0,i.jsx)(t.a,{href:"https://www.deeplearning.ai/short-courses/",children:"series of short practical-focused courses on generative AI"})," if you prefer video lesson style learning that includes some hands-on exercises using Jupyter Notebook."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sausheong.com/creating-a-private-qa-application-over-local-documents-b7710e067e7f?sk=0d1b19eccc5fb37af89f5d4c3001c3bc",children:"Creating a private QA over local documents application using Llama-2"})," by Sau Sheong Chang: How to create a private QA application that runs on your laptop for your answering questions over your documents."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"tools",children:"Tools"}),"\n",(0,i.jsx)(t.p,{children:"Using LLMs comes with some inconveniences such as unstructured output, preserving context and memory across completions, and a huge amount of boilerplate code. Here are some tools that can help during development with LLMs:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.langchain.com/",children:"LangChain"}),": LangChain is a powerful tool that can be used to build a wide variety of applications that use LLMs. It has abstractions to achieve common LLM operations quickly such as loading/transforming/storing data, sequential operations on data, remembering previous interactions, and acting on LLM output."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sdk.vercel.ai/docs",children:"Vercel AI SDK"}),": An open source library designed to help developers build AI-powered user interfaces in JavaScript and TypeScript. It makes building streaming-based AI chat user interfaces effortless."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://microsoft.github.io/TypeChat/",children:"TypeChat"}),": TypeChat helps get well-typed and structured responses from LLMs without the need to parse the output yourself."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://webllm.mlc.ai/",children:"Web LLM"}),": This project brings large-language model and LLM-based chatbot to web browsers, which makes using LLMs free! However, there might be certain technical requirements for devices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/jerryjliu/llama_index",children:"LlamaIndex"}),': A "data framework" to help you build LLM apps by providing data connectors to ingest existing data sources and formats (APIs, PDFs, docs, SQL), retrieval/query interfaces over your data, and more.']}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The following platforms improve the experience of using LLMs in production. They might be overkill for your assignment/projects but mentioned here for your consideration:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.langchain.com/langsmith",children:"LangSmith"}),": By the creators of LangChain, LangSmith helps you visualize, debug, and improve your LLM apps."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://humanloop.com/",children:"Humanloop"}),": A platform that empowers teams to build reliable and performant AI systems by providing monitoring, A/B testing, a collaborative prompt workspace, private data storage, and fine-tuning."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"open-source-llms",children:"Open Source LLMs"}),"\n",(0,i.jsxs)(t.p,{children:["Platforms like ",(0,i.jsx)(t.a,{href:"https://huggingface.co/",children:"Hugging Face"})," offer support for popular open source language models born out of community efforts to recreate existing proprietary LLMs provided by miscellaneous companies via APIs or software. These open source LLMs are easily ",(0,i.jsx)(t.a,{href:"#fine-tuning",children:"fine-tunable"})," and lightweight. While not as powerful as commercially available LLMs, they offer a free, discounted, yet surprisingly expressive experience in terms of text generation and reasoning capabilities. Here are a few popular models and associated guides to fine-tune them:"]}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{align:"left",children:(0,i.jsx)(t.strong,{children:"Model"})}),(0,i.jsx)(t.th,{align:"left",children:(0,i.jsx)(t.strong,{children:"Resources"})})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Llama 2"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/facebookresearch/llama",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://towardsdatascience.com/fine-tune-your-own-llama-2-model-in-a-colab-notebook-df9823a04a32",children:"Fine-tuning guide"}),", ",(0,i.jsx)(t.a,{href:"https://scontent-xsp1-1.xx.fbcdn.net/v/t39.2365-6/10000000_662098952474184_2584067087619170692_n.pdf?_nc_cat=105&ccb=1-7&_nc_sid=3c67a6&_nc_ohc=bGkSwJy8Xa4AX9SX9XW&_nc_ht=scontent-xsp1-1.xx&oh=00_AfC2wTMNDOi-1j5BHP7STSfurMRMQQANleVSDe7vcMVBOQ&oe=64FDAEFF",children:"Paper"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Vicuna-13B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/lm-sys/FastChat",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://docs.ray.io/en/master/train/examples/lightning/vicuna_13b_lightning_deepspeed_fine-tune.html",children:"Fine-tuning guide"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Alpaca"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/tloen/alpaca-lora/tree/main",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://www.mlexpert.io/machine-learning/tutorials/alpaca-fine-tuning",children:"Fine-tuning guide"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"MPT-7B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/mosaicml/llm-foundry",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://www.youtube.com/watch?v=3de0Utr9XnI",children:"Fine-tuning guide"}),", ",(0,i.jsx)(t.a,{href:"https://huggingface.co/mosaicml/mpt-7b",children:"Documentation"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"GPT-J-6B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/kingoflolz/mesh-transformer-jax#gpt-j-6b",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://huggingface.co/docs/transformers/model_doc/gptj",children:"Fine-tuning guide 1"}),", ",(0,i.jsx)(t.a,{href:"https://betterprogramming.pub/fine-tuning-gpt-j-6b-on-google-colab-or-equivalent-desktop-or-server-gpu-b6dc849cb205",children:"Fine-tuning guide 2"})]})]})]})]}),"\n",(0,i.jsxs)(t.p,{children:["It is recommended that users interested in fine-tuning such models have access high performance compute clusters with available GPUs (suggestions: NVIDIA RTX 3090, NVIDIA RTX4090, NVIDIA H100 Tensor Core, etc). Alternatively, you can look into online cloud compute platforms like ",(0,i.jsx)(t.a,{href:"https://lambdalabs.com/",children:"Lambda Labs"}),", ",(0,i.jsx)(t.a,{href:"https://www.paperspace.com/",children:"Paperspace"}),", or ",(0,i.jsx)(t.a,{href:"https://colab.research.google.com/signup",children:"Google Colab Pro/Pro+"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["You can also apply for free cloud credits through Google Cloud Platform's ",(0,i.jsx)(t.a,{href:"https://cloud.google.com/edu/researchers",children:"Research and Education program"})," (however, no guarantees of definitely getting it since it's application-based, but try your luck!)."]}),"\n",(0,i.jsx)(t.h2,{id:"phase-4-design",children:"Phase 4: Design"}),"\n",(0,i.jsx)(t.p,{children:"Design here refers to many things: branding, technology/engineering, and the product."}),"\n",(0,i.jsx)(t.h3,{id:"branding-your-product",children:"Branding your Product"}),"\n",(0,i.jsx)(t.p,{children:"Every product has a name. This name is how people find, refer, and remember the product. Most products have logos. This logo is how people recognize and associate relationships with the product. Names, logos, color schemes, fonts, etc. of a product or company collectively form a persona to which people can relate and associate. This persona is exactly a brand."}),"\n",(0,i.jsx)(t.p,{children:"A brand encompasses the essence of a company: its values, promises, and the emotional connection it establishes with its audience. With the vast number of companies and products in today's competitive business landscape, these sentiments are almost always never accidental, rather carefully crafted and tested over hundreds of iterations."}),"\n",(0,i.jsx)(t.p,{children:"Think McDonald's golden arches. It transcends language barriers and cultural differences. They embody the company's promise of consistency, quick service, and affordability. When people see those golden arches, they immediately associate them with familiar tastes, convenience, and an entire spectrum of shared experiences. You yourself would probably remember memories of your first date, gathering with friends, or late night supper when crunching due assignments. In this aspect, McDonald's golden arches are more than just a logo; they capture feelings, stories, and memories."}),"\n",(0,i.jsxs)(t.p,{children:["Some brands even become linguistic cues. When you want to find out about something, you'd ",(0,i.jsx)(t.em,{children:"google"})," it. If you missed the bus and train, you'd ",(0,i.jsx)(t.em,{children:"grab"})," to the office. If you want to express your frustration with Ruby on Rails or Angular, you'd ",(0,i.jsx)(t.em,{children:"tweet"})," about it. Oh, look; this place is so picturesque, it's ",(0,i.jsx)(t.em,{children:"instagrammable"}),'! And the example goes even deeper with cultural contexts. In Indonesia, people colloquially refer to laundry detergents as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Rinso",children:"rinso"}),'" rather than the dictionary translation ',(0,i.jsx)(t.em,{children:"deterjen pakaian"}),', or baby diapers as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Pampers",children:"pampers"}),'" rather than ',(0,i.jsx)(t.em,{children:"popok bayi"}),'. In Singapore, people colloquially refer to instant noodles as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Maggi",children:"maggi"}),' mee", or recently, video conferencing as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Zoom_Video_Communications",children:"zoom"}),' calls". The list goes on: ',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Hook-and-loop_fastener",children:"velcros"})," (hook-and-loop fasteners), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Aspirin",children:"aspirin"})," (acetylsalicylic acid), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Xerox",children:"xerox"}),"ing (photocopying), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Scotch_Tape",children:"scotch tapes"})," (adhesive tapes), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Post-it_Note",children:"post-it notes"})," (sticky notes), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Band-Aid",children:"band-aids"})," (bandages), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Q-Tip",children:"q-tips"})," (cotton buds), etc. Notably, the brands that form these verbs or nouns are often recognized as the standard of their respective product categories. This is the power of a good brand. They not only evoke feelings and trust, but also bring revenues."]}),"\n",(0,i.jsx)(t.p,{children:"These reasons are why it is important to build a good brand. Even choosing names is often tedious. Think about:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Length of the name"}),". Will it be too hard to remember?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Reproducibility of the name by spelling"}),'. If A were to hear B say "I use Whatchamacallit to build this website," would A be able to type it and find it on search engines?']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Domain name availability"}),". Some may even get clever with ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Domain_hack",children:"domain hacks"}),", e.g., ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Delicious_(website)",children:"del.icio.us"}),", but can it be easily shared verbally?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Social handles availability"}),". Is @mynextstartup available on major social media sites, e.g., Instagram, X, Threads, TikTok, etc.? If you're not quick to claim the handle, adversaries may claim it first, and you might have to either buy it from them, or file a dispute."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Similarities with other brands"}),". Could people think your product Zwitter is just a cheap clone of Twitter?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Cultural references"}),'. Did you know the toothpaste brand Darlie was originally known as Darkie? It was changed in 1989 due to "darky" or "darkie" being considered a racial slur.']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Possibility of being caught in web filters"}),'. In April 1998, "shitakemushrooms.com" was blocked by DNS filters because it contained the word "shit". This is known as the ',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Scunthorpe_problem",children:"Scunthorpe problem"}),'. If you want to see more examples, check out the article "',(0,i.jsx)(t.a,{href:"https://www.boredpanda.com/worst-domain-names/",children:"30 Unintentionally Inappropriate Domain Names"}),'".']}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["These are just a fraction of factors that one should think about when choosing names. Different factors apply when you are choosing logos and color schemes. Think about how they'd look if they are printed on different materials. Do the logos have any resemblance to a potentially derogatory subject, seen from any angles? How easy is it to be reproduced by hand? Can it be a vector (so that it is scalable on different media)? How'd it look if it was black-and-white, or against a busy background? Think about ",(0,i.jsx)(t.a,{href:"https://commons.wikimedia.org/wiki/File:Apple_first_logo.png",children:"Apple's first logo"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["It always pays off to build a relatively strong brand identity when you enter the market, because rebrands can be a nightmare. Recently, ",(0,i.jsx)(t.a,{href:"https://www.nytimes.com/2023/07/24/technology/twitter-x-elon-musk.html",children:"Twitter was renamed to X"}),", and the platform is visioned to become a superapp. In 2020, ",(0,i.jsx)(t.a,{href:"https://vercel.com/blog/zeit-is-now-vercel",children:"ZEIT was renamed to Vercel"}),". In 2021, The Facebook Company was renamed to Meta. In every rebrand, companies (usually) pay the price: mockery, money to pay for taken domain names, and customer adaptation. ",(0,i.jsx)(t.a,{href:"https://www.thebrandingjournal.com/2015/05/what-to-learn-from-tropicanas-packaging-redesign-failure/",children:"Tropicana was probably the best known example of a bad redesign"}),". Notably, not all rebrands are terrible. Some may even resurrect a dying business. The challenge comes from the fact that there is an existing identity as a comparison, and transition introduces major friction."]}),"\n",(0,i.jsxs)(t.p,{children:["There are many logo generators out there, but after reading this far, you'd probably realize that a good brand makes for a good logo; it is not standalone, it is an integral part of a brand. To make a good brand identity (name, logo, fonts, color schemes, etc.), you should reflect on the persona that you wish your company or product to convey to your users, then work forwards. Use ",(0,i.jsx)(t.a,{href:"https://www.pinterest.com/",children:"Pinterest"}),", ",(0,i.jsx)(t.a,{href:"https://dribbble.com/",children:"Dribbble"}),", ",(0,i.jsx)(t.a,{href:"https://www.midjourney.com/",children:"Midjourney"}),", ",(0,i.jsx)(t.a,{href:"https://coolors.co/",children:"Coolors"}),", ",(0,i.jsx)(t.a,{href:"https://fonts.google.com/",children:"Google Fonts"}),", or even the many logo generators to brainstorm for inspirations. Then choose a comfortable medium to sketch, e.g., pen and paper, Figma, Microsoft Paint, etc., to stitch everything together. Test your brand identity prototypes with your friends and family, and see if they can guess what app you're building just by seeing your logo."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Notably, a good brand identity requires tons of research and testing. Schools\nof design talk about branding for one whole semester. Due to the density of\nthis assignment, you are expected to build a decent enough brand identity,\ni.e., with proper considerations. You shouldn't dwell too long on this\nmilestone. It is maybe even best to first build your MVP with a codename, only\nafter then collaboratively think about the best logo to slap on your app. If\nyou did well enough, you may even earn brownie points for coolness!"})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Come up with a product name and create an attractive logo. Explain the meaning\nbehind the name, the alternatives you've considered, and why this was chosen."})}),"\n",(0,i.jsx)(t.h3,{id:"technology-stack",children:"Technology Stack"}),"\n",(0,i.jsxs)(t.p,{children:["A functional software product is backed by a multitude of technologies, each supporting the attainment of the ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Business_logic",children:"business logic"}),". Together, these technologies are collectively described as a technology stack, or tech stack. Notably, your users wouldn't really know about the inner machinations of your software. However, choosing the wrong tech stack could backfire your development in the long run."]}),"\n",(0,i.jsxs)(t.p,{children:['One factor that most people consider is popularity. It\'s hard to keep track of the latest libraries and frameworks because they keep coming. Newer technologies usually get the most attention because they attempt to fix the irks of the current "standard" technologies. For example, ',(0,i.jsx)(t.a,{href:"https://svelte.dev/",children:"Svelte"})," syntax is easier to read than ",(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"}),", ",(0,i.jsx)(t.a,{href:"https://deno.com/",children:"Deno"})," has a better package management system than ",(0,i.jsx)(t.a,{href:"https://nodejs.org/en",children:"Node"}),", or ",(0,i.jsx)(t.a,{href:"https://esbuild.github.io/",children:"esbuild"})," is astronomically faster than ",(0,i.jsx)(t.a,{href:"https://webpack.js.org/",children:"webpack"}),". Notably, the newer the technologies are, the lesser the community support will be compared to the ones that have been around for the longest time. Some may not even be battle-tested enough for all edge use cases. Some gained headlines for a while, then fell short and inevitably forgotten. You can see how Stack Overflow compared how some web technologies stood up to their hype in their ",(0,i.jsx)(t.a,{href:"https://survey.stackoverflow.co/2023/#technology-admired-and-desired",children:"2023 survey here"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"While it may be tempting to live on the edge and try exciting new technologies, one should be prudent with their choice. Consider the following:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Your team's familiarity with the technologies."}),"\n",(0,i.jsx)(t.li,{children:"How the technologies scale with your users and (potentially increasing) business logic."}),"\n",(0,i.jsx)(t.li,{children:"The maturity of the ecosystem around the technologies; can you find help if you face a mysterious bug?"}),"\n",(0,i.jsx)(t.li,{children:"The credentials of the backers of the technologies; will the maintainer abandon this framework in near future?"}),"\n",(0,i.jsx)(t.li,{children:"Your reliance on the technology; if you decide to pivot in the future, how easy or difficult will it be? Choosing a tech stack is no different than choosing the right vendor for outsourcing a tender in your company."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Generally, it's better to just choose one with which most team members are familiar, and start building ",(0,i.jsx)(t.strong,{children:"and failing fast"}),". Of course with any advice, exercise your own wisdom. The Browser Company decided to build the Windows version of ",(0,i.jsx)(t.a,{href:"https://arc.net/",children:"Arc Browser"})," by extending the (as at time of writing, rather barebone) Swift compiler for Windows to support ",(0,i.jsx)(t.a,{href:"https://developer.apple.com/xcode/swiftui/",children:"SwiftUI"}),", instead of going with the most obvious choice of ",(0,i.jsx)(t.a,{href:"https://electronjs.org/",children:"Electron"}),". You can watch the CTO ",(0,i.jsx)(t.a,{href:"https://www.youtube.com/watch?v=Xa_fNuaSE_I",children:"talk about it here"}),", and see why they chose to challenge the status quo ",(0,i.jsx)(t.em,{children:"for their use case"}),"."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsxs)(t.p,{children:["Remember that your users won't probably care about your tech stack. They won't know if your codebase hails a tribute to ",(0,i.jsx)(t.a,{href:"https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html",children:"Robert C. Martin's Clean Architecture"})," or looks like rotten spaghetti. With every choice is a list of trade-offs. What you compromise today is what you'll pay tomorrow. This is what is known as a ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Technical_debt",children:"technical debt"}),"."]})}),"\n",(0,i.jsx)(t.p,{children:"Some of the stacks that you may wish to consider revolve around the following domains."}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Front end"}),": This is what your users will interface with. Examples: React, Vue.js, Next.js, Svelte, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Styling"}),": These libraries make it easier to include UI elements, e.g., buttons, menus, cards, etc., in your app. Different libraries have different customisation flexibilities. Depending on your design language, you might not even need any styling libraries and just build everything from scratch! Examples: Tailwind CSS/UI, Bootstrap, Bulma, MUI, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Data persistence:"})," SQL or NoSQL? SQL is used to manage relational databases, e.g., ",(0,i.jsx)(t.a,{href:"https://www.mysql.com/",children:"MySQL"}),", ",(0,i.jsx)(t.a,{href:"https://www.postgresql.org/",children:"PostgreSQL"}),", etc. NoSQL is essentially anything that isn't SQL, e.g., ",(0,i.jsx)(t.a,{href:"https://www.mongodb.com/",children:"MongoDB"}),", ",(0,i.jsx)(t.a,{href:"https://redis.io/",children:"Redis"}),", etc. You may even use a higher level database systems like ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/docs/database",children:"Firebase Realtime Database"})," or ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/docs/firestore",children:"Cloud Firestore"}),", ",(0,i.jsx)(t.a,{href:"https://supabase.com/",children:"Supabase"}),", or couple your choice of database system with ",(0,i.jsx)(t.a,{href:"https://graphql.org/",children:"GraphQL"})," for easier queries. Remember that the choice of database system and how it's structured almost directly dictates the scalability and performance of your app. Depending on your schema, it may make it hard to represent some models, or slow to query. Migrations aren't always reversible and are almost always painful. See below note."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Authentication"}),": Most apps will have some sort of user account system. OAuth is a great choice due to ease of integration and ease of use without the need for entering emails and passwords. Some sensitive apps may choose to roll their own authentication system (think banks, government systems). Self-rolling authentication gives you more control, but outsourcing it to a (reputable) third-party service may give you assurance of security because it's probably been battle-tested and regularly maintained. Examples: self-rolled, Firebase Authentication, Auth0, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Back end server"}),": This is where most, if not all, of your business logic will live. Think of the front end client as the shell, and back end server as the core of your app. This server communicates with everyone (third-party APIs, database systems, caching servers, etc.) and serves anything that the client needs. Examples: Go, Django, Ruby on Rails, Express, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Hosting"}),": After everything is built on your local computer, you need to deploy it somewhere so that your software is available to everyone. You'd engage with these platforms to deploy your app. Some are as simple as providing you with a CDN to host your static files, e.g., ",(0,i.jsx)(t.a,{href:"https://www.cloudflare.com/",children:"Cloudflare"}),", ",(0,i.jsx)(t.a,{href:"https://www.netlify.com/",children:"Netlify"}),", ",(0,i.jsx)(t.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),". Some are a little more batteries-included, providing you with cloud functions, authentication services, and database systems, e.g., ",(0,i.jsx)(t.a,{href:"https://vercel.com/",children:"Vercel"}),", ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/",children:"Firebase"}),". Some literally give you only a bunch of remote servers, e.g., ",(0,i.jsx)(t.a,{href:"https://cloud.google.com/",children:"Google Cloud"}),", ",(0,i.jsx)(t.a,{href:"https://aws.amazon.com/",children:"Amazon Web Services"}),", etc. Notably, it is a trade-off between complexity, flexibility, and cost."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Continuous integration, delivery, and deployment platforms"}),": These platforms help you prepare your code for release (continuous integration) and deploy to production (continuous deployment), all in an automated fashion to increase productivity. They can also help your team spot errors asynchronously, and ensure consistency when deploying. Depending on your use case, you might or might not benefit from one. Examples: CircleCI, Travis CI, GitHub Actions, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Miscellaneous services"}),": Your app may need some domain-specific technologies, e.g., LLM-backed services (see below), maps (",(0,i.jsx)(t.a,{href:"https://mapsplatform.google.com/",children:"Google Maps Platform"}),", ",(0,i.jsx)(t.a,{href:"https://wego.here.com/",children:"HERE WeGo"}),", ",(0,i.jsx)(t.a,{href:"https://www.openstreetmap.org/",children:"OpenStreetMap"}),", etc.), search engines (",(0,i.jsx)(t.a,{href:"https://www.algolia.com/",children:"Algolia"}),", ",(0,i.jsx)(t.a,{href:"https://www.elastic.co/elasticsearch",children:"Elasticsearch"}),", etc.), computer vision (",(0,i.jsx)(t.a,{href:"https://opencv.org/",children:"OpenCV"}),", ",(0,i.jsx)(t.a,{href:"https://www.tensorflow.org/graphics",children:"TensorFlow Graphics"}),", etc.), etc. Spend some time to take stock of what your app will need, and see your options out there. Remember, the less code you need to write, the faster you will be able to launch."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"If some of the services you choose are not free, you might need to pool all operational costs together and consider them when deciding on your business model. Notably, your revenue must cover all operational costs for your business to be sustainable, even way before it's profitable."}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Migration is almost always not fun. Migrations are usually intended to keep the same behavior, so often no business logic (features) changes. It is a really expensive and risky attempt, because with every change is a disturbance of stability. With usually no change in features, increased risk of disturbed stability and data integrity, and a huge investment of engineering hours, migrations are one of the most dreaded operations in software engineering. Therefore, any decisions that minimize the need for migrations is often favorable."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Explain choice of technologies for the following: UI, Database, Web Server,\nHosting, Authentication, etc. and the alternatives you've considered."})}),"\n",(0,i.jsx)(t.h3,{id:"user-experience",children:"User Experience"}),"\n",(0,i.jsx)(t.p,{children:"User experience (UX) is very different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Craigslist still have a ton of daily active users despite their UI! \uD83D\uDE35"}),"\n",(0,i.jsx)(t.p,{children:"UX encompasses all aspects of the end-user's interaction with a product. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design."}),"\n",(0,i.jsxs)(t.p,{children:["If the product is a TV, UX starts from how the product is placed on the shelves at the store, how the packaging allows for the customer to bring it to the cashier, whether it can fit in someone's car trunk, how far one should read through the manual to assemble the TV, up until the TV breaks down, repaired, or even recycled. Notably, UX differs from UI because UX is not limited to software products. Don Norman and Jakob Nielsen, two of the forefathers of UX, ",(0,i.jsx)(t.a,{href:"https://www.nngroup.com/articles/definition-user-experience/",children:"defined UX, in contrast to UI, very well here"}),". The Nielsen Norman Group's website also provides many resources about UX that you may wish to check out."]}),"\n",(0,i.jsxs)(t.p,{children:["UX is about research. It requires understanding of your user. Not just when they are using your product, but also the environments around the time of usage, the different agents surrounding the product and its implications, and ultimately their objectives. If you are building an app that is used in rowdy buses or busy places, can your users tap on those small buttons (this is known as a ",(0,i.jsx)(t.a,{href:"https://aeldata.com/situational-disabilities",children:"situational disability"}),")? If you are building an app for teachers to input grades, how do you think it will impact the parents of the teachers, and the students (they are known as ",(0,i.jsx)(t.a,{href:"http://www.diva-portal.org/smash/get/diva2:327497/FULLTEXT01.pdf",children:"primary, secondary, and tertiary users"}),")? There are no right questions, just as there are no right answers. Talk to your users, and empathize with their objectives. Return to the drawing board and devise a prototype. Test it with them, collect feedback, be surprised, and iterate. Just like software engineering, product development is an iterative (read: agile) process."]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsxs)(t.p,{children:["You are not your own user. Repeat it. ",(0,i.jsx)(t.strong,{children:"You are not your own user"}),". It\ndoesn't matter if you think you fall into the target audience of your own app,\nyou are still not, and never will be, your own user. It is therefore important\nto distance oneself when researching user behaviors: be ready for surprises,\nand be humble to counterintuitions. If you're interested, the field that\nheavily studies these subjects in the context of computers is called\n",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction",children:"Human-Computer Interaction\n(HCI)"}),"."]})}),"\n",(0,i.jsx)(t.p,{children:"UX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas."}),"\n",(0,i.jsxs)(t.p,{children:["You can probably guess now that UX is somewhat related to branding. Dictions that prefer colloquialism over specificity may convey a relaxed, friendly sentiment (",(0,i.jsx)(t.a,{href:"https://medium.com/life-at-go-jek/design-with-love-the-creative-process-behind-go-jek-redesign-d0e2338e7f7a",children:"In 2018, Gojek revamped their app to relate better to the locals"}),", and ",(0,i.jsx)(t.a,{href:"https://youtu.be/RlQEoJaLQRA",children:"Don Norman talked about designs that make people happy"}),"). Smooth transitions and tidy designs may convey a sense of stability and trust (known as the ",(0,i.jsx)(t.a,{href:"https://www.nngroup.com/articles/aesthetic-usability-effect/",children:"aesthetic-usability effect"}),"). Animations and choice of materials (gradients, acrylic, shadows, elevations, etc.) give a sense of space and control, that the user knows the relationships between elements in the UI. You can probably now appreciate how most, if not all, UI decisions inherently stem from UX considerations."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"It is implored that you can now appreciate how expensive a UX research process can be. But don't sweat too much—generally, it is better to launch with decent coverage and constructive outlook, than supposedly exhaustive coverage but obstinate outlook."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe three common workflows within your application. Explain why those\nworkflows were chosen over alternatives with regards to improving the user's\noverall experience in the context of an AI application."})}),"\n",(0,i.jsx)(t.h3,{id:"user-interface",children:"User Interface"}),"\n",(0,i.jsx)(t.p,{children:"UI is the space where interactions between humans and computers occur to achieve their objectives. You'd probably already be familiar with some of the concepts of UI from Assignment 1. But UI design is more than just typography or color theory."}),"\n",(0,i.jsx)(t.p,{children:"Something unique in this assignment is the incorporation of AI technologies in your app. Frankly, this is a rather new development, and there are no hard and fast rules in designing interfaces for AI apps. However, there are some aspects that one should consider when incorporating intelligence in their app."}),"\n",(0,i.jsx)(t.p,{children:"Ethics is a big deal when it comes to design in general, not just apps. Since AI is an emerging technology, you should be transparent about what your novel technology can and cannot do. Provide third-party sources where possible, hedge, or even admit if some actions are not possible. This eventually influences the claims and endorsements you will make in your app. It is even a bigger stake if your app deals with sensitive fields like health or engineering, because an overconfident recommendation is as good as a misjudgement. For every recommendation, ensure that the user eventually has control over their decisions. Don't assume, automate, and commit critical actions on the user's behalf; rather give them control to accept, reject, and/or suggest feedback on your recommendation. For every intelligent UI element or feature you choose to develop, always remember that the intelligence is artificial, and ultimately humans get the last say."}),"\n",(0,i.jsxs)(t.p,{children:["This goes without saying: privacy and data collection. Be transparent about what, when, and where you are collecting analytics and/or heuristics from a user's interactions. Explain and give users the choice to opt out from certain intelligent features. Give users control over what they want or don't want to share (think app permissions settings on iOS and Android). You'd quickly realize that these considerations are not new or unique to AI apps; they apply to any apps. Ethics and privacy are the nicher part of UI design, and it's even more so when your app handles sensitive data and performs sensitive actions. ",(0,i.jsx)(t.a,{href:"https://pair.withgoogle.com/guidebook/patterns",children:"Google has a great guidebook to designing AI apps that centers around humans"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Needless to say, the basic principles of UI design still apply in this milestone. The paragraphs above aimed to shed a light on points of attention when building AI apps."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Show and explain considerations/decisions in your UI that were specially made\nfor an app that leverages AI. Provide examples, citations, or justifications\nwhere necessary. You may also show different prototypes and outline their\ntrade-offs."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-5-launch",children:"Phase 5: Launch"}),"\n",(0,i.jsx)(t.h3,{id:"landing-page",children:"Landing Page"}),"\n",(0,i.jsxs)(t.p,{children:["Similar to what you have read in Assignment 1, launching your product site only when the app is ready is often suboptimal. In this milestone, you are building a product site (a real one, this time) that showcases your product. Some decent examples include ",(0,i.jsx)(t.a,{href:"http://remix.run/",children:"Remix"}),", ",(0,i.jsx)(t.a,{href:"https://www.jetbrains.com/fleet/",children:"JetBrains Fleet"}),", and ",(0,i.jsx)(t.a,{href:"https://github.com/features/preview/copilot-x",children:"GitHub Copilot"}),". A great product site should achieve: explaining why it exists, informing about the features, and calling for an action (a call-to-action)."]}),"\n",(0,i.jsxs)(t.p,{children:["Since this site relates to your product launch in a later milestone, it is also worthy to think about how your site is seen when shared. Think about what happens when you share a URL via Telegram, WhatsApp, or LinkedIn. Nowadays, people don't just see the URL, they also see a thumbnail, title of the site (truncated if it's too long), and first few sentences of the site description. This metadata is a standard known as the ",(0,i.jsx)(t.a,{href:"https://ogp.me/",children:"Open Graph Protocol"}),". Optimizing this is extremely beneficial because it influences the users even before the link is clicked."]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Create a landing page for marketing purposes with the following sections:\nhero, features, pricing section. Feel free to add more relevant sections if\nyou wish."})}),"\n",(0,i.jsx)(t.h3,{id:"analytics",children:"Analytics"}),"\n",(0,i.jsxs)(t.p,{children:["You should be interested in the usage statistics of your application. ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4",children:"Google Analytics 4"})," is one popular way to collect user insights. It can be set up easily — the following examples are using the ",(0,i.jsx)(t.code,{children:"gtag.js"})," snippet. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services."]}),"\n",(0,i.jsx)(t.p,{children:"Event tracking can provide more fine-grained insights over user actions. They can be used to track more events such as network request statuses, buttons pressed, or even form fields interactions. The following JavaScript code can be used to log a custom event to GA4:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"gtag"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'event'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "})}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n",(0,i.jsxs)(t.p,{children:["In particular, ",(0,i.jsx)(t.a,{href:"https://support.google.com/analytics/answer/9267735",children:"recommended events"})," helps you measure additional features and behavior as well as generate more useful reports."]}),"\n",(0,i.jsxs)(t.p,{children:["If your application's interface is predominantly built with a JavaScript MVC framework like React, it is very likely that you have a Single-page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 ",(0,i.jsx)(t.code,{children:"pushState"})," API. Pageviews can still be tracked using virtual pageviews by executing the following code instead during a client-side route change."]}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"gtag"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'event'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'page_view'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" page_title"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" page_location"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n",(0,i.jsxs)(t.p,{children:["Refer to ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag#measure_virtual_pageviews",children:'GA4\'s documentation on how to "Measure virtual pageviews"'})," for more information. Alternatively your framework might have provided dedicated documentation on how to send ",(0,i.jsx)(t.code,{children:"page_view"})," events for route changes."]}),"\n",(0,i.jsx)(t.p,{children:"Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that tracking is working in your application:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Use the official Google Analytics Debugger ",(0,i.jsx)(t.a,{href:"https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna",children:"Chrome Extension"})," (recommended)"]}),"\n",(0,i.jsx)(t.li,{children:'Check the "Network" tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.'}),"\n",(0,i.jsxs)(t.li,{children:["Go to ",(0,i.jsxs)(t.a,{href:"https://support.google.com/analytics/answer/9271392",children:[(0,i.jsx)(t.strong,{children:"Reports > Realtime"})," in the Analytics dashboard"]}),", which allows you to view activities on your application in near real-time."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["More information and examples can be found from the ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4",children:"official Google Analytics 4 documentation"}),"."]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Embed Google Analytics or equivalent alternatives in your application and give\nus a screenshot of the report. Make sure you embed the tracker at least 48\nhours before the submission deadline as updates for Google Analytics are\nreported once per day."})}),"\n",(0,i.jsx)(t.h3,{id:"launch-campaign",children:"Launch Campaign"}),"\n",(0,i.jsxs)(t.p,{children:["Once you get that amazing software ready for production, it's time to announce it to the world. You'll need to designate a launch time, plan what happens coming to the launch time, and most importantly, retain users ",(0,i.jsx)(t.em,{children:"after"})," the launch."]}),"\n",(0,i.jsx)(t.p,{children:"It's just like a press conference; you'll need people to help you spread the word that you decide to spread your wings. So, collect your closest connections, forums, social media sites (Facebook, Instagram, etc.), communities (e.g., Reddit, X, HackerNews, Discord, etc.), and influencers. Decide and plan what content will best represent your product. Make some drafts (text, video, banners, depending on the nature of the media), mock them, and revise until your team agrees on the best launch announcement. Your team should have all these collaterals ready, so that on the launch second, everything is published at the same time."}),"\n",(0,i.jsxs)(t.p,{children:["Some products may even decide to do ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Soft_launch",children:"soft launches"}),". Think ",(0,i.jsx)(t.a,{href:"https://www.clubhouse.com/",children:"Clubhouse"})," and ",(0,i.jsx)(t.a,{href:"https://arc.net/",children:"Arc Browser"})," with their invite-only schemes. From the developers' point of view, soft launches are great for beta-testing and garnering feedback agilely. With a limited user acquisition, it is easier to attend to issues, and your servers have a lower chance of exploding. It also gives a sense of exclusivity; it makes those who have joined feel exclusive, and those who have not joined envy. Referral systems also encourage word-of-mouth, so that's a bonus. This exclusivity can potentially create buzz and hype, with people watching for when the waitlist is over, or joining the waitlist—after which you can use it as a channel to share updates and ensure they still remember your product. But waitlists can even retard user acquisition (well, it's literally limiting acquisitions), which means lower usage, active users, and feedback. ",(0,i.jsx)(t.a,{href:"https://youtu.be/xJdx0BlP0iY?si=lmZbossdXvwKlPzy&t=198",children:"Arc Browser's CEO actually talked about how they are losing up to 80% of sign-ups because of having a waitlist"}),". Also, code has to be written to support this waitlist, and that's something else to maintain, only to be stripped when the waitlist is gone. Hence one should exercise prudence when deciding to go with soft launches and/or waitlists, because they will modulate the acquisition curve of your app."]}),"\n",(0,i.jsx)(t.p,{children:"After the launch, monitor all your analytics and watch the growth. Ensure that you have technicians ready to fix bugs or restart the server should the situation call for it. Ensure that you have the customer support team ready to answer any queries around the launch time. User acquisition isn't instant, and it needs repetitions and reminders for the sentiment to retain. One of the biggest mistakes one can make after launch is resting on their laurels after seeing the active users curve grow upwards. Your team should start planning on the next cadence (next release, next announcements, etc.) so that when that curve starts to plateau, you have something in store to bring it back up."}),"\n",(0,i.jsxs)(t.p,{children:["Product Hunt is a renowned site to discover new products in tech. It is backed by ",(0,i.jsx)(t.a,{href:"https://www.ycombinator.com/",children:"Y Combinator"})," and has brought light to some recent famous software, e.g., ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/notion",children:"Notion"}),", ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/obsidian",children:"Obsidian"}),", ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/otter",children:"Otter"}),", and ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/bereal",children:"BeReal"}),". It is a great inclusion for a software product launch due to its community and great outreach. To launch on Product Hunt, you'll need several content ready to submit: a product site, logo, first comment, demo video, marketing pitch, etc. Product Hunt has a ",(0,i.jsx)(t.a,{href:"https://help.producthunt.com/en/articles/479557-how-to-post-a-product",children:"list of what should be included in your product post"}),", and an ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/launch",children:"excellent site on preparing for a Product Hunt launch"}),". You might also want to check out how ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/topics/artificial-intelligence",children:"AI products are launched on Product Hunt"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Here's a ",(0,i.jsx)(t.a,{href:"https://gist.github.com/yangshun/1e84ae8461975e7fa9a7d153621c3756",children:"sample launch checklist Yangshun and his team used to launch Docusaurus 2.0 in 2022"})," which contributed to Docusaurus 2.0 attaining the ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/docusaurus#docusaurus-2-0",children:'"Product of the day"'})," award."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Even though this milestone is about launching on Product Hunt, the knowledge\nof launching a software product is going to be useful for your final project."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Assume you were launching on Product Hunt. Come up with content and marketing\nmaterials that you will use for your Product Hunt submission. You may even\nwant to launch on Product Hunt for real if you think your product is ready."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-6-going-above-and-beyond",children:"Phase 6: Going Above and Beyond"}),"\n",(0,i.jsx)(t.p,{children:"This section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor."}),"\n",(0,i.jsx)(t.p,{children:"Several suggestions have been provided. We emphasize that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use."}),"\n",(0,i.jsx)(t.h3,{id:"embeddings-optional",children:"Embeddings (Optional)"}),"\n",(0,i.jsx)(t.p,{children:"A recommended technique to improve the generated results is to supplement the model with high quality, relevant, and updated information about the query and instruct the model to use the information when generating the output. This is especially useful if the query is about recent events or information that the model has not been trained on."}),"\n",(0,i.jsx)(t.p,{children:"Embeddings refer to the method of representing words or phrases as vectors (list) of floating point numbers. These embeddings capture semantic meanings based on the context in which words appear in the text data. Words with similar meanings will have similar vector representations in the embedding space."}),"\n",(0,i.jsx)(t.p,{children:"Embeddings can thus be used to implement efficient knowledge retrieval. In particular, a text corpus can be split up into chunks, and each chunk is embedded (converted into a vector of numbers) and stored. A given query can then be embedded and vector search is performed to find the embedded chunks of text from the corpus that are most similar/related to the query."}),"\n",(0,i.jsx)(t.p,{children:"To quickly search across multiple vectors, it is recommended to store your vectors in vector databases which provide ways to query your collection of vectors given a query."}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://supabase.com/vector",children:"Supabase Vector"}),": Supabase is an open source Firebase alternative built on PostgreSQL. With the pgvector extension, you can store vector data. This is recommended because you can use Supabase for both relational and vector data, using one database for all your application needs."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://weaviate.io/",children:"Weaviate"}),": Open source vector database that also offers a fully managed option."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.pinecone.io/",children:"Pinecone"}),": Fully-managed, developer-friendly, and easily scalable vector database."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.trychroma.com/",children:"Chroma"}),": AI-native open source embedding database. As of Aug 2023, it does not offer managed hosting."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For example, an e-commerce website owner could embed information about the company and products to build a customer support chatbot. The chatbot answers user queries by fetching the vectors related to the query and passing both the query and necessary information to an LLM."}),"\n",(0,i.jsx)(t.p,{children:"Further reading on embeddings:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/embeddings",children:"Embeddings - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/embeddings",children:"Embeddings - Cohere"})}),"\n"]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Optional)",children:(0,i.jsx)(t.p,{children:"Use embeddings in your app. Explain why it was useful for your product to use\nembeddings."})}),"\n",(0,i.jsx)(t.h3,{id:"seo-and-social-sharing-optional",children:"SEO and Social Sharing (Optional)"}),"\n",(0,i.jsx)(t.p,{children:"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?"}),"\n",(0,i.jsx)(t.p,{children:"Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://developers.facebook.com/docs/plugins/",children:"Facebook Social Plugins"})," or ",(0,i.jsx)(t.a,{href:"https://dev.twitter.com/web/overview",children:"Twitter for Websites"})," creates a timeline post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base."]}),"\n",(0,i.jsx)(t.p,{children:"Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it."}),"\n",(0,i.jsxs)(t.p,{children:["Also ensure that the social sharing preview images are attractive. Vercel provides a useful tool for ",(0,i.jsx)(t.a,{href:"https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation",children:"dynamic OG image generation"}),"."]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Optional)",children:(0,i.jsx)(t.p,{children:"Identify and integrate with social network(s) containing users in your target\naudience. State the social plugins you have used. Explain your choice of\nsocial network(s) and plugins."})}),"\n",(0,i.jsx)(t.h2,{id:"assessment-scheme",children:"Assessment Scheme"}),"\n",(0,i.jsxs)(t.p,{children:["The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are ",(0,i.jsx)(t.strong,{children:"16 compulsory milestones"})," in total. Milestone 1, 2, 3 and 10 are worth 2.5% each. The rest are worth 5% each."]}),"\n",(0,i.jsx)(t.p,{children:"The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this."}),"\n",(0,i.jsx)(t.p,{children:"Overall, the AI application assignment is worth 20% of your final grade."}),"\n",(0,i.jsx)(t.h2,{id:"mode-of-submission",children:"Mode of Submission"}),"\n",(0,i.jsxs)(t.p,{children:["The final submission is due ",(0,i.jsx)(g.Z,{date:p.oZ.I8}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The following will need to be ",(0,i.jsx)(t.strong,{children:'both submitted to Coursemology (under "Assignment 3 — Artificial Intelligence Application") and included in your GitHub repository'}),":"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A write-up, ",(0,i.jsx)(t.code,{children:"group--milestones.pdf"}),", containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your live application and link to the ",(0,i.jsx)(t.strong,{children:"public GitHub repository"})," is clearly stated in the write-up for the convenience of the teaching staff."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A one/two-page pitch of your application, ",(0,i.jsx)(t.code,{children:"group--pitch.pdf"}),", pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. ",(0,i.jsx)(t.strong,{children:"Restriction:"})," no longer than 2 A4 sides."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The following will only need to be included in your GitHub repository:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A ",(0,i.jsx)(t.code,{children:"README.md"})," file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"The list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment."}),"\n",(0,i.jsx)(t.li,{children:"The name of your application."}),"\n",(0,i.jsx)(t.li,{children:"The URL to your application, i.e. your application must be accessible online somewhere."}),"\n",(0,i.jsx)(t.li,{children:"Set-up instructions for local testing (good to have)."}),"\n",(0,i.jsx)(t.li,{children:"Resources you have used significantly to build your app (e.g. tutorials, source code references, design references, UI templates, etc.)."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["The code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits). You're encouraged to use ",(0,i.jsx)(t.a,{href:"https://monorepo.tools/",children:"monorepos"})," instead (e.g., via ",(0,i.jsx)(t.a,{href:"https://turbo.build/repo",children:"Turborepo"}),") so that you only have to submit one repository."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Not following the submission instructions (e.g., incorrect file naming) will result in the deduction of marks."})}),"\n",(0,i.jsx)(t.p,{children:"Clarifications and questions related to this assignment should be posted to the Coursemology Forum."}),"\n",(0,i.jsx)(t.p,{children:"Good luck and have fun!"}),"\n",(0,i.jsx)(t.h2,{id:"acknowledgements",children:"Acknowledgements"}),"\n",(0,i.jsx)(t.p,{children:"Thank you to the following individuals who have contributed to this assignment in one way or another:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Sau Sheong Chang"}),"\n",(0,i.jsx)(t.li,{children:"Suzanna Sia"}),"\n",(0,i.jsx)(t.li,{children:"Tong Hui Kang"}),"\n",(0,i.jsx)(t.li,{children:"Rishabh Anand"}),"\n"]})]})}var y=(0,s.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)},pageOpts:{filePath:"pages/coursework/artificial-intelligence.mdx",route:"/coursework/artificial-intelligence",frontMatter:{title:"Assignment 3 — Artificial Intelligence",description:"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions."},headings:[{depth:1,value:"Assignment 3 — Artificial Intelligence Application",id:"assignment-3--artificial-intelligence-application"},{depth:2,value:"General Overview",id:"general-overview"},{depth:2,value:"Grading and Admin",id:"grading-and-admin"},{depth:2,value:"Objectives",id:"objectives"},{depth:2,value:"Phase 0: Introduction",id:"phase-0-introduction"},{depth:3,value:"Background",id:"background"},{depth:3,value:"New AI Landscape",id:"new-ai-landscape"},{depth:2,value:"Phase 1: Product Strategy",id:"phase-1-product-strategy"},{depth:3,value:"Idea Generation, Problem Space",id:"idea-generation-problem-space"},{depth:3,value:"Competitive Landscape",id:"competitive-landscape"},{depth:3,value:"Product Capabilities",id:"product-capabilities"},{depth:3,value:"Moat",id:"moat"},{depth:2,value:"Phase 2: Go-To-Market",id:"phase-2-go-to-market"},{depth:3,value:"Product Lifecycle & Product-Market Fit",id:"product-lifecycle--product-market-fit"},{depth:3,value:"Scoping",id:"scoping"},{depth:3,value:"Business Model",id:"business-model"},{depth:2,value:"Phase 3: Artificial Intelligence Integration",id:"phase-3-artificial-intelligence-integration"},{depth:3,value:"Introduction to Large Language Models",id:"introduction-to-large-language-models"},{depth:3,value:"Prompt Engineering/Design",id:"prompt-engineeringdesign"},{depth:4,value:"Elements of a Prompt",id:"elements-of-a-prompt"},{depth:4,value:"Tokenization",id:"tokenization"},{depth:4,value:"Fine-tuning",id:"fine-tuning"},{depth:3,value:"Using the Right Model for the Job",id:"using-the-right-model-for-the-job"},{depth:4,value:"Popular LLMs and Providers",id:"popular-llms-and-providers"},{depth:4,value:"Model Settings",id:"model-settings"},{depth:3,value:"Other Resources",id:"other-resources"},{depth:4,value:"Courses and Tutorials",id:"courses-and-tutorials"},{depth:4,value:"Tools",id:"tools"},{depth:4,value:"Open Source LLMs",id:"open-source-llms"},{depth:2,value:"Phase 4: Design",id:"phase-4-design"},{depth:3,value:"Branding your Product",id:"branding-your-product"},{depth:3,value:"Technology Stack",id:"technology-stack"},{depth:3,value:"User Experience",id:"user-experience"},{depth:3,value:"User Interface",id:"user-interface"},{depth:2,value:"Phase 5: Launch",id:"phase-5-launch"},{depth:3,value:"Landing Page",id:"landing-page"},{depth:3,value:"Analytics",id:"analytics"},{depth:3,value:"Launch Campaign",id:"launch-campaign"},{depth:2,value:"Phase 6: Going Above and Beyond",id:"phase-6-going-above-and-beyond"},{depth:3,value:"Embeddings (Optional)",id:"embeddings-optional"},{depth:3,value:"SEO and Social Sharing (Optional)",id:"seo-and-social-sharing-optional"},{depth:2,value:"Assessment Scheme",id:"assessment-scheme"},{depth:2,value:"Mode of Submission",id:"mode-of-submission"},{depth:2,value:"Acknowledgements",id:"acknowledgements"}],timestamp:1695295898e3,title:"Assignment 3 — Artificial Intelligence"},pageNextRoute:"/coursework/artificial-intelligence"})},3470:function(e){"use strict";e.exports=JSON.parse('{"td":{"Q_":"2023-08-21","I8":"2023-09-04T23:59:00","Uo":false},"No":{"Q_":"2023-08-14","qQ":"2023-08-28T23:59:00","uV":"2023-09-10T23:59:00","ji":"2023-09-11T18:30:00","oA":"2023-09-13T11:59:00","RQ":"2023-09-15T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1PO11Fi6HQTPpsuTm7ek5OQuZ-geL-JtjQ4wMlqoTJWg/edit?usp=sharing","Uo":false},"oZ":{"Q_":"2023-08-28","I8":"2023-09-29T23:59:00","Uo":false},"iV":{"Q_":"2023-09-18","GB":"2023-09-25T23:59:00","CT":"2023-10-01T23:59:00","EA":"2023-10-15T23:59:00","G_":"2023-10-29T23:59:00","jY":"2023-11-06T18:30:00","xs":"2023-11-15","Kq":true,"Y_":"2023-11-22T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1f-r-hNkBWVfXXPcpUbN37oF6DhT6Ap61AwsMkfvRjEA/edit?usp-sharing","Uo":false}}')}},function(e){e.O(0,[673,774,888,179],function(){return e(e.s=6138)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[976],{6138:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/coursework/artificial-intelligence",function(){return n(4007)}])},6217:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var i=n(5893),s=n(1236);function o(e){let{children:t,customNumber:n,labelSuffix:o}=e;return(0,i.jsx)(s.UW,{type:"info",emoji:"\uD83C\uDFC1",children:(0,i.jsxs)("div",{className:"milestone",style:{counterSet:n?"milestone ".concat(n):void 0},children:[(0,i.jsxs)("strong",{children:["Milestone ",null!=n?n:(0,i.jsx)("span",{className:"milestone-counter"}),o&&(0,i.jsxs)(i.Fragment,{children:[" ",o]}),":"]})," ",t]})})}},4592:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var i=n(5893);function s(e){let{date:t,emphasize:n=!0}=e,s=new Intl.DateTimeFormat("en-SG",{dateStyle:"full",timeStyle:t.includes(":")?"short":void 0,timeZone:"Asia/Singapore"}).format(new Date(t));return(0,i.jsx)(n?"strong":"span",{suppressHydrationWarning:!0,children:s})}},4007:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return y}});var i=n(5893),s=n(2673),o=n(1151),a=n(5675),r=n.n(a),l={src:"/_next/static/media/gen-ai-landscape.58326212.png",height:4008,width:3200,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAIAAABVpBlvAAAAdUlEQVR42hWKOwrDMBAF9/6ncuUzuDKkCClSWNr/rqQo0mN4MDBAx8ERWEpkzjF+maDX1eYM88zWex9jwPN6P5WUhCqXWkUMVHQtwzPCzHdFqIiCtDHRXTEv4f1I5o0+X3B3YasoTGSt+32DWZhHerTFnHKef8UyiU1RcKxtAAAAAElFTkSuQmCC",blurWidth:6,blurHeight:8},h={src:"/_next/static/media/ai-wrapper-meme.f0bfbe8f.jpg",height:666,width:500,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABgMBIgACEQEDEQH/xAAnAAEAAAAAAAAAAAAAAAAAAAAAAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAAAU//xAAdEAACAQQDAAAAAAAAAAAAAAABAwQAAgURISMy/9oACAEBAAE/AMdBDXTAcbBGgnrS4bs4Ps1//8QAGBEAAgMAAAAAAAAAAAAAAAAAAhEAAXH/2gAIAQIBAT8AOmTyf//EABcRAQADAAAAAAAAAAAAAAAAAAEAAiL/2gAIAQMBAT8Aq5J//9k=",blurWidth:6,blurHeight:8},c={src:"/_next/static/media/competitive-profile-matrix.6b504cdf.png",height:302,width:566,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAIAAAA8r+mnAAAAYElEQVR42h3JuwqAIBQAUP//i5qKmqKppChy83HvxRTEEh2zznrY9cs5O+eO/Zi2cd0aEC0zxgBAKSXGiICr5Er3NwyMiOqllEIICMDlIlX3YP+FtbaG954QhT61mQPxF7KjVZRCiOJcAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4},d={src:"/_next/static/media/google-search-dominance-2022.05f6ec46.png",height:1200,width:1200,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAo0lEQVR42h3BMVLCABAF0P//7gImKnoBrDyKJ7e2cKwcbSxoMgaKDAgh2XWG9/j1sw/7MwtcVSVl6/s7j7D2pgWVcwKUuHAC5W0T7goXKt04Jz87bB6h17fTcMhw7I/82NZwqu9dnqcSQJJh6o9473Ce+fKs2yUdwGWa+mF8elhu1uU2SaoCt91BlqV5pRWZQsIcVd40JHwRTVaSPo6X3W9vpn+askcv4XvUkAAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:8},u=n(1236),p=n(3470),g=n(4592),m=n(6217);function f(e){let t=Object.assign({h1:"h1",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h2:"h2",p:"p",ol:"ol",li:"li",strong:"strong",em:"em",a:"a",h3:"h3",ul:"ul",h4:"h4",code:"code",pre:"pre",span:"span"},(0,o.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Assignment 3 — Artificial Intelligence Application"}),"\n",p.oZ.Uo&&(0,i.jsx)(u.UW,{type:"warning",children:" This assignment is currently being updated. Details are tentative and will be finalised soon."}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{align:"left",children:"Item"}),(0,i.jsx)(t.th,{align:"left",children:"Due"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Issue date"}),(0,i.jsx)(t.td,{align:"left",children:(0,i.jsx)(g.Z,{date:p.oZ.Q_,emphasize:!1})})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Final submission"}),(0,i.jsx)(t.td,{align:"left",children:(0,i.jsx)(g.Z,{date:p.oZ.I8,emphasize:!1})})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"general-overview",children:"General Overview"}),"\n",(0,i.jsx)(t.p,{children:"In recent times, the landscape of software development has been profoundly reshaped by the remarkable strides made in artificial intelligence (AI) and, more specifically, generative AI and large language models (LLMs). These advancements have revolutionized how applications are conceived, designed, and experienced, opening up a realm of possibilities that were once confined to the realm of science fiction."}),"\n",(0,i.jsx)(t.p,{children:"At the heart of this transformation lie LLMs, such as GPT-3.5 and Claude, which stand as towering pillars of AI ingenuity. These models possess an unprecedented ability to comprehend and generate human language with impressive fluency and nuance. As a result, a new era of app development has emerged — one characterized by applications that are not merely tools, but intelligent and empathetic companions."}),"\n",(0,i.jsx)(t.p,{children:"The key merits of building apps that harness the power of LLMs include:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Natural language understanding and generation"}),": LLMs enable apps to not only understand user inputs with remarkable accuracy but also respond in a manner that mirrors human conversation. This grants users a level of interaction that transcends traditional interfaces, fostering more engaging and meaningful experiences."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Contextual awareness"}),": These models possess an inherent understanding of context, allowing apps to tailor responses and actions based on the evolving conversation. This adaptability creates a sense of fluidity and responsiveness, akin to conversing with a knowledgeable friend."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Content creation and enhancement"}),": Apps can leverage LLMs to generate a wide array of content, from articles and reports to creative writing and marketing copy. This capability has the potential to revolutionize content-driven industries, amplifying efficiency and creativity."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Personalization"}),": By tapping into the vast expanse of language data, apps can deliver personalized experiences that cater to individual preferences, needs, and emotions. This personal touch fosters a deeper sense of connection and resonance."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Recent enhancements in AI have propelled LLMs to even greater heights. Techniques such as unsupervised fine-tuning and transfer learning have imbued these models with the ability to adapt to specific tasks and domains. Moreover, efforts to democratize AI have led to increased accessibility, empowering a broader spectrum of developers to harness the potential of these models."}),"\n",(0,i.jsx)(t.p,{children:"In this era of AI-powered app development, the boundaries of creativity are expanding. Whether it's a virtual personal assistant that understands nuanced voice commands, a language-learning app that adapts to each user's proficiency, or a content creation tool that seamlessly generates tailored content, the possibilities are limited only by imagination."}),"\n",(0,i.jsx)(t.p,{children:"The convergence of LLMs and app development is ushering in a new wave of innovation, redefining the way we interact with technology. As these models continue to evolve and mature, they will undoubtedly leave an indelible mark on the fabric of our digital experiences, enriching and enhancing our lives in ways that were once unfathomable."}),"\n",(0,i.jsx)(t.p,{children:"As a CS3216 student, you do not want to miss out the opportunity of a lifetime to be at the forefront of this new AI wave!"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.em,{children:"P.S. In the spirit of exploring AIs/LLMs, parts of this assignment have been written with the assistance of LLMs \uD83D\uDE09."})}),"\n",(0,i.jsx)(t.h2,{id:"grading-and-admin",children:"Grading and Admin"}),"\n",(0,i.jsx)(t.p,{children:"This assignment can be done in groups of three or four students, which should have been formed by now. If you were unable to find yourself a group, you will be randomly assigned one."}),"\n",(0,i.jsx)(t.p,{children:"This assignment is highly open-ended. We provide milestones so that we can grade your application in a consistent way, even though everyone will be building different apps. This assignment is also designed to introduce you to the various elements of AI software development, and the milestones are there to ensure that you learn about the elements in a structured way. We will also provide some related tips, references and a little bit of help to get you started. These milestones constitute 70% of the assignment's grade."}),"\n",(0,i.jsxs)(t.p,{children:["With that said, you have a lot of freedom to express your creativity. You are free to develop any idea you like. However, if some of the proposed milestones do not make sense for the application you intend to build, you can petition to replace them with some other deliverables. You are to explain why we should agree to your petition and submit your petition via email at least one week before the assignment is due. ",(0,i.jsx)(t.strong,{children:"Your petition is subject to approval."})]}),"\n",(0,i.jsx)(t.p,{children:"While the milestones may be easy to meet, simply meeting them will not give you full credit. We ask for quality submissions, not run-of-the-mill work."}),"\n",(0,i.jsx)(t.p,{children:"To score the coveted remaining 30%, use your creativity to develop an application that stands out from the rest. We will not limit your potential by restricting the kind of application you can build. We expect that you will surprise us (pleasantly!) with what you are capable of doing. Do note that features must fit the aim of your application; ideally, they should be seamlessly integrated."}),"\n",(0,i.jsx)(t.p,{children:'For example, LLMs can be used to easily add chatbots to any applications, but chatbots may not contribute as much value to certain domains. In fact, implementing features for the sake of doing so may work against you (and your grades) as these "non-value add" features detract users from the main purpose of your app.'}),"\n",(0,i.jsxs)(t.p,{children:["Please do not hesitate to approach the friendly CS3216 staff if you need further assistance. We can be contacted at ",(0,i.jsx)(t.a,{href:"mailto:cs3216-staff@googlegroups.com",children:"cs3216-staff@googlegroups.com"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"objectives",children:"Objectives"}),"\n",(0,i.jsx)(t.p,{children:"The high-level goal of this assignment is to utilize generative AI (LLMs in particular) to build a meaningful digital product."}),"\n",(0,i.jsx)(t.p,{children:'You should approach this assignment with the mindset of an entrepreneur — you own every decision, and each decision you make (from design to engineering) will directly translate to the "success" of your product.'}),"\n",(0,i.jsx)(t.p,{children:"Like all previous assignments, we designed milestones such that you can hopefully have a sense of direction on where we expect you to reach, but these milestones are broadly described so that you are not restricted on how to get there."}),"\n",(0,i.jsx)(t.p,{children:"In this assignment, your task is to demonstrate that you can design and implement a web application that utilizes the capabilities of LLMs, persist the users' data in the cloud and leverage the user's identity in a meaningful manner."}),"\n",(0,i.jsxs)(t.p,{children:["You should utilize this assignment to showcase your product sense and engineering capabilities. You should also consolidate learnings from ",(0,i.jsx)(t.a,{href:"/coursework/product-design",children:"Assignment 1 (on Product Design)"})," and ",(0,i.jsx)(t.a,{href:"/coursework/innovation-seminar",children:"Assignment 2 (on identifying innovations, and gaps in the market)"})," to build a fuller product for this assignment."]}),"\n",(0,i.jsx)(t.p,{children:"Remember, your goal is not to do a lot of work. Your goal is to use this opportunity to make a difference."}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Please read the entire assignment before thinking about what you want to\ndevelop. It may give you a clearer idea of how all the parts come together and\nalso a better understanding of the strengths and weaknesses of an AI\napplication. The grading scheme can be found at the end of this handout."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-0-introduction",children:"Phase 0: Introduction"}),"\n",(0,i.jsx)(t.h3,{id:"background",children:"Background"}),"\n",(0,i.jsx)(t.p,{children:"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions."}),"\n",(0,i.jsxs)(t.p,{children:['Notably, technology giants such as Google, Microsoft, and Meta have fully embraced the AI "arms race" by entering the fray with their own formidable models and chatbots. A clear testament to this paradigm shift was the ',(0,i.jsx)(t.a,{href:"https://blog.google/technology/ai/google-io-2023-keynote-sundar-pichai/",children:"recurring theme of AI at Google I/O 2023"}),", underscoring the pervasive influence of AI across industries. As these tech titans continue to dedicate resources to AI research and development, the integration of AI into their existing products is poised to unlock new dimensions of functionality and user experience."]}),"\n",(0,i.jsxs)(t.p,{children:["However, the transformative power of generative AI and LLMs is not confined to established players alone. A burgeoning ecosystem of AI startups has taken root, propelling the domain forward with innovative applications primarily in copywriting and customer support. These startups, leveraging the remarkable capabilities of generative AI, are reshaping how businesses communicate with their users to provide support, setting the stage for more personalized and efficient engagement. Case in point – ",(0,i.jsx)(t.a,{href:"https://www.businesstimes.com.sg/startups-tech/startups/y-combinators-latest-batch-35-ai-startups",children:"35% of Y Combinator's 2023 Summer batch were AI startups"}),"!"]}),"\n",(0,i.jsx)(t.p,{children:"As this new wave of apps, empowered by generative AI and LLMs, continues to unfold, the boundaries of innovation are rapidly expanding. The convergence of AI and human ingenuity is reshaping how we interact with technology, and the journey ahead is going to be really interesting. It's an exciting time to be a software engineer!"}),"\n",(0,i.jsx)(t.h3,{id:"new-ai-landscape",children:"New AI Landscape"}),"\n",(0,i.jsx)(t.p,{children:"Within the generative AI startup landscape, there are a few common categories of products:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text"}),": Create and manipulate textual content. Tools that can draft articles, generate product descriptions, and even assist in creative writing. Examples: ",(0,i.jsx)(t.a,{href:"https://www.copy.ai/",children:"Copy.ai"}),", ",(0,i.jsx)(t.a,{href:"https://www.jasper.ai/",children:"Jasper"}),", ",(0,i.jsx)(t.a,{href:"https://www.hypotenuse.ai/",children:"Hypotenuse AI"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Image"}),": Generate, modify, or enhance images. Tools for artists, designers, and photographers to generate artwork, edit photos, and visualize ideas. Examples: ",(0,i.jsx)(t.a,{href:"https://www.midjourney.com/",children:"Midjourney"}),", ",(0,i.jsx)(t.a,{href:"https://runwayml.com/",children:"Runway ML"}),", ",(0,i.jsx)(t.a,{href:"https://pebblely.com/",children:"Pebblely"}),", Adobe Photoshop."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Audio"}),": Compose music, generate sound effects, and even mimic specific voices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Code"}),": Assist in software development tasks, including generating code snippets, offering coding suggestions, and even automating parts of the coding process. Examples: ",(0,i.jsx)(t.a,{href:"https://github.com/features/copilot",children:"GitHub Copilot"}),", ",(0,i.jsx)(t.a,{href:"https://about.sourcegraph.com/cody",children:"Sourcegraph Cody"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Chatbot"}),": Create conversational agents powered by generative AI. These chatbots can engage in natural conversations, answer queries, and provide support based on custom data. Examples: ",(0,i.jsx)(t.a,{href:"https://www.mendable.ai/",children:"Mendable"}),", ",(0,i.jsx)(t.a,{href:"https://www.chatbase.co/",children:"Chatbase"}),", ",(0,i.jsx)(t.a,{href:"https://www.glean.com/",children:"Glean"}),", ",(0,i.jsx)(t.a,{href:"https://askmore.ai/",children:"AskMore"}),". AskMore uses AI to conduct your user research so you get more feedback, faster, and in any language; an AI can even do your Assignment 1 milestone for you!"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Design"}),": Design your brand, logo, websites, presentations, and marketing collateral with a prompt. Examples: ",(0,i.jsx)(t.a,{href:"https://www.framer.com/ai",children:"Framer AI"}),", ",(0,i.jsx)(t.a,{href:"https://designs.ai/",children:"Designs.ai"}),", ",(0,i.jsx)(t.a,{href:"https://uizard.io/",children:"Uizard"}),", ",(0,i.jsx)(t.a,{href:"https://tome.app/",children:"Tome"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Video"}),": Manipulate and create video content. These tools can be used for video editing, special effects, and even automated video creation. Examples: ",(0,i.jsx)(t.a,{href:"https://www.synthesia.io/",children:"Synthesia"}),", ",(0,i.jsx)(t.a,{href:"https://lumen5.com/",children:"Lumen5"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Data and Analytics"}),": Analyze and generate datasets for testing and simulation purposes. Query data using natural language. Examples: ",(0,i.jsx)(t.a,{href:"https://defog.ai/",children:"Defog"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Agents"}),": Create virtual agents powered by generative AI. These agents can emulate human interactions and assist with tasks like scheduling, information retrieval, and more. Examples: ",(0,i.jsx)(t.a,{href:"https://www.cognosys.ai/",children:"Cognosys"}),", ",(0,i.jsx)(t.a,{href:"https://spell.so/",children:"Spell"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Gaming"}),": Create dynamic game environments, generate levels, adapt game mechanics based on player behavior, NPCs can engage in personalized conversation with players."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:'While most companies are part of the AI "gold rush", some prefer to follow the saying "during a gold rush, sell shovels". These "shovel" companies build services around LLMs, selling API access to LLMs and platforms to make it easier to build AI products:'}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"APIs"}),": Access to the LLMs hosted on the cloud. Examples: ChatGPT & GPT-3.5 by OpenAI, Claude by Antropic, Command by Cohere."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Toolchains"}),": Simplify common LLM-related operations. Examples: LangSmith by LangChain, Cohere platform, Humanloop."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Vector databases"}),": Stores data in a format that enables semantic information retrieval and long-term memory for LLMs. Examples: Supabase Vector, Pinecone, Weaviate."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Generative AI Landscape",placeholder:"blur",src:l})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://www.antler.co/blog/generative-ai",children:"https://www.antler.co/blog/generative-ai"})]})}),"\n",(0,i.jsx)(t.p,{children:"Other lists to find AI products:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.synthesia.io/post/ai-tools",children:"152 Fun AI Tools You've Never Heard Of"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://airtable.com/shrBeWpMlxf3e14E8/tblS4TkbJbm0cqT0o",children:"Antler Gen-AI Landscape"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://theresanaiforthat.com/",children:"There's An AI For That"})}),"\n"]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"For this assignment, you are required to use LLMs to build an AI software\nproduct as LLMs are easy to get started with, and require less server\nresources as compared to other forms of generative AI like image/audio\ngeneration."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-1-product-strategy",children:"Phase 1: Product Strategy"}),"\n",(0,i.jsx)(t.h3,{id:"idea-generation-problem-space",children:"Idea Generation, Problem Space"}),"\n",(0,i.jsx)(t.p,{children:"As an aspiring entrepreneur of CS3216, you have a mind full of big ideas eagerly waiting to see the light of day. After a long discussion with the team about the unlimited potential of your new product, you are now more sure than ever that this is going to be the next big thing. You expect more users than ChatGPT, TikTok, Netflix, and Pokemon Go combined, and to keep this many people waiting for any longer is simply evil."}),"\n",(0,i.jsx)(t.p,{children:'Before you jump into developing the specifications of your application, a very important question to ask yourself is, "Does my application solve any problem for the users?". An application that has many superfluous features does not make it useful. Just because your application has a cool concept or uses the latest technology does not guarantee that the initial users who joined out of curiosity will stay on. On the contrary, if a less fancy but more practical solution makes the user\'s life easier, it is more likely that the user will be retained. Solve a problem that people care about, solve it well, and fans of your application will naturally accumulate. Your users become the advocates that will help you spread the message about your application via word-of-mouth.'}),"\n",(0,i.jsxs)(t.p,{children:["When deciding on the problem space that you want to build for, it is also helpful to consider the ",(0,i.jsx)(t.strong,{children:"market attractiveness"}),'. Is this an attractive market to enter? In order to assess a market\'s attractiveness, you can look into the market size, and its expected growth rate. The market attractiveness of the problem space you intend to tackle can guide you on the expected "impact" that your product can potentially bring.']}),"\n",(0,i.jsxs)(t.p,{children:["Guides on estimating the market size can be found all over the internet, and a useful one we found is ",(0,i.jsx)(t.a,{href:"https://pear.vc/market-sizing-guide/",children:"https://pear.vc/market-sizing-guide/"}),"."]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Compulsory, not graded)",children:(0,i.jsx)(t.p,{children:"Describe the problem that your application solves."})}),"\n",(0,i.jsx)(t.h3,{id:"competitive-landscape",children:"Competitive Landscape"}),"\n",(0,i.jsx)(t.p,{children:"Understanding the competitive landscape provides critical insights into existing market players, their offerings, strengths, and weaknesses. By comprehending competitors' strategies and customer perceptions, you can likely make informed decisions, anticipate challenges, and tailor your approach to effectively capture market share and deliver unique value to their target audience."}),"\n",(0,i.jsx)(t.p,{children:"The AI product ecosystem is very crowded, and new AI companies are emerging everyday. This statement will continue to be accurate for years to come."}),"\n",(0,i.jsxs)(t.p,{children:['While AI has undoubtedly opened doors to a multitude of possibilities, it has also given rise to the phenomenon of "thin wrapper" products. These products often rely heavily on existing AI frameworks and APIs, offering minimal value beyond the underlying technology. In this assignment, you ',(0,i.jsx)(t.strong,{children:"should not"})," create such products as they can be easily cloned, leading to a lack of differentiation and diminished long-term viability."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"AI wrapper meme",placeholder:"blur",src:h})}),"\n",(0,i.jsx)(t.p,{children:"In trying to understand the competitive landscape, you may find it useful to do a competitive analysis. Questions you may find useful include:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:'In the problem space that you are trying to "enter", is the market competitive?'}),"\n",(0,i.jsx)(t.li,{children:"Will you be able to capture meaningful market share?"}),"\n",(0,i.jsx)(t.li,{children:"How much market share does each competitor have?"}),"\n",(0,i.jsx)(t.li,{children:"What are the competitive advantages of your competitors?"}),"\n"]}),"\n",(0,i.jsxs)(u.UW,{children:[(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Good-to-know!"})}),(0,i.jsxs)(t.p,{children:["You may consolidate your findings into a Competitive Profile Weighted Matrix to better gauge your competitors' products (",(0,i.jsx)(t.em,{children:"Not graded"}),")."]}),(0,i.jsxs)(t.p,{children:["The competitive profile matrix is used commonly by strategic management to compare their firm with major players of the industry. In order to do a competitive profile matrix well, you need to identify what are the ",(0,i.jsx)(t.strong,{children:"key success factors"})," that determine your product's success in the market, and use these factors to compare your competition."]}),(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Competitive Profile Matrix",placeholder:"blur",src:c})}),(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://thinkinsights.net/strategy/competitive-profile-matrix/",children:"https://thinkinsights.net/strategy/competitive-profile-matrix/"})]})})]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"List down your 3 closest competitors and their pros and cons. Explain how your\nproduct is better."})}),"\n",(0,i.jsx)(t.h3,{id:"product-capabilities",children:"Product Capabilities"}),"\n",(0,i.jsx)(t.p,{children:"Building a killer application requires more than just technical skills. In CS3216, you are expected to think very hard about what you're trying to do. You should not be building an application just because you need to submit this assignment."}),"\n",(0,i.jsx)(t.p,{children:"You should choose an application that fully utilizes the potential of the chosen technology. In CS3216 (and life in general), execution matters. Choosing the most suitable platform for your application is part of the execution. Thus, we expect you to come up with a good reason as to why using LLMs would best achieve your application's objectives."}),"\n",(0,i.jsxs)(t.p,{children:["In addition to LLMs, it is a requirement that your application has ",(0,i.jsx)(t.strong,{children:"user authentication"}),", and makes use of user authentication meaningfully. From the assignment standpoint, we are looking for products that are more than one-page tools. From a product standpoint, having user authentication should increase your ability to provide personalization features, and forces you to consider the security aspect to protect your users' data. You should also therefore include reasons why having user authentication alongside LLMs can help you achieve your application's objectives."]}),"\n",(0,i.jsx)(t.p,{children:'A common pitfall for engineering-focused students is their bias towards technologically-complex products, failing to consider how the product "serves" the problem in the process. The focus here is for you to consider your product\'s capabilities - does your product have the capabilities to succeed in your chosen problem space?'}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"All teams should first create a post on Coursemology under the Assignment 3 topic containing the proposed product for the teaching team's approval before starting on the project!"})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe your application briefly. List its objectives and the associated\n(major) user stories."})}),"\n",(0,i.jsx)(t.h3,{id:"moat",children:"Moat"}),"\n",(0,i.jsx)(t.p,{children:'In the context of product strategy, a "moat" refers to a sustainable competitive advantage that a product possesses, which helps protect its market share and profitability from competitors. Just like a moat around a medieval castle provides protection and makes it difficult for enemies to breach the walls, a business "moat" creates barriers that deter competitors from easily entering the market or replicating the company\'s success.'}),"\n",(0,i.jsx)(t.p,{children:"A moat can take various forms, including (but not limited to):"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Brand"}),"\n",(0,i.jsx)(t.li,{children:"Technological Innovation"}),"\n",(0,i.jsx)(t.li,{children:"Economies of Scale"}),"\n",(0,i.jsx)(t.li,{children:"Investor Confidence"}),"\n",(0,i.jsx)(t.li,{children:"Ethics and Responsible AI"}),"\n",(0,i.jsx)(t.li,{children:"Customisation and Personalisation"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For example, one of Google's moat is its advantage of scale. Google Search continues to dominate the search engine market."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(r(),{alt:"Generative AI Landscape",placeholder:"blur",src:d})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsxs)(t.em,{children:["Source: ",(0,i.jsx)(t.a,{href:"https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/",children:"https://www.statista.com/chart/29267/market-share-of-the-worlds-largest-search-engines/"})]})}),"\n",(0,i.jsx)(t.p,{children:"One of Apple's moat is its integrated ecosystem of products. Apple's products, from iPhone, Macs, and services like iCloud, are tightly integrated into a single ecosystem, creating a seamless user experience that is difficult for competitors to match. This tight integration also makes it difficult for consumers to switch out of Apple."}),"\n",(0,i.jsx)(t.p,{children:"Disney's intellectual property and content library forms a significant moat. Disney owns the intellectual property of various iconic characters, like Mickey Mouse, to beloved franchises like Star Wars and Marvel. This competitive advantage cannot be easily eroded."}),"\n",(0,i.jsx)(t.p,{children:'Closer to AI products, ChatGPT has multiple "moats", including:'}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"First-mover advantage"}),': Being the first-mover, it has gained a strong "brand recognition" as consumers remember and trust it as the pioneering product - it is challenging for competitors and later entrants to establish the same level of recognition.']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Developer-friendly APIs"}),": OpenAI offers APIs that allow developers to easily integrate ChatGPT into their applications, products, or services. This developer-friendly approach facilitates the use of ChatGPT's capabilities without requiring extensive AI expertise."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Demand scale"}),": The widespread use of ChatGPT and the large volumes of interaction contribute to its data collection and training improvements, enhancing the model's performance over time."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For startups especially in the AI sector, establishing a moat is essential to stand out in a rapidly evolving landscape."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"What's your secret sauce / moat? Elaborate on your strategy to prevent\ncompetitors and big players from cloning your app and its features?"})}),"\n",(0,i.jsx)(t.h2,{id:"phase-2-go-to-market",children:"Phase 2: Go-To-Market"}),"\n",(0,i.jsx)(t.h3,{id:"product-lifecycle--product-market-fit",children:"Product Lifecycle & Product-Market Fit"}),"\n",(0,i.jsxs)(t.p,{children:["The product life cycle, a term commonly used by marketing professionals and management, describes the stages of a product when it is first introduced to the market, up to when the product is sunsetted. In this assignment, your product is positioned in the ",(0,i.jsx)(t.strong,{children:"introduction stage"}),", a period which demands your proactive engagement with prospective users in your target market to persuade them to become your first-time users."]}),"\n",(0,i.jsx)(t.p,{children:"While the primary goal of the introduction stage is not necessarily to achieve an optimal product-market fit, it does lay the foundation for eventually reaching that fit in the growth stage and beyond."}),"\n",(0,i.jsx)(t.p,{children:"During the introduction stage, the focus is more on creating awareness, generating interest, and attracting early adopters. The product may not have achieved its perfect fit with the market at this point, but it is a crucial period for collecting feedback, understanding user preferences, and making initial adjustments to move closer to that ideal fit."}),"\n",(0,i.jsxs)(t.p,{children:["Therefore, a ",(0,i.jsx)(t.strong,{children:"user acquisition plan"})," should allow you to reach out to more users in your target market segment."]}),"\n",(0,i.jsx)(t.p,{children:"Your user acquisition plan might also influence the features that you include in your application. For example, you could think of ways to provide motivation for users to share your application with their friends; you could design features such that while individual users may derive some value using your application, it is also in their interest to promote your application (e.g. rewarding users for referrals)."}),"\n",(0,i.jsx)(t.p,{children:"Illuminate the strategies, channels, and tactics you intend to employ to captivate and convert potential users into loyal patrons. As you delve into this milestone, articulate how your understanding of your target users informs your approach and elucidate the measures you will implement to foster a compelling product-market fit."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Note:"}),' You should approach this milestone by describing your strategy or plan on how you intend to "bring" this product to market, utilizing all resources you have.']}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe your target users. Explain how you plan to acquire your target users."})}),"\n",(0,i.jsx)(t.h3,{id:"scoping",children:"Scoping"}),"\n",(0,i.jsx)(t.p,{children:"With the key problem and target users at the forefront of your mind, it is timely to discuss what features should go into the product submitted for Assignment 3."}),"\n",(0,i.jsx)(t.p,{children:"You would realize that time-to-submission is extremely limited. Just as real companies must navigate the constraints of deadlines and customer expectations, you will be required to optimize the use of your time in Assignment 3 to deliver a simple, lovable and complete Minimum Viable Product (MVP)."}),"\n",(0,i.jsxs)(t.p,{children:["In this pursuit, the art of ",(0,i.jsx)(t.strong,{children:"scoping"})," takes center stage."]}),"\n",(0,i.jsx)(t.p,{children:"Scoping is the process of carefully selecting specific features to be included. In scoping and selecting features, justification is important: this requires a keen understanding of user needs, potential impact, and the overarching project goals. In this process, some questions you may find useful include:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"User Experience:"})," How does each proposed feature address a specific user pain point or problem? What value does it bring to the user experience or overall product? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Resource:"})," What are the resource implications (time, effort, cost) of including each feature? Are there technical limitations or dependencies that need to be considered? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"User Impact:"})," How many users will benefit from each feature? Is the feature essential for a significant portion of the user base, or is it a niche requirement? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Competitive Advantage:"})," Will the inclusion of a particular feature give the product a competitive edge in the market? How does it compare to what similar products are offering? ",(0,i.jsx)(t.em,{children:"(Not graded)"})]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Given that you are introducing a new product, the ",(0,i.jsx)(t.strong,{children:"initial scope"}),' is extremely important. By having a first set of features, you can develop the MVP, release it to users, gather feedback, and thereafter iteratively refine the product. This process aligns seamlessly with the agile methodology, where "agility" empowers teams to respond swiftly to changing market dynamics and evolving user preferences.']}),"\n",(0,i.jsx)(t.p,{children:"As you set out to prioritize features for the MVP, it is important to carry out a delicate balancing act with time. The features chosen must align harmoniously with your MVP, so that the core functionalities are addressed comprehensively. Yet, you must simultaneously stay keenly aware of time constraints."}),"\n",(0,i.jsx)(t.p,{children:"Therefore, a key part of scoping also includes planning and estimation. You can use this assignment as a chance to grow in your ability to dissect a project into actionable tasks, foresee potential challenges, allocate resources judiciously, and estimate timeframes. These skills enable project managers, product leaders, and engineers to craft realistic timelines, allocate resources optimally, and identify potential bottlenecks before they impede progress."}),"\n",(0,i.jsx)(t.p,{children:"You can consider dividing the 3-4 weeks into sprints, and use one sprint to better estimate the workload required for the next. That said, since this is a short project, strictly adhering to the sprints may impede your success. It is up to you to decide what works best for your MVP."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"List down the features that should go into the MVP (your assignment\ndeliverable). How did you decide on them? What are future features and\nexpansions you can think of?"})}),"\n",(0,i.jsx)(t.h3,{id:"business-model",children:"Business Model"}),"\n",(0,i.jsx)(t.p,{children:'In any problem, a real consideration is whether the investment in the product will be "successful". Few things impact the "success" of your product as much as pricing.'}),"\n",(0,i.jsx)(t.p,{children:'The determinant of "success" differs as the product enters different stages of growth. Most of the time, we want to maximize the profits of a product. However, there are times when a company would want to instead maximize market share, or number of users.'}),"\n",(0,i.jsx)(t.p,{children:'Depending on your goals, your pricing strategy to achieve "success" differs.'}),"\n",(0,i.jsx)(t.p,{children:"Generally, there are three ways to price:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Pricing based on costs","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much does it cost to produce and maintain your product?"}),"\n",(0,i.jsx)(t.li,{children:"What is the profit margin that you are aiming to achieve?"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["Pricing based on value","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"What benefits does this product provide to its users?"}),"\n",(0,i.jsx)(t.li,{children:'How much "value" does this provide to users?'}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["Pricing based on competition","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much do competitors price their products for?"}),"\n",(0,i.jsx)(t.li,{children:"How does your product compare?"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Coming up with a monetisation strategy is useful from the get-go. It allows you to evaluate what is the most suitable price for which stage of product you are at. For example, a consideration for a product in the early stage is market share, and also how long would it take to break even."}),"\n",(0,i.jsx)(t.p,{children:"In the digital product market today, there are multitude of ways to price. Here are some blog articles we felt were useful to helping you ideate on your pricing strategy:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.cobloom.com/blog/saas-pricing-models",children:"The Ultimate Guide To Saas Pricing Models, Strategies & Psychological Hacks"})," considers seven of the most common way digital SaaS products are priced today."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.antler.co/blog/generative-ai",children:"Mapping the Generative AI landscape"}),'\'s section on "Looking into the future—Gen-AI revenue models".']}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Note:"}),' It is possible that the currency of "success" may not always be the dollar. You are not restricted to build a product that has the dollar as its currency of success. If not the dollar, what are some other metrics you can use to consider? E.g. If you build a social chat bot, then a key metric to determine success could be the volume of messages.']}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Come up with a monetization and pricing strategy (e.g. tiers and features).\nExplain why you think this pricing strategy is suitable for your target users\nand problem space. Explain the factors that influenced your pricing decisions,\nsuch as production costs, perceived value, competition, etc. It would be\nuseful here to consider possible revenue streams of your product."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-3-artificial-intelligence-integration",children:"Phase 3: Artificial Intelligence Integration"}),"\n",(0,i.jsx)(t.h3,{id:"introduction-to-large-language-models",children:"Introduction to Large Language Models"}),"\n",(0,i.jsx)(t.p,{children:"LLMs are a type of artificial intelligence technology designed to understand and generate human-like text based on the input they receive (a prompt). These models are built using deep learning techniques, particularly a type of neural network architecture called transformers."}),"\n",(0,i.jsx)(t.p,{children:"Transformers are a class of deep learning models that have revolutionized natural language processing (NLP) tasks. They excel at handling sequential data, such as text, and have become the foundation for many state-of-the-art language models. One of the most well-known and influential transformer architectures is the Generative Pre-trained Transformer (GPT), developed by OpenAI."}),"\n",(0,i.jsx)(t.p,{children:"LLMs like GPT-3 (the third iteration of the GPT series) have billions of parameters, which are tunable components that the model learns from massive amounts of text data. These parameters allow the model to capture complex patterns and relationships within language, enabling it to perform a wide range of language-related tasks, such as:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text generation"}),": LLMs can generate coherent and contextually relevant text based on a given prompt or seed text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Language translation"}),": They can translate text from one language to another."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Summarization"}),": LLMs can produce concise summaries of longer pieces of text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Question answering"}),": They can answer questions by extracting relevant information from a given text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text classification"}),": LLMs can classify text into predefined categories or labels."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Sentiment analysis"}),": They can determine the emotional tone or sentiment expressed in a piece of text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Chatbots and conversational agents"}),": LLMs can simulate human-like conversations and provide interactive responses."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Code generation"}),": They can generate code snippets based on high-level descriptions."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The training process for these models involves exposing them to vast amounts of text data and having them predict the next word or token in a sequence. This process enables the models to learn grammar, syntax, semantics, and even some aspects of world knowledge from the data."}),"\n",(0,i.jsx)(t.p,{children:"LLMs are revolutionary as compared to traditional machine learning techniques because they can/are:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Perform more diverse and complex tasks"}),": Traditional machine learning models are typically limited to performing simple tasks, such as classification or regression. LLMs, on the other hand, can perform more complex tasks, such as text generation, translation, question answering, all through a single and flexible natural language prompt."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Readily available and accessible"}),": Many LLMs are made available through APIs, making their capabilities accessible to a broader range of developers without requiring much experience / deep expertise in machine learning. These diverse capabilities can be accessed through natural language, no learning of new syntax or documentation needed."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Trained on a vast scale of data"}),": Traditional machine learning models are typically trained on a small dataset of labeled data. This can be limiting, as it may not be representative of the real world. LLMs, on the other hand, can be trained on a massive dataset of unlabeled data. This allows them to learn the statistical relationships between words and phrases without being explicitly told what they are."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Few-shot and zero-shot learning"}),": LLMs can perform new tasks with minimal examples or even zero examples by leveraging their pre-trained knowledge and generalizing to new tasks or categories without the need for extensive task-specific training data. This capability is particularly valuable in scenarios where acquiring labeled training data is expensive, time-consuming, or impractical, whereas traditional machine learning often requires a substantial amount of labeled data for each task."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Understanding language"}),": LLMs can understand nuances in languages, including idioms, metaphors, and cultural references, which is a challenging task for traditional models."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Resources:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.databricks.com/sites/default/files/2023-06/compact-guide-to-large-language-models.pdf",children:"A Compact Guide to Large Language Models"})," by Databricks."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sausheong.com/how-chatgpt-works-af2064fc1ec4?sk=83c978daecff2adf332611b9fbafbd20",children:"How ChatGPT works"})," by Sau Sheong Chang, a Singaporean tech industry veteran and leader. This article looks under the hood to understand the basic concepts behind ChatGPT. He has kindly provided CS3216 students with free access to this article."]}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Explain how you are using LLMs in your product and why LLMs are a good\napproach to meet the product's objectives."})}),"\n",(0,i.jsx)(t.h3,{id:"prompt-engineeringdesign",children:"Prompt Engineering/Design"}),"\n",(0,i.jsx)(t.p,{children:"A prompt is a specific input or instruction given to a language model to guide its behavior and generate desired output. In the context of LLMs, such as GPT-3, a prompt serves as the initial text or question that you provide to the model to elicit a response or generate text based on that input."}),"\n",(0,i.jsx)(t.p,{children:"Prompts can take various forms depending on the task you want the LLM to perform. They can be as short as a single sentence or as long as a paragraph. The key is to provide clear and contextually relevant instructions that guide the model toward producing the desired output."}),"\n",(0,i.jsx)(t.p,{children:"As prompts are the main interface between users and the LLMs, the importance of writing a good prompt cannot be overstated. The choice of words, phrasing, and clarity of the instruction can significantly influence the quality and relevance of the generated output."}),"\n",(0,i.jsx)(t.h4,{id:"elements-of-a-prompt",children:"Elements of a Prompt"}),"\n",(0,i.jsx)(t.p,{children:"A prompt typically includes several elements that help guide the response or output generated by the LLM. Here are some common elements of a prompt:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Topic/subject"}),': The topic or theme of the prompt provides a broad area of focus for the response. For example, a prompt might ask a language model to generate text about a specific topic like "climate change" or "artificial intelligence."']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Task/goal/purpose"}),": The task or goal of the prompt specifies what kind of response is desired. Is it to persuade, inform, entertain or something else? For example, a prompt might ask a language model to generate a persuasive essay on a particular topic or to write a short story that meets certain criteria."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Target audience / perspective"}),': The target audience of the prompt identifies the intended audience for the response. For example, a prompt might ask a language model to generate text that is suitable for a general audience or for a specific age group. For example, "Respond as if you are a teacher providing advice to a student."']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Tone/style"}),": The tone or style of the prompt can influence the tone or style of the response. For example, a prompt might ask a language model to generate text that is formal, informal, humorous, or serious."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Context / background information:"})," Providing relevant background information helps set the stage for an informed response."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Length/format"}),": The length or word count of the prompt can specify the amount of content that is expected in the response. For example, a prompt might ask a language model to generate a response that is between 500 and 1000 words."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Specific instructions/guidelines"}),': The prompt may include specific instructions or guidelines that must be followed in the response. For example, a prompt might ask a language model to generate text that includes specific keywords or phrases, or that adheres to a particular format or structure. For example, "List 3 reasons why..."']}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"By including these elements, a prompt can help guide the response generated by a language model or AI system, while also providing a degree of flexibility and creativity in the output. The most effective prompts will combine several of these elements to provide enough direction without overly restricting the response. Vague or overly broad prompts can lead to unfocused and inconsistent responses."}),"\n",(0,i.jsx)(t.p,{children:"Prompt engineering is a broad topic and cannot be covered sufficiently within an assignment writeup. Here are some recommended resources for learning more about prompt engineering:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-openai-api",children:"Best practices for prompt engineering with OpenAI API"})," by OpenAI. One-pager that goes straight to the point, with examples."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/gpt-best-practices",children:"GPT best practices"})," by OpenAI. A longer list of techniques and best practices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/",children:"ChatGPT Prompt Engineering for Developers"})," by DeepLearning.AI. This video-based course takes around an hour to complete and Yangshun has written a summary of the important points: ",(0,i.jsx)(t.a,{href:"https://www.linkedin.com/feed/update/urn:li:share:7060809050602569728/",children:"Part 1"})," & ",(0,i.jsx)(t.a,{href:"https://www.linkedin.com/feed/update/urn:li:activity:7060818037679017985/",children:"Part 2"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.promptingguide.ai/",children:"Prompt Engineering Guide"})," by DAIR.AI. Well-rounded useful guide that covers Prompt Engineering and various topics related to LLMs."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/brexhq/prompt-engineering",children:"Prompt Engineering Guide"})," by Brex. Tips and tricks for working with LLMs like OpenAI's GPT-4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/prompt-engineering",children:"Prompt Engineering"})," by Cohere."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Prompt engineering is just one of the concepts relevant to using LLMs effectively. Some other important concepts include:"}),"\n",(0,i.jsx)(t.h4,{id:"tokenization",children:"Tokenization"}),"\n",(0,i.jsx)(t.p,{children:"Tokens in the context of LLMs refer to the individual elements or units of language that the model processes and generates. These tokens can be subwords, words, or characters, and they are the basic building blocks of the language that the model understands and generates."}),"\n",(0,i.jsx)(t.p,{children:"For example, in a language model that uses subwords as tokens, each subword would correspond to a specific part of a word, such as a prefix, suffix, or root. The model would then use these subwords to generate words and sentences by combining them in different ways."}),"\n",(0,i.jsx)(t.p,{children:"In contrast, a language model that uses words as tokens would process and generate complete words, rather than subwords. And a model that uses characters as tokens would work with individual characters, such as letters or digits, to generate text."}),"\n",(0,i.jsx)(t.p,{children:"The choice of token granularity can affect the performance of the language model, as well as the type of tasks it can be used for. For example, a model that uses subwords as tokens may be better at generating words and sentences that contain prefixes and suffixes, while a model that uses words as tokens may be better at generating complete sentences and paragraphs."}),"\n",(0,i.jsx)(t.p,{children:"It's worth noting that the tokenization of language can be a complex process, and different models may use different tokenization strategies depending on the specific task and the type of language they are processing."}),"\n",(0,i.jsx)(t.p,{children:"Both input and output tokens make up the total number of tokens in an API call, which affects:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"How much the API costs, as LLM providers usually charge per token."}),"\n",(0,i.jsx)(t.li,{children:"How long the API call takes, as more time is needed if there are more input tokens to process and output tokens to generate."}),"\n",(0,i.jsxs)(t.li,{children:["The functionality of the API call, since the total tokens must remain within the model's maximum threshold (e.g. 4096 tokens for ",(0,i.jsx)(t.code,{children:"gpt-3.5-turbo"}),")."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Further reading on tokens:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/gpt/managing-tokens",children:"GPT - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/tokens",children:"Tokens | Cohere"})}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"fine-tuning",children:"Fine-tuning"}),"\n",(0,i.jsx)(t.p,{children:'One of the techniques to improve prompt design is called "few-shot prompting", which is to provide examples within the prompt. With fine-tuning, examples (training data) can be provided to a model outside of the prompts and the model is being "fine-tuned". Prompts to a fine-tuned model will make use of the training data when generating output. These fine-tuned modules result in:'}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Better results than prompt design."}),"\n",(0,i.jsx)(t.li,{children:"Ability to train on more examples than can fit in a prompt."}),"\n",(0,i.jsx)(t.li,{children:"Token savings due to shorter prompts."}),"\n",(0,i.jsx)(t.li,{children:"Lower latency requests as there are fewer tokens to process."}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Fine-tuning is an improvement over few-shot learning as many more examples can be provided and don't count towards prompt tokens. Once a model has been fine-tuned, you won't need to provide as many examples in the prompt. This results in faster and cheaper requests."}),"\n",(0,i.jsx)(t.p,{children:"In general, fine-tuning involves the following steps:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"Prepare and upload training data."}),"\n",(0,i.jsx)(t.li,{children:"Train a new fine-tuned model."}),"\n",(0,i.jsx)(t.li,{children:"Use your fine-tuned model."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Fine-tuning is specific to models and not every LLM API offers the functionality. As of Aug 2023, OpenAI allows fine-tuning for ",(0,i.jsx)(t.code,{children:"gpt-3.5-turbo"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Further reading on fine-tuning:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/fine-tuning",children:"Fine-tuning - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://boldercloud.com.au/gpt-3-5-fine-tuning-unlock-the-true-potential-with-this-comprehensive-guide/",children:"GPT-3.5 Fine Tuning: Unlock the True Potential with This Comprehensive Guide"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hackernoon.com/the-challenges-costs-and-considerations-of-building-or-fine-tuning-an-llm",children:"The Challenges, Costs, and Considerations of Building or Fine-Tuning an LLM"})}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Give two to three examples of prompts you used and explain how you designed\nthem to be effective. What techniques did you use to improve the effectiveness\nof your prompts?"})}),"\n",(0,i.jsx)(t.h3,{id:"using-the-right-model-for-the-job",children:"Using the Right Model for the Job"}),"\n",(0,i.jsx)(t.p,{children:"Not all models are built equally. Each model has its own advantages, limitations, and customization parameters. The key is to find the most suitable model for your application."}),"\n",(0,i.jsx)(t.h4,{id:"popular-llms-and-providers",children:"Popular LLMs and Providers"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/overview",children:"OpenAI"})}),": OpenAI is one of the pioneers in the field of LLMs and needs no further introduction. They have released a number of LLMs, including GPT-3 and GPT-4. OpenAI's LLMs are known for their large size and their ability to generate realistic and creative text."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://cohere.com/models/command",children:"Command"})," by ",(0,i.jsx)(t.a,{href:"https://cohere.com/",children:"Cohere"})]}),": Cohere develops an LLM called Command and their platform offers a huge range of services that can be viewed as a batteries-included version of OpenAI API."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://ai.meta.com/llama/",children:"Llama 2"})," by ",(0,i.jsx)(t.a,{href:"https://ai.meta.com/",children:"Meta AI"})]}),": Open source LLM by Meta that's free to use. There's no official hosted API available so if you want to use it you will need to host it yourself. Check out ",(0,i.jsx)(t.a,{href:"https://webllm.mlc.ai/",children:"Web LLM"})," for a version that runs in the browser."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://huggingface.co/",children:"Hugging Face"})}),": Hugging Face is a community-driven platform for LLMs. They provide a number of tools and resources for developers who want to use LLMs. Hugging Face's LLMs are known for their diversity and their availability."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://bard.google.com/",children:"Bard"})," by ",(0,i.jsx)(t.a,{href:"https://ai.google/",children:"Google AI"})]}),": While ChatGPT's data is only up till September 2021 (using GPT-3.5), Bard which is a chatbot by Google uses PaLM 2 and is based on real-time current events pulled from Google Search. However, Bard API access is still in beta and ",(0,i.jsx)(t.a,{href:"https://www.cloudbooklet.com/googles-bard-api-key/",children:"requires a Google Cloud project"}),"."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.strong,{children:[(0,i.jsx)(t.a,{href:"https://claude.ai/",children:"Claude"})," by ",(0,i.jsx)(t.a,{href:"https://www.anthropic.com/",children:"Anthropic"})]}),": Claude is an LLM developed by Anthropic, a company that is focused on developing safe and beneficial artificial intelligence. As of Aug 2023, the API is not yet generally available."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://sdk.vercel.ai/",children:"Vercel AI Playground"})," allows you to compare output of different models by the various providers using the same prompt. Super handy!"]}),"\n",(0,i.jsx)(t.p,{children:"When choosing LLMs and providers, it is important to consider your specific needs and requirements. Some factors to consider include the type and size of the training data, the type of applications you want to build, context window size (maximum tokens allowed), and the price per token."}),"\n",(0,i.jsxs)(t.p,{children:["Certain LLMs are more suited for certain tasks from specific domains. If your app is dealing with code like GitHub Co-pilot, you may find that ",(0,i.jsx)(t.a,{href:"https://ai.meta.com/blog/code-llama-large-language-model-coding/",children:"Code Llama"})," and ",(0,i.jsx)(t.a,{href:"https://huggingface.co/WizardLM/WizardCoder-Python-34B-V1.0",children:"WizardCoder"})," is more suited for the job. If you require real time data/knowledge for your output, GPT-3.5 might not be the best choice because the data is not updated since September 2021. It's important to select the model that is the most suitable for your product!"]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsx)(t.p,{children:"Chances are, the LLM API you're using isn't free. However, the costs should be quite low for an assignment's usage volume. If you're facing difficulties gaining access to the APIs, please email the teaching staff."})}),"\n",(0,i.jsx)(t.h4,{id:"model-settings",children:"Model Settings"}),"\n",(0,i.jsx)(t.p,{children:"Beyond prompt design, most LLM models also provide the following settings to allow for more control over the output:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Max tokens"}),": The maximum number of tokens to generate."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Temperature"}),": Temperature is a hyperparameter in language models that controls the creativity and diversity of the generated text. A high temperature means that the model is less confident in its predictions, and will therefore generate text that is more creative and diverse, but may also be less accurate and random. A low temperature means that the model is more confident in its predictions, and will therefore generate text that is more accurate and consistent. The best temperature setting will depend on the specific application. For example, if you are using a language model to generate text for a news article, you would want to use a low temperature to ensure that the output is factually accurate and grammatically correct. However, if you are using a language model to generate creative text, such as poetry or fiction, you might want to use a higher temperature to allow for more creativity and diversity."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Top-P"}),": Top-P limits the probability mass that is considered when sampling. For example, if you set Top-P to 0.75, then the model will only consider tokens whose probability is at least 75%. This can help to reduce the randomness of the output and make it more likely that the model will generate text that is relevant to the prompt. It is recommended to customize either temperature or Top-P, not both."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Frequency/presence penalties"}),": Coefficients that penalize tokens based on how much / whether they exist in the text to reduce the likelihood that they show up again."]}),"\n"]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Justify your choice of LLM and provider by comparing it against at least two\nalternatives. Explain why the one you have chosen best fulfills your needs.\nElaborate on your choice of model parameters."})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Evaluating effectiveness"})}),"\n",(0,i.jsx)(t.p,{children:"Once the LLM integrations are up and running, you may want to set up an evaluation pipeline to sanity check whether your fine-tuning or prompt engineering efforts are working across multiple test examples. There are two broad classes of Natural Language Generation Metrics:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"N-gram-based"})," metrics measure word or token overlap against the reference. E.g., BLEU, METEOR."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Model-based"})," metrics use a neural model to measure similarity against the reference. E.g., BLEURT, BERTScore."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"N-gram-based metrics are more appropriate when you expect precise wording, and model-based typically allows for more open-ended generation. Different metrics tell us about different aspects of natural language generation and there's typically no single correct evaluation metric. However, there are metrics traditionally associated with NLP tasks. E.g., BLEU for Translation and ROUGE for Summarisation. It's safe enough to use the default metric for your specific task as there should be available implementations in your preferred language. Note that it's possible to have multiple correct references for a single test sentence."}),"\n",(0,i.jsx)(t.p,{children:"Further Reading:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://web.stanford.edu/class/archive/cs/cs224n/cs224n.1224/slides/cs224n-2022-lecture12-generation-final.pdf",children:"Neural Language Generation"}),", Chris Manning, Stanford: Slides 51 to 65"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2106.03706",children:"A Comprehensive Assessment of Dialog Evaluation Metrics"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2211.09110",children:"Holistic Evaluation of Language Models"}),", Percy Liang et al. (2023), Stanford NLP Group"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://arxiv.org/abs/2308.10792",children:"Instruction Tuning for Large Language Models: A Survey"})}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"other-resources",children:"Other Resources"}),"\n",(0,i.jsx)(t.h4,{id:"courses-and-tutorials",children:"Courses and Tutorials"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://deeplearning.ai/",children:"DeepLearning.AI"})," by Andrew Ng provides a ",(0,i.jsx)(t.a,{href:"https://www.deeplearning.ai/short-courses/",children:"series of short practical-focused courses on generative AI"})," if you prefer video lesson style learning that includes some hands-on exercises using Jupyter Notebook."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sausheong.com/creating-a-private-qa-application-over-local-documents-b7710e067e7f?sk=0d1b19eccc5fb37af89f5d4c3001c3bc",children:"Creating a private QA over local documents application using Llama-2"})," by Sau Sheong Chang: How to create a private QA application that runs on your laptop for your answering questions over your documents."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"tools",children:"Tools"}),"\n",(0,i.jsx)(t.p,{children:"Using LLMs comes with some inconveniences such as unstructured output, preserving context and memory across completions, and a huge amount of boilerplate code. Here are some tools that can help during development with LLMs:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.langchain.com/",children:"LangChain"}),": LangChain is a powerful tool that can be used to build a wide variety of applications that use LLMs. It has abstractions to achieve common LLM operations quickly such as loading/transforming/storing data, sequential operations on data, remembering previous interactions, and acting on LLM output."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://sdk.vercel.ai/docs",children:"Vercel AI SDK"}),": An open source library designed to help developers build AI-powered user interfaces in JavaScript and TypeScript. It makes building streaming-based AI chat user interfaces effortless."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://microsoft.github.io/TypeChat/",children:"TypeChat"}),": TypeChat helps get well-typed and structured responses from LLMs without the need to parse the output yourself."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://webllm.mlc.ai/",children:"Web LLM"}),": This project brings large-language model and LLM-based chatbot to web browsers, which makes using LLMs free! However, there might be certain technical requirements for devices."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/jerryjliu/llama_index",children:"LlamaIndex"}),': A "data framework" to help you build LLM apps by providing data connectors to ingest existing data sources and formats (APIs, PDFs, docs, SQL), retrieval/query interfaces over your data, and more.']}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The following platforms improve the experience of using LLMs in production. They might be overkill for your assignment/projects but mentioned here for your consideration:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.langchain.com/langsmith",children:"LangSmith"}),": By the creators of LangChain, LangSmith helps you visualize, debug, and improve your LLM apps."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://humanloop.com/",children:"Humanloop"}),": A platform that empowers teams to build reliable and performant AI systems by providing monitoring, A/B testing, a collaborative prompt workspace, private data storage, and fine-tuning."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"open-source-llms",children:"Open Source LLMs"}),"\n",(0,i.jsxs)(t.p,{children:["Platforms like ",(0,i.jsx)(t.a,{href:"https://huggingface.co/",children:"Hugging Face"})," offer support for popular open source language models born out of community efforts to recreate existing proprietary LLMs provided by miscellaneous companies via APIs or software. These open source LLMs are easily ",(0,i.jsx)(t.a,{href:"#fine-tuning",children:"fine-tunable"})," and lightweight. While not as powerful as commercially available LLMs, they offer a free, discounted, yet surprisingly expressive experience in terms of text generation and reasoning capabilities. Here are a few popular models and associated guides to fine-tune them:"]}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{align:"left",children:(0,i.jsx)(t.strong,{children:"Model"})}),(0,i.jsx)(t.th,{align:"left",children:(0,i.jsx)(t.strong,{children:"Resources"})})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Llama 2"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/facebookresearch/llama",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://towardsdatascience.com/fine-tune-your-own-llama-2-model-in-a-colab-notebook-df9823a04a32",children:"Fine-tuning guide"}),", ",(0,i.jsx)(t.a,{href:"https://scontent-xsp1-1.xx.fbcdn.net/v/t39.2365-6/10000000_662098952474184_2584067087619170692_n.pdf?_nc_cat=105&ccb=1-7&_nc_sid=3c67a6&_nc_ohc=bGkSwJy8Xa4AX9SX9XW&_nc_ht=scontent-xsp1-1.xx&oh=00_AfC2wTMNDOi-1j5BHP7STSfurMRMQQANleVSDe7vcMVBOQ&oe=64FDAEFF",children:"Paper"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Vicuna-13B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/lm-sys/FastChat",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://docs.ray.io/en/master/train/examples/lightning/vicuna_13b_lightning_deepspeed_fine-tune.html",children:"Fine-tuning guide"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"Alpaca"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/tloen/alpaca-lora/tree/main",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://www.mlexpert.io/machine-learning/tutorials/alpaca-fine-tuning",children:"Fine-tuning guide"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"MPT-7B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/mosaicml/llm-foundry",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://www.youtube.com/watch?v=3de0Utr9XnI",children:"Fine-tuning guide"}),", ",(0,i.jsx)(t.a,{href:"https://huggingface.co/mosaicml/mpt-7b",children:"Documentation"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{align:"left",children:"GPT-J-6B"}),(0,i.jsxs)(t.td,{align:"left",children:[(0,i.jsx)(t.a,{href:"https://github.com/kingoflolz/mesh-transformer-jax#gpt-j-6b",children:"GitHub"}),", ",(0,i.jsx)(t.a,{href:"https://huggingface.co/docs/transformers/model_doc/gptj",children:"Fine-tuning guide 1"}),", ",(0,i.jsx)(t.a,{href:"https://betterprogramming.pub/fine-tuning-gpt-j-6b-on-google-colab-or-equivalent-desktop-or-server-gpu-b6dc849cb205",children:"Fine-tuning guide 2"})]})]})]})]}),"\n",(0,i.jsxs)(t.p,{children:["It is recommended that users interested in fine-tuning such models have access high performance compute clusters with available GPUs (suggestions: NVIDIA RTX 3090, NVIDIA RTX4090, NVIDIA H100 Tensor Core, etc). Alternatively, you can look into online cloud compute platforms like ",(0,i.jsx)(t.a,{href:"https://lambdalabs.com/",children:"Lambda Labs"}),", ",(0,i.jsx)(t.a,{href:"https://www.paperspace.com/",children:"Paperspace"}),", or ",(0,i.jsx)(t.a,{href:"https://colab.research.google.com/signup",children:"Google Colab Pro/Pro+"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["You can also apply for free cloud credits through Google Cloud Platform's ",(0,i.jsx)(t.a,{href:"https://cloud.google.com/edu/researchers",children:"Research and Education program"})," (however, no guarantees of definitely getting it since it's application-based, but try your luck!)."]}),"\n",(0,i.jsx)(t.h2,{id:"phase-4-design",children:"Phase 4: Design"}),"\n",(0,i.jsx)(t.p,{children:"Design here refers to many things: branding, technology/engineering, and the product."}),"\n",(0,i.jsx)(t.h3,{id:"branding-your-product",children:"Branding your Product"}),"\n",(0,i.jsx)(t.p,{children:"Every product has a name. This name is how people find, refer, and remember the product. Most products have logos. This logo is how people recognize and associate relationships with the product. Names, logos, color schemes, fonts, etc. of a product or company collectively form a persona to which people can relate and associate. This persona is exactly a brand."}),"\n",(0,i.jsx)(t.p,{children:"A brand encompasses the essence of a company: its values, promises, and the emotional connection it establishes with its audience. With the vast number of companies and products in today's competitive business landscape, these sentiments are almost always never accidental, rather carefully crafted and tested over hundreds of iterations."}),"\n",(0,i.jsx)(t.p,{children:"Think McDonald's golden arches. It transcends language barriers and cultural differences. They embody the company's promise of consistency, quick service, and affordability. When people see those golden arches, they immediately associate them with familiar tastes, convenience, and an entire spectrum of shared experiences. You yourself would probably remember memories of your first date, gathering with friends, or late night supper when crunching due assignments. In this aspect, McDonald's golden arches are more than just a logo; they capture feelings, stories, and memories."}),"\n",(0,i.jsxs)(t.p,{children:["Some brands even become linguistic cues. When you want to find out about something, you'd ",(0,i.jsx)(t.em,{children:"google"})," it. If you missed the bus and train, you'd ",(0,i.jsx)(t.em,{children:"grab"})," to the office. If you want to express your frustration with Ruby on Rails or Angular, you'd ",(0,i.jsx)(t.em,{children:"tweet"})," about it. Oh, look; this place is so picturesque, it's ",(0,i.jsx)(t.em,{children:"instagrammable"}),'! And the example goes even deeper with cultural contexts. In Indonesia, people colloquially refer to laundry detergents as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Rinso",children:"rinso"}),'" rather than the dictionary translation ',(0,i.jsx)(t.em,{children:"deterjen pakaian"}),', or baby diapers as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Pampers",children:"pampers"}),'" rather than ',(0,i.jsx)(t.em,{children:"popok bayi"}),'. In Singapore, people colloquially refer to instant noodles as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Maggi",children:"maggi"}),' mee", or recently, video conferencing as "',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Zoom_Video_Communications",children:"zoom"}),' calls". The list goes on: ',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Hook-and-loop_fastener",children:"velcros"})," (hook-and-loop fasteners), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Aspirin",children:"aspirin"})," (acetylsalicylic acid), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Xerox",children:"xerox"}),"ing (photocopying), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Scotch_Tape",children:"scotch tapes"})," (adhesive tapes), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Post-it_Note",children:"post-it notes"})," (sticky notes), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Band-Aid",children:"band-aids"})," (bandages), ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Q-Tip",children:"q-tips"})," (cotton buds), etc. Notably, the brands that form these verbs or nouns are often recognized as the standard of their respective product categories. This is the power of a good brand. They not only evoke feelings and trust, but also bring revenues."]}),"\n",(0,i.jsx)(t.p,{children:"These reasons are why it is important to build a good brand. Even choosing names is often tedious. Think about:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Length of the name"}),". Will it be too hard to remember?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Reproducibility of the name by spelling"}),'. If A were to hear B say "I use Whatchamacallit to build this website," would A be able to type it and find it on search engines?']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Domain name availability"}),". Some may even get clever with ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Domain_hack",children:"domain hacks"}),", e.g., ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Delicious_(website)",children:"del.icio.us"}),", but can it be easily shared verbally?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Social handles availability"}),". Is @mynextstartup available on major social media sites, e.g., Instagram, X, Threads, TikTok, etc.? If you're not quick to claim the handle, adversaries may claim it first, and you might have to either buy it from them, or file a dispute."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Similarities with other brands"}),". Could people think your product Zwitter is just a cheap clone of Twitter?"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Cultural references"}),'. Did you know the toothpaste brand Darlie was originally known as Darkie? It was changed in 1989 due to "darky" or "darkie" being considered a racial slur.']}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Possibility of being caught in web filters"}),'. In April 1998, "shitakemushrooms.com" was blocked by DNS filters because it contained the word "shit". This is known as the ',(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Scunthorpe_problem",children:"Scunthorpe problem"}),'. If you want to see more examples, check out the article "',(0,i.jsx)(t.a,{href:"https://www.boredpanda.com/worst-domain-names/",children:"30 Unintentionally Inappropriate Domain Names"}),'".']}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["These are just a fraction of factors that one should think about when choosing names. Different factors apply when you are choosing logos and color schemes. Think about how they'd look if they are printed on different materials. Do the logos have any resemblance to a potentially derogatory subject, seen from any angles? How easy is it to be reproduced by hand? Can it be a vector (so that it is scalable on different media)? How'd it look if it was black-and-white, or against a busy background? Think about ",(0,i.jsx)(t.a,{href:"https://commons.wikimedia.org/wiki/File:Apple_first_logo.png",children:"Apple's first logo"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["It always pays off to build a relatively strong brand identity when you enter the market, because rebrands can be a nightmare. Recently, ",(0,i.jsx)(t.a,{href:"https://www.nytimes.com/2023/07/24/technology/twitter-x-elon-musk.html",children:"Twitter was renamed to X"}),", and the platform is visioned to become a superapp. In 2020, ",(0,i.jsx)(t.a,{href:"https://vercel.com/blog/zeit-is-now-vercel",children:"ZEIT was renamed to Vercel"}),". In 2021, The Facebook Company was renamed to Meta. In every rebrand, companies (usually) pay the price: mockery, money to pay for taken domain names, and customer adaptation. ",(0,i.jsx)(t.a,{href:"https://www.thebrandingjournal.com/2015/05/what-to-learn-from-tropicanas-packaging-redesign-failure/",children:"Tropicana was probably the best known example of a bad redesign"}),". Notably, not all rebrands are terrible. Some may even resurrect a dying business. The challenge comes from the fact that there is an existing identity as a comparison, and transition introduces major friction."]}),"\n",(0,i.jsxs)(t.p,{children:["There are many logo generators out there, but after reading this far, you'd probably realize that a good brand makes for a good logo; it is not standalone, it is an integral part of a brand. To make a good brand identity (name, logo, fonts, color schemes, etc.), you should reflect on the persona that you wish your company or product to convey to your users, then work forwards. Use ",(0,i.jsx)(t.a,{href:"https://www.pinterest.com/",children:"Pinterest"}),", ",(0,i.jsx)(t.a,{href:"https://dribbble.com/",children:"Dribbble"}),", ",(0,i.jsx)(t.a,{href:"https://www.midjourney.com/",children:"Midjourney"}),", ",(0,i.jsx)(t.a,{href:"https://coolors.co/",children:"Coolors"}),", ",(0,i.jsx)(t.a,{href:"https://fonts.google.com/",children:"Google Fonts"}),", or even the many logo generators to brainstorm for inspirations. Then choose a comfortable medium to sketch, e.g., pen and paper, Figma, Microsoft Paint, etc., to stitch everything together. Test your brand identity prototypes with your friends and family, and see if they can guess what app you're building just by seeing your logo."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Notably, a good brand identity requires tons of research and testing. Schools\nof design talk about branding for one whole semester. Due to the density of\nthis assignment, you are expected to build a decent enough brand identity,\ni.e., with proper considerations. You shouldn't dwell too long on this\nmilestone. It is maybe even best to first build your MVP with a codename, only\nafter then collaboratively think about the best logo to slap on your app. If\nyou did well enough, you may even earn brownie points for coolness!"})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Come up with a product name and create an attractive logo. Explain the meaning\nbehind the name, the alternatives you've considered, and why this was chosen."})}),"\n",(0,i.jsx)(t.h3,{id:"technology-stack",children:"Technology Stack"}),"\n",(0,i.jsxs)(t.p,{children:["A functional software product is backed by a multitude of technologies, each supporting the attainment of the ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Business_logic",children:"business logic"}),". Together, these technologies are collectively described as a technology stack, or tech stack. Notably, your users wouldn't really know about the inner machinations of your software. However, choosing the wrong tech stack could backfire your development in the long run."]}),"\n",(0,i.jsxs)(t.p,{children:['One factor that most people consider is popularity. It\'s hard to keep track of the latest libraries and frameworks because they keep coming. Newer technologies usually get the most attention because they attempt to fix the irks of the current "standard" technologies. For example, ',(0,i.jsx)(t.a,{href:"https://svelte.dev/",children:"Svelte"})," syntax is easier to read than ",(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"}),", ",(0,i.jsx)(t.a,{href:"https://deno.com/",children:"Deno"})," has a better package management system than ",(0,i.jsx)(t.a,{href:"https://nodejs.org/en",children:"Node"}),", or ",(0,i.jsx)(t.a,{href:"https://esbuild.github.io/",children:"esbuild"})," is astronomically faster than ",(0,i.jsx)(t.a,{href:"https://webpack.js.org/",children:"webpack"}),". Notably, the newer the technologies are, the lesser the community support will be compared to the ones that have been around for the longest time. Some may not even be battle-tested enough for all edge use cases. Some gained headlines for a while, then fell short and inevitably forgotten. You can see how Stack Overflow compared how some web technologies stood up to their hype in their ",(0,i.jsx)(t.a,{href:"https://survey.stackoverflow.co/2023/#technology-admired-and-desired",children:"2023 survey here"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"While it may be tempting to live on the edge and try exciting new technologies, one should be prudent with their choice. Consider the following:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Your team's familiarity with the technologies."}),"\n",(0,i.jsx)(t.li,{children:"How the technologies scale with your users and (potentially increasing) business logic."}),"\n",(0,i.jsx)(t.li,{children:"The maturity of the ecosystem around the technologies; can you find help if you face a mysterious bug?"}),"\n",(0,i.jsx)(t.li,{children:"The credentials of the backers of the technologies; will the maintainer abandon this framework in near future?"}),"\n",(0,i.jsx)(t.li,{children:"Your reliance on the technology; if you decide to pivot in the future, how easy or difficult will it be? Choosing a tech stack is no different than choosing the right vendor for outsourcing a tender in your company."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["Generally, it's better to just choose one with which most team members are familiar, and start building ",(0,i.jsx)(t.strong,{children:"and failing fast"}),". Of course with any advice, exercise your own wisdom. The Browser Company decided to build the Windows version of ",(0,i.jsx)(t.a,{href:"https://arc.net/",children:"Arc Browser"})," by extending the (as at time of writing, rather barebone) Swift compiler for Windows to support ",(0,i.jsx)(t.a,{href:"https://developer.apple.com/xcode/swiftui/",children:"SwiftUI"}),", instead of going with the most obvious choice of ",(0,i.jsx)(t.a,{href:"https://electronjs.org/",children:"Electron"}),". You can watch the CTO ",(0,i.jsx)(t.a,{href:"https://www.youtube.com/watch?v=Xa_fNuaSE_I",children:"talk about it here"}),", and see why they chose to challenge the status quo ",(0,i.jsx)(t.em,{children:"for their use case"}),"."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsxs)(t.p,{children:["Remember that your users won't probably care about your tech stack. They won't know if your codebase hails a tribute to ",(0,i.jsx)(t.a,{href:"https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html",children:"Robert C. Martin's Clean Architecture"})," or looks like rotten spaghetti. With every choice is a list of trade-offs. What you compromise today is what you'll pay tomorrow. This is what is known as a ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Technical_debt",children:"technical debt"}),"."]})}),"\n",(0,i.jsx)(t.p,{children:"Some of the stacks that you may wish to consider revolve around the following domains."}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Front end"}),": This is what your users will interface with. Examples: React, Vue.js, Next.js, Svelte, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Styling"}),": These libraries make it easier to include UI elements, e.g., buttons, menus, cards, etc., in your app. Different libraries have different customisation flexibilities. Depending on your design language, you might not even need any styling libraries and just build everything from scratch! Examples: Tailwind CSS/UI, Bootstrap, Bulma, MUI, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Data persistence:"})," SQL or NoSQL? SQL is used to manage relational databases, e.g., ",(0,i.jsx)(t.a,{href:"https://www.mysql.com/",children:"MySQL"}),", ",(0,i.jsx)(t.a,{href:"https://www.postgresql.org/",children:"PostgreSQL"}),", etc. NoSQL is essentially anything that isn't SQL, e.g., ",(0,i.jsx)(t.a,{href:"https://www.mongodb.com/",children:"MongoDB"}),", ",(0,i.jsx)(t.a,{href:"https://redis.io/",children:"Redis"}),", etc. You may even use a higher level database systems like ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/docs/database",children:"Firebase Realtime Database"})," or ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/docs/firestore",children:"Cloud Firestore"}),", ",(0,i.jsx)(t.a,{href:"https://supabase.com/",children:"Supabase"}),", or couple your choice of database system with ",(0,i.jsx)(t.a,{href:"https://graphql.org/",children:"GraphQL"})," for easier queries. Remember that the choice of database system and how it's structured almost directly dictates the scalability and performance of your app. Depending on your schema, it may make it hard to represent some models, or slow to query. Migrations aren't always reversible and are almost always painful. See below note."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Authentication"}),": Most apps will have some sort of user account system. OAuth is a great choice due to ease of integration and ease of use without the need for entering emails and passwords. Some sensitive apps may choose to roll their own authentication system (think banks, government systems). Self-rolling authentication gives you more control, but outsourcing it to a (reputable) third-party service may give you assurance of security because it's probably been battle-tested and regularly maintained. Examples: self-rolled, Firebase Authentication, Auth0, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Back end server"}),": This is where most, if not all, of your business logic will live. Think of the front end client as the shell, and back end server as the core of your app. This server communicates with everyone (third-party APIs, database systems, caching servers, etc.) and serves anything that the client needs. Examples: Go, Django, Ruby on Rails, Express, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Hosting"}),": After everything is built on your local computer, you need to deploy it somewhere so that your software is available to everyone. You'd engage with these platforms to deploy your app. Some are as simple as providing you with a CDN to host your static files, e.g., ",(0,i.jsx)(t.a,{href:"https://www.cloudflare.com/",children:"Cloudflare"}),", ",(0,i.jsx)(t.a,{href:"https://www.netlify.com/",children:"Netlify"}),", ",(0,i.jsx)(t.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),". Some are a little more batteries-included, providing you with cloud functions, authentication services, and database systems, e.g., ",(0,i.jsx)(t.a,{href:"https://vercel.com/",children:"Vercel"}),", ",(0,i.jsx)(t.a,{href:"https://firebase.google.com/",children:"Firebase"}),". Some literally give you only a bunch of remote servers, e.g., ",(0,i.jsx)(t.a,{href:"https://cloud.google.com/",children:"Google Cloud"}),", ",(0,i.jsx)(t.a,{href:"https://aws.amazon.com/",children:"Amazon Web Services"}),", etc. Notably, it is a trade-off between complexity, flexibility, and cost."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Continuous integration, delivery, and deployment platforms"}),": These platforms help you prepare your code for release (continuous integration) and deploy to production (continuous deployment), all in an automated fashion to increase productivity. They can also help your team spot errors asynchronously, and ensure consistency when deploying. Depending on your use case, you might or might not benefit from one. Examples: CircleCI, Travis CI, GitHub Actions, etc."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Miscellaneous services"}),": Your app may need some domain-specific technologies, e.g., LLM-backed services (see below), maps (",(0,i.jsx)(t.a,{href:"https://mapsplatform.google.com/",children:"Google Maps Platform"}),", ",(0,i.jsx)(t.a,{href:"https://wego.here.com/",children:"HERE WeGo"}),", ",(0,i.jsx)(t.a,{href:"https://www.openstreetmap.org/",children:"OpenStreetMap"}),", etc.), search engines (",(0,i.jsx)(t.a,{href:"https://www.algolia.com/",children:"Algolia"}),", ",(0,i.jsx)(t.a,{href:"https://www.elastic.co/elasticsearch",children:"Elasticsearch"}),", etc.), computer vision (",(0,i.jsx)(t.a,{href:"https://opencv.org/",children:"OpenCV"}),", ",(0,i.jsx)(t.a,{href:"https://www.tensorflow.org/graphics",children:"TensorFlow Graphics"}),", etc.), etc. Spend some time to take stock of what your app will need, and see your options out there. Remember, the less code you need to write, the faster you will be able to launch."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"If some of the services you choose are not free, you might need to pool all operational costs together and consider them when deciding on your business model. Notably, your revenue must cover all operational costs for your business to be sustainable, even way before it's profitable."}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Migration is almost always not fun. Migrations are usually intended to keep the same behavior, so often no business logic (features) changes. It is a really expensive and risky attempt, because with every change is a disturbance of stability. With usually no change in features, increased risk of disturbed stability and data integrity, and a huge investment of engineering hours, migrations are one of the most dreaded operations in software engineering. Therefore, any decisions that minimize the need for migrations is often favorable."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Explain choice of technologies for the following: UI, Database, Web Server,\nHosting, Authentication, etc. and the alternatives you've considered."})}),"\n",(0,i.jsx)(t.h3,{id:"user-experience",children:"User Experience"}),"\n",(0,i.jsx)(t.p,{children:"User experience (UX) is very different from the user interface (UI). A pretty UI does not guarantee a good UX at all. Sometimes, a cool-looking UI can be a disaster because of poor UX. Sites like Craigslist still have a ton of daily active users despite their UI! \uD83D\uDE35"}),"\n",(0,i.jsx)(t.p,{children:"UX encompasses all aspects of the end-user's interaction with a product. There are many components that comprise a good UX, but minimally the application should allow the users to do what they want with minimal fuss. UX goes far beyond giving users what they say they want or providing a checklist of features. In order to achieve a high-quality user experience in your application, careful thought must be put into its functionality, interaction design and interface design."}),"\n",(0,i.jsxs)(t.p,{children:["If the product is a TV, UX starts from how the product is placed on the shelves at the store, how the packaging allows for the customer to bring it to the cashier, whether it can fit in someone's car trunk, how far one should read through the manual to assemble the TV, up until the TV breaks down, repaired, or even recycled. Notably, UX differs from UI because UX is not limited to software products. Don Norman and Jakob Nielsen, two of the forefathers of UX, ",(0,i.jsx)(t.a,{href:"https://www.nngroup.com/articles/definition-user-experience/",children:"defined UX, in contrast to UI, very well here"}),". The Nielsen Norman Group's website also provides many resources about UX that you may wish to check out."]}),"\n",(0,i.jsxs)(t.p,{children:["UX is about research. It requires understanding of your user. Not just when they are using your product, but also the environments around the time of usage, the different agents surrounding the product and its implications, and ultimately their objectives. If you are building an app that is used in rowdy buses or busy places, can your users tap on those small buttons (this is known as a ",(0,i.jsx)(t.a,{href:"https://aeldata.com/situational-disabilities",children:"situational disability"}),")? If you are building an app for teachers to input grades, how do you think it will impact the parents of the teachers, and the students (they are known as ",(0,i.jsx)(t.a,{href:"http://www.diva-portal.org/smash/get/diva2:327497/FULLTEXT01.pdf",children:"primary, secondary, and tertiary users"}),")? There are no right questions, just as there are no right answers. Talk to your users, and empathize with their objectives. Return to the drawing board and devise a prototype. Test it with them, collect feedback, be surprised, and iterate. Just like software engineering, product development is an iterative (read: agile) process."]}),"\n",(0,i.jsx)(u.UW,{type:"warning",children:(0,i.jsxs)(t.p,{children:["You are not your own user. Repeat it. ",(0,i.jsx)(t.strong,{children:"You are not your own user"}),". It\ndoesn't matter if you think you fall into the target audience of your own app,\nyou are still not, and never will be, your own user. It is therefore important\nto distance oneself when researching user behaviors: be ready for surprises,\nand be humble to counterintuitions. If you're interested, the field that\nheavily studies these subjects in the context of computers is called\n",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction",children:"Human-Computer Interaction\n(HCI)"}),"."]})}),"\n",(0,i.jsx)(t.p,{children:"UX is not just the job of the UI designer. Just like a good UI, you will know if an application's UX is good or bad. Any team member can contribute to your UX design by using it and providing feedback and suggestions. Ask your friends to use it as well to gather more feedback and ideas."}),"\n",(0,i.jsxs)(t.p,{children:["You can probably guess now that UX is somewhat related to branding. Dictions that prefer colloquialism over specificity may convey a relaxed, friendly sentiment (",(0,i.jsx)(t.a,{href:"https://medium.com/life-at-go-jek/design-with-love-the-creative-process-behind-go-jek-redesign-d0e2338e7f7a",children:"In 2018, Gojek revamped their app to relate better to the locals"}),", and ",(0,i.jsx)(t.a,{href:"https://youtu.be/RlQEoJaLQRA",children:"Don Norman talked about designs that make people happy"}),"). Smooth transitions and tidy designs may convey a sense of stability and trust (known as the ",(0,i.jsx)(t.a,{href:"https://www.nngroup.com/articles/aesthetic-usability-effect/",children:"aesthetic-usability effect"}),"). Animations and choice of materials (gradients, acrylic, shadows, elevations, etc.) give a sense of space and control, that the user knows the relationships between elements in the UI. You can probably now appreciate how most, if not all, UI decisions inherently stem from UX considerations."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"It is implored that you can now appreciate how expensive a UX research process can be. But don't sweat too much—generally, it is better to launch with decent coverage and constructive outlook, than supposedly exhaustive coverage but obstinate outlook."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Describe three common workflows within your application. Explain why those\nworkflows were chosen over alternatives with regards to improving the user's\noverall experience in the context of an AI application."})}),"\n",(0,i.jsx)(t.h3,{id:"user-interface",children:"User Interface"}),"\n",(0,i.jsx)(t.p,{children:"UI is the space where interactions between humans and computers occur to achieve their objectives. You'd probably already be familiar with some of the concepts of UI from Assignment 1. But UI design is more than just typography or color theory."}),"\n",(0,i.jsx)(t.p,{children:"Something unique in this assignment is the incorporation of AI technologies in your app. Frankly, this is a rather new development, and there are no hard and fast rules in designing interfaces for AI apps. However, there are some aspects that one should consider when incorporating intelligence in their app."}),"\n",(0,i.jsx)(t.p,{children:"Ethics is a big deal when it comes to design in general, not just apps. Since AI is an emerging technology, you should be transparent about what your novel technology can and cannot do. Provide third-party sources where possible, hedge, or even admit if some actions are not possible. This eventually influences the claims and endorsements you will make in your app. It is even a bigger stake if your app deals with sensitive fields like health or engineering, because an overconfident recommendation is as good as a misjudgement. For every recommendation, ensure that the user eventually has control over their decisions. Don't assume, automate, and commit critical actions on the user's behalf; rather give them control to accept, reject, and/or suggest feedback on your recommendation. For every intelligent UI element or feature you choose to develop, always remember that the intelligence is artificial, and ultimately humans get the last say."}),"\n",(0,i.jsxs)(t.p,{children:["This goes without saying: privacy and data collection. Be transparent about what, when, and where you are collecting analytics and/or heuristics from a user's interactions. Explain and give users the choice to opt out from certain intelligent features. Give users control over what they want or don't want to share (think app permissions settings on iOS and Android). You'd quickly realize that these considerations are not new or unique to AI apps; they apply to any apps. Ethics and privacy are the nicher part of UI design, and it's even more so when your app handles sensitive data and performs sensitive actions. ",(0,i.jsx)(t.a,{href:"https://pair.withgoogle.com/guidebook/patterns",children:"Google has a great guidebook to designing AI apps that centers around humans"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Needless to say, the basic principles of UI design still apply in this milestone. The paragraphs above aimed to shed a light on points of attention when building AI apps."}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Show and explain considerations/decisions in your UI that were specially made\nfor an app that leverages AI. Provide examples, citations, or justifications\nwhere necessary. You may also show different prototypes and outline their\ntrade-offs."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-5-launch",children:"Phase 5: Launch"}),"\n",(0,i.jsx)(t.h3,{id:"landing-page",children:"Landing Page"}),"\n",(0,i.jsxs)(t.p,{children:["Similar to what you have read in Assignment 1, launching your product site only when the app is ready is often suboptimal. In this milestone, you are building a product site (a real one, this time) that showcases your product. Some decent examples include ",(0,i.jsx)(t.a,{href:"http://remix.run/",children:"Remix"}),", ",(0,i.jsx)(t.a,{href:"https://www.jetbrains.com/fleet/",children:"JetBrains Fleet"}),", and ",(0,i.jsx)(t.a,{href:"https://github.com/features/preview/copilot-x",children:"GitHub Copilot"}),". A great product site should achieve: explaining why it exists, informing about the features, and calling for an action (a call-to-action)."]}),"\n",(0,i.jsxs)(t.p,{children:["Since this site relates to your product launch in a later milestone, it is also worthy to think about how your site is seen when shared. Think about what happens when you share a URL via Telegram, WhatsApp, or LinkedIn. Nowadays, people don't just see the URL, they also see a thumbnail, title of the site (truncated if it's too long), and first few sentences of the site description. This metadata is a standard known as the ",(0,i.jsx)(t.a,{href:"https://ogp.me/",children:"Open Graph Protocol"}),". Optimizing this is extremely beneficial because it influences the users even before the link is clicked."]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Create a landing page for marketing purposes with the following sections:\nhero, features, pricing section. Feel free to add more relevant sections if\nyou wish."})}),"\n",(0,i.jsx)(t.h3,{id:"analytics",children:"Analytics"}),"\n",(0,i.jsxs)(t.p,{children:["You should be interested in the usage statistics of your application. ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4",children:"Google Analytics 4"})," is one popular way to collect user insights. It can be set up easily — the following examples are using the ",(0,i.jsx)(t.code,{children:"gtag.js"})," snippet. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services."]}),"\n",(0,i.jsx)(t.p,{children:"Event tracking can provide more fine-grained insights over user actions. They can be used to track more events such as network request statuses, buttons pressed, or even form fields interactions. The following JavaScript code can be used to log a custom event to GA4:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"gtag"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'event'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "})}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n",(0,i.jsxs)(t.p,{children:["In particular, ",(0,i.jsx)(t.a,{href:"https://support.google.com/analytics/answer/9267735",children:"recommended events"})," helps you measure additional features and behavior as well as generate more useful reports."]}),"\n",(0,i.jsxs)(t.p,{children:["If your application's interface is predominantly built with a JavaScript MVC framework like React, it is very likely that you have a Single-page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 ",(0,i.jsx)(t.code,{children:"pushState"})," API. Pageviews can still be tracked using virtual pageviews by executing the following code instead during a client-side route change."]}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"gtag"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'event'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'page_view'"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" page_title"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" page_location"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n",(0,i.jsxs)(t.p,{children:["Refer to ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag#measure_virtual_pageviews",children:'GA4\'s documentation on how to "Measure virtual pageviews"'})," for more information. Alternatively your framework might have provided dedicated documentation on how to send ",(0,i.jsx)(t.code,{children:"page_view"})," events for route changes."]}),"\n",(0,i.jsx)(t.p,{children:"Google Analytics only updates the reports once a day, do not expect to see immediate results. There are, however, signs to check that tracking is working in your application:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Use the official Google Analytics Debugger ",(0,i.jsx)(t.a,{href:"https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna",children:"Chrome Extension"})," (recommended)"]}),"\n",(0,i.jsx)(t.li,{children:'Check the "Network" tab in the developer tools provided by your browser. Every time a tracked page or event occurs, a new GA request should appear.'}),"\n",(0,i.jsxs)(t.li,{children:["Go to ",(0,i.jsxs)(t.a,{href:"https://support.google.com/analytics/answer/9271392",children:[(0,i.jsx)(t.strong,{children:"Reports > Realtime"})," in the Analytics dashboard"]}),", which allows you to view activities on your application in near real-time."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["More information and examples can be found from the ",(0,i.jsx)(t.a,{href:"https://developers.google.com/analytics/devguides/collection/ga4",children:"official Google Analytics 4 documentation"}),"."]}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Embed Google Analytics or equivalent alternatives in your application and give\nus a screenshot of the report. Make sure you embed the tracker at least 48\nhours before the submission deadline as updates for Google Analytics are\nreported once per day."})}),"\n",(0,i.jsx)(t.h3,{id:"launch-campaign",children:"Launch Campaign"}),"\n",(0,i.jsxs)(t.p,{children:["Once you get that amazing software ready for production, it's time to announce it to the world. You'll need to designate a launch time, plan what happens coming to the launch time, and most importantly, retain users ",(0,i.jsx)(t.em,{children:"after"})," the launch."]}),"\n",(0,i.jsx)(t.p,{children:"It's just like a press conference; you'll need people to help you spread the word that you decide to spread your wings. So, collect your closest connections, forums, social media sites (Facebook, Instagram, etc.), communities (e.g., Reddit, X, HackerNews, Discord, etc.), and influencers. Decide and plan what content will best represent your product. Make some drafts (text, video, banners, depending on the nature of the media), mock them, and revise until your team agrees on the best launch announcement. Your team should have all these collaterals ready, so that on the launch second, everything is published at the same time."}),"\n",(0,i.jsxs)(t.p,{children:["Some products may even decide to do ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Soft_launch",children:"soft launches"}),". Think ",(0,i.jsx)(t.a,{href:"https://www.clubhouse.com/",children:"Clubhouse"})," and ",(0,i.jsx)(t.a,{href:"https://arc.net/",children:"Arc Browser"})," with their invite-only schemes. From the developers' point of view, soft launches are great for beta-testing and garnering feedback agilely. With a limited user acquisition, it is easier to attend to issues, and your servers have a lower chance of exploding. It also gives a sense of exclusivity; it makes those who have joined feel exclusive, and those who have not joined envy. Referral systems also encourage word-of-mouth, so that's a bonus. This exclusivity can potentially create buzz and hype, with people watching for when the waitlist is over, or joining the waitlist—after which you can use it as a channel to share updates and ensure they still remember your product. But waitlists can even retard user acquisition (well, it's literally limiting acquisitions), which means lower usage, active users, and feedback. ",(0,i.jsx)(t.a,{href:"https://youtu.be/xJdx0BlP0iY?si=lmZbossdXvwKlPzy&t=198",children:"Arc Browser's CEO actually talked about how they are losing up to 80% of sign-ups because of having a waitlist"}),". Also, code has to be written to support this waitlist, and that's something else to maintain, only to be stripped when the waitlist is gone. Hence one should exercise prudence when deciding to go with soft launches and/or waitlists, because they will modulate the acquisition curve of your app."]}),"\n",(0,i.jsx)(t.p,{children:"After the launch, monitor all your analytics and watch the growth. Ensure that you have technicians ready to fix bugs or restart the server should the situation call for it. Ensure that you have the customer support team ready to answer any queries around the launch time. User acquisition isn't instant, and it needs repetitions and reminders for the sentiment to retain. One of the biggest mistakes one can make after launch is resting on their laurels after seeing the active users curve grow upwards. Your team should start planning on the next cadence (next release, next announcements, etc.) so that when that curve starts to plateau, you have something in store to bring it back up."}),"\n",(0,i.jsxs)(t.p,{children:["Product Hunt is a renowned site to discover new products in tech. It is backed by ",(0,i.jsx)(t.a,{href:"https://www.ycombinator.com/",children:"Y Combinator"})," and has brought light to some recent famous software, e.g., ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/notion",children:"Notion"}),", ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/obsidian",children:"Obsidian"}),", ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/otter",children:"Otter"}),", and ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/bereal",children:"BeReal"}),". It is a great inclusion for a software product launch due to its community and great outreach. To launch on Product Hunt, you'll need several content ready to submit: a product site, logo, first comment, demo video, marketing pitch, etc. Product Hunt has a ",(0,i.jsx)(t.a,{href:"https://help.producthunt.com/en/articles/479557-how-to-post-a-product",children:"list of what should be included in your product post"}),", and an ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/launch",children:"excellent site on preparing for a Product Hunt launch"}),". You might also want to check out how ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/topics/artificial-intelligence",children:"AI products are launched on Product Hunt"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Here's a ",(0,i.jsx)(t.a,{href:"https://gist.github.com/yangshun/1e84ae8461975e7fa9a7d153621c3756",children:"sample launch checklist Yangshun and his team used to launch Docusaurus 2.0 in 2022"})," which contributed to Docusaurus 2.0 attaining the ",(0,i.jsx)(t.a,{href:"https://www.producthunt.com/products/docusaurus#docusaurus-2-0",children:'"Product of the day"'})," award."]}),"\n",(0,i.jsx)(u.UW,{children:(0,i.jsx)(t.p,{children:"Even though this milestone is about launching on Product Hunt, the knowledge\nof launching a software product is going to be useful for your final project."})}),"\n",(0,i.jsx)(m.Z,{children:(0,i.jsx)(t.p,{children:"Assume you were launching on Product Hunt. Come up with content and marketing\nmaterials that you will use for your Product Hunt submission. You may even\nwant to launch on Product Hunt for real if you think your product is ready."})}),"\n",(0,i.jsx)(t.h2,{id:"phase-6-going-above-and-beyond",children:"Phase 6: Going Above and Beyond"}),"\n",(0,i.jsx)(t.p,{children:"This section is purely optional. Completing milestone(s) described in this section may contribute to the 30% coolness factor."}),"\n",(0,i.jsx)(t.p,{children:"Several suggestions have been provided. We emphasize that these are merely suggestions, which means that if you find them unsuitable for your application, you may still score full points in coolness by coming up with ideas of your own. On the other hand, blindly using these suggested technologies to create redundant features will not get you any credit. It is about using them in creative ways to make your application more desirable to use."}),"\n",(0,i.jsx)(t.h3,{id:"embeddings-optional",children:"Embeddings (Optional)"}),"\n",(0,i.jsx)(t.p,{children:"A recommended technique to improve the generated results is to supplement the model with high quality, relevant, and updated information about the query and instruct the model to use the information when generating the output. This is especially useful if the query is about recent events or information that the model has not been trained on."}),"\n",(0,i.jsx)(t.p,{children:"Embeddings refer to the method of representing words or phrases as vectors (list) of floating point numbers. These embeddings capture semantic meanings based on the context in which words appear in the text data. Words with similar meanings will have similar vector representations in the embedding space."}),"\n",(0,i.jsx)(t.p,{children:"Embeddings can thus be used to implement efficient knowledge retrieval. In particular, a text corpus can be split up into chunks, and each chunk is embedded (converted into a vector of numbers) and stored. A given query can then be embedded and vector search is performed to find the embedded chunks of text from the corpus that are most similar/related to the query."}),"\n",(0,i.jsx)(t.p,{children:"To quickly search across multiple vectors, it is recommended to store your vectors in vector databases which provide ways to query your collection of vectors given a query."}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://supabase.com/vector",children:"Supabase Vector"}),": Supabase is an open source Firebase alternative built on PostgreSQL. With the pgvector extension, you can store vector data. This is recommended because you can use Supabase for both relational and vector data, using one database for all your application needs."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://weaviate.io/",children:"Weaviate"}),": Open source vector database that also offers a fully managed option."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.pinecone.io/",children:"Pinecone"}),": Fully-managed, developer-friendly, and easily scalable vector database."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.trychroma.com/",children:"Chroma"}),": AI-native open source embedding database. As of Aug 2023, it does not offer managed hosting."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For example, an e-commerce website owner could embed information about the company and products to build a customer support chatbot. The chatbot answers user queries by fetching the vectors related to the query and passing both the query and necessary information to an LLM."}),"\n",(0,i.jsx)(t.p,{children:"Further reading on embeddings:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://platform.openai.com/docs/guides/embeddings",children:"Embeddings - OpenAI API"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://docs.cohere.com/docs/embeddings",children:"Embeddings - Cohere"})}),"\n"]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Optional)",children:(0,i.jsx)(t.p,{children:"Use embeddings in your app. Explain why it was useful for your product to use\nembeddings."})}),"\n",(0,i.jsx)(t.h3,{id:"seo-and-social-sharing-optional",children:"SEO and Social Sharing (Optional)"}),"\n",(0,i.jsx)(t.p,{children:"Social platforms like Facebook, Instagram and Twitter receive billions of users every month, the majority of whom are on mobile devices. Where else can you find the potential to reach so many people without a single cent spent on advertising?"}),"\n",(0,i.jsx)(t.p,{children:"Integrating Facebook Login can help potential users overcome the inertia of a tedious sign-up process and can potentially make them more inclined to try your application."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://developers.facebook.com/docs/plugins/",children:"Facebook Social Plugins"})," or ",(0,i.jsx)(t.a,{href:"https://dev.twitter.com/web/overview",children:"Twitter for Websites"})," creates a timeline post or tweet with a single click of the mouse, extending your reach to friends and followers of your current users. Having just one friend per user (out of hundreds) sign up would easily double your user base."]}),"\n",(0,i.jsx)(t.p,{children:"Best of all, most of these features can be included by copying and pasting provided code snippets or calling a few functions in the JavaScript SDK. This is so simple that it is a waste not to do so. Without much additional effort, you can get your application seen and possibly used by many more people. Of course, your application must be good or no one would share it."}),"\n",(0,i.jsxs)(t.p,{children:["Also ensure that the social sharing preview images are attractive. Vercel provides a useful tool for ",(0,i.jsx)(t.a,{href:"https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation",children:"dynamic OG image generation"}),"."]}),"\n",(0,i.jsx)(m.Z,{labelSuffix:"(Optional)",children:(0,i.jsx)(t.p,{children:"Identify and integrate with social network(s) containing users in your target\naudience. State the social plugins you have used. Explain your choice of\nsocial network(s) and plugins."})}),"\n",(0,i.jsx)(t.h2,{id:"assessment-scheme",children:"Assessment Scheme"}),"\n",(0,i.jsxs)(t.p,{children:["The grading of the assignment is divided into two components: satisfying the compulsory milestones (70%) and the coolness factor (30%). Excluding Milestone 0, there are ",(0,i.jsx)(t.strong,{children:"16 compulsory milestones"})," in total. Milestone 1, 2, 3 and 10 are worth 2.5% each. The rest are worth 5% each."]}),"\n",(0,i.jsx)(t.p,{children:"The remaining 30% will be awarded based on the relative outcomes for the various teams. The top team might be awarded up to 30%, while the worst performing team less than 5%. The optional milestones can also contribute to this."}),"\n",(0,i.jsx)(t.p,{children:"Overall, the AI application assignment is worth 20% of your final grade."}),"\n",(0,i.jsx)(t.h2,{id:"mode-of-submission",children:"Mode of Submission"}),"\n",(0,i.jsxs)(t.p,{children:["The final submission is due ",(0,i.jsx)(g.Z,{date:p.oZ.I8}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The following will need to be ",(0,i.jsx)(t.strong,{children:'both submitted to Coursemology (under "Assignment 3 — Artificial Intelligence Application") and included in your GitHub repository'}),":"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A write-up, ",(0,i.jsx)(t.code,{children:"group--milestones.pdf"}),", containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the ",(0,i.jsx)(t.strong,{children:"URL for your live application"})," and link to the ",(0,i.jsx)(t.strong,{children:"public GitHub repository"})," is clearly stated in the write-up for the convenience of the teaching staff."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A one/two-page pitch of your application, ",(0,i.jsx)(t.code,{children:"group--pitch.pdf"}),", pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. ",(0,i.jsx)(t.strong,{children:"Restriction:"})," no longer than 2 A4 sides."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The following will only need to be included in your GitHub repository:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["A ",(0,i.jsx)(t.code,{children:"README.md"})," file in the root directory. GitHub will automatically render it on your repository's front page. You may wish to style it using any of the supported markup languages. The file should contain:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"The list of group members, including matriculation numbers, names and a description of the contributions of each member to the assignment."}),"\n",(0,i.jsx)(t.li,{children:"The name of your application."}),"\n",(0,i.jsx)(t.li,{children:"The URL to your application, i.e. your application must be accessible online somewhere."}),"\n",(0,i.jsx)(t.li,{children:"Set-up instructions for local testing (good to have)."}),"\n",(0,i.jsx)(t.li,{children:"Resources you have used significantly to build your app (e.g. tutorials, source code references, design references, UI templates, etc.)."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:["The code for your application. If your group is using Git submodules, make sure these submodules are also accessible by the teaching team (and that they are updated to reference the latest commits). You're encouraged to use ",(0,i.jsx)(t.a,{href:"https://monorepo.tools/",children:"monorepos"})," instead (e.g., via ",(0,i.jsx)(t.a,{href:"https://turbo.build/repo",children:"Turborepo"}),") so that you only have to submit one repository."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Not following the submission instructions (e.g., incorrect file naming) will result in the deduction of marks."})}),"\n",(0,i.jsx)(t.p,{children:"Clarifications and questions related to this assignment should be posted to the Coursemology Forum."}),"\n",(0,i.jsx)(t.p,{children:"Good luck and have fun!"}),"\n",(0,i.jsx)(t.h2,{id:"acknowledgements",children:"Acknowledgements"}),"\n",(0,i.jsx)(t.p,{children:"Thank you to the following individuals who have contributed to this assignment in one way or another:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Sau Sheong Chang"}),"\n",(0,i.jsx)(t.li,{children:"Suzanna Sia"}),"\n",(0,i.jsx)(t.li,{children:"Tong Hui Kang"}),"\n",(0,i.jsx)(t.li,{children:"Rishabh Anand"}),"\n"]})]})}var y=(0,s.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.ah)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)},pageOpts:{filePath:"pages/coursework/artificial-intelligence.mdx",route:"/coursework/artificial-intelligence",frontMatter:{title:"Assignment 3 — Artificial Intelligence",description:"In the ever-evolving landscape of technology, a new wave of applications is emerging, characterized by their innovative use of Generative AI and LLMs. This surge has been led by entities like OpenAI (ChatGPT, DALL-E) and Stability AI (Midjourney) who have demonstrated the potential of AI-generated content and interactions."},headings:[{depth:1,value:"Assignment 3 — Artificial Intelligence Application",id:"assignment-3--artificial-intelligence-application"},{depth:2,value:"General Overview",id:"general-overview"},{depth:2,value:"Grading and Admin",id:"grading-and-admin"},{depth:2,value:"Objectives",id:"objectives"},{depth:2,value:"Phase 0: Introduction",id:"phase-0-introduction"},{depth:3,value:"Background",id:"background"},{depth:3,value:"New AI Landscape",id:"new-ai-landscape"},{depth:2,value:"Phase 1: Product Strategy",id:"phase-1-product-strategy"},{depth:3,value:"Idea Generation, Problem Space",id:"idea-generation-problem-space"},{depth:3,value:"Competitive Landscape",id:"competitive-landscape"},{depth:3,value:"Product Capabilities",id:"product-capabilities"},{depth:3,value:"Moat",id:"moat"},{depth:2,value:"Phase 2: Go-To-Market",id:"phase-2-go-to-market"},{depth:3,value:"Product Lifecycle & Product-Market Fit",id:"product-lifecycle--product-market-fit"},{depth:3,value:"Scoping",id:"scoping"},{depth:3,value:"Business Model",id:"business-model"},{depth:2,value:"Phase 3: Artificial Intelligence Integration",id:"phase-3-artificial-intelligence-integration"},{depth:3,value:"Introduction to Large Language Models",id:"introduction-to-large-language-models"},{depth:3,value:"Prompt Engineering/Design",id:"prompt-engineeringdesign"},{depth:4,value:"Elements of a Prompt",id:"elements-of-a-prompt"},{depth:4,value:"Tokenization",id:"tokenization"},{depth:4,value:"Fine-tuning",id:"fine-tuning"},{depth:3,value:"Using the Right Model for the Job",id:"using-the-right-model-for-the-job"},{depth:4,value:"Popular LLMs and Providers",id:"popular-llms-and-providers"},{depth:4,value:"Model Settings",id:"model-settings"},{depth:3,value:"Other Resources",id:"other-resources"},{depth:4,value:"Courses and Tutorials",id:"courses-and-tutorials"},{depth:4,value:"Tools",id:"tools"},{depth:4,value:"Open Source LLMs",id:"open-source-llms"},{depth:2,value:"Phase 4: Design",id:"phase-4-design"},{depth:3,value:"Branding your Product",id:"branding-your-product"},{depth:3,value:"Technology Stack",id:"technology-stack"},{depth:3,value:"User Experience",id:"user-experience"},{depth:3,value:"User Interface",id:"user-interface"},{depth:2,value:"Phase 5: Launch",id:"phase-5-launch"},{depth:3,value:"Landing Page",id:"landing-page"},{depth:3,value:"Analytics",id:"analytics"},{depth:3,value:"Launch Campaign",id:"launch-campaign"},{depth:2,value:"Phase 6: Going Above and Beyond",id:"phase-6-going-above-and-beyond"},{depth:3,value:"Embeddings (Optional)",id:"embeddings-optional"},{depth:3,value:"SEO and Social Sharing (Optional)",id:"seo-and-social-sharing-optional"},{depth:2,value:"Assessment Scheme",id:"assessment-scheme"},{depth:2,value:"Mode of Submission",id:"mode-of-submission"},{depth:2,value:"Acknowledgements",id:"acknowledgements"}],timestamp:1696211337e3,title:"Assignment 3 — Artificial Intelligence"},pageNextRoute:"/coursework/artificial-intelligence"})},3470:function(e){"use strict";e.exports=JSON.parse('{"td":{"Q_":"2023-08-21","I8":"2023-09-04T23:59:00","Uo":false},"No":{"Q_":"2023-08-14","qQ":"2023-08-28T23:59:00","uV":"2023-09-10T23:59:00","ji":"2023-09-11T18:30:00","oA":"2023-09-13T11:59:00","RQ":"2023-09-15T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1PO11Fi6HQTPpsuTm7ek5OQuZ-geL-JtjQ4wMlqoTJWg/edit?usp=sharing","Uo":false},"oZ":{"Q_":"2023-08-28","I8":"2023-09-29T23:59:00","Uo":false},"iV":{"Q_":"2023-09-18","GB":"2023-09-25T23:59:00","CT":"2023-10-01T23:59:00","EA":"2023-10-15T23:59:00","G_":"2023-10-29T23:59:00","jY":"2023-11-06T18:30:00","xs":"2023-11-15","Kq":true,"Y_":"2023-11-22T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1f-r-hNkBWVfXXPcpUbN37oF6DhT6Ap61AwsMkfvRjEA/edit?usp-sharing","Uo":false}}')}},function(e){e.O(0,[673,774,888,179],function(){return e(e.s=6138)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/coursework/project-bf6b9d860d5c38b2.js b/_next/static/chunks/pages/coursework/project-bf6b9d860d5c38b2.js deleted file mode 100644 index 8597711..0000000 --- a/_next/static/chunks/pages/coursework/project-bf6b9d860d5c38b2.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[431],{8532:function(e,o,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/coursework/project",function(){return t(5782)}])},4592:function(e,o,t){"use strict";t.d(o,{Z:function(){return n}});var i=t(5893);function n(e){let{date:o,emphasize:t=!0}=e,n=new Intl.DateTimeFormat("en-SG",{dateStyle:"full",timeStyle:o.includes(":")?"short":void 0,timeZone:"Asia/Singapore"}).format(new Date(o));return(0,i.jsx)(t?"strong":"span",{suppressHydrationWarning:!0,children:n})}},5782:function(e,o,t){"use strict";t.r(o),t.d(o,{default:function(){return m}});var i=t(5893),n=t(2673),r=t(1151),s=t(5675),a=t.n(s),l={src:"/_next/static/media/paperbaton.d1100df4.jpg",height:1365,width:2048,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAJBN/wD/xAAcEAACAgIDAAAAAAAAAAAAAAABAwUSAAIEE0H/2gAIAQEAAT8AipffeRVxFrK+wXsGHw1z/8QAGhEAAQUBAAAAAAAAAAAAAAAAAQACAzFCYf/aAAgBAgEBPwCQ8bZyF//EABkRAAIDAQAAAAAAAAAAAAAAAAExAAIhQf/aAAgBAwEBPwCoelDs/9k=",blurWidth:8,blurHeight:5},h=t(1712),d=t(1236),c=t(3470),p=t(4592);function u(e){let o=Object.assign({h1:"h1",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",span:"span",h2:"h2",p:"p",a:"a",ul:"ul",li:"li",em:"em",ol:"ol",h3:"h3",strong:"strong"},(0,r.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.h1,{children:"Final Project"}),"\n",c.iV.Uo&&(0,i.jsx)(d.UW,{type:"warning",children:" The final project write-up is currently being updated. Details are tentative and will be finalised soon."}),"\n",(0,i.jsxs)(o.table,{children:[(0,i.jsx)(o.thead,{children:(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.th,{align:"left",children:"Item"}),(0,i.jsx)(o.th,{align:"left",children:"Due"})]})}),(0,i.jsxs)(o.tbody,{children:[(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Issue date"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.Q_,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Team formation deadline"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.GB,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Proposal"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.CT,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Progress report 1"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.EA,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Progress report 2"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.G_,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"In-Class progress report"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.jY,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Poster session"}),(0,i.jsxs)(o.td,{align:"left",children:[(0,i.jsx)(p.Z,{date:c.iV.xs,emphasize:!1}),c.iV.Kq&&(0,i.jsx)(o.span,{children:" (TBC)"})]})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Final report"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.Y_,emphasize:!1})})]})]})]}),"\n",(0,i.jsx)(o.h2,{id:"general-overview",children:"General Overview"}),"\n",(0,i.jsx)(o.p,{children:"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents."}),"\n",(0,i.jsxs)(o.p,{children:["For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the ",(0,i.jsx)(o.a,{href:c.iV.zY,children:"Student Grouping Google Sheet"})," by ",(0,i.jsx)(p.Z,{date:c.iV.GB}),". Each team is to submit a project proposal by ",(0,i.jsx)(p.Z,{date:c.iV.CT})," (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester."]}),"\n",(0,i.jsx)(o.p,{children:"Your team can design the whole application, but if the scope is too large to be completed in one semester and you intend to continue to develop your application for a business venture, you can implement a prototype with some basic (or limited) functionality to satisfy the requirements for the class. Please state such intentions clearly in your proposals. The teaching staff will evaluate your proposals carefully and provide you with our feedback within a week."}),"\n",(0,i.jsx)(o.p,{children:'There are no limits on what students can do for the final problem, though the expectation is that it must be a "cool" application or product. The following are possibilities:'}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"A real-time HTML5 game"}),"\n",(0,i.jsx)(o.li,{children:"A FB Messenger / Telegram bot"}),"\n",(0,i.jsx)(o.li,{children:"A new e-commerce application. This can be the basis for a submission to the Start-Up@Singapore contest"}),"\n",(0,i.jsx)(o.li,{children:"A mobile application. You may choose to build a native app if you like"}),"\n",(0,i.jsx)(o.li,{children:"An entry for the Microsoft Imagine Cup"}),"\n",(0,i.jsxs)(o.li,{children:["Some amusement – cute and useless, but ",(0,i.jsx)(o.em,{children:"fun"})," and popular"]}),"\n",(0,i.jsx)(o.li,{children:"An e-learning application of sorts"}),"\n",(0,i.jsx)(o.li,{children:"An Internet of Things hack"}),"\n",(0,i.jsx)(o.li,{children:"An application to improve school life, something along the lines of NUSMods / NUSWhispers?"}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:['The possibilities are endless. If you plan to develop a social networking application, you are expected to deploy your Final Project at least two to three weeks before the end of the semester because the "proof of the pudding is in the eating". You should get ',(0,i.jsx)(o.em,{children:"real"})," people to use your applications, and the popularity of your application can be (but is not the only) criteria for the evaluation."]}),"\n",(0,i.jsx)(o.p,{children:'If one of the apps you developed for one of the previous assignments turned out to be to very popular (i.e. has lots of users or a high growth rate) or has perceived potential, you may also choose to further develop it as your Final Project. The only minor complication is that you might be "locked-in" to work with the same team members. We leave you to sort such things out by yourself.'}),"\n",(0,i.jsx)(o.h2,{id:"course-policy-on-final-project-groupings",children:"Course Policy on Final Project Groupings"}),"\n",(0,i.jsx)(o.p,{children:'People can be in two Final Project groups. This often happens when someone from an assignment group gets distracted and want to try something new but cannot really bear to "leave their baby" and still want to be a part of that group. Fair enough.'}),"\n",(0,i.jsxs)(o.p,{children:["However, your Final Project grade will come from ",(0,i.jsx)(o.em,{children:"ONE"})," project that you will specify/declare right at the onset, i.e. by the end of the mid-term break. The rationale for this policy is that we don't want people to jump ship halfway and leave others high and dry. With this policy, everyone knows everyone's priorities. The \"extra\" members don't count towards the 4-member limit for a project team."]}),"\n",(0,i.jsx)(o.p,{children:"If you decide to work with external parties, we do not have any official guide on what compensation you should negotiate. We leave it to you to decide for yourselves what is fair. However, DO NOT work for companies that clearly neither value nor respect you."}),"\n",(0,i.jsx)(o.h2,{id:"final-project-proposal",children:"Final Project Proposal"}),"\n",(0,i.jsxs)(o.p,{children:["Your team should submit a project proposal by ",(0,i.jsx)(p.Z,{date:c.iV.CT}),". The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you plan to develop."}),"\n",(0,i.jsx)(o.li,{children:'Justification for choosing this project idea. Briefly mention the 3 key points: "Problem is real? Problem can be solved in CS3216? Problem has impact?"'}),"\n",(0,i.jsx)(o.li,{children:"Project schedule: milestones and timeline, including an implementation plan and deployment plan."}),"\n",(0,i.jsx)(o.li,{children:"Individual contribution and roles. Contributions and/or support from external partners, if any."}),"\n",(0,i.jsx)(o.li,{children:"Long-term plan and business model (if applicable)."}),"\n",(0,i.jsx)(o.li,{children:"Marketing and strategies to be employed."}),"\n",(0,i.jsx)(o.li,{children:"High-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used)."}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"development-of-final-project",children:"Development of Final Project"}),"\n",(0,i.jsx)(o.p,{children:"Each team will meet with the teaching staff (probably lecturer + TA) for a one-hour preliminary meeting after receiving your feedback on your Final Project proposal. The meetings will be biweekly. Look out in your emails for the meeting schedules."}),"\n",(0,i.jsx)(o.p,{children:"These are compulsory sessions where the schedule is flexible and should be determined by both parties."}),"\n",(0,i.jsx)(o.h2,{id:"customer-contact-reports",children:"Customer Contact Reports"}),"\n",(0,i.jsx)(o.p,{children:'We have told you time and again to "go out there and talk to your customers", and we\'re serious. 10% of your project grade will come from your "Customer Contact Reports". Use any reasonable report format to record your customer contact details and the interactions with your potential users. You are expected to produce a contact report at every consultation session.'}),"\n",(0,i.jsx)(o.h2,{id:"progress-reports",children:"Progress Reports"}),"\n",(0,i.jsxs)(o.p,{children:["Each team will be required to submit a progress report on ",(0,i.jsx)(p.Z,{date:c.iV.EA}),". The progress report should include ",(0,i.jsx)("strong",{children:"minimally"})," the following:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Application prototype. Minimally as functional as what was achieved in Assignment 3."}),"\n",(0,i.jsx)(o.li,{children:"Is your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule?"}),"\n",(0,i.jsx)(o.li,{children:"What were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them?"}),"\n",(0,i.jsx)(o.li,{children:"Any changes to the application since the initial project proposal?"}),"\n",(0,i.jsx)(o.li,{children:"Assuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with?"}),"\n",(0,i.jsx)(o.li,{children:"Updated project schedule: milestones and timeline."}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["A second progress report will be due on ",(0,i.jsx)(p.Z,{date:c.iV.G_}),". The contents of which would be similar to the first progress report."]}),"\n",(0,i.jsx)(o.p,{children:"Please try to keep your reports to within two pages, or a maximum of 3 pages if you really must."}),"\n",(0,i.jsx)(o.h2,{id:"final-project-presentation",children:"Final Project Presentation"}),"\n",(0,i.jsxs)(o.p,{children:["On ",(0,i.jsx)(p.Z,{date:c.iV.jY}),", each team will make a presentation to the rest of the class on your project. This session will be another round of peer-appraisal by your peers. Your goal is to convince your fellow coursemates that your project is really cool, and that you have done a lot of work and great work. Think of it as round 2 of your innovation seminar, but you are selling your own dog food."]}),"\n",(0,i.jsx)(o.h2,{id:"preliminary-security-scanning",children:"Preliminary Security Scanning"}),"\n",(0,i.jsxs)(o.p,{children:["At this juncture ",(0,i.jsx)(p.Z,{date:c.iV.jY}),", you should have a preliminary website for your app up and running, even if it is not fully functional. You are expected to provide us with a URL, and the tutors will be using security tools to scan your site. You will be provided with a security report, and you are expected to address the cited issues for your final project. Clearly, if your project is very incomplete, very little will be found, but you then risk more bad things being found after your final project is submitted. We will be doing another round of security scanning after your final project is submitted."]}),"\n",(0,i.jsx)(o.h2,{id:"soc-steps",children:"SoC STePS"}),"\n",(0,i.jsxs)(o.p,{children:["In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on ",(0,i.jsx)(p.Z,{date:c.iV.xs})," ",c.iV.Kq&&(0,i.jsx)(o.span,{children:"(TBC)"})," from 3pm to 7pm as part of the School of Computing Term Projects Showcase (STePS)."]}),"\n",(0,i.jsx)(o.p,{children:'Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the "show-and-tell". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from "other people" — NUS staff, students, alumni, guests — who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses.'}),"\n",(0,i.jsx)(o.p,{children:"Again, you can choose how you want to present your work. You can bring along other materials in addition to the posters, such as your iPads, or set up your laptops to do a demo also. We'll leave it up to you!"}),"\n",(0,i.jsx)(o.h3,{id:"final-project-video",children:"Final Project Video"}),"\n",(0,i.jsx)(o.p,{children:"Traditionally, every team is required to make a 1-minute video to be submitted to the STePS organising committee. Here's a playlist of past years' videos."}),"\n",(0,i.jsx)(h.zu,{children:(0,i.jsx)("iframe",{src:"https://www.youtube.com/embed/videoseries?list=PLLYjqEF13ESyh-Rpm_-XtJzOqm5MeEnrj",width:"100%",height:"500px"})}),"\n",(0,i.jsx)(o.h3,{id:"marketing-efforts",children:"Marketing Efforts"}),"\n",(0,i.jsx)(o.p,{children:"As part of the user acquisition process, many teams set up their own social media page to publicise their products and gain initial traction before the actual STePS event. Here's what the top three teams of AY2015/16 did on Facebook:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Letterbox"})," went around the school on a hoverboard and handed out flyers. They also managed to launch their apps to the iOS App Store and Google Play Store before the event (a seriously impressive feat)."]}),"\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Griddit"})," created an anonymous chatroom for NUSWhispers and organised an ",(0,i.jsx)(o.a,{href:"http://blog.griddit.io/post/133470245990/professor-ben-leongs-ask-me-anything",children:"AMA with Prof Ben Leong"}),", which saw over 400 participants."]}),"\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Paperbaton"})," launched a ",(0,i.jsx)(o.a,{href:"https://paperbaton.com/blog/",children:"blog with helpful tips"})," and also a complementing product, ",(0,i.jsx)(o.a,{href:"https://paperbaton.com/blog/introducing-nusexam/",children:"NUSExam"}),", a Past-Year Question Paper Downloader for NUS Students."]}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["These three teams also created Facebook pages to engage users continually. Have a look at the Facebook pages of ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/getletterbox",children:"Letterbox"}),", ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/griddit",children:"Griddit"})," and ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/paperbaton",children:"Paperbaton"})," to get a sense of what sort of pre-STePS publicity can be done."]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(a(),{alt:"Paperbaton Team",placeholder:"blur",src:l})}),"\n",(0,i.jsx)(o.h3,{id:"final-project-poster",children:"Final Project Poster"}),"\n",(0,i.jsx)(o.p,{children:"The final A1-sized project poster should (at least) include the following points:"}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you have developed."}),"\n",(0,i.jsx)(o.li,{children:"What makes your application special?"}),"\n",(0,i.jsx)(o.li,{children:"Screenshots, graphics, diagrams and tables. Probably fewer words."}),"\n",(0,i.jsx)(o.li,{children:"Prepare a snappy yet catchy 1-2 minute pitch that you can use (over and over) when presenting your poster."}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"Remember, avoid overloading the poster with too much (small) text. This will ensure that people won't want to read what's on your poster. Add in pictures, graphics, diagrams and tables when appropriate. You are there to \"sell\" people your idea, to make them convinced that your application is unique and creative, and NOT to put them to sleep."}),"\n",(0,i.jsx)(o.p,{children:"Some examples of past STePS posters:"}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/letterbox.pdf",children:(0,i.jsx)("img",{alt:"Letterbox Poster",src:"/img/posters/letterbox-thumbnail.png"})})}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/paperbaton.pdf",children:(0,i.jsx)("img",{alt:"Paperbaton Poster",src:"/img/posters/paperbaton-thumbnail.png"})})}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/una.pdf",children:(0,i.jsx)("img",{alt:"Una Poster",src:"/img/posters/una-thumbnail.png"})})}),"\n",(0,i.jsx)(o.h2,{id:"final-project-report",children:"Final Project Report"}),"\n",(0,i.jsxs)(o.p,{children:["Like most other classes, the Final Project report is due on ",(0,i.jsx)(p.Z,{date:c.iV.Y_})," (to be uploaded to Coursemology by 23:59, please). The final report should (at least) include the following points:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you have developed."}),"\n",(0,i.jsx)(o.li,{children:"Are there any existing applications out there that are similar? What makes your application special?"}),"\n",(0,i.jsx)(o.li,{children:"Review of milestones and timeline for the project (which ones did you hit, what ones did you miss?)."}),"\n",(0,i.jsx)(o.li,{children:"Individual contribution and roles. Acknowledgement of resources/help provided by external parties."}),"\n",(0,i.jsx)(o.li,{children:"Application design (e.g. database schema, UML, etc., but no code please)."}),"\n",(0,i.jsx)(o.li,{children:"Report on the current number of users who have installed, active users, etc. Perhaps Google Analytics data and screenshots (or similar analytics tools) to support your claims."}),"\n",(0,i.jsx)(o.li,{children:"Future plans and strategies."}),"\n",(0,i.jsx)(o.li,{children:"Insights gained from the project. What did you learn from doing the Final Project?"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"We do not specify a required page length, though we expect that most reports will be about 10 to 15 pages in length. The report definitely SHOULD NOT exceed 20 pages, please. Once you submit the Final Project report, you are done with CS3216! Congratulations!"}),"\n",(0,i.jsx)(o.h2,{id:"assessment-scheme",children:"Assessment Scheme"}),"\n",(0,i.jsx)(o.p,{children:"The Final Project is worth 50% of the total grade for CS3216. The Final Project will be graded according to the following weightage:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"5% Project Proposal"}),"\n",(0,i.jsx)(o.li,{children:"10% Customer Contact Report"}),"\n",(0,i.jsx)(o.li,{children:"5% Progress Report"}),"\n",(0,i.jsx)(o.li,{children:"10% Progress Report 2"}),"\n",(0,i.jsx)(o.li,{children:"10% In-class Final Project presentation (awarded by your peers)"}),"\n",(0,i.jsx)(o.li,{children:"30% Poster Presentation (awarded by the panel of judges)"}),"\n",(0,i.jsx)(o.li,{children:"30% Final Report"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"The fact that 30% of the grade for the Final Project is determined by the outcome of your poster presentation might make it seem somewhat random and arbitrary, but this mimics life. Success comes not only from how well you do something but from how well you can sell it (or convince suckers to buy your stuff even if it's completely useless and they don't actually need it \uD83D\uDE1C). This is also where the marketing people make themselves useful. You are graded on the quality and relevance of your posters, your sales pitch, marketing collaterals, the quality of your apps, etc."}),"\n",(0,i.jsx)(o.p,{children:"For those of you doing external projects, your team is treated as a consultancy. You are graded by how well you manage your consultancy, e.g., frequency of meetings with your clients, quality of questions asked, quality of solutions proposed, and how you negotiate your compensation package. For those doing your own project, you are treated as a startup. We assess you on how well you manage your market validation, how well you design your marketing campaign, how you go out and bring in users, etc."}),"\n",(0,i.jsx)(o.h2,{id:"mode-of-submission",children:"Mode of Submission"}),"\n",(0,i.jsx)(o.p,{children:"The following is the list of deliverables to be pushed to your GitHub repository:"}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Source code."}),"\n",(0,i.jsx)(o.li,{children:"You should also upload a copy of your poster to your repository."}),"\n",(0,i.jsx)(o.li,{children:"Proof of working application: You may either (a) Publish the application publicly (in the application settings, untick the Developer Mode); or (b) Add all the members of the teaching staff to the Developers part in the application settings so that we can assess your application (of course you need to add us as your friends first). In both cases, you should provide us with a link to your application's canvas page."}),"\n",(0,i.jsx)(o.li,{children:"Your Final Project report, in PDF format."}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["Push all of the above to your GitHub repository. ",(0,i.jsx)(o.strong,{children:"Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks."})]}),"\n",(0,i.jsx)(o.p,{children:"Clarifications and questions related to this assignment should be posted on the Coursemology Forum."}),"\n",(0,i.jsx)(o.p,{children:"Good luck, have fun. Live long and prosper!"})]})}var m=(0,n.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:o}=Object.assign({},(0,r.ah)(),e.components);return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(u,{...e})}):u(e)},pageOpts:{filePath:"pages/coursework/project.mdx",route:"/coursework/project",frontMatter:{title:"Final Project",description:"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents."},headings:[{depth:1,value:"Final Project",id:"final-project"},{depth:2,value:"General Overview",id:"general-overview"},{depth:2,value:"Course Policy on Final Project Groupings",id:"course-policy-on-final-project-groupings"},{depth:2,value:"Final Project Proposal",id:"final-project-proposal"},{depth:2,value:"Development of Final Project",id:"development-of-final-project"},{depth:2,value:"Customer Contact Reports",id:"customer-contact-reports"},{depth:2,value:"Progress Reports",id:"progress-reports"},{depth:2,value:"Final Project Presentation",id:"final-project-presentation"},{depth:2,value:"Preliminary Security Scanning",id:"preliminary-security-scanning"},{depth:2,value:"SoC STePS",id:"soc-steps"},{depth:3,value:"Final Project Video",id:"final-project-video"},{depth:3,value:"Marketing Efforts",id:"marketing-efforts"},{depth:3,value:"Final Project Poster",id:"final-project-poster"},{depth:2,value:"Final Project Report",id:"final-project-report"},{depth:2,value:"Assessment Scheme",id:"assessment-scheme"},{depth:2,value:"Mode of Submission",id:"mode-of-submission"}],timestamp:169285136e4,title:"Final Project"},pageNextRoute:"/coursework/project"})},3470:function(e){"use strict";e.exports=JSON.parse('{"td":{"Q_":"2023-08-21","I8":"2023-09-04T23:59:00","Uo":false},"No":{"Q_":"2023-08-14","qQ":"2023-08-28T23:59:00","uV":"2023-09-10T23:59:00","ji":"2023-09-11T18:30:00","oA":"2023-09-13T11:59:00","RQ":"2023-09-15T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1PO11Fi6HQTPpsuTm7ek5OQuZ-geL-JtjQ4wMlqoTJWg/edit?usp=sharing","Uo":false},"oZ":{"Q_":"2023-08-28","I8":"2023-09-29T23:59:00","Uo":false},"iV":{"Q_":"2023-09-18","GB":"2023-09-25T23:59:00","CT":"2023-10-01T23:59:00","EA":"2023-10-15T23:59:00","G_":"2023-10-29T23:59:00","jY":"2023-11-06T18:30:00","xs":"2023-11-15","Kq":true,"Y_":"2023-11-22T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1f-r-hNkBWVfXXPcpUbN37oF6DhT6Ap61AwsMkfvRjEA/edit?usp-sharing","Uo":false}}')}},function(e){e.O(0,[673,774,888,179],function(){return e(e.s=8532)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/coursework/project-e43a0b4b20f81d74.js b/_next/static/chunks/pages/coursework/project-e43a0b4b20f81d74.js new file mode 100644 index 0000000..dffc44c --- /dev/null +++ b/_next/static/chunks/pages/coursework/project-e43a0b4b20f81d74.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[431],{8532:function(e,o,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/coursework/project",function(){return t(5782)}])},4592:function(e,o,t){"use strict";t.d(o,{Z:function(){return n}});var i=t(5893);function n(e){let{date:o,emphasize:t=!0}=e,n=new Intl.DateTimeFormat("en-SG",{dateStyle:"full",timeStyle:o.includes(":")?"short":void 0,timeZone:"Asia/Singapore"}).format(new Date(o));return(0,i.jsx)(t?"strong":"span",{suppressHydrationWarning:!0,children:n})}},5782:function(e,o,t){"use strict";t.r(o),t.d(o,{default:function(){return m}});var i=t(5893),n=t(2673),r=t(1151),s=t(5675),a=t.n(s),l={src:"/_next/static/media/paperbaton.d1100df4.jpg",height:1365,width:2048,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAJBN/wD/xAAcEAACAgIDAAAAAAAAAAAAAAABAwUSAAIEE0H/2gAIAQEAAT8AipffeRVxFrK+wXsGHw1z/8QAGhEAAQUBAAAAAAAAAAAAAAAAAQACAzFCYf/aAAgBAgEBPwCQ8bZyF//EABkRAAIDAQAAAAAAAAAAAAAAAAExAAIhQf/aAAgBAwEBPwCoelDs/9k=",blurWidth:8,blurHeight:5},h=t(1712),d=t(1236),c=t(3470),p=t(4592);function u(e){let o=Object.assign({h1:"h1",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",span:"span",h2:"h2",p:"p",a:"a",ul:"ul",li:"li",em:"em",ol:"ol",h3:"h3",strong:"strong"},(0,r.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.h1,{children:"Final Project"}),"\n",c.iV.Uo&&(0,i.jsx)(d.UW,{type:"warning",children:" The final project write-up is currently being updated. Details are tentative and will be finalised soon."}),"\n",(0,i.jsxs)(o.table,{children:[(0,i.jsx)(o.thead,{children:(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.th,{align:"left",children:"Item"}),(0,i.jsx)(o.th,{align:"left",children:"Due"})]})}),(0,i.jsxs)(o.tbody,{children:[(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Issue date"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.Q_,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Team formation deadline"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.GB,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Proposal"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.CT,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Progress report 1"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.EA,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Progress report 2"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.G_,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"In-class progress report"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.jY,emphasize:!1})})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Poster session"}),(0,i.jsxs)(o.td,{align:"left",children:[(0,i.jsx)(p.Z,{date:c.iV.xs,emphasize:!1}),c.iV.Kq&&(0,i.jsx)(o.span,{children:" (TBC)"})]})]}),(0,i.jsxs)(o.tr,{children:[(0,i.jsx)(o.td,{align:"left",children:"Final report"}),(0,i.jsx)(o.td,{align:"left",children:(0,i.jsx)(p.Z,{date:c.iV.Y_,emphasize:!1})})]})]})]}),"\n",(0,i.jsx)(o.h2,{id:"general-overview",children:"General Overview"}),"\n",(0,i.jsx)(o.p,{children:"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents."}),"\n",(0,i.jsxs)(o.p,{children:["For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the ",(0,i.jsx)(o.a,{href:c.iV.zY,children:"Student Grouping Google Sheet"})," by ",(0,i.jsx)(p.Z,{date:c.iV.GB}),". Each team is to submit a project proposal by ",(0,i.jsx)(p.Z,{date:c.iV.CT})," (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester."]}),"\n",(0,i.jsx)(o.p,{children:"Your team can design the whole application, but if the scope is too large to be completed in one semester and you intend to continue to develop your application for a business venture, you can implement a prototype with some basic (or limited) functionality to satisfy the requirements for the class. Please state such intentions clearly in your proposals. The teaching staff will evaluate your proposals carefully and provide you with our feedback within a week."}),"\n",(0,i.jsx)(o.p,{children:'There are no limits on what students can do for the final problem, though the expectation is that it must be a "cool" application or product. The following are possibilities:'}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"A real-time HTML5 game"}),"\n",(0,i.jsx)(o.li,{children:"A FB Messenger / Telegram bot"}),"\n",(0,i.jsx)(o.li,{children:"A new e-commerce application. This can be the basis for a submission to the Start-Up@Singapore contest"}),"\n",(0,i.jsx)(o.li,{children:"A mobile application. You may choose to build a native app if you like"}),"\n",(0,i.jsx)(o.li,{children:"An entry for the Microsoft Imagine Cup"}),"\n",(0,i.jsxs)(o.li,{children:["Some amusement – cute and useless, but ",(0,i.jsx)(o.em,{children:"fun"})," and popular"]}),"\n",(0,i.jsx)(o.li,{children:"An e-learning application of sorts"}),"\n",(0,i.jsx)(o.li,{children:"An Internet of Things hack"}),"\n",(0,i.jsx)(o.li,{children:"An application to improve school life, something along the lines of NUSMods / NUSWhispers?"}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:['The possibilities are endless. If you plan to develop a social networking application, you are expected to deploy your Final Project at least two to three weeks before the end of the semester because the "proof of the pudding is in the eating". You should get ',(0,i.jsx)(o.em,{children:"real"})," people to use your applications, and the popularity of your application can be (but is not the only) criteria for the evaluation."]}),"\n",(0,i.jsx)(o.p,{children:'If one of the apps you developed for one of the previous assignments turned out to be to very popular (i.e. has lots of users or a high growth rate) or has perceived potential, you may also choose to further develop it as your Final Project. The only minor complication is that you might be "locked-in" to work with the same team members. We leave you to sort such things out by yourself.'}),"\n",(0,i.jsx)(o.h2,{id:"course-policy-on-final-project-groupings",children:"Course Policy on Final Project Groupings"}),"\n",(0,i.jsx)(o.p,{children:'People can be in two Final Project groups. This often happens when someone from an assignment group gets distracted and want to try something new but cannot really bear to "leave their baby" and still want to be a part of that group. Fair enough.'}),"\n",(0,i.jsxs)(o.p,{children:["However, your Final Project grade will come from ",(0,i.jsx)(o.em,{children:"ONE"})," project that you will specify/declare right at the onset, i.e. by the end of the mid-term break. The rationale for this policy is that we don't want people to jump ship halfway and leave others high and dry. With this policy, everyone knows everyone's priorities. The \"extra\" members don't count towards the 4-member limit for a project team."]}),"\n",(0,i.jsx)(o.p,{children:"If you decide to work with external parties, we do not have any official guide on what compensation you should negotiate. We leave it to you to decide for yourselves what is fair. However, DO NOT work for companies that clearly neither value nor respect you."}),"\n",(0,i.jsx)(o.h2,{id:"final-project-proposal",children:"Final Project Proposal"}),"\n",(0,i.jsxs)(o.p,{children:["Your team should submit a project proposal by ",(0,i.jsx)(p.Z,{date:c.iV.CT})," to the Coursemology workbin. The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you plan to develop."}),"\n",(0,i.jsx)(o.li,{children:'Justification for choosing this project idea. Briefly mention the 3 key points: "Problem is real? Problem can be solved in CS3216? Problem has impact?"'}),"\n",(0,i.jsx)(o.li,{children:"Project schedule: milestones and timeline, including an implementation plan and deployment plan."}),"\n",(0,i.jsx)(o.li,{children:"Individual contribution and roles. Contributions and/or support from external partners, if any."}),"\n",(0,i.jsx)(o.li,{children:"Long-term plan and business model (if applicable)."}),"\n",(0,i.jsx)(o.li,{children:"Marketing and strategies to be employed."}),"\n",(0,i.jsx)(o.li,{children:"High-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used)."}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"development-of-final-project",children:"Development of Final Project"}),"\n",(0,i.jsx)(o.p,{children:"Each team will meet with the teaching staff (probably lecturer + TA) for a one-hour preliminary meeting after receiving your feedback on your Final Project proposal. The meetings will be biweekly. Look out in your emails for the meeting schedules."}),"\n",(0,i.jsx)(o.p,{children:"These are compulsory sessions where the schedule is flexible and should be determined by both parties."}),"\n",(0,i.jsx)(o.h2,{id:"customer-contact-reports",children:"Customer Contact Reports"}),"\n",(0,i.jsx)(o.p,{children:'We have told you time and again to "go out there and talk to your customers", and we\'re serious. 10% of your project grade will come from your "Customer Contact Reports". Use any reasonable report format to record your customer contact details and the interactions with your potential users. You are expected to produce a contact report at every consultation session.'}),"\n",(0,i.jsx)(o.h2,{id:"progress-reports",children:"Progress Reports"}),"\n",(0,i.jsxs)(o.p,{children:["Each team will be required to submit a progress report on ",(0,i.jsx)(p.Z,{date:c.iV.EA})," to the Coursemology workbin. The progress report should include ",(0,i.jsx)("strong",{children:"minimally"})," the following:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Application prototype. Minimally as functional as what was achieved in Assignment 3."}),"\n",(0,i.jsx)(o.li,{children:"Is your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule?"}),"\n",(0,i.jsx)(o.li,{children:"What were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them?"}),"\n",(0,i.jsx)(o.li,{children:"Any changes to the application since the initial project proposal?"}),"\n",(0,i.jsx)(o.li,{children:"Assuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with?"}),"\n",(0,i.jsx)(o.li,{children:"Updated project schedule: milestones and timeline."}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["A second progress report will be due on ",(0,i.jsx)(p.Z,{date:c.iV.G_}),". The contents of which would be similar to the first progress report."]}),"\n",(0,i.jsx)(o.p,{children:"Please try to keep your reports to within two pages, or a maximum of 3 pages if you really must."}),"\n",(0,i.jsx)(o.h2,{id:"final-project-presentation",children:"Final Project Presentation"}),"\n",(0,i.jsxs)(o.p,{children:["On ",(0,i.jsx)(p.Z,{date:c.iV.jY}),", each team will make a presentation to the rest of the class on your project. This session will be another round of peer-appraisal by your peers. Your goal is to convince your fellow coursemates that your project is really cool, and that you have done a lot of work and great work. Think of it as round 2 of your innovation seminar, but you are selling your own dog food."]}),"\n",(0,i.jsx)(o.h2,{id:"preliminary-security-scanning",children:"Preliminary Security Scanning"}),"\n",(0,i.jsxs)(o.p,{children:["At this juncture ",(0,i.jsx)(p.Z,{date:c.iV.jY}),", you should have a preliminary website for your app up and running, even if it is not fully functional. You are expected to provide us with a URL, and the tutors will be using security tools to scan your site. You will be provided with a security report, and you are expected to address the cited issues for your final project. Clearly, if your project is very incomplete, very little will be found, but you then risk more bad things being found after your final project is submitted. We will be doing another round of security scanning after your final project is submitted."]}),"\n",(0,i.jsx)(o.h2,{id:"soc-steps",children:"SoC STePS"}),"\n",(0,i.jsxs)(o.p,{children:["In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on ",(0,i.jsx)(p.Z,{date:c.iV.xs})," ",c.iV.Kq&&(0,i.jsx)(o.span,{children:"(TBC)"})," from 3pm to 7pm as part of the School of Computing Term Projects Showcase (STePS)."]}),"\n",(0,i.jsx)(o.p,{children:'Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the "show-and-tell". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from "other people" — NUS staff, students, alumni, guests — who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses.'}),"\n",(0,i.jsx)(o.p,{children:"Again, you can choose how you want to present your work. You can bring along other materials in addition to the posters, such as your iPads, or set up your laptops to do a demo also. We'll leave it up to you!"}),"\n",(0,i.jsx)(o.h3,{id:"final-project-video",children:"Final Project Video"}),"\n",(0,i.jsx)(o.p,{children:"Traditionally, every team is required to make a 1-minute video to be submitted to the STePS organising committee. Here's a playlist of past years' videos."}),"\n",(0,i.jsx)(h.zu,{children:(0,i.jsx)("iframe",{src:"https://www.youtube.com/embed/videoseries?list=PLLYjqEF13ESyh-Rpm_-XtJzOqm5MeEnrj",width:"100%",height:"500px"})}),"\n",(0,i.jsx)(o.h3,{id:"marketing-efforts",children:"Marketing Efforts"}),"\n",(0,i.jsx)(o.p,{children:"As part of the user acquisition process, many teams set up their own social media page to publicise their products and gain initial traction before the actual STePS event. Here's what the top three teams of AY2015/16 did on Facebook:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Letterbox"})," went around the school on a hoverboard and handed out flyers. They also managed to launch their apps to the iOS App Store and Google Play Store before the event (a seriously impressive feat)."]}),"\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Griddit"})," created an anonymous chatroom for NUSWhispers and organised an ",(0,i.jsx)(o.a,{href:"http://blog.griddit.io/post/133470245990/professor-ben-leongs-ask-me-anything",children:"AMA with Prof Ben Leong"}),", which saw over 400 participants."]}),"\n",(0,i.jsxs)(o.li,{children:[(0,i.jsx)(o.strong,{children:"Paperbaton"})," launched a ",(0,i.jsx)(o.a,{href:"https://paperbaton.com/blog/",children:"blog with helpful tips"})," and also a complementing product, ",(0,i.jsx)(o.a,{href:"https://paperbaton.com/blog/introducing-nusexam/",children:"NUSExam"}),", a Past-Year Question Paper Downloader for NUS Students."]}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["These three teams also created Facebook pages to engage users continually. Have a look at the Facebook pages of ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/getletterbox",children:"Letterbox"}),", ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/griddit",children:"Griddit"})," and ",(0,i.jsx)(o.a,{href:"https://www.facebook.com/paperbaton",children:"Paperbaton"})," to get a sense of what sort of pre-STePS publicity can be done."]}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(a(),{alt:"Paperbaton Team",placeholder:"blur",src:l})}),"\n",(0,i.jsx)(o.h3,{id:"final-project-poster",children:"Final Project Poster"}),"\n",(0,i.jsx)(o.p,{children:"The final A1-sized project poster should (at least) include the following points:"}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you have developed."}),"\n",(0,i.jsx)(o.li,{children:"What makes your application special?"}),"\n",(0,i.jsx)(o.li,{children:"Screenshots, graphics, diagrams and tables. Probably fewer words."}),"\n",(0,i.jsx)(o.li,{children:"Prepare a snappy yet catchy 1-2 minute pitch that you can use (over and over) when presenting your poster."}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"Remember, avoid overloading the poster with too much (small) text. This will ensure that people won't want to read what's on your poster. Add in pictures, graphics, diagrams and tables when appropriate. You are there to \"sell\" people your idea, to make them convinced that your application is unique and creative, and NOT to put them to sleep."}),"\n",(0,i.jsx)(o.p,{children:"Some examples of past STePS posters:"}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/letterbox.pdf",children:(0,i.jsx)("img",{alt:"Letterbox Poster",src:"/img/posters/letterbox-thumbnail.png"})})}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/paperbaton.pdf",children:(0,i.jsx)("img",{alt:"Paperbaton Poster",src:"/img/posters/paperbaton-thumbnail.png"})})}),"\n",(0,i.jsx)("p",{children:(0,i.jsx)("a",{target:"_blank",href:"/img/posters/una.pdf",children:(0,i.jsx)("img",{alt:"Una Poster",src:"/img/posters/una-thumbnail.png"})})}),"\n",(0,i.jsx)(o.h2,{id:"final-project-report",children:"Final Project Report"}),"\n",(0,i.jsxs)(o.p,{children:["Like most other classes, the Final Project report is to be submitted by ",(0,i.jsx)(p.Z,{date:c.iV.Y_})," to the Coursemology workbin. The final report should (at least) include the following points:"]}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Description of the application you have developed."}),"\n",(0,i.jsx)(o.li,{children:"Are there any existing applications out there that are similar? What makes your application special?"}),"\n",(0,i.jsx)(o.li,{children:"Review of milestones and timeline for the project (which ones did you hit, what ones did you miss?)."}),"\n",(0,i.jsx)(o.li,{children:"Individual contribution and roles. Acknowledgement of resources/help provided by external parties."}),"\n",(0,i.jsx)(o.li,{children:"Application design (e.g. database schema, UML, etc., but no code please)."}),"\n",(0,i.jsx)(o.li,{children:"Report on the current number of users who have installed, active users, etc. Perhaps Google Analytics data and screenshots (or similar analytics tools) to support your claims."}),"\n",(0,i.jsx)(o.li,{children:"Future plans and strategies."}),"\n",(0,i.jsx)(o.li,{children:"Insights gained from the project. What did you learn from doing the Final Project?"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"We do not specify a required page length, though we expect that most reports will be about 10 to 15 pages in length. The report definitely SHOULD NOT exceed 20 pages, please. Once you submit the Final Project report, you are done with CS3216! Congratulations!"}),"\n",(0,i.jsx)(o.h2,{id:"assessment-scheme",children:"Assessment Scheme"}),"\n",(0,i.jsx)(o.p,{children:"The Final Project is worth 50% of the total grade for CS3216. The Final Project will be graded according to the following weightage:"}),"\n",(0,i.jsxs)(o.ul,{children:["\n",(0,i.jsx)(o.li,{children:"5% Project Proposal"}),"\n",(0,i.jsx)(o.li,{children:"10% Customer Contact Report"}),"\n",(0,i.jsx)(o.li,{children:"5% Progress Report"}),"\n",(0,i.jsx)(o.li,{children:"10% Progress Report 2"}),"\n",(0,i.jsx)(o.li,{children:"10% In-class Final Project presentation (awarded by your peers)"}),"\n",(0,i.jsx)(o.li,{children:"30% Poster Presentation (awarded by the panel of judges)"}),"\n",(0,i.jsx)(o.li,{children:"30% Final Report"}),"\n"]}),"\n",(0,i.jsx)(o.p,{children:"The fact that 30% of the grade for the Final Project is determined by the outcome of your poster presentation might make it seem somewhat random and arbitrary, but this mimics life. Success comes not only from how well you do something but from how well you can sell it (or convince suckers to buy your stuff even if it's completely useless and they don't actually need it \uD83D\uDE1C). This is also where the marketing people make themselves useful. You are graded on the quality and relevance of your posters, your sales pitch, marketing collaterals, the quality of your apps, etc."}),"\n",(0,i.jsx)(o.p,{children:"For those of you doing external projects, your team is treated as a consultancy. You are graded by how well you manage your consultancy, e.g., frequency of meetings with your clients, quality of questions asked, quality of solutions proposed, and how you negotiate your compensation package. For those doing your own project, you are treated as a startup. We assess you on how well you manage your market validation, how well you design your marketing campaign, how you go out and bring in users, etc."}),"\n",(0,i.jsx)(o.h2,{id:"mode-of-submission",children:"Mode of Submission"}),"\n",(0,i.jsx)(o.p,{children:"The following is the list of deliverables to be pushed to your GitHub repository:"}),"\n",(0,i.jsxs)(o.ol,{children:["\n",(0,i.jsx)(o.li,{children:"Source code."}),"\n",(0,i.jsx)(o.li,{children:"You should also upload a copy of your poster to your repository."}),"\n",(0,i.jsx)(o.li,{children:"Proof of working application: You may either (a) Publish the application publicly (in the application settings, untick the Developer Mode); or (b) Add all the members of the teaching staff to the Developers part in the application settings so that we can assess your application (of course you need to add us as your friends first). In both cases, you should provide us with a link to your application's canvas page."}),"\n",(0,i.jsx)(o.li,{children:"Your Final Project report, in PDF format."}),"\n"]}),"\n",(0,i.jsxs)(o.p,{children:["Push all of the above to your GitHub repository. ",(0,i.jsx)(o.strong,{children:"Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks."})]}),"\n",(0,i.jsx)(o.p,{children:"Clarifications and questions related to this assignment should be posted on the Coursemology Forum."}),"\n",(0,i.jsx)(o.p,{children:"Good luck, have fun. Live long and prosper!"})]})}var m=(0,n.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:o}=Object.assign({},(0,r.ah)(),e.components);return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(u,{...e})}):u(e)},pageOpts:{filePath:"pages/coursework/project.mdx",route:"/coursework/project",frontMatter:{title:"Final Project",description:"Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents."},headings:[{depth:1,value:"Final Project",id:"final-project"},{depth:2,value:"General Overview",id:"general-overview"},{depth:2,value:"Course Policy on Final Project Groupings",id:"course-policy-on-final-project-groupings"},{depth:2,value:"Final Project Proposal",id:"final-project-proposal"},{depth:2,value:"Development of Final Project",id:"development-of-final-project"},{depth:2,value:"Customer Contact Reports",id:"customer-contact-reports"},{depth:2,value:"Progress Reports",id:"progress-reports"},{depth:2,value:"Final Project Presentation",id:"final-project-presentation"},{depth:2,value:"Preliminary Security Scanning",id:"preliminary-security-scanning"},{depth:2,value:"SoC STePS",id:"soc-steps"},{depth:3,value:"Final Project Video",id:"final-project-video"},{depth:3,value:"Marketing Efforts",id:"marketing-efforts"},{depth:3,value:"Final Project Poster",id:"final-project-poster"},{depth:2,value:"Final Project Report",id:"final-project-report"},{depth:2,value:"Assessment Scheme",id:"assessment-scheme"},{depth:2,value:"Mode of Submission",id:"mode-of-submission"}],timestamp:1696211317e3,title:"Final Project"},pageNextRoute:"/coursework/project"})},3470:function(e){"use strict";e.exports=JSON.parse('{"td":{"Q_":"2023-08-21","I8":"2023-09-04T23:59:00","Uo":false},"No":{"Q_":"2023-08-14","qQ":"2023-08-28T23:59:00","uV":"2023-09-10T23:59:00","ji":"2023-09-11T18:30:00","oA":"2023-09-13T11:59:00","RQ":"2023-09-15T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1PO11Fi6HQTPpsuTm7ek5OQuZ-geL-JtjQ4wMlqoTJWg/edit?usp=sharing","Uo":false},"oZ":{"Q_":"2023-08-28","I8":"2023-09-29T23:59:00","Uo":false},"iV":{"Q_":"2023-09-18","GB":"2023-09-25T23:59:00","CT":"2023-10-01T23:59:00","EA":"2023-10-15T23:59:00","G_":"2023-10-29T23:59:00","jY":"2023-11-06T18:30:00","xs":"2023-11-15","Kq":true,"Y_":"2023-11-22T23:59:00","zY":"https://docs.google.com/spreadsheets/d/1f-r-hNkBWVfXXPcpUbN37oF6DhT6Ap61AwsMkfvRjEA/edit?usp-sharing","Uo":false}}')}},function(e){e.O(0,[673,774,888,179],function(){return e(e.s=8532)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/mKodP-7qVj6rHt-lYdbjT/_buildManifest.js b/_next/static/pwm3RoUJ0voIWoOxmxozR/_buildManifest.js similarity index 93% rename from _next/static/mKodP-7qVj6rHt-lYdbjT/_buildManifest.js rename to _next/static/pwm3RoUJ0voIWoOxmxozR/_buildManifest.js index 47019b0..20568a0 100644 --- a/_next/static/mKodP-7qVj6rHt-lYdbjT/_buildManifest.js +++ b/_next/static/pwm3RoUJ0voIWoOxmxozR/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,c){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,"static/chunks/pages/index-b27474b4aea45efd.js"],"/_error":["static/chunks/pages/_error-54de1933a164a1ff.js"],"/archive/mobile":[s,"static/chunks/pages/archive/mobile-d5b5322d04287d92.js"],"/cohorts/AY201516":[s,c,"static/chunks/pages/cohorts/AY201516-1398d39b057585de.js"],"/cohorts/AY201617":[s,c,"static/chunks/pages/cohorts/AY201617-6be4814c9d9e5216.js"],"/cohorts/AY201718":[s,c,"static/chunks/pages/cohorts/AY201718-17bd61456e3ca76a.js"],"/cohorts/AY201819":[s,c,"static/chunks/pages/cohorts/AY201819-953a6ef98990b538.js"],"/cohorts/AY201920":[s,c,"static/chunks/pages/cohorts/AY201920-65dbe46917693cd1.js"],"/cohorts/AY202021":[s,c,"static/chunks/pages/cohorts/AY202021-dbc40417f5926a1a.js"],"/cohorts/AY202122":[s,c,"static/chunks/pages/cohorts/AY202122-344efa3616b3a73d.js"],"/cohorts/AY202223":[s,c,"static/chunks/pages/cohorts/AY202223-552c44be533222f0.js"],"/cohorts/AY202324":[s,c,"static/chunks/pages/cohorts/AY202324-b7623b108df519b8.js"],"/coursework":[s,"static/chunks/pages/coursework-96d4c38c79fea6ed.js"],"/coursework/artificial-intelligence":[s,"static/chunks/pages/coursework/artificial-intelligence-0bd930cb8965fac3.js"],"/coursework/product-design":[s,"static/chunks/pages/coursework/product-design-d307a451e34ac6fd.js"],"/coursework/project":[s,"static/chunks/pages/coursework/project-bf6b9d860d5c38b2.js"],"/coursework/seminar":[s,"static/chunks/pages/coursework/seminar-286cd3665cb1c16f.js"],sortedPages:["/","/_app","/_error","/archive/mobile","/cohorts/AY201516","/cohorts/AY201617","/cohorts/AY201718","/cohorts/AY201819","/cohorts/AY201920","/cohorts/AY202021","/cohorts/AY202122","/cohorts/AY202223","/cohorts/AY202324","/coursework","/coursework/artificial-intelligence","/coursework/product-design","/coursework/project","/coursework/seminar"]}}("static/chunks/673-ec1ccb4c07296023.js","static/chunks/634-7eb28a722516bf8e.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST=function(s,c){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,"static/chunks/pages/index-b27474b4aea45efd.js"],"/_error":["static/chunks/pages/_error-54de1933a164a1ff.js"],"/archive/mobile":[s,"static/chunks/pages/archive/mobile-d5b5322d04287d92.js"],"/cohorts/AY201516":[s,c,"static/chunks/pages/cohorts/AY201516-1398d39b057585de.js"],"/cohorts/AY201617":[s,c,"static/chunks/pages/cohorts/AY201617-6be4814c9d9e5216.js"],"/cohorts/AY201718":[s,c,"static/chunks/pages/cohorts/AY201718-17bd61456e3ca76a.js"],"/cohorts/AY201819":[s,c,"static/chunks/pages/cohorts/AY201819-953a6ef98990b538.js"],"/cohorts/AY201920":[s,c,"static/chunks/pages/cohorts/AY201920-65dbe46917693cd1.js"],"/cohorts/AY202021":[s,c,"static/chunks/pages/cohorts/AY202021-dbc40417f5926a1a.js"],"/cohorts/AY202122":[s,c,"static/chunks/pages/cohorts/AY202122-344efa3616b3a73d.js"],"/cohorts/AY202223":[s,c,"static/chunks/pages/cohorts/AY202223-552c44be533222f0.js"],"/cohorts/AY202324":[s,c,"static/chunks/pages/cohorts/AY202324-b7623b108df519b8.js"],"/coursework":[s,"static/chunks/pages/coursework-96d4c38c79fea6ed.js"],"/coursework/artificial-intelligence":[s,"static/chunks/pages/coursework/artificial-intelligence-8517e286e30e00bc.js"],"/coursework/product-design":[s,"static/chunks/pages/coursework/product-design-d307a451e34ac6fd.js"],"/coursework/project":[s,"static/chunks/pages/coursework/project-e43a0b4b20f81d74.js"],"/coursework/seminar":[s,"static/chunks/pages/coursework/seminar-286cd3665cb1c16f.js"],sortedPages:["/","/_app","/_error","/archive/mobile","/cohorts/AY201516","/cohorts/AY201617","/cohorts/AY201718","/cohorts/AY201819","/cohorts/AY201920","/cohorts/AY202021","/cohorts/AY202122","/cohorts/AY202223","/cohorts/AY202324","/coursework","/coursework/artificial-intelligence","/coursework/product-design","/coursework/project","/coursework/seminar"]}}("static/chunks/673-ec1ccb4c07296023.js","static/chunks/634-7eb28a722516bf8e.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/mKodP-7qVj6rHt-lYdbjT/_ssgManifest.js b/_next/static/pwm3RoUJ0voIWoOxmxozR/_ssgManifest.js similarity index 100% rename from _next/static/mKodP-7qVj6rHt-lYdbjT/_ssgManifest.js rename to _next/static/pwm3RoUJ0voIWoOxmxozR/_ssgManifest.js diff --git a/archive/mobile.html b/archive/mobile.html index cf2a990..80ad2e9 100644 --- a/archive/mobile.html +++ b/archive/mobile.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Archive
Mobile Cloud App

Mobile Cloud Application

+
Archive
Mobile Cloud App

Mobile Cloud Application

⚠️

This assignment has been archived and no longer in-use. It is kept for reference purposes.

General Overview

@@ -594,4 +594,4 @@

Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.

Clarifications and questions related to this assignment should be posted to the Coursemology Forum.

-

Good luck and have fun!

AY2015/16

CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

Good luck and have fun!

AY2015/16
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY201516.html b/cohorts/AY201516.html index c76f3bb..9637594 100644 --- a/cohorts/AY201516.html +++ b/cohorts/AY201516.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2015/16

Class of 2015

+
Cohorts
AY2015/16

Class of 2015

Students

-
Class photo
AY2016/17Mobile Cloud App
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2016/17Mobile Cloud App
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY201617.html b/cohorts/AY201617.html index 28b5e24..6f3eb2d 100644 --- a/cohorts/AY201617.html +++ b/cohorts/AY201617.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2016/17

Class of 2016

+
Cohorts
AY2016/17

Class of 2016

Students

-
Class photo
AY2017/18AY2015/16
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2017/18AY2015/16
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY201718.html b/cohorts/AY201718.html index d51d45a..bc85ff9 100644 --- a/cohorts/AY201718.html +++ b/cohorts/AY201718.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2017/18

Class of 2017

+
Cohorts
AY2017/18

Class of 2017

Students

-
Class photo
AY2018/19AY2016/17
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2018/19AY2016/17
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY201819.html b/cohorts/AY201819.html index 32ec7a5..805aa7c 100644 --- a/cohorts/AY201819.html +++ b/cohorts/AY201819.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2018/19

Class of 2018

+
Cohorts
AY2018/19

Class of 2018

Students

-
Class photo
AY2019/20AY2017/18
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2019/20AY2017/18
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY201920.html b/cohorts/AY201920.html index 06bdac0..ab2d6f5 100644 --- a/cohorts/AY201920.html +++ b/cohorts/AY201920.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2019/20

Class of 2019

+
Cohorts
AY2019/20

Class of 2019

Students

-
Class photo
AY2020/21AY2018/19
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2020/21AY2018/19
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY202021.html b/cohorts/AY202021.html index 5e24649..99c127e 100644 --- a/cohorts/AY202021.html +++ b/cohorts/AY202021.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2020/21

Class of 2020

+
Cohorts
AY2020/21

Class of 2020

Students

-
Class photo
AY2021/22AY2019/20
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Class photo
AY2021/22AY2019/20
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY202122.html b/cohorts/AY202122.html index 7fd66d6..d45383e 100644 --- a/cohorts/AY202122.html +++ b/cohorts/AY202122.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2021/22

Class of 2021

+
Cohorts
AY2021/22

Class of 2021

Students

-
AY2022/23AY2020/21
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
AY2022/23AY2020/21
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY202223.html b/cohorts/AY202223.html index 20e4f7d..38e693d 100644 --- a/cohorts/AY202223.html +++ b/cohorts/AY202223.html @@ -9,6 +9,6 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2022/23

Class of 2022

+
Cohorts
AY2022/23

Class of 2022

Students

-
AY2023/24AY2021/22
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
AY2023/24AY2021/22
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/cohorts/AY202324.html b/cohorts/AY202324.html index 366f5be..5c4f2c8 100644 --- a/cohorts/AY202324.html +++ b/cohorts/AY202324.html @@ -9,8 +9,8 @@ .dark { --nextra-primary-hue: 106deg; } -
Cohorts
AY2023/24

Class of 2023

+
Cohorts
AY2023/24

Class of 2023

Teaching Staff

Students

-
Final ProjectAY2022/23
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Final ProjectAY2022/23
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/coursework.html b/coursework.html index 46d37c0..45dad91 100644 --- a/coursework.html +++ b/coursework.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Coursework

Coursework Overview

+
Coursework

Coursework Overview

Assignment 1 — Product Design

In this assignment, you will put on your designer hat and learn how to design a software product, and come up with ideas, features and designs.

Assignment 2 — Innovation Seminar

@@ -17,4 +17,4 @@

Assignment 3 — Artificial Intelligence Application

The high-level goal of this assignment is to utilize generative AI (large language models (LLMs) in particular) to build a meaningful digital product and is able to persist users' data in the cloud. Your task is to demonstrate that you can build a web application that integrates with LLM services using well-designed prompts. You can use any backend language and/or framework you desire.

Final Project

-

The Final Project is where you will showcase to the world your creativity and talents. There are no limits on what students can do for the final problem, though the expectation is that it must be a "cool" application or product

IntroductionProduct Design
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

The Final Project is where you will showcase to the world your creativity and talents. There are no limits on what students can do for the final problem, though the expectation is that it must be a "cool" application or product

IntroductionProduct Design
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/coursework/artificial-intelligence.html b/coursework/artificial-intelligence.html index 2467754..fd552e6 100644 --- a/coursework/artificial-intelligence.html +++ b/coursework/artificial-intelligence.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Coursework
Artificial Intelligence

Assignment 3 — Artificial Intelligence Application

+
Coursework
Artificial Intelligence

Assignment 3 — Artificial Intelligence Application

ItemDue
Issue dateMonday, 28 August 2023
Final submissionSaturday, 30 September 2023 at 7:59 am

General Overview

@@ -537,7 +537,7 @@

The following will need to be both submitted to Coursemology (under "Assignment 3 — Artificial Intelligence Application") and included in your GitHub repository:

  1. -

    A write-up, group-<number>-milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your live application and link to the public GitHub repository is clearly stated in the write-up for the convenience of the teaching staff.

    +

    A write-up, group-<number>-milestones.pdf, containing your answers to all compulsory milestones that require written answers. Categorise your answers by the milestones they belong to. Please make sure that the URL for your live application and link to the public GitHub repository is clearly stated in the write-up for the convenience of the teaching staff.

  2. A one/two-page pitch of your application, group-<number>-pitch.pdf, pitching your application to the teaching staff, i.e. convince us that your application is so good that it deserves all 30% of the coolness points. Restriction: no longer than 2 A4 sides.

    @@ -569,4 +569,4 @@

    Suzanna Sia

  3. Tong Hui Kang
  4. Rishabh Anand
    5. -
    Innovation SeminarFinal Project

CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +
Innovation SeminarFinal Project
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/coursework/product-design.html b/coursework/product-design.html index 06af60a..383f3dd 100644 --- a/coursework/product-design.html +++ b/coursework/product-design.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Coursework
Product Design

Assignment 1 — Product Design

+
Coursework
Product Design

Assignment 1 — Product Design

ItemDue
Issue dateMonday, 21 August 2023
Final submissionTuesday, 5 September 2023 at 7:59 am

General Overview

@@ -361,4 +361,4 @@

Clarifications and questions related to this assignment should be posted to the Coursemology forum.

-

Good luck and have fun!

CourseworkInnovation Seminar

CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

Good luck and have fun!

CourseworkInnovation Seminar
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/coursework/project.html b/coursework/project.html index d7564b0..72d6dd2 100644 --- a/coursework/project.html +++ b/coursework/project.html @@ -9,9 +9,9 @@ .dark { --nextra-primary-hue: 106deg; } -
Coursework
Final Project

Final Project

+
Coursework
Final Project

Final Project

-
ItemDue
Issue dateMonday, 18 September 2023
Team formation deadlineTuesday, 26 September 2023 at 7:59 am
ProposalMonday, 2 October 2023 at 7:59 am
Progress report 1Monday, 16 October 2023 at 7:59 am
Progress report 2Monday, 30 October 2023 at 7:59 am
In-Class progress reportTuesday, 7 November 2023 at 2:30 am
Poster sessionWednesday, 15 November 2023 (TBC)
Final reportThursday, 23 November 2023 at 7:59 am
+
ItemDue
Issue dateMonday, 18 September 2023
Team formation deadlineTuesday, 26 September 2023 at 7:59 am
ProposalMonday, 2 October 2023 at 7:59 am
Progress report 1Monday, 16 October 2023 at 7:59 am
Progress report 2Monday, 30 October 2023 at 7:59 am
In-class progress reportTuesday, 7 November 2023 at 2:30 am
Poster sessionWednesday, 15 November 2023 (TBC)
Final reportThursday, 23 November 2023 at 7:59 am

General Overview

Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents.

For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the Student Grouping Google Sheet (opens in a new tab) by Tuesday, 26 September 2023 at 7:59 am. Each team is to submit a project proposal by Monday, 2 October 2023 at 7:59 am (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester.

@@ -35,7 +35,7 @@

However, your Final Project grade will come from ONE project that you will specify/declare right at the onset, i.e. by the end of the mid-term break. The rationale for this policy is that we don't want people to jump ship halfway and leave others high and dry. With this policy, everyone knows everyone's priorities. The "extra" members don't count towards the 4-member limit for a project team.

If you decide to work with external parties, we do not have any official guide on what compensation you should negotiate. We leave it to you to decide for yourselves what is fair. However, DO NOT work for companies that clearly neither value nor respect you.

Final Project Proposal

-

Your team should submit a project proposal by Monday, 2 October 2023 at 7:59 am. The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:

+

Your team should submit a project proposal by Monday, 2 October 2023 at 7:59 am to the Coursemology workbin. The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points:

  1. Description of the application you plan to develop.
  2. Justification for choosing this project idea. Briefly mention the 3 key points: "Problem is real? Problem can be solved in CS3216? Problem has impact?"
    3. @@ -51,7 +51,7 @@

    Customer Contact Reports

    We have told you time and again to "go out there and talk to your customers", and we're serious. 10% of your project grade will come from your "Customer Contact Reports". Use any reasonable report format to record your customer contact details and the interactions with your potential users. You are expected to produce a contact report at every consultation session.

    Progress Reports

    -

    Each team will be required to submit a progress report on Monday, 16 October 2023 at 7:59 am. The progress report should include minimally the following:

    +

    Each team will be required to submit a progress report on Monday, 16 October 2023 at 7:59 am to the Coursemology workbin. The progress report should include minimally the following:

    1. Application prototype. Minimally as functional as what was achieved in Assignment 3.
    2. Is your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule?
      3. @@ -96,7 +96,7 @@

      Paperbaton Poster

      Una Poster

      Final Project Report

      -

      Like most other classes, the Final Project report is due on Thursday, 23 November 2023 at 7:59 am (to be uploaded to Coursemology by 23:59, please). The final report should (at least) include the following points:

      +

      Like most other classes, the Final Project report is to be submitted by Thursday, 23 November 2023 at 7:59 am to the Coursemology workbin. The final report should (at least) include the following points:

      1. Description of the application you have developed.
      2. Are there any existing applications out there that are similar? What makes your application special?
        3. @@ -131,4 +131,4 @@

        Push all of the above to your GitHub repository. Not following the submission instructions (e.g. incorrect file naming) will result in the deduction of marks.

        Clarifications and questions related to this assignment should be posted on the Coursemology Forum.

        -

        Good luck, have fun. Live long and prosper!

        Artificial IntelligenceAY2023/24

CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

Good luck, have fun. Live long and prosper!

Artificial IntelligenceAY2023/24
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/coursework/seminar.html b/coursework/seminar.html index b5bc313..c86594b 100644 --- a/coursework/seminar.html +++ b/coursework/seminar.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Coursework
Innovation Seminar

Assignment 2 — Innovation Seminar

+
Coursework
Innovation Seminar

Assignment 2 — Innovation Seminar

ItemDue
Issue dateMonday, 14 August 2023
Innovation submissionTuesday, 29 August 2023 at 7:59 am
Slides submissionMonday, 11 September 2023 at 7:59 am
PresentationTuesday, 12 September 2023 at 2:30 am
Innovation critiquesWednesday, 13 September 2023 at 7:59 pm
Mutual critiquesSaturday, 16 September 2023 at 7:59 am

General Overview

@@ -72,4 +72,4 @@

Clarifications and questions related to this assignment should be posted to the Coursemology forum.

The way this assignment is structured, it might seem very stressful — but it's really not quite as bad as it seems. It's actually fun if taken in the right spirit.

-

Good luck and have fun! 🙂

Product DesignArtificial Intelligence

CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

Good luck and have fun! 🙂

Product DesignArtificial Intelligence
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file diff --git a/index.html b/index.html index c006716..e85b8e9 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ .dark { --nextra-primary-hue: 106deg; } -
Introduction

Why CS3216?

+
Introduction

Why CS3216?

It's not the same

CS3216 is not your traditional software engineering course. You will not have lectures teaching you how to write in a particular programming language. You will not have assignments that assess you only for the quality of your code. You will not have a bar set for you. In fact, we don't even know how high the bar is.

It's about your dreams

@@ -20,4 +20,4 @@

It's not about learning how to work on a platform. It's about learning how to learn. It's about equipping yourself with the ability to pick up new skills on the fly to face a changing world.

It's not just about coding

Enrolment to this course is open to students of all faculties and students. You will work in small inter-disciplinary teams to create your killer applications.

-

Programming experience for non-School of Computing (SoC) students is not a pre-requisite since work will be done in teams. In previous years, we have had students from Science, Arts and Social Sciences, Business (including an MBA student) and Engineering in addition to SoC.

Coursework
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file +

Programming experience for non-School of Computing (SoC) students is not a pre-requisite since work will be done in teams. In previous years, we have had students from Science, Arts and Social Sciences, Business (including an MBA student) and Engineering in addition to SoC.

Coursework
CS3216 Software Product Engineering for Digital Markets
\ No newline at end of file