lab04 : Intro to Web Applications

num ready? description assigned due
lab04 true Intro to Web Applications Wed 08/31 09:30AM Thu 09/01 11:59PM

Look here for formatted version: http://ucsb-cs56-m18.github.io/lab/lab04

This is an individual lab on the topic of Java web apps on Heroku.

You may cooperate with one or more pair partners from your team to help in debugging and understanding the lab, but each person should complete the lab separately for themselves.

Step 0: Understanding what we are trying to do

What are we trying to accomplish again in this lab?

Why use Heroku?

To run a servlet locally on your own machine, you could also use a servlet container such as Tomcat, Jetty, or Resin. Configuring those to run servlets locally on your own machine is not too bad, but configuring those to run on a shared hosting environment such as CSIL can be quite painful, so we are just going to avoid that altogether.

Limitations of the free plan of Heroku

Web Apps vs. Static Web Pages

You may already have some experience with creating static web pages, and/or with creating web applications (e.g. using PHP, Python (Django or Flask) or Ruby on Rails.) If so, then the “Learn More” section will be basic review.

If you are new to writing software for the web, you are strongly encouaged to read the background information at the “learn more” link below.

What are we trying to accomplish again in this lab?

If you just did a deep dive into the article Web Pages vs. Web Apps, it may be helpful to again review what we are trying to accomplish in this lab:

Disk Quota

IMPORTANT: if you are working on CSIL, and at some point things just “stop working”:

Then you probably have a disk quota problem.

Step 1: Create a Heroku Account associated with your umail.ucsb.edu

If you do not already have a Heroku account associated with your umail.ucsb.edu account, navigate to https://www.heroku.com/ and click the “Sign up for Free” link.

Heroku Signup

You’ll be asked for:

Step 2: Fork the sparkjava_01 tutorial repo

Fork the sparkjava_01 tutorial repo into a public copy under your own github account.

Use mvn compile and mvn exec:java to try to run the code and get a web app running on localhost.

Note that in order to see this web app running, you’ll need to be in a web browser on the same host that you are running your program on.

If you are not sitting in the CSIL or CSTL lab, i.e. you are using ssh on a laptop to access CSIL, then you might need to test your webapp using a command line web client such as curl (curl stands for “C” the “URL”). For example, this command should show you the output from the / route for your webapp:

curl http://localhost:4567

And

curl http://localhost:4567/hello

would show the output from the /hello route.

This is not very satisfying.

To get the web app running on the public internet, we’ll need to use a cloud-computing platform such as Heroku.

Step 3: Create a new Heroku App using the Heroku CLI

Logged into CSIL (or one of the machines in the CSTL, i.e. Phelps 3525), use this command to login to Heroku at the command line:

heroku login

Then, use this command to create a new web app running on heroku. Substitute your github id in place of githubid. Note that you should convert your githubid to all lowercase; heroku web-app names do not permit uppercase letters.

A reminder that this is an individual lab, so you should complete it for yourself, i.e. there is only one github id in the name, not a pair of github ids.

heroku create cs56-m18-githubid-lab04

Step 4: Modify the pom.xml file to refer to your heroku app

In the pom.xml file, locate this section. It is a plugin element, and should be located inside the plugins element.

  <plugin>
	<groupId>com.heroku.sdk</groupId>
	<artifactId>heroku-maven-plugin</artifactId>
	<version>2.0.3</version>
	<configuration>
          <jdkVersion>1.8</jdkVersion>
          <!-- Use your own application name -->
	  <!-- at Heroku CLI, use heroku apps to list, or use Heroku Dashboard -->
          <appName>ucsb-cs56-pconrad-08-28-18</appName> 
          <processTypes>
            <!-- Tell Heroku how to launch your application -->
            <!-- You might have to remove the ./ in front   -->
            <web>java $JAVA_OPTS -jar target/sparkjava-demo-01-1.0-jar-with-dependencies.jar</web>

          </processTypes>
	</configuration>
   </plugin>

The line you need to change is the one that says:

 <appName>ucsb-cs56-pconrad-08-28-18</appName>

Change this to the name of your heroku app. If you’ve forgotten it, you can locate it either by typing:

heroku apps

or by logging into the Heroku Dashboard in a web browser at https://dashboard.heroku.com/apps

Then, type the following to deploy your web app to Heroku:

mvn package heroku:deploy

You should see a lot of output. At the end of this output, you should see something like this:

...
[INFO] remote: -----> heroku-maven-plugin app detected
[INFO] remote: -----> Installing JDK 1.8... done
[INFO] remote: -----> Discovering process types
[INFO] remote:        Procfile declares types -> web
[INFO] remote: 
[INFO] remote: -----> Compressing...
[INFO] remote:        Done: 54M
[INFO] remote: -----> Launching...
[INFO] remote:        Released v10
[INFO] remote:        https://ucsb-cs56-pconrad-08-28-18.herokuapp.com/ deployed to Heroku
[INFO] remote: 
[INFO] -----> Done
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 39.539 s
[INFO] Finished at: 2018-08-31T01:56:14-07:00
[INFO] Final Memory: 29M/268M
[INFO] ------------------------------------------------------------------------

The line that you are looking for is this one:

[INFO] remote:        https://ucsb-cs56-pconrad-08-28-18.herokuapp.com/ deployed to Heroku

