This is a harder puzzle. It’s not that much bigger.
The idea is for you to see what it’s like to program using callbacks and the asynchronicity of working with web services. Except that we’ll fake the web service.
Your task is to make the “flight status board” like you see in the airport. You need to query the different airlines to get their flights, and present them to the user in a nice list/table.
The catch is, that the airlines all have different servers to provide you with the information. So you need to make requests to each airline to get their data, and assemble it all into a single list.
The web servers will be “faked” – you’ll be provided with a JavaScript module that generates random info. But it will behave like a web server. When you make a request, it might take a while. Or it might fail. Or it might take a while and fail. (actually, failures aren’t implemented in the current version).
What your program needs to do:
- It needs to make a request to each airline to get a list of its flights for the day.
- It needs to make a request to the airline to get the information about each of those flights.
- It needs to assemble all this information into a single table, sorted by time.
- Good feature: It should update the display as it comes – the servers might take different amounts of time to respond, and results will come in out of order. Your table should update as stuff comes in.
- Bad feature: do not do this serially, send out as many requests and take them as they come back. Otherwise, it will take too long
If you do this right, the table will start to fill in as you get more information.
Handing this in
The program is due on Monday, November 9th. Post a link to your solution in the discussion group. If you are not able to get it to work, post a question – and maybe look at other people’s assignments to get ideas. It’s your first posting that is due on the 9th. But you should post more than a placeholder. You should have a final program by Friday, November 13th.
You are required not only to submit your own solution, but also to comment on other peoples. Either give help, or give feedback. Each person must make at least 3 postings (beyond their own program).
You can put your program on JSBin. Or you can put your solution into your Puzzle2 handin directory (since most of you didn’t use that). Or put it on some other server you have access to. Wherever you put it, post a link in the Canvas discussion.
Canvas discussion for giving links to turn things in.
Evaluation
To get a passing grade you must turn in a working program, and comment on other people’s programs (or give them help).
But if you really wanted a decent grade, make it work asynchronously and have the table fill in as new thing come. But since we’re not giving grades, you should do this because you want to learn. And help others learn.
The “fake server”
The fake server provides a single object: Airlines. This object has one field “airlines” that provides a list of the airlines. It provides one “real” method: request, and one method for testing “testreq.” The data will not change during a run – airlines won’t come and go, and if you ask an airline for what flight it has, it will return the same list each time (although on different runs of the program, a different list of airlines and flights might be generated).
The request method takes two parameters: a string with a request, and a callback function that is called when the data from the request is returned. The callback function should take a single parameter that will hold a javascript object with the result of the query.
The testreq method takes one parameter: a string with a request. It returns the result of the request immediately. It does just what the request method does, just faster and without the callback interface. As its name implies, its there for testing. Don’t use it in your final program.
You can, of course, look into the code for the fake server. But please don’t part of the idea is for you to figure out how it works from the (intentionally limited) documentation, and by trying it out. This is like the real world: you want to use something, but it’s never as good as you had hoped.
Request format: All requests have the form “airline?query”. Where query is either “flights” (which produces an array of integers with flight numbers) or a flight number (which produces an object with information about the flights).
So here is an example dialog with the server. With each request, the answer is “returned” after a delay by calling the callback with the value. This assumes one of the airlines is called “united” (remember to check what airlines).
request(“united?flights”) –> [10, 20, 30]
request(“united?10”) –> { flight:10, from:”ORD”, to:”MSN”, arrive: 819192240000, airline:”UA”}
Note that times are in milliseconds since 1970 – see the JavaScript Date Documentation for info.
Getting Started
You can access fakeserver at: https://pages.cs.wisc.edu/~cs638-1/Puzzle4/fakeserver.jsNOTE: if you access it as “https://” then it will load whether your program is from an https source or not.
Note: you should load this script from that address – it might be updates as bugs are fixed. I’d like to have it do a little more realistic simulation of the delays, for example.
There’s a simple program that tries out a function or two on JSBin to help you get started. http://jsbin.com/zacaso/4/edit?js,output (notice that it loads the script in the HTML).
Start by making an HTML file that includes the “fakeserver.js” file. Then try to see what happen when you try different requests. If you get stuck, try using testreq instead of request.
Try just making an un-ordered list of all flights first. Then figure out how to put them in order.
Try just writing things out in an ugly way (see the example output below). Then make it prettier.
How big is this?
A minimal version that does not sort the flights can be done in about 10 lines of code! (plus an HTML file that puts it together – which has 2 lines of actual code). A version that does sort (but uses testreq) is a little longer.
A Sample output
Very ugly. And this was done using testreq. Make yours less ugly. And don’t use testreq.
DL121 from:LGA arrives:09:16:32 UA725 from:ORD arrives:09:28:32 DL982 from:MSP arrives:09:30:32 UA307 from:ORD arrives:11:26:32 DL622 from:DTW arrives:11:28:32 AA116 from:ORD arrives:12:11:32 UA637 from:DEN arrives:13:07:32 AA585 from:ORD arrives:14:21:32 UA747 from:EWR arrives:15:55:32 UA830 from:EWR arrives:16:03:32 DL365 from:MSP arrives:16:30:32 AA391 from:DFW arrives:17:23:32 DL768 from:LGA arrives:17:50:32 UA221 from:ORD arrives:17:54:32 UA857 from:ORD arrives:18:58:32 UA589 from:DEN arrives:19:14:32 DL285 from:DTW arrives:20:33:32 AA760 from:MIA arrives:21:11:32 DL297 from:DTW arrives:21:34:32 AA653 from:ORD arrives:21:36:32 AA339 from:DFW arrives:21:48:32 DL860 from:LGA arrives:22:15:32 DL549 from:ATL arrives:22:38:32
