Trevo project management software                         Turku University of Applied Sciences                            ...
CONTENTS1. Summary ..........................................................................................................
1. SUMMARYThe project is a part of coursework for .NET Architectures (6 ECTS) course hosted by North Karelia University of...
4. SUBJECT EXCLUSIONHow great it would have been to have had time to implement all of the features that were brainstormed ...
Figure 1. Use case diagram6. DEVELOPMENT PHASESI will shed light on how I proceeded with the project in chronological mann...
14. Using JQuery for UI on Views    15. Writing CSS stylesheets7. ARCHITECTURE7.1 REQUIREMENTSServer side        .NET Fra...
ASP.NET MVC provides nice concept to debug and unit test applications. This is due to separation of models, viewsand contr...
Figure 2. Entity-relationship diagram with Crow’s foot notation (bold attributes represent required fields)               ...
Figure 3. ADO.NET Entity Data Model aka LINQ to SQL class model7.4 CREATING A DATABASEAt first I used ADO.NET generated SQ...
7.4.1 QUERIES TO DATABASEIn this project I decided to go with a model first approach which generates ObjectContext class a...
Figure 6. Class diagram: controller etc. classes coded in C#.                                                             ...
7.6 USER INPUT VALIDATIONUser input validation is done by the ADO.NET Entity Framework. The EF knows which fields cannot b...
Figure 9. Messages view.Figure 10. Message open view.                                11
Figure 11. Dashboard view.                             12
Figure 12. Conferences view.Figure 13. Projects view.Figure 14. Documents view.                               13
Figure 15. Clients view.Figure 16. Teams view.                           14
Figure 17. Developers view.Figure 18. Use case of jQuery modal dialogs.                                               15
Figure 19. Create project view.Figure 20. Edit project view.                                  16
Figure 21. Message details view.        Figure 22. Notes view.7.8 CODE EXAMPLESThe following code is from the team view. I...
// let the developers without team be draggable        $("li", $developers).draggable({            cancel: "a.ui-icon", //...
<script type="text/javascript">    $(function () {        $("#devDialog").dialog({            autoOpen: false, width: 400,...
@foreach (var item in Model)         {             foreach (var dev in item.developers)             {                 if (...
It became evident pretty soon that there were too many planned features. The entities are also very detailed andsome of th...
Upcoming SlideShare
Loading in …5
×

Trevo project management documentation

1,755 views

Published on

Project management web application that features the management of projects, tasks, issues, conferences, teams, developers, messages, notes, documents, and clients.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,755
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Trevo project management documentation

  1. 1. Trevo project management software Turku University of Applied Sciences .NET Architectures Petri Tuononen 25/11/2011
  2. 2. CONTENTS1. Summary ......................................................................................................................................................................... 12. Learning objectives ......................................................................................................................................................... 13. Brainstormed IDEAS ........................................................................................................................................................ 14. Subject exclusion ............................................................................................................................................................ 25. Features decided to be implemented ............................................................................................................................. 26. Development phases ...................................................................................................................................................... 37. Architecture .................................................................................................................................................................... 4 7.1 Requirements ........................................................................................................................................................... 4 7.2 Design considerations ............................................................................................................................................... 4 7.2.1 Modularity ......................................................................................................................................................... 4 7.2.2 Compatibility ...................................................................................................................................................... 4 7.2.3 Extensibility ........................................................................................................................................................ 4 7.2.4 Maintainability ................................................................................................................................................... 4 7.2.5 Usability ............................................................................................................................................................. 5 7.2.6 Security .............................................................................................................................................................. 5 7.3 Designing database ................................................................................................................................................... 5 7.4 Creating a database .................................................................................................................................................. 7 7.4.1 Queries to database ........................................................................................................................................... 8 7.5 Implementation ........................................................................................................................................................ 8 7.6 User input validation............................................................................................................................................... 10 7.7 User interface ......................................................................................................................................................... 10 7.8 Code examples ........................................................................................................................................................ 178. Testing .......................................................................................................................................................................... 209. What could have been done differently? ..................................................................................................................... 2010. What next? ................................................................................................................................................................. 2111. Acquired knowledge ................................................................................................................................................... 2112. Project hosting ............................................................................................................................................................ 2113. Outcome ..................................................................................................................................................................... 21
  3. 3. 1. SUMMARYThe project is a part of coursework for .NET Architectures (6 ECTS) course hosted by North Karelia University ofApplies Sciences in Finland. For the sake of the course this project will use Microsoft’s .NET architecture and its latestframework to date which is 4.0. The course is a bit aligned towards web side of programming therefore my project willalso be web application. The subject of my project is project management application with web interface and I havenamed it as Trevo which is a Portuguese word for clover in English.2. LEARNING OBJECTIVESThe goal is to learn a bit more advanced web programming with ASP.NET MVC 3, Razor view engine, ADO.NET EntityFramework, LINQ, MSSQL and some more common techniques such as jQuery (with AJAX), HTML5 and CSS3. This is agood packet overall to create almost any kind of web application.3. BRAINSTORMED IDEASI usually start my projects by brainstorming ideas and this was not an exception. It is a great way to get to know theproject subject first hand. I just started to get some ideas and quickly wrote them down. There are no right and wrongideas at this state, because the ideas are not evaluated until the end of brainstorming. My main focus here was tothink about the feature set, but my mind also focused in UI.  Task view (percentage completed, expected time, time worked on, who has worked on, approve on closing)  Projects view  Developers assigned to project and tasks  Time planner (scheduler, tasks, charts)  Agile methods (Visualizing Agile Projects with Kanban Boards)  Save documents  Cost management (charts showing expected and current costs)  Milestones  Overview (total time spend on project etc.)  Message forum  Conferences (with Google maps location and calendar)  Chat (+real-time video messaging)  Dynamic document / whiteboard (e.g. Google docs)  Reporting and analyzing  Issue tracker  Customer contact details  Notes  Developer effectiveness monitoring and analysis (w/ charts)  UI templates  Simple to use  Fascinating UI 1
  4. 4. 4. SUBJECT EXCLUSIONHow great it would have been to have had time to implement all of the features that were brainstormed but in thereal world I needed to limit the upcoming features drastically if I ever planned to finish this project on time. Given thelimited amount of time I first decided to drop the most advanced and at the same time most time consuming featuresfrom the list. As much as I would have been delighted to have seen Agile features, video communication, costmanagement, time planning, dynamic document editing to become reality, it was just not going to happen. Howeverthere are still plenty of features left even when compared to the market leaders in this sector.5. FEATURES DECIDED TO BE IMPLEMENTEDDashboard includes overview of the application context for example calculated values, reminders of events, chartsetc.To represent people there are clients, developers and teams. One client and multiple developers can be assigned to aproject. Developers can belong to teams.There are tasks so that project work amount can be divided into multiple segments. Then there are also categories fortasks and projects to organize similar concepts.Issues can be assigned to projects and they can also be categorized. Additionally files can be attached to issues.Milestones can be set projects and issues.Notes can be added to projects.Developers can leave messaged categorized under topics.Developers can save documents for others to view.Developers can issue conferences and confirm their attendance. 2
  5. 5. Figure 1. Use case diagram6. DEVELOPMENT PHASESI will shed light on how I proceeded with the project in chronological manner. This is to give you a brief overview whatsteps needed to be taken to achieve the goals set in the project specification. I intentionally excluded thebrainstorming phase from the list below. 1. Designing of use case diagram 2. Designing Entity-Relationship model with MS Visio 3. Creating multiple projects (as in component-based programming). One for data and one for web UI. 4. Adding data project as a reference for web UI project. 5. Creating ADO.NET Entity Data Model (Model-First approach). No need to create separate model classes (i.e. DbContext). 6. Generating database from the ADO.NET Entity Data Model 7. Executing generated SQL code to create database tables with columns. Connection string is automatically added to web.config. 8. Adding foreign key relationships manually to database so that SQL Server will maintain referential integrity. It prevents adding invalid rows or deleting rows that are still referenced. It also allows cascade delete on items that are not referenced anymore. 9. Adding unique indexes to couple of tables to make some string type variables/columns unique thus disallowing duplicates. 10. Generating ObjectContext class and persistence awareness classes with ADO.NET EntityObjectGenerator 11. Creating/generating Controllers (with data access logic to interact with the database) 12. Creating/generating Views (create, edit, delete) 13. Using LINQ queries to access database in controller methods 3
  6. 6. 14. Using JQuery for UI on Views 15. Writing CSS stylesheets7. ARCHITECTURE7.1 REQUIREMENTSServer side  .NET Framework 4  ASP.NET MVC 3  Razor view engine  IIS  MS SQL ServerBrowser side  HTML5  CSS3  JavaScript  jQuery 1.3+7.2 DESIGN CONSIDERATIONSIt is well worth taking time to evaluate the different design aspects of software.7.2.1 MODULARITYThe MVC application itself is already quite modular, because models, views and controllers are separated. AdditionallyI separated entity model and ObjectContext class to separate component.7.2.2 COMPATIBILITYThe application runs on most web browsers but is not designed for mobile devices. JavaScript also needs to beenabled. Used JQuery libraries are also widely supported by web browsers. The software uses the latest .NETFramework 4.0, ASP.NET MVC 3 and Razor view engine. Therefore it is not backward compatible what comes tosoftware.7.2.3 EXTENSIBILITYExtensions can be done fairly easily. Database for example can be extended by adding a new entity in entity modeland generating a new database or manually modifying the database. ObjectContext class is updated automaticallywhen generating the database in entity model designer therefore object-relational mapping does not need to betaken care of by the developer. However sometimes Entity Framework can leave old fields which are only visible inentity model’s XML code and modifying fields might need manual changes to that code.7.2.4 MAINTAINABILITY 4
  7. 7. ASP.NET MVC provides nice concept to debug and unit test applications. This is due to separation of models, viewsand controllers. Testing is one of the main aspects of maintainability.New pages can also be created with minimal effort.7.2.5 USABILITYUsability is always one of the main concerns when designing a website. It can also easily lead to compromises,because usually the simplest kind of websites will work on most web browsers and platforms. This application is notdesigned for mobile devices for example. For that, a new user interface would have to be build. I tried to invent amore intuitive UI but there is still work on that field.7.2.6 SECURITYIt is always advised to go with the standard and preferred way which in this case is ASP.NET Membership for userauthentication. It saves a lot of work from the developer. It is much better to use well tested and known to be secureinterface rather than designing your own. Register view and Register action in Account controller were slightlymodified to include more fields in order to create developer object at the same time.7.3 DESIGNING DATABASEI used Microsoft Visio to make ER-model with Crow’s foot notation. This model is a bit more clear compared to whatcan be done with Visual Studio’s designer. Primary and foreign keys are shown clearly. 5
  8. 8. Figure 2. Entity-relationship diagram with Crow’s foot notation (bold attributes represent required fields) 6
  9. 9. Figure 3. ADO.NET Entity Data Model aka LINQ to SQL class model7.4 CREATING A DATABASEAt first I used ADO.NET generated SQL code to create the initial database from entity model. After that if I made achange to the entity model, I had to generate database again in order to get table mappings done.Some modifications I had to include in database were primary keys, foreign keys and indexes.There are also various cascading options. For example, if a project is deleted, all tasks belonging to that project arealso deleted. 7
  10. 10. 7.4.1 QUERIES TO DATABASEIn this project I decided to go with a model first approach which generates ObjectContext class and SQL code to createdatabase. Therefore I decided to retrieve data from the data model by using user defined functions (LINQ queries)which I coded within controllers. I could have also written stored procedures within the database and then map thoseinto the data model (i.e. integrating with ObjectContext class). After that SPs could have been executed quite similarlyas user defined functions by LINQ query, because mapped SPs are methods in ObjectContext class. The main reasonwhy I did not use SPs was simple because I wanted to learn LINQ during this project. There are no plans to createother user interfaces so I thought LINQ queries would be good enough. The additional fact is that writing LINQ to SQLqueries is pretty effortless and fast comparing to writing SPs with SQL. On the other hand, If I knew that the projectcontained let’s say desktop, web and mobile UIs, I would not think twice to go with SPs.7.5 IMPLEMENTATIONBeing an MVC project, most of the files are models, views and controllers. Fewer models in fact, becausethey were mostly generated by ADO.NET. I still needed to create couple special case models that contain thespecific data I need especially the union of two models. The most work intensive part was the views.Controllers do not contain that much code especially when the object-relational mapping and LINQ-to-SQLwork so coherently. However most controllers control index, create, edit, details and remove views if noteven more. Some special cases might need their own views e.g. showing details in jQuery dialog. Figure 4. MVC architecture. Figure 5. Solution/workspace listing. 8
  11. 11. Figure 6. Class diagram: controller etc. classes coded in C#. 9
  12. 12. 7.6 USER INPUT VALIDATIONUser input validation is done by the ADO.NET Entity Framework. The EF knows which fields cannot be null by lookingat the entity model I created. The code for input validation is created alongside with ObjectContext class which iscreated from the entity model to map entities, fields and relations etc. with the database.7.7 USER INTERFACEJQuery provides great functions to create an interactive UI. JQuery was used to open dialogs, post back data from theserver via AJAX, drag and drop HTML elements, add and remove CSS styles, fading animations etc. CSS3 was helpfulfor creating stretched background, transparent menu buttons and rounded elements. Figure 7. Tasks view. Figure 8. Issues view. 10
  13. 13. Figure 9. Messages view.Figure 10. Message open view. 11
  14. 14. Figure 11. Dashboard view. 12
  15. 15. Figure 12. Conferences view.Figure 13. Projects view.Figure 14. Documents view. 13
  16. 16. Figure 15. Clients view.Figure 16. Teams view. 14
  17. 17. Figure 17. Developers view.Figure 18. Use case of jQuery modal dialogs. 15
  18. 18. Figure 19. Create project view.Figure 20. Edit project view. 16
  19. 19. Figure 21. Message details view. Figure 22. Notes view.7.8 CODE EXAMPLESThe following code is from the team view. It is the most JavaScript intensive view in this project. The purpose of thisview is to allocate developers into teams. Developers not yet associated with a team can be dragged into teamelements. Teams can be unallocated by clicking green recycle icon or dragging back to developer area. Developers canalso be transferred from team to team with simple drag-and-drop. Teams can be created but not developers, becauseuser account is associated with only one developer. There are multiple buttons associated with developers and team.Additionally there are jQuery dialogs to create team and confirm deletion of team.@model IEnumerable<PrjctMngmt.Models.TeamDeveloperModel>@{ ViewBag.Title = "Teams";}<script type="text/javascript"> $(function () { // theres the developers and the team var $developers = $(".developers"), $teams = $(".teams"); 17
  20. 20. // let the developers without team be draggable $("li", $developers).draggable({ cancel: "a.ui-icon", // clicking an icon wont initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position helper: "clone", cursor: "move" }); // let the developers within teams be draggable $("li", $teams).draggable({ cancel: "a.ui-icon", // clicking an icon wont initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position helper: "clone", cursor: "move" }); // let the team be droppable, accepting developers $teams.droppable({ accept: .developers > *, .teams > *, //allow also team to team drops hoverClass: "ui-state-highlight", drop: function (event, ui) { moveToTeam(ui.draggable, $(this)); } }); // let developers be droppable, accepting developers from teams $developers.droppable({ accept: ".teams > li", hoverClass: "ui-state-highlight", drop: function (event, ui) { unbindDeveloper(ui.draggable); } }); // add developer to team function var removeMember = "<a href=link/to/unbind/script/when/js/is/off title=Unbind developer class=devRecycleButtonLink recycleIcon></a>"; function moveToTeam($item, $dropped) { $item.fadeOut(function () { if (!$item.hasOwnProperty(removeMember)) { $item.find("a.recycleIcon").remove(); $item.append(removeMember); } $item.appendTo($dropped).fadeIn(function () { }); $.post("/Developer/ChangeTeam?devId=" + $item.attr("id") + "&teamName=" + $dropped.attr("id"), function () {}); }); } // remove developer from the team function unbindDeveloper($item) { $item.fadeOut(function () { $item .find("a.recycleIcon").remove() .end() .appendTo($developers) .fadeIn(); $.post("/Developer/ChangeTeam?devId=" + $item.attr("id") + "&teamName=", function () { }); }); } // resolve the icons behavior with event delegation $("ul.developers > li").click(function (event) { var $item = $(this), $target = $(event.target); if ($target.is("a.recycleIcon")) { unbindDeveloper($item); } return false; }); // resolve the icons behavior with event delegation $(".teams > li").click(function (event) { var $item = $(this), $target = $(event.target); if ($target.is("a.recycleIcon")) { unbindDeveloper($item); } return false; }); });</script> 18
  21. 21. <script type="text/javascript"> $(function () { $("#devDialog").dialog({ autoOpen: false, width: 400, modal: true, buttons: { "Save": function () { $.post("/Developer/CreateDialog", $("#DeveloperForm").serialize(), function () { $("#devDialog").dialog("close"); window.location.reload(); }); }, Cancel: function () { $(this).dialog("close"); } } }); $(".devDetails").click(function () { var id = $(this).parent().attr("id"); window.open("/Developer/Details/" + id); }); });</script><script type="text/javascript"> $(function () { $("#teamDialog").dialog({ autoOpen: false, width: 400, modal: true, buttons: { "Save": function () { $.post("/Team/Create", $("#TeamForm").serialize(), function () { $("#teamDialog").dialog("close"); window.location.reload(); }); }, Cancel: function () { $(this).dialog("close"); } } }); $("#addTeam").click(function () { $("#teamDialog").html("") .dialog("option", "title", "Create team") .load("/Team/Create", function () { $("#teamDialog").dialog("open"); }); }); });</script><script type="text/javascript"> $(document).ready(function () { $("#confirmTeamDelete").dialog({ modal: true, autoOpen: false }); $(".removeTeam").click(function (e) { e.preventDefault(); var id = $(this).parent().parent().attr("id"); var url = @Url.Action("Delete", "Team", new { TeamName = "team" }); url = url.replace("team", id); $("#confirmTeamDelete").dialog(option, buttons, { "Confirm": function () { $.post(url, null, function (data) { window.location.reload(); } ); }, "Cancel": function () { $(this).dialog("close"); } }); $("#confirmTeamDelete").dialog("open"); }); });</script><div class="ui-helper-clearfix"> <b>Developers</b> <ul class="developers"> 19
  22. 22. @foreach (var item in Model) { foreach (var dev in item.developers) { if (dev.TeamName == null || dev.TeamName=="") { <li id="@dev.DeveloperID" class="ui-widget-content ui-corner-tr devLi"> @dev.FirstName @dev.LastName <img alt="Details" title="Details" class="devDetails ButtonLink detailIcon" src="../../Content/themes/base/images/mag_glass.png" /> </li> } } } <!-- placement hack --><img alt="." src="../../Content/themes/base/images/transparent_dot.png" height="30px"/> </ul> <br /> <b>Teams</b> <br /> @foreach (var item in Model) { foreach (var team in item.teams) { <div id="@team.TeamName" class="teams"> <div class="teamTitle ui-widget-header"> @team.TeamName <img alt="Remove" title="Remove" class="removeTeam ButtonLink removeIcon" src="../../Content/themes/base/images/remove-icon.png" /> <a href=@Url.Action("Details", "Team", new { TeamName = team.TeamName })> <img alt="Details" title="Details" class="teamDetails ButtonLink detailIcon" src="../../Content/themes/base/images/mag_glass.png" /> </a> </div> @foreach (var dev in item.developers) { if (dev.TeamName == team.TeamName) { <li id="@dev.DeveloperID" class="ui-widget-content ui-corner-tr devLi"> @dev.FirstName @dev.LastName <a href=@Url.Action("Details", "Developer", new { id = dev.DeveloperID })> <img alt="Details" title="Details" class="devDetails ButtonLink detailIcon" src="../../Content/themes/base/images/mag_glass.png" /> </a> <a href=link/to/unbind/script/when/js/is/off title=Unbind developer class=devRecycle ButtonLink recycleIcon></a> </li> } } </div> } } <img alt="Create team" id="addTeam" class="ButtonLink" style="float:right;" src="../../Content/themes/base/images/plus-sign_small.png" /></div><div id="confirmTeamDelete" title="Confirmation"> <p> <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> Are you sure you want to delete this team? </p></div>8. TESTINGI should have given a far greater bearing for testing. It is one of the most crucial aspects of developing maintainablecode with high reliability. My only excuse is that I did not have time to write unit tests, although unit tests might savetime in the future. The lack of unit test will surely mean higher costs of bug fixing. I did however debugging and alsotested the application as normal user would. At this point it becomes quite clear that it takes significant amount oftime to test UI and features over and over again and in the end unit tests will save you from a lot of trouble.9. WHAT COULD HAVE BEEN DONE DIFFERENTLY? 20
  23. 23. It became evident pretty soon that there were too many planned features. The entities are also very detailed andsome of the information is not significant really. Most of the information had to be hid behind a detail button. Itbecomes quite messy if all available information is visible in basic view. When designing a database it is difficult todetermine which attributes are really needed (or could be needed) and what would be the level of detail.10. WHAT NEXT?There is still plenty of work to be done. Especially the UI could benefit from contributions. The UI side might not befully functional, as easy to use as it could be, or aesthetically eye-popping. Cascading drop-down lists are on the wayto filter tasks and milestones that belong to a certain project. Major testing (unit tests) would also be one of thehighest priorities. The application is not ready yet for the users until proper testing is done and verified as stable.11. ACQUIRED KNOWLEDGEI learned new aspects of ASP.NET MVC and many automated features that will save developer’s time. I am verypleased with ADO.NET Entity Framework as a whole. It provides such useful tools. I also refreshed my memory in thefield of relational databases. The ORM (Object-Relational Mapping) concept was really advantageous to learn andusing LINQ to handle queries. JavaScript was also an unfamiliar language and during this project I wrote quite a bit ofit. All in all ASP.NET MVC taught me a lot.12. PROJECT HOSTINGProject is hosted in Google code (http://code.google.com/p/trevo-project-management) in open-source manner. It islicensed under MIT license. It allows also commercial use. The further development can be tracked by visiting the site.13. OUTCOMEIt is fair to say that the project was ambitious. There was plenty to do and I did not even dream to implement all thefeatures I brainstormed. The main goal was to learn about new technologies and work as much as I possibly could. Ihave to admit that once again I was surprised at the end how much time it took after all. However I am also assurprised to realize how much I did and how well I reached my goals. 21

×