YOUR NAME: .edu



YOUR NAME:Your partner’s name (if any):Your EMAIL ADDRESS:Your partner’s email address (if any):MIS3502 – Assignment 03 – Guessing GameIn 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 beginThis 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. Creating your (free) AWS Account Applying your AWS Education Credit to your AWS Console and requesting an EC2 server Getting a Remote Desktop connection to the server and signing in (same as above)Software installations: ChromeVisual Studio Code and setting up a workspaceNode.jsNode packagesqckwinsvc (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.You will need to know the Public IP address of your server. Write that down in the box below.Getting StartedDownload the assignment03_guessinggame.zip file. Unzip it into your mis3502workspace on your own computer. Open index.html in Chrome. Test the application. 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 serverNow 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.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.In Visual Studio Code, click Terminal > New TerminalYou can now see a command line interface, the app.js code, and your project explorer, all in the same window.From the command line type cd assignment03_endpointNow type: node app.jsYou 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.Type: npm install express (This one command installs both express and body-parser packages.)Now try this command again: node app.jsIf everything is OK, you will get a confirmation message as seen below:Now using Chrome on your server, visit this URL: should get some instructions from the API as shown above! But, alas, visiting does not work. Why? Firewall rules! 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: 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. 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!Now, back on your server, go to the Microsoft Server Manager. Click Tools and Windows Defender Firewall and Advanced Security.Click “Inbound Rules”, New Rule. Then …Choose Port. (Click Next)Enter Specific Local Port: 8200-8230. (Click Next)Choose Allow the connection (Click Next)Check the boxes indicating that the rule applies to Domain, Private, and Public locations. (Click Next)Give the rule a name. For example: MIS302.Click FinishNow try reaching your endpoint with a URL that uses your Public IP address. For example: You should get a response: "Post to this url to start a game. Get from this URL with 'guess' and 'gametoken' to play."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.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.Now type qckwinsvc. Press enter. Answer the prompts as shown below:You will be prompted by Windows to make multiple security exceptions. Respond “Yes” to each one.Ensure that your API endpoint (for example: ) 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.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 serverUpload 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 quizThe 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…Here then, is a list of items that you will find on the quiz next class:ItemRead About It HereNotes---- jQuery ----.show() Nothing more complicated than this example:() (same as above).addClass() .removeClass() ---- CSS ----display: none; A good quiz question would be to indicate the difference between this and the next CSS item.visibility: hidden; (see above)---- HTML 5 ----localStorage ---- Bootstrap 4 ----data-toggle, collapse, data-target container-fluid A good quiz question would be to describe the difference between container and container-fluidtext-center alert, alert-danger list-group ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download