Homework #4                                                                                                                                                                                                                                       

ait.tx - transactions, blocks and Express! Due 3/2 at 11pm

                                                       

Overview

                                                       

How your app might look like when you complete the assignment! (Right click and choose open image in new tab to see larger version)

                                                                                                                                                                                                                                                                                

Description

                                                       

In this homework assignment we will be creating a basic web application using the express framework and handlebars for templating. We'll also work with reading data from disk into memory, static files, and we'll

                                                       

write some basic middleware.
So again the main topics for this assignment are:

                                                       

route handling templating
serving static files in-memory data storage middleware

                                                       

The application you'll be creating will serve as a very basic explorer of transaction data that you are provided with in .json files. First, a single transaction is simply a transfer of some currency / token from one user to another (i.e. PayPal, Bitcoin, etc). In addition to the 'from' and 'to' fields that tell us where a transaction has gone, a transaction usually contains a timestamp for when the transaction has occurred, perhaps some identifier, and the actual amount. Here is an example transaction that we can represent in json :

                                                                                                                                                                                                                                                                                                                                                                                                                                                           

https://cs.nyu.edu/courses/spring20/CSCI-UA.0480-008/_site/homework/04.html

                                                                                                                               

1/13

                                                                                                               

                                                                                                                                                

2/28/2020 CSCI-UA.0480 - Homework 4

                                                                                                                                                                                                                                                                                                                       

For the purposes of efficient storage, replication, and other considerations, transactions are rarely stored all in a single array or list, they are frequently partitioned into blocks. Blocks each contain a handful of transactions and have an identifier themselves. An important property of blocks that is also reflected in our data: in order to maintain order in storing transactions, every block of transactions maintains a pointer to the previous block of transactions that is the name of the .json file representing the block.

                                                               

Here is a diagram depicting this visually (can also think of this as a LinkedList data structure): (Right click and choose open image in new tab to see larger version)

                                                               

And an example block with a couple of transactions:

                                                                                                                                                                                                                                                                                                                                                                                                               

{
"id": 1003,

                                                               

      "timestamp": "2020-02-01T00:00:00",      "from": "employer",      "to": "employee-1",      "amount": 25000

                                                               

}

                                                                                                                                                                                                                                                                                                       

https://cs.nyu.edu/courses/spring20/CSCI-UA.0480-008/_site/homework/04.html

                                                                                                                               

2/13

                                                                                                               

                                                                                                                                                

2/28/2020 CSCI-UA.0480 - Homework 4

                                                                                                                                                                                                                                                                                                                       

Thus, we can imagine that as more and more transactions are registered in our system, we can keep creating new blocks to hold those new transactions. To do that we can just keep creating json files with lists of transactions. But how do we figure out the order in which blocks came in? That is where we use the

                                                               

previous pointer to the name of the previous block.
An important observation is that the first block does not have a pointer to the previous block (and in our

                                                               

json, this means that the first block will not have previous property).

                                                               

Take a look at the .json files with this block/transaction formatted data provided for the assignment for more details - you should see how the data forms a chain of 3 blocks and the previous field points to the preceding block except for in a single .json file i.e. block that we designated the starting block.

                                                               

Requirements

                                                               

You'll be creating a web site with 4 pages:

                                                               

All Blocks - / : 'home' page that displays all of the blocks and their transactions in the correct 'chain' order (more on this later)
Latest Block - /latest/block : a page that displays data for a single block that is the latest block in the 'chain' order

                                                               

Latest Transaction - /latest/tx : a page that displays data for a single transaction that is the latest transaction by the timestamp field
Random Transaction - /random : a page that displays data for a single transaction randomly picked from all transactions across all blocks

                                                               

Your directory layout should look like the following once you're done with the assignment:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

{  "transactions":  [

                                                               

    {      "id": 1002,      "timestamp": "2020-01-01T10:00:00",      "from": "account-1",      "to": "employee-pool-1",      "amount": 100000

                                                               

}, {

                                                               

      "id": 1003,      "timestamp": "2020-02-01T00:00:00",      "from": "account-2",      "to": "employee-pool-1",      "amount": 25000

                                                               

}, {

                                                               

      "id": 1004,      "timestamp": "2020-03-01T00:00:00",      "from": "account-1",      "to": "employee-pool-2",      "amount": 1000

                                                               

    }  ], "previous": "0x1111" }

                                                                                                                                                                                                                                                                                                       

https://cs.nyu.edu/courses/spring20/CSCI-UA.0480-008/_site/homework/04.html

                                                                                                                               

3/13

                                                                                                               

                                                                                                                                                

