<<<<<<< HEAD Mini Project 1

Write a "single-page app" and develop its configuration management.

Goal: Gain experience with the following technologies:

Bootstrap 3, knockoutjs, less, javascript, grunt, bower, node.js, d3, npm

Learning outcome: Realize that most software engineering projects will require learning many technologies together. Gain experience in using some technologies, such as grunt and bower, to help bridge the multiple technologies in a single process.

Getting Started with your Template

Get the project template using git:

1. git clone https://github.ncsu.edu/CSC510-Fall2014/MiniProject1-Template.git

2. Run npm install to get project dependencies installed (grunt, bower). Npm is installed when you install node.js.

3. Run bower install to get web dependencies installed (bootstrap,jquery). A local copy of Bower will be installed in node_modules/bower/bin/bower. However, you may want to have a global version installed using npm install -g bower.

4. Test out grunt by running grunt less to run the less task that will compile the bootstrap less file into a css file usable by your site. Open www\index.html in your browser. A local copy of grunt will be installed in node_modules/grunt-cli/bin/grunt. However, you may want to have a global version installed using npm install -g grunt and npm install -g grunt-cli.

Use bower to manage components.

Use bower to install additionally install:

• knockoutjs
• d3

Dependencies should be saved in bower.json using the -S option.

App content and javascript

The main goal of the app content and javascript is just to put into use all the dependencies you are managing with bower and grunt. Any javascript you create can be placed in a site.js or embedded in the index.html. All the dependencies (knockout, d3, etc) will be generated by grunt into the libs.js file.

• Use bootstrap 3 to create responsive layout (resilient to mobile screen sizes). A good resource for understanding the grid layout system: Bootstrap Grid Explained. Bootstrap simply provides a set of predefined css classes for helping layout the website. www/index.html Already contains a basic layout using bootstrap. Any additional css classes should be defined in your local.less file and compiled in the grunt task as specified below.
• Use knockoutjs to process user input and any dynamic content. The documentation for knockoutjs is pretty good. A good example to start with is the foreach binding for getting a list of content. I use this do generate the list of papers on my website.
• Use d3 add a visualization component to the site. See http://bl.ocks.org/mbostock for inspiration (you can directly use any example as well).

Use grunt to manage build tasks.

Create a grunt task to:

• Extend current less task to compile an additional local.less file, containing your custom presentation elements into a css file.
• Create a new grunt task, called package to concat all javascript libraries into a single "www\js\libs.js" file. Additionally, minify the content using uglify or an equivalent minifying tool.
• Create a new grunt task, called validate that runs jshint on all javascript files in app.
• Create a build_all task that runs all the steps needed to build the web app.

Grading

You will be graded on the configuration management of your app as well as your use of technology in building the app.

• 10% bower setup
• 40% grunt tasks
• 20% app layout and content
• 15% incorporate user input/dynamic content with knockoutjs
• 15% incorporate visualization with d3 ======= CSC510-Software-Engineering-Project-online-Resume =================================================

9487bfd905c9c6a7829503cf95e9fba0b7ecc14b