YOUR NAME:Your partner’s name (if any):

Your EMAIL ADDRESS:Your partner’s email address (if any):

MIS3502 – Assignment 03 – Guessing Game

In this assignment you will set up a server for yourself on AWS and deploy the Guessing Game API code there.

Put your answers in the boxes provided. Upload your work to the class server and deliver the word document to your instructor as directed. Do the following:

Before you begin1. This assignment requires you to use an EC2 server provided by AWS. Setting up the server isn’t

hard, but it is a multiple step process. To get your personal server set up, follow the video

instructions found below. a. Creating your (free) AWS Account https://youtu.be/BDuIUO6itTY

b. Applying your AWS Education Credit https://youtu.be/4X-PjVsJ3Io

c. Getting to your AWS Console and requesting an EC2 server https://youtu.be/sIkiUVVJlKg

d. Getting a Remote Desktop connection to the server and signing in (same as above)

e. Software installations: https://youtu.be/wY7EkjC4UAc

i. Chrome

ii. Visual Studio Code and setting up a workspace

iii. Node.js

iv. Node packages

qckwinsvc (This is short for Quick Windows Service)

nodemon (This is short for Node.js Monitor)

These steps all need to be done BEFORE the date we work on this assignment together in class.

2. You will need to know the Public IP address of your server. Write that down in the box below.

Getting Started3. Download the assignment03_guessinggame.zip file. Unzip it into your mis3502workspace on your

own computer. Open index.html in Chrome. Test the application.

1 | P a g e

4. View source on the index.html file and note that the API endpoint used is hosted on misdemo.temple.edu. In this assignment you will change that URL to point to a server owned by you.

Deploy the API on the server5. Now you will use your own personal AWS server. Remote into it with Remote Desktop. Using the

Chrome browser that you installed on the server, download assignment03_endpoint.zip onto your server. Unzip it and put the folder into your server’s c:\mis3502workspace.

6. Open up VS Code. You should see the assignment03_endpoint in your workspace.

Open up app.js as found in the assignment03_endpoint folder. It holds Node.js code that defines the guessing game API endpoint. You will write code like this later in the semester! Notice that at the bottom of the file there is a block of code that defines what IP address and port this web API endpoint will be served from.

7. In Visual Studio Code, click Terminal > New Terminal

You can now see a command line interface, the app.js code, and your project explorer, all in the same window.

2 | P a g e

8. From the command line type cd assignment03_endpoint

9. Now type: node app.js

10. You will get an error: Error: Cannot find module 'express'

You are getting this error because the code in app.js relies on Node.js packages that have not been installed for this project. Let’s install them. We use the Node.js Package Manager (npm) to install packages.

11. Type: npm install express

(This one command installs both express and body-parser packages.)

12. Now try this command again: node app.js

If everything is OK, you will get a confirmation message as seen below:

13. Now using Chrome on your server, visit this URL: http://127.0.0.1:8200/game

3 | P a g e

You should get some instructions from the API as shown above!

But, alas, visiting http://<<YOUR_PUBLIC_IP_ADDRESS>>:8200/game does not work. Why? Firewall rules!

14. We need to allow traffic over port 8200, and we need to make allowances at two levels: the OS level (Microsoft Windows) and the network level (AWS environment)

Back on your own system, go to: https://aws.amazon.com/console/ and sign in. Click EC2 to get to your EC2 Dashboard. Click on Running Instances and the Security Groups link that goes with your server. (You will have to scroll to the right to see that!)

Your window should look like the following.

4 | P a g e

Click on the Inbound tab and Edit.

Now click Add Rule. Choose Custom TCP Rule and Port Range 8200-8230 as shown.

NOTE: we are opening a range of ports so that we won’t have to revisit this task later in the semester!

5 | P a g e

15. Now, back on your server, go to the Microsoft Server Manager. Click Tools and Windows Defender Firewall and Advanced Security.

16. Click “Inbound Rules”, New Rule. Then …

a. Choose Port. (Click Next)

b. Enter Specific Local Port: 8200-8230. (Click Next)

c. Choose Allow the connection (Click Next)

d. Check the boxes indicating that the rule applies to Domain, Private, and Public locations. (Click Next)

e. Give the rule a name. For example: MIS302.

f. Click Finish

17. Now try reaching your endpoint with a URL that uses your Public IP address. For example:

http://18.224.2.190:8200/game

You should get a response: "Post to this url to start a game. Get from this URL with 'guess' and 'gametoken' to play."

18. In the box below, write down the URL where your API endpoint can be found. Be sure to include the 8200 port number. Test the link you wrote down and make sure it works.

19. Now that you know that the endpoint code works, you want to set it up to run as a service to always be running in the background on your server. Return to the command line running in VS Code on the server. Press Ctrl-C. This will stop app.js from running.

6 | P a g e

20. Now type qckwinsvc. Press enter. Answer the prompts as shown below:

21. You will be prompted by Windows to make multiple security exceptions. Respond “Yes” to each one.

Ensure that your API endpoint (for example: http://18.224.2.190:8200/game ) is still running. If it’s not, you may need to go into Windows Services and start the service you just created. Once the service is running, you can disconnect from the windows server.

22. Look back at step 1. On your own computer, edit the code in the index.html file (as found in the assignment03_guessinggame.zip) file to point to your URL. Test it.

Upload your client to the class server23. Upload your html client work to the class server. Write down the full URL, including protocol,

where it can be found. Your instructor should be able to copy/paste your URL directly into a browser and see your work.

Get ready for the next quiz

The next time we meet, we’ll be talking about Single Page Architecture (SPA). There are a number of client-side elements that we will be making regular use of in the future. Most of them should be familiar to you, and the rest should be easy for you to quickly assimilate.

CONTINUED…

7 | P a g e

Here then, is a list of items that you will find on the quiz next class:

Item Read About It Here Notes---- jQuery ----

.show() https://www.w3schools.com/jquery/eff_show.asp Nothing more complicated than this example:https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide_speed

.hide() https://www.w3schools.com/jquery/eff_hide.asp (same as above)

.addClass() https://www.w3schools.com/jquery/html_addclass.asp

.removeClass() https://www.w3schools.com/jquery/html_removeclass.asp

---- CSS ----display: none; https://www.w3schools.com/css/

css_display_visibility.asp A good quiz question would be to indicate the difference between this and the next CSS item.

visibility: hidden;

https://www.w3schools.com/cssref/pr_class_visibility.asp

(see above)

---- HTML 5 ----localStorage https://www.w3schools.com/html/

html5_webstorage.asp ---- Bootstrap 4 ----

data-toggle, collapse, data-target

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

navbar https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

container-fluid https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

A good quiz question would be to describe the difference between container and container-fluid

text-center https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_text-left&stacked=h

alert, alert-danger

https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

list-group https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp

8 | P a g e