Introduction to Node.js and Express

After creating the browser window drawing application I conducted research to inform the team about Node.js and Express for Node.js. These are the technologies that we will use to create a web API that allows our browser, server and database to communicate with each other through requests and responses. I was only able to conduct a small amount of research. I will be conducting more in the future on the topic of databases and the transferring of images. No failures other than not doing as much research as I would have liked. The notes I took are introductory, I chose not to include actual code in my notes because the helpful code is within the links I provided.

This is a short document of important points and educational resources.

Node.js

• JavaScript-based framework for building event-oriented servers
• a platform that allows JavaScript to be used outside the Web Browsers
• create the server and server-side code for an application like most of the other web languages but using JavaScript
• built on Google Chrome's JavaScript Engine
• All APIs of Node.js library are asynchronous, that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call.

Helpful Text

http://nodeguide.com/beginner.html

https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm

Video Example

https://www.youtube.com/watch?v=bjULmG8fqc8

API / Web API

• An application programming interface (API) for either a web server or a web browser
• The messenger that takes requests and tells a system what you want to do, and then return the response back to you.

Helpful Text

https://www.idigbio.org/wiki/images/2/21/2015-03-12-F2DB-Apis.pdf

Video about API

https://www.youtube.com/watch?v=s7wmiS2mSXY

Express JS

• Express is a minimal and flexible Node.js web application framework.
• You can install it with Node Package Manager. [ $ npm install express] use @ to install a specific version
• Creating a robust API is quick and easy
• Allows to dynamically render HTML Pages based on passing arguments to templates.
• set up middlewares to respond to HTTP Requests.
• Defines a routing table which is used to perform different actions based on HTTP Method and URL.
• Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).
• Request Object − The request object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on.
• Response Object − The response object represents the HTTP response that an Express app sends when it gets an HTTP request.
• Express uses GET and POST methods

Helpful text

https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm\

Video (introduction to express)

https://www.youtube.com/watch?v=IjXAr5CJ2Ec

MIA KUBUS SPRINT 1 January 26, 2016

by Nick Hickey

MIA KUBUS SPRINT 1
January 26, 2016

Sprint one is coming to an end. The entire Kubus team was hard a work ensuring a strong start of product development was completed. The team set out the goals of completing research on the various techniques, tools, and systems available to help them complete their proposed immersive user experience. Nick and Tristan used their time to set up an initial test of communication with a local server using Node.js. Using java script and command line programming they were able to set up a drawing application that could be played over two local internet browser windows while interact with each other. Next, Nick worked on setting up a basic processing application with three main states. The framework of the states was the following: Start Screen > Design Screen > and Submit. The design screen explored the use of a particle system and vectors to create cool visual effect from what the user was drawing on screen. A future goal is to combine the work Tristan and Nick did with the particle application to see the code played over a local connection.

WebGL and Visual Design Research

by Geoffrey Datema

Visual Design Research

I spent some time this sprint creating Processing sketches to begin to explore some of the different particle effects that can be achieved. This process was useful in helping me determine visual design direction.

WebGL Application Setup

As WebGL is new to me, I spent time this sprint learning how to set up a functional WebGL application. When our web hosting is set up, I'll be ready to go with quickly setting up a robust WebGL application within which to build our design creation interface.

Web Application UI

As discussed with Laith who will also be working on UI development, we have opted to use a static HTML UI for now. Later on, if research proves that a different method is better (constructing the HTML pages on pageload with JavaScript), we may which to a different UI creation method. For now though, we know that the fastest way to get our web application up and running is by using static HTML.

WIREFRAMES and design research

The wire frame.... where do I start. The easiest and hardest part of the initial steps. Initially, I kept in mind the fitz law that was taught to us during the first semester of this school year. From there I just did my thing, followed the usual style that I go with and the typical grid layout.

Design research was really fun. Coming up with the color scheme was an interesting part of the research. Initially I came up with three different color schemes/sets. We are not limited to these,  but its good to have 3 colors that are our base and maybe people will always correspond that color scheme with our product.

Also, researching weblog and the beginning steps was done during this sprint. Its a  little bit intimidating but nothing that can not be coded and  done

- Laith Safa