Difference between revisions of "NinjaTurtles"
(15 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
*Pooja More | *Pooja More | ||
− | <span style="font-size:smaller | + | <span style="font-size:smaller">http://i59.tinypic.com/sln2uh.jpg</span> |
== Summary of requirements == | == Summary of requirements == | ||
− | Web API HTML-view browser | + | === Web API HTML-view browser === |
+ | |||
+ | Render pretty, linked HTML representation of the web api data model, starting at api/resources, based on the JSON representations. | ||
+ | |||
+ | API is available on [http://inf5750-16.uio.no//apps/nt/index.html http://inf5750-16.uio.no//apps/nt/index.html] | ||
+ | |||
+ | The presentation is available at http://wikisend.com/download/504568/Presentation1.ppsx | ||
+ | |||
+ | == Architecture == | ||
+ | |||
+ | === List of technologies === | ||
+ | |||
+ | *HTML5 | ||
+ | *CSS | ||
+ | *JavaScript (jQuery and AngularJS) | ||
+ | |||
+ | In order to scaffold and build our web app, we'll use the following tools: | ||
+ | |||
+ | *Yeoman | ||
+ | *Grunt | ||
+ | *Bower | ||
== Time schedule == | == Time schedule == | ||
Line 29: | Line 49: | ||
Testing phase ends. | Testing phase ends. | ||
− | ''' | + | '''9th of December''' |
Presentation of the product. | Presentation of the product. | ||
− | == | + | == Features == |
Ninja Turtles Team has been planning to deliver 3 main features with this project. These feature development tasks will be distributed among the team members. | Ninja Turtles Team has been planning to deliver 3 main features with this project. These feature development tasks will be distributed among the team members. | ||
− | <span style="color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px | + | <span style="color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px">__________________Basic Json View__________________</span> |
− | -- We can use HTML5 editable text feature to be able to edit/save the json files<br/>-- There might be an automated save option<br/><span class="text_exposed_show" style="display: inline | + | -- Show json objects in a readable format on the page (as a pretty, linked HTML representation)<br/>-- We can use HTML5 editable text feature to be able to edit/save the json files<br/>-- There might be an automated save option<br/><span class="text_exposed_show" style="display: inline">-- When you hover over some text, you may click to google these keywords.</span> |
− | <span style="color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px | + | <span style="color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px">__________________Visual Json______________________</span> |
− | <div class="text_exposed_show" style="display: inline; color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px | + | <div class="text_exposed_show" style="display: inline; color: rgb(20, 24, 35); font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 14px; line-height: 19.3199996948242px"> |
-- This will be a separate page which shows the json content distributed over a map.<br/>-- Assume that every json node is an individual patient with location info. This module will show different diseases with different colors. When you click over a point, you will be able to view more info about this patient. | -- This will be a separate page which shows the json content distributed over a map.<br/>-- Assume that every json node is an individual patient with location info. This module will show different diseases with different colors. When you click over a point, you will be able to view more info about this patient. | ||
__________________File Conversion & Download_________<br/>-- We may get every json file converted to XML, XLS and CSV formats.<br/>-- Converted files might be downloaded via link. | __________________File Conversion & Download_________<br/>-- We may get every json file converted to XML, XLS and CSV formats.<br/>-- Converted files might be downloaded via link. | ||
</div> | </div> | ||
+ | == Progress Timeline == | ||
+ | |||
+ | *12/11/14 Yeoman installation & Web Structure Created | ||
+ | *20/11/14 Basic Json View Implemented | ||
+ | *22/11/14 Web App installed on DHIS2 Group Server | ||
+ | *25/11/14 Clickable URLs and Google Search option implemented | ||
+ | *25/11/14 HTML/CSS style improvements | ||
+ | *30/11/14 Editable Nodes (?) | ||
+ | *02/12/14 XLS, CSV Downloadbles (?) | ||
+ | |||
== Screenshots and screen flows == | == Screenshots and screen flows == | ||
− | + | Json-to-Html initial layout | |
+ | |||
+ | {| | ||
+ | |- | ||
+ | | [[File:NinjaTurtles v1.png|thumb]] | ||
+ | |} | ||
+ | |||
+ | {| | ||
+ | |- | ||
+ | | | ||
+ | Json-to-XML | ||
+ | |||
+ | [[File:Ninja 1.jpg|thumb]] | ||
+ | |||
+ | |} | ||
+ | |||
+ | {| | ||
+ | |- | ||
+ | | | ||
+ | Json-To-Html Beta Layout | ||
+ | |||
+ | [[File:Ninja 2.jpg|thumb]] | ||
+ | |||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | You can watch our intro video [https://www.youtube.com/watch?v=jFNJXCsfTR4 here]. | ||
== Documented learning during project == | == Documented learning during project == | ||
+ | |||
+ | [http://yeoman.io/codelab.html How to scaffold a web app with Yeoman] | ||
+ | |||
+ | [https://docs.angularjs.org/api/ng/service/$http AngularJS documentation for $http] | ||
+ | |||
+ | On/Off Switch [https://proto.io/freebies/onoff/ https://proto.io/freebies/onoff/] | ||
+ | |||
+ | Useful page to learn more about git commands - ''especially while working in a group: ''[http://rogerdudler.github.io/git-guide/ http://rogerdudler.github.io/git-guide/] | ||
+ | |||
+ | For example, if you want to drop all your local changes and commits, fetch the latest history from the server and point your local master branch at it like this | ||
+ | |||
+ | '''git fetch origin <br/>''' | ||
+ | |||
+ | '''git reset --hard origin/master''' | ||
== Suggested improvements to APIs etc == | == Suggested improvements to APIs etc == | ||
Line 57: | Line 128: | ||
== Link to repository == | == Link to repository == | ||
− | [https://github.com/ninjaTurtlesUIO/production.git] | + | [https://github.com/ninjaTurtlesUIO/production.git github.com/ninjaTurtlesUIO/production[1]] |
== Download link to sample web app or Android app == | == Download link to sample web app or Android app == |
Latest revision as of 15:03, 8 December 2014
Contents
Group members
- Pedro Lima
- Sercan Leylek
- Pooja More
Summary of requirements
Web API HTML-view browser
Render pretty, linked HTML representation of the web api data model, starting at api/resources, based on the JSON representations.
API is available on http://inf5750-16.uio.no//apps/nt/index.html
The presentation is available at http://wikisend.com/download/504568/Presentation1.ppsx
Architecture
List of technologies
- HTML5
- CSS
- JavaScript (jQuery and AngularJS)
In order to scaffold and build our web app, we'll use the following tools:
- Yeoman
- Grunt
- Bower
Time schedule
2nd of November
Planning & task distribution will be complete.
16th of November
Basic Json view will be functional with basic requirements.
30th of November
Additional features will be implemented.
2nd of December
Testing phase ends.
9th of December
Presentation of the product.
Features
Ninja Turtles Team has been planning to deliver 3 main features with this project. These feature development tasks will be distributed among the team members.
__________________Basic Json View__________________
-- Show json objects in a readable format on the page (as a pretty, linked HTML representation)
-- We can use HTML5 editable text feature to be able to edit/save the json files
-- There might be an automated save option
-- When you hover over some text, you may click to google these keywords.
__________________Visual Json______________________
-- This will be a separate page which shows the json content distributed over a map.
-- Assume that every json node is an individual patient with location info. This module will show different diseases with different colors. When you click over a point, you will be able to view more info about this patient.
__________________File Conversion & Download_________
-- We may get every json file converted to XML, XLS and CSV formats.
-- Converted files might be downloaded via link.
Progress Timeline
- 12/11/14 Yeoman installation & Web Structure Created
- 20/11/14 Basic Json View Implemented
- 22/11/14 Web App installed on DHIS2 Group Server
- 25/11/14 Clickable URLs and Google Search option implemented
- 25/11/14 HTML/CSS style improvements
- 30/11/14 Editable Nodes (?)
- 02/12/14 XLS, CSV Downloadbles (?)
Screenshots and screen flows
Json-to-Html initial layout
Json-to-XML |
Json-To-Html Beta Layout |
You can watch our intro video here.
Documented learning during project
How to scaffold a web app with Yeoman
AngularJS documentation for $http
On/Off Switch https://proto.io/freebies/onoff/
Useful page to learn more about git commands - especially while working in a group: http://rogerdudler.github.io/git-guide/
For example, if you want to drop all your local changes and commits, fetch the latest history from the server and point your local master branch at it like this
git fetch origin
git reset --hard origin/master
Suggested improvements to APIs etc
Link to repository
github.com/ninjaTurtlesUIO/production[1]