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.
Get the project template using git:
-
git clone https://github.ncsu.edu/CSC510-Fall2014/MiniProject1-Template.git -
Run
npm installto get project dependencies installed (grunt, bower). Npm is installed when you install node.js. -
Run
bower installto get web dependencies installed (bootstrap,jquery). A local copy of Bower will be installed innode_modules/bower/bin/bower. However, you may want to have a global version installed usingnpm install -g bower. -
Test out grunt by running
grunt lessto run the less task that will compile the bootstrap less file into a css file usable by your site. Openwww\index.htmlin your browser. A local copy of grunt will be installed innode_modules/grunt-cli/bin/grunt. However, you may want to have a global version installed usingnpm install -g gruntandnpm 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.
- Use bootstrap 3 to create responsive layout (resilient to mobile screen sizes).
- Use knockoutjs to process user input and any dynamic content.
- 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
lesstask to compile an additionallocal.lessfile, containing your custom presentation elements into a css file. - Create a new grunt task, called
packageto 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
validatethat runsjshinton all javascript files in app. - Create a
build_alltask that runs all the steps needed to build the web app.
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