Lab 1 - HackMD

# Lab 1: Introduction to Java <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/r1ofRrzh0.gif"></img> Welcome to the second CS15 lab! This lab will help reinforce what you've learned so far by guiding you through writing a Java program. The TAs are here to help, so feel free to ask any questions about the lab, lectures, or general course material. **Please do not start this lab before your designated lab time! This is meant to be done collaboratively in pairs!** --- ## Lab 1 SRC: Privacy and Surveillance Capitalism In this lab, you will interact with Google's Personal Data Insights! ### Task 1 Go to [this website](https://adssettings.google.com/). ### Task 2 If you have personalized ads turned off: - Discuss with your partner why, if at all, you decided to make that choice. If you have personalized ads turned on: - Click around and observe! The three tabs listed below should be on the top left of your screen. Some things to look for: - In the My Ads tab: - Check out your recent ad topics and ad brands in the “See your latest” section - In the Customize Ads tab: - Check out the “Topic” and “Brands” tabs - In the Manage Privacy tab: - Check out the “Categories used to show you ads” and “Activity used to personalize ads” sections ### Task 3 Discuss with your partner the following: - How’s the accuracy of your profile? - Did anything surprise you? - Now that you’ve looked at this info, are you inclined to change any of your Google ads account settings? After you complete the above tasks, your TAs will call you back for a full group discussion. --- # Partner Programming For this lab, we’ll be working in pairs! You and your partner will sit together and code on your own devices. We want you to collaborate in labs, so bounce ideas off each other and work together! For this lab, we recommend reading the handout out loud together to help you follow along at the same time. We expect both partners to collaborate and work together at a similar pace! Both partners have to get checked off at each checkpoint together before either partner is allowed to move onto the next section. ### Concepts This lab is going to cover a lot of foundational concepts for object-oriented programming, including: * Importing pre-written classes * Using the **`this`** keyword * Calling and defining methods * Writing and instantiating classes * Class diagrams * Instance variables * **`return`**ing values * Using **`System.out.println`** to debug * Reading JavaDocs and using support code * The social dimensions of programming You can look on the [course website](https://cs.brown.edu/courses/csci0150/) for the lectures that pertain to this lab. With that in mind, this lab is going to be a great resource to refer back to for conceptual review. Now let’s get started! # Getting Started Click [here](https://classroom.github.com/a/3FNVTHsu) to get the stencil from GitHub - refer to the [CS15 GitHub Guide](https://docs.google.com/document/d/1tSxfUIn-Ro6Pr1X4y21BbYKdsiK-nlWW3pGDfyh7SQ8/edit?usp=sharing) for help with GitHub and GitHub Classroom. Once you have the URL of your personal GitHub repository, open the IntelliJ terminal. Move into the **`src`** folder, then use the command **`git clone <URL>`** Once you’ve cloned your personal repository from GitHub, you’ll need to rename the folder from **`lab1-<yourGitHubLogin>`** to just **`lab1`**. To do this, right click on the folder, then go to *Refactor, Rename*. You will have issues running your code until you make the change. ### Compiling and Running Your Code Most importantly, incremental coding means that you **run your code after each step** to ensure it’s working as you want it to! Refer to the [Rattytouille handout](https://hackmd.io/@Fall2024-CS15/Sy5evK8NA) for more detailed instructions on how to compile and run your code. Here is a summary: 1. Move to the lab1 directory with **`cd lab1`** 1. Compile the stencil code with the command **`javac *.java`** 1. Move back to the source directory with **`cd ..`** 1. Run the code with **`java lab1.App`** - an empty frame with 5 buttons should appear! 1. Repeat! # Our Cupcake Mission <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/rJJn3UMnC.gif"></img> Great! Now we’re ready to dive into making cupcakes! Our goal for this lab is to write a program to represent a **`CupcakeShop`** with 2 employees — a **`Baker`** and a **`CS15Decorator`** — that will work together to make **`CS15Cupcakes`** that match the shop’s menu: | Order 1 | Order 2 | Order 3 |Order 4 | Order 5| | -------- | -------- | -------- | --- | --- | | Chocolate Frosted Cupcake|Vanilla Frosted Cupcake|Vanilla Frosted Cupcake with a Cherry|Strawberry Frosted Cupcake with Sprinkles and a Cherry|Strawberry Frosted Cupcake with Sprinkles and a Candle| ### JavaDocs, Stencil Code, and Support Code Before we start coding, we need to understand the support code and stencil code that we’re working with. You can see in IntelliJ that your lab1 package has 2 files right now: **`App.java`** and **`CupcakeShop.java`**. These are “**stencil classes**,” which means we’ve given you some parts of these classes and some pre-written methods that you can call. Your job is to fill in the blanks! There are also some “**support classes**'' in this project — classes that are completely pre-written for you so that you can instantiate them and call methods on them! In this lab, the support classes are **`CS15Cupcake`** and **`CS15Decorator`**. You may notice there’s one class that isn’t mentioned as a stencil class or a support class. Eventually you’ll be creating and writing all of your classes on your own, so the **`Baker`** class is going to be practice for making a class from scratch. **Open the JavaDocs for this lab [here](https://cs.brown.edu/courses/csci0150/javadocs/cs15/labs/cupcakeSupport/package-summary.html)**. You will be working with **`cs15.labs.cupcakeSupport`**. JavaDocs will be essential to completing the lab, so take 2 minutes to browse the different classes you’ll be using. You will use the JavaDocs to understand both the purpose of each stencil method you write and how different support methods can be used to help you implement them. Remember, you can call support methods without defining them—so read the JavaDocs thoroughly! ## Step 1: Opening Shop Our first goal is to get the **`CupcakeShop`** set up and ready to bake some **`CS15Cupcakes`**, so open the file **`CupcakeShop.java`** to get started. By the end of step 1, we should have a frame and background that looks like this, indicating that our shop is ready to sell cupcakes: <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/HkK0fv7nA.png"></img> Luckily, the **`CupcakeShop`** class has support methods that we can use to get it ready. Look at the list of methods in the Javadocs for the **`CupcakeShop`**. What method will be useful to set up the shop? Once you’ve determined which method you need to call, you need to figure out from where to call the method. Luckily, the constructor of a class is the method called automatically when it’s first created, so we can call the method from the constructor! :::info **TODO**: Call the relevant method found in the Javadocs to open up the **`CupcakeShop`** in its constructor. Hint: The **`this`** keyword may come in handy here since we’re calling a method that’s ++defined++ (via the support code) in the same class as the method in which you’re calling it. Remember, to call a method, write the method name followed by parentheses with any necessary parameters, like **`methodName(parameter1)`**. You can check the Javadocs to see if this method requires parameters - if it doesn’t, you can leave the parentheses empty! ::: Great! Now we have our shop set up - let’s see if it works! :::info **TODO**: Compile and run the program now. Refer to “[Compiling and Running Your Code](#Compiling-and-Running-Your-Code)” for the steps on how to do so. Nothing should appear yet… why? ::: A crucial part of computer science is learning how to “debug”, or find and resolve, issues with your code. One great strategy is to use ++printlines++ (in Java, the **`System.out.println()`** method) to pinpoint errors. At this point, you should be at least familiar with printlines from Rattytouille. Right now, something seems wrong with the constructor of the **`CupcakeShop`** class, so let’s add a printline there. :::info **TODO**: Add a printline in the **`CupcakeShop`** constructor - it can print out anything you want, so just make sure you’ll recognize it in the terminal. Then, compile and run your program again. Does the printline show up in your terminal? ::: Huh - why wouldn’t the printline appear in your terminal? Take a look at **`App.java`** - this is where our program starts. Notice that, right now, the only code in this class is setting up the support code **`CupcakeFrame`**, so it’s never creating a **`CupcakeShop`** to execute the code you’ve written in **`CupcakeShop`**. Therefore, we also have to instantiate our ++top-level++ class, **`CupcakeShop`**. :::info **TODO**: Instantiate the **`CupcakeShop`** in the **`App`** class. Look at how we instantiated the **`CupcakeFrame`** as an example (ignoring the **`stage`** argument). ::: Now run your code again. Does the printline work this time? If the background matches the image at the beginning of this section, keep going! Lastly, we want to show a message that the shop is open for business. Check out the Javadocs for what method in the **`CupcakeShop`** would be useful for showing an update about the shop. :::info **TODO**: Call the relevant method found in the Javadocs to display a message about the shop being open! You can choose whatever **`String`** you want to show up, and remember the syntax for how we used parameters earlier in **`methodName(parameter1)`**! ::: Once your window looks like the image below, you’re all set to move on: <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/rymu9jVh0.png"></img> ## Step 2: Baking our First Cupcake Our next goal is to get a chocolate-frosted cupcake to appear! First, let’s get a sense of the stencil code we’re working with. You’ll notice there are five stencil methods (empty methods for which we provide the method signature, but no body) that correspond to the five buttons on the user interface. :::info **TODO**: Add a printline to the body of one of the five empty stencil methods. Then recompile and run your code. Press the buttons - when you press the button that corresponds to the method you chose, a printline should appear in the terminal! ::: In short, we’ve set up the stencil code so that the stencil methods will be called by the support code whenever the user presses the corresponding button. We want you to fill in the body of the stencil method, but we handle calling this method and actually executing this code. This pattern will be common in the upcoming projects. Now let’s get on with making order 1! :::info TODO: In the **`order1`** method, ++instantiate++ a **`CS15Cupcake`**. Remember instantiate means to use the **`new`** keyword. ::: :::danger **Note**: When instantiating the **`CS15Cupcake`**, it will show up in red. That’s because you have not *imported* the class (aka your **`CupcakeShop`** class doesn’t know that **`CS15Cupcake`** exists). This can be solved either by hovering over the red text and selecting “import class” or by adding the following line directly above the class declaration (on line 2 of your file): **`import cs15.labs.cupcakeSupport.CS15Cupcake;`** ::: :::info **TODO**: Compile and run your code. Then press the “Order 1” button, and a cupcake should appear as in the image below. ::: <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/rkD6ojN3R.png"></img> Now we want to add the chocolate frosting. In order to do so, you’ll need to call a method on the cupcake you’ve created. :::info **TODO**: Using the Javadocs, find the method in the **`CS15Cupcake`** class that will frost the cupcake with chocolate frosting. ::: Now we want to call that method! Right now, we don’t store a ++reference++ to the cupcake once it’s created, so we can’t call any methods on it. In this case, we want to use a ++local variable++ so that the cupcake lasts through the method. Remember that the template for instantiating an instance and storing it in a local variable is **`<type> <name> = new <value>;`** For example, **`Dog effie = new Dog();`** :::info **TODO**: Store the cupcake in a local variable. ::: Now that you’ve stored a reference to the cupcake, let’s add the chocolate frosting! :::info **TODO**: Call the method on the instance of **`CS15Cupcake`** to add chocolate frosting. Then compile and run your code again. Remember, the syntax for calling a method on a variable is **`variableName.methodName()`**. When you choose order 1, the cupcake should now have a chocolatey frosting. ::: The last detail is to make sure the price of the cupcake appears alongside the cupcake. :::info **TODO**: Use the Javadocs to find the support method in **`CupcakeShop`** that will show the price of a cupcake. ::: Notice that the Javadocs show that this relevant method has one ++parameter++ of type **`CS15Cupcake`**. Luckily, we’ve created a cupcake, so we can pass that instance of cupcake as the ++argument++ when you call the method. :::info **TODO**: Call the method to show the price of the cupcake, passing the cupcake instance as an argument. Think about if you need to use **`this`** here! ::: :::success ### Checkpoint 1 Compile and run your code. Once your first order matches the image below, call a TA over! ::: <img style="display: block; margin: auto;" width="500" src="https://hackmd.io/_uploads/HySepj4nA.png"></img> ## Step 3: Delegating to the Baker Imagine that our cupcake shop eventually will have 30 different types of orders - a lot of the code would be repeated in the methods for various orders, and the **`CupcakeShop`** class would get pretty crowded. Just like in a real cupcake shop, we’re going to have our **`CupcakeShop`** ++delegate++ some of its functionality to a **`Baker`** class. To start, we need to create the **`.java`** file from scratch. In IntelliJ, you can create new Java files by following these steps 1. Right-click on the package within which you want the file (in this case, **`lab1`**) a) A Java “package” can be seen simply as a folder with Java files 2. Choose *New > Java Class* 3. Type the name of the class (in this case, **`Baker`**) 4. Press enter, or double-click “Class” :::danger **Note**: At this point you might get a message asking whether you want to add this new file to git. It doesn’t matter which option you choose! Either you can add it now, or you’ll add it later when you add, commit, and push to GitHub. ::: :::info **TODO**: Create a **`Baker`** class in the **`lab1`** package ::: Ta da! You’ll see that IntelliJ has already pre-written some of the boilerplate code for you - that’s just one of the great features of an Integrated Development Environment (IDE) like IntelliJ. The first thing we *always* want to do when creating a new class is to write the constructor, **even if we leave it empty**. :::info **TODO**: Add an empty constructor to the **`Baker`** class. Refer to this [lecture](https://cs.brown.edu/courses/cs015/lecture/pdf/CS15.Lecture_3_Parameters_and_Math.9.12.24.pdf) for help on the syntax of writing a constructor! ::: The first capability (method) we want our **`Baker`** to have is to bake a chocolate-frosted cupcake. We wrote the code for this in **`CupcakeShop`** already, so now we want to delegate this to the **`Baker`**. In this method, you’ll want the **`Baker`** to: 1. Instantiate a cupcake and store it in a local variable 2. Add chocolate frosting to the cupcake instance 3. **`return`** the cupcake instance :::info **TODO**: First write the method signature, using the methods in **`CupcakeShop`** as a guide. The method should have **`public`** visibility, **`CS15Cupcake`** as its return type, no parameters, and any method name you feel is appropriate for this functionality. ::: :::danger **Note:** Like earlier when you instantiated a **`CS15Cupcake`** in the **`CupcakeShop`** class, now, when you make the return type **`CS15Cupcake`**, it will show up in red. That’s because you have not imported **`CS15Cupcake`** in your **`Baker`** class. As a reminder, this can be solved either by hovering over the red text and selecting “import class” or by adding the following line directly above the class declaration (on line 2 of your file): **`import cs15.labs.cupcakeSupport.CS15Cupcake;`** ::: :::info **TODO**: Then write the method body. Use the three steps of “pseudocode” above - each step will correspond to one line of code. ::: Now that the **`Baker`** has the capability to bake chocolate-frosted cupcakes, let’s have them use it for order 1! Head back to **`CupcakeShop`** - you can clear the code you’d written in the **`order1`** method, and now we’ll rewrite it using the **`Baker`**. Since we want the shop to hire just one **`Baker`** who works on all the orders, we want to create an instance of **`Baker`** and store it as an ++instance variable++ so that there is only one **`Baker`** that is used throughout the program. :::info **TODO**: First, declare an instance variable of type **`Baker`**, using the **`CS15Decorator`** instance variable as a guide. ::: :::info **TODO**: Then, ++initialize++ (give an original value to) the instance variable by ++instantiating++ (creating for the first time) a new **`Baker`** in the constructor (again, use the **`CS15Decorator`** instance variable as a guide). ::: :::info **TODO**: Next, call the method you wrote to make a chocolate-frosted cupcake in the **`Baker`** class on the **`Baker`** instance variable (this should be in the **`order1`** method). Remember when referencing an instance variable, we always prefix it with the **`this`** keyword and a dot. For example, this method call may look like this: **`this.yourBakerVariableName.theMethodToBakeTheCupcake();`** Then, store the **`CS15Cupcake`** that is returned from the method call above in a local variable, still in the **`order1`** method. ::: :::info **TODO**: Lastly, call the method to display the price (just like before!). ::: Compile and run your code again - the ++functionality++ of your program should be the exact same as before, but now the ++design++ of your program is different because you’ve delegated to a new **`Baker`** class. ## Step 4: Baking Cupcakes with Decorations Now let’s start with making order 2! Order 2 requires a vanilla-frosted cupcake instead of a chocolate-frosted cupcake, so we’ll need to add a new capability to the **`Baker`**. :::info **TODO**: Write another method for the **`Baker`** to bake and return a vanilla-frosted cupcake. This will look similar to your **`bakeChocolateFrostedCupcake()`** method, with a few different names. ::: Now let’s move to the **`CupcakeShop`** to start order 2. :::info **TODO**: In the **`order2`** method, use the **`Baker`** instance variable to bake a vanilla cupcake. This will look similar to the first line of your **`order1`** method, where you use the **`Baker`** to bake a chocolate frosted cupcake. ::: This time, we want to use the instance variable of type **`CS15Decorator`** to also decorate the cupcake with sprinkles. Use the Javadocs to find the relevant method in the **`CS15Decorator`**. In **`order2`**, have the decorator add the sprinkles to the vanilla cupcake that the baker has already baked and returned. :::info **TODO**: Call a method on the decorator to decorate the cupcake with sprinkles. ::: :::info **TODO**: As before, display the price of the vanilla cupcake. ::: :::info **TODO**: Fill the **`order3`** method, which creates a vanilla-frosted cupcake with a cherry on top and displays the price (do we need a new **`Baker`** method for this?) ::: If your order 2 and 3 cupcakes look like these images, keep going! <div style="display: flex; justify-content: space-between;"> <img src="https://hackmd.io/_uploads/ryCeZhVhA.png" alt="First Image" style="width: 50%;"> <img src="https://hackmd.io/_uploads/BJ1Z-3VnR.png" alt="Second Image" style="width: 50%;"> </div> ## Step 5: Tracking Cupcakes Baked Now that we’re producing lots of cupcakes, the manager wants to know exactly how many cupcakes we’ve baked and use the shop update text box to display that information. Since the **Baker** is baking each cupcake, we’ll have the baker track each time a cupcake is baked. Because we need to keep track of this information over the course of the program, we’ll model the number of cupcakes baked with an ++instance variable++. :::info **TODO**: In the **`Baker`** class, declare an instance variable of type **`int`** that will store the number of cupcakes made. Then, initialize the instance variable with the value 0 in the **`Baker`** constructor. ::: :::info **TODO**: In each of the methods in **`Baker`**, increase the value of the instance variable by 1, so that the instance variable’s value increases by one each time a new cupcake is made. ::: Now we just need to define another method so that the **`Baker`** can communicate to the **`CupcakeShop`** its cupcake number update. :::info **TODO**: Define a method for the **`Baker`** to give a work update. The method should return a **`String`** and communicate how many cupcakes have been made. The string could be something like “The baker has made *x* cupcakes”, but be sure to replace *x* with the value of the instance variable. ::: :::info **TODO**: Back in **`CupcakeShop`**, call the method to display the shop update in each of the order methods. The update that is passed into the parameter of this method should be the **`String`** that is returned by calling the method you just defined in the **`Baker`** class. ::: Now when you run your code, each time you press the button for one of the orders, the shop label should display an updated number of cupcakes baked! ## Step 6: Completing the Menu Using what you’ve learned so far, the last step is to finish the menu! :::info **TODO**: Define the **`order4`** method, which creates a strawberry-frosted cupcake with sprinkles and a cherry. Remember how we delegated some work to the **`Baker`** class and continue to do this! Be sure to display the price and the updated number of cupcakes baked. ::: :::info **TODO**: Define the **`order5`** method, which creates a strawberry-frosted cupcake with sprinkles and a candle. Be sure to display the price and the updated number of cupcakes baked. ::: ## Grading Blocklist If it would pose a conflict to have any specific TAs grade you (friends, relationships, etc.) please fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLScWxW2tNqqb7sII7ofnSzhX8GNec2HVnvpiB-NiROLQcyz_Ag/viewform?usp=sf_link) to have them added to your grading blocklist, ensuring that they will never grade your work. This is **completely optional**. :::success ### Great job! Call a TA over to get checked off! :::