2/28/2020 CSCI-UA.0480 - Homework 4

                                                                                                                                                                                                                                                                                                                       

Submission Process

                                                               

1. You will be given access to a private repository on GitHub
2. The final version of your assignment should be in GitHub
3. Push your changes to the homework repository on GitHub by the due date.

                                                               

Make at Least 4 Commits

                                                               

Commit multiple times throughout your development process.
Make at least 4 separate commits - (for example, one option may be to make one commit per part in the homework).

                                                               

Part 1 - Setup Installing Dependencies

                                                               

create a package.json (a package-lock.json should be created for you as well once you start installing modules)
install the following dependencies (make sure you use the --save option):

                                                               

express hbs

                                                               

.gitignore

                                                               

create a .gitignore
ignore the following files / directories:

                                                               

         /node_modules

                                                               

any other files that aren't relevant to the project... for example .DS_Store if you're on MacOS

                                                               

etc.

                                         

an eslint configuration file (for example .eslintrc.json ) should be in the root directory (or copy one from a previous project if it doesn't exist)
make sure that any linting tools are installed ( eslint )
periodically lint your program as you work

                                                                                                                                                                                                                                                             

https://cs.nyu.edu/courses/spring20/CSCI-UA.0480-008/_site/homework/04.html                                                                                                              

2/28/2020 CSCI-UA.0480 - Homework 4

                                                                                                                                                                                                                                                       

minor deductions (0.5 to 1 point) will be taken off for each class of error, w/ a maximum of 3 to 5 points total

                                                       

Part 2 - Homepage and Static Files Enabling Static Files

                                                       

First, we would like to make sure that we can serve static content on our site - like css and images interleaved with our HTML. So let's get started.

                                                       

create the following directory / folder structure in your project's root directory

                                                       

         public         public/css         public/img

                                                       

add a blank css file in public/css/main.css
add some sort of logo image in public/img/logo.svg (can be any format really) create a basic express skeleton application in app.js

                                                       

make sure that your application is served over port 3000 after calling app.listen(3000)

                                                       

print out "server started; type CTRL+C to shut down" to the console (the terminal window)
this will give you information on whether your server has started correctly

                                                       

add the appropriate require s (express, path, etc.) and middleware to enable static file serving: refer to class slides for reminders / code snippets on how to do this
make sure it's something like app.use()

                                                       

test that both the css files and image work
for example, try to go to http://localhost:3000/img/logo.svg in your browser

                                                       

your image should be displayed in browser

                                                       

Creating the "All Blocks" initial page
Now that we can server static files including our css file to make pages pretty, lets create the first page for

                                                       

our site that will display all of our data on disk (the blocks and their transactions). First let's setup templating so we can render our pages

                                                       

we will be using handlebars ( hbs ) as our templating engine, so do the required steps to set that up get all the requirements and config setup
create the appropriate views folder, along with an initial layout file:

                                                       

in your layout.hbs , add the html that will be used on every page that we create (refer to slides for more)
recall that this surrounding html will go on every page

                                                       

add a reference to include your main.css stylesheet (so that each other .hbs page has it too) include a header containing both your static image and the title of the site, ait.tx
additionally, add a 'navigation (nav) bar' consisting of the links that will let you navigate across the 4 pages of the site:

                                                       

a link to the All Blocks (/) - root url
a link to the Latest Block page ( /latest/block )
a link to the Latest Transaction page ( /latest/tx ) a link to the Random Transaction page ( /random )                                                                                                                                                                                                                                                                                                                                                         

└── views    
└── layout.hbs                                             

https://cs.nyu.edu/courses/spring20/CSCI-UA.0480-008/_site/homework/04.html

                                                                                                                               

5/13

                                                                                                               

                                                                                                                                                

2/28/2020 CSCI-UA.0480 - Homework 4

                                                                                                                                                                                                                                                       

we will be creating route handlers for all of these pages later
Important! - don't forget body , surrounded by triple curly braces, or else other templates are not going to get rendered
now that you have the layout.hbs , add your first page template (it's up to you how you call it)

                                                       

add an element that says "Tx Blocks" to this template

                                                       

you will add more html and templating to this file later
add some css to main.css to change the styles on the page. Some examples / inspiration:

change the font, font style (bold, underline) change the background color
change the font color add padding, alignment

Now lets implement the initial version of the route handler on the server for this page create a route handler in app.js that will listen for GET requests on add a render call so that going to the root url via a GET request shows the rendered template (only h2 and whatever is in layout.hbs so far)
Here's an example of what the page could look like (you don't have to use the same exact styles, but add enough styles so that you can see that the style sheet is correctly served and applied to the html): (Right click and choose open image in new tab to see larger version)