That is the URL where you should now be able to see your webapp running. This URL should be accessible from any web browser connected to the internet.

What if it doesn’t work?

If it doesn’t work, try these things before asking a mentor, TA, or instructor for help.

  1. Make sure you are logged into Heroku at CLI with heroku login. If you exited your CSIL shell (logged out) and logged back in again, you have to login to Heroku again. Then repeat the commands.
  2. Try, try running heroku apps. Make sure the <appname>app-name-goes-here</appname> element in the heroku-maven-plugin section of your pom.xml matches the name of your heroku app exactly.
  3. If it does, try heroku logs --app appname (substitute the name of your app where you see appname). You’ll see the log output of that app on Heroku.
    • You may find it helpful to open a second Terminal, login to CSIL and the Heroku CLI, and use heroku logs --app appname --tail, which keeps the log output running continously.
    • You can also see your logs in a web browser at: https://dashboard.heroku.com/apps/app-name/logs (note that you need to put your app-name in the URL instead of app-name.
    • You can navigate to this from https://dashboard.heroku.com/ by selecting your app, clicking on it, selecting the More menu at upper right, and the selecting Logs.

Step 5: Changing what is shown on the page

Go into the Java source code under src and locate the file src/main/java/edu/ucsb/cs56/pconrad/SparkDemo01.java

In this file, locate the line of code that says:

spark.Spark.get("/", (req, res) -> "<b>Hello World!</b>\n");

As you can see, the method call `spark.Spark.get takes two parameters:

Our first step is going to be to modify what is returned by the browser for the “/” route, which is the root of the web page.

Before this line of code, add the following. Be sure to replace mygithubid with your own github id:

String html = "<h1><a href='/hello'>Hello</a> World!</h1>\n" +
    "<p>This web app is powered by \n" +
    "<a href='https://github.com/mygithubid/sparkjava-01'>this github repo</a></p>\n";

Then, change the line of code

spark.Spark.get("/", (req, res) -> "<b>Hello World!</b>\n");

To read:

spark.Spark.get("/", (req, res) -> html);

Then:

If it works, then the word “Hello” and the words “this repo” should become clickable links.

Next, let’s fix that by adding this line of code:

After:

spark.Spark.get("/", (req, res) -> html);

Add this:

spark.Spark.get("/hello", (req, res) -> "<p><b>Hello, World!</b>  You just clicked the first link on my web app.</p>");

Deploy this code to Heroku in the same way you did with the other code. Make sure both links now work.

Ok, so far, we haven’t really done anything we couldn’t have done with a static web page. But we have gotten a working Java web app running on Heroku, so it’s start we can build on.

That’s all for the graded part of this lab, but there is much more to learn. Let’s get this submitted for a grade first, but then the lab is NOT OVER. There is a part that is not graded, but is super important as a means to learn the skills we’ll need to build real webapps using Heroku, and you are encouraged to stay and work on that. For that part, you are encouraged to work in pairs or even in groups of three or more with folks from your team.

Step 6: Submitting your work for grading

When you have a running web app, visit https://gauchospace.ucsb.edu/courses/mod/assign/view.php?id=1463811 and make a submission.

In the text area, enter something like this, substituting your repo name and your Heroku app name:

repo name: https://github.com/chrislee123/sparkjava-01
on heroku: https://cs56-m18-chrislee123-lab04.herokuapp.com

Then, and this is super important, please make both of those URLs clickable urls.

The instructions for doing so are here: https://ucsb-cs56-pconrad.github.io/topics/gauchospace_clickable_urls/

When you’ve submitted for a grade, move on to the ungraded, but NOT OPTIONAL part of the lab where we explore an important SparkJava tutorial.

Step 7: SparkJava tutorial

This part of the lab is NOT OPTIONAL. It is REQUIRED. It is just not GRADED.

You are expected to complete it as preparation for the work you’ll be doing with your teams.

The consequence of not doing it is simply that you’ll be unprepared to contribute to your team’s work as a team player. So, please do your best to complete this part as best you can.

In this part of the lab, you’ll:

Then you should be able to see this running web app, which matches the tutorial at this link: http://sparkjava.com/tutorials/application-structure

Read through this tutorial, and look through the code.

NOTE that this example web app glosses over several details of how a “real” web app would be built:

We’ll cover how to do those things in due course; but please know that the example web is already stuctured in a way that those things can be “plugged in” to their proper spot when we are ready for them. There are so many things to learn that it’s really helpful to make some simplifying assumptions up front.

As you work through the tutorial, also be thinking about the web app you plan to build with your team, and the story maps that you started back in week two. I’ll be posting those images so that you can begin to try to link these ideas in your mind. Come to lecture on Tuesday prepared to discuss how your web app might look when you build your “minimum viable product”.

You are finished with this part of the lab when you’ve:

For example, you might try changing the code of the library web app into a sort of “mock up” of some of the code you might have in your own project’s web app (e.g. DogWalker, GauchoGains, GauchoCourses, etc.).

When you feel there is nothing more you can learn from the tutorial, you are finished. But, you are encouraged, at that point, to explore more topics from this web page of SparkJava tutorials:

A few that may be particularly interesting:

Share about what you are learning on Piazza. Help one another out. Make this a real learning community.