Difference between revisions of "Fabulous four"

From mn/ifi/inf5750
Jump to: navigation, search
 
(32 intermediate revisions by 3 users not shown)
Line 12: Line 12:
 
=== Project:&nbsp;<span style="font-family: arial, sans-serif; font-size: 13px">Touch-based messaging app</span> ===
 
=== Project:&nbsp;<span style="font-family: arial, sans-serif; font-size: 13px">Touch-based messaging app</span> ===
  
<span style="font-family: arial, sans-serif; font-size: 13px">Will use CSS, Bootstrap, AJAX, Javascript, Angular, HTML5, Maven, Git.</span>
+
<span style="font-family: arial, sans-serif; font-size: 13px">Will use CSS, Bootstrap, jQuery, Angular, Javascript, HTML5, Git.</span>
 +
 
 +
<span style="font-size:larger">'''Architecture:'''</span>
 +
<div>- CSS: Bootstrap</div><div><br/></div><div>- Client: HTML5, JavaScript.</div><div><br/></div><div>- Server: DHIS</div><div><br/></div><div><span style="font-size:larger">'''Features:'''</span></div><div><br/></div><div>- Send message</div><div><br/></div><div>- Add friend to friendslist</div><div><br/></div><div>- Delete message/conversation</div><div><br/></div><div>- Multiple people in same conversation, where conversation name = subject.</div><div><br/></div><div>- One color for your messages and another color for the other peoples involved in the conversation.</div><div><br/></div><div>- Headers with names displaying who said what and timestamp.<br/></div><div><br/></div><div>- Local storage for customizable number of months(1-6). &nbsp;<br/><br/>- Responsive chat. When a message is sent, it'll automaticly pop up in the conversation, no page refresh is needed.<br/></div><div><br/></div><div>- Marking messages as read after they have been opened.<br/></div><div><br/></div>
  
 
= Time schedule =
 
= Time schedule =
Line 23: Line 26:
  
 
*First bare-bone version - static HTML.
 
*First bare-bone version - static HTML.
 +
*First version UI with Bootstrap.
 
*Uploadable as DHIS web app.
 
*Uploadable as DHIS web app.
 +
*Setting up Postgres database
 +
 +
=== Third deadline: (30/11) ===
 +
 +
*Integrate with DHIS API.
 +
*Able to send/receive messages through DHIS.
 +
*Fully functional message system.
  
 
== Milestone 1 (1st November) ==
 
== Milestone 1 (1st November) ==
Line 38: Line 49:
  
 
*Finished, if applicable also with mobile app.
 
*Finished, if applicable also with mobile app.
 +
*(see challenges/learning below)
  
  
Line 50: Line 62:
  
 
*Update wiki.
 
*Update wiki.
*Design a UI mockup.
+
*Design a UI mockup. (This is just a first draft and we may change it slightly if there are some important functions/features we decide to implement)
  
 
'''sindrekv:'''
 
'''sindrekv:'''
  
 
*Design flow charts.
 
*Design flow charts.
 +
*Update wiki.
  
 
'''torgeiou:'''
 
'''torgeiou:'''
Line 65: Line 78:
  
 
'''jorgenjr:'''
 
'''jorgenjr:'''
 +
 +
*Java backend (Service layer, make the GUI and Database work together)
 +
*QA and testing sindrekv's work.
  
 
'''sindrekv:'''
 
'''sindrekv:'''
 +
 +
*Bootstrap/HTML
 +
*Basic JavaScript
  
 
'''torgeiou:'''
 
'''torgeiou:'''
 +
 +
*QA and testing jorgenjr's work.
 +
*JUnit tests
  
 
'''andrefol:'''
 
'''andrefol:'''
 +
 +
*Setting up the database (Postgres)
 +
*Deploy to mobile app (possibly delay it to third deadline)
 +
*JUnit tests
 +
 +
=== Third to final deadline: ===
 +
 +
'''jorgenjr:'''
 +
 +
*Javascript
 +
*DHIS 2 API queries
 +
*Wiki update
 +
 +
'''sindrekv:'''
 +
<div>
 +
*Javascript
 +
*DHIS 2 API queries
 +
*Wiki update
 +
</div>
 +
'''torgeiou'''
 +
<div>
 +
*Javascript
 +
*DHIS 2 API queries
 +
</div>
 +
'''andrefol:'''
 +
<div>
 +
*Javascript
 +
*DHIS 2 API queries
 +
*Wiki update
 +
</div>
  
 
= Screenshots and screen flows =
 
= Screenshots and screen flows =
Line 89: Line 141:
  
 
Fig 5: friends
 
Fig 5: friends
 +
 +
[[File:Messaging.png|none]]
  
 
= Documented learning during project =
 
= Documented learning during project =
 +
 +
We started of by implementing a system like in the mandatory assignments, i.e. with Java backend. Unfortunately, that was not the proper approach to implement the message system, so we needed to delete a lot of work. Luckily, we had started creating a static HTML page. We are all rookies in front end development, so there has been a lot of failures while working with JavaScript.
 +
 +
Originally we thought the project was supposed to be done the same way as the mandatory assignments, so we did all the Java implementations similar to how they were done. Later we realized that we didn't have to do any Java, but just use the DHIS system.
 +
 +
There was an issue delivering the finished product by 30. november because many of us had very early exams this semester. So the finished App will be done by the real deadline 8. december.
 +
 +
GUI is modified sligthly from the mockup, we argue for the better. Smaller number of tabs and a better overall look of the whole GUI.
 +
 +
We've learned a lot by having four people working in the same repository, and yes, there have been several merge conflicts. After some frustrating moments trying to restore the repository, we learned that it is best to just split up code in many files and not work on the same files.
  
 
= Suggested improvements to APIs etc =
 
= Suggested improvements to APIs etc =
 +
 +
1. An easier way to see who sent the messages. When we've received conversations from the API, the messages has not contained a user ID from the sender. You can see the user IDs for all the users in the conversation, but not at a specific message. We had to add the parameters:&nbsp;?fields=subject,id,messages[id,name,sender,created] in the URL.
 +
 +
2. Some sort of friends list for the user. As we implemented a friend list for our user, we had to manually add the list to the user.
 +
 +
3. Maybe a faster way to get all messages in a conversation. First, we had to do an AJAX call to:&nbsp;[http://inf5750-4.uio.no/api/messageConversations http://inf5750-4.uio.no/api/messageConversations] and read through all the conversations and do another AJAX call to every conversation (since we needed the conversation ID). If you have 1000 conversations, you have to do 1000 AJAX calls.
 +
 +
4. For nearly every API calls we've used, we just sent a JSON or a GET request. But when we tried to send a new message in a new conversation, we really had to dig deep in the documentation and ended up finding the example in a spanish(!) version of the documentation:&nbsp;https://www.dhis2.org/doc/snapshot/es/user/html/ch23s10.html. We kind of found it strange that we had to suddenly switch over to sending XMLs while all other calls where done with JSON and jQuery.
  
 
= Link to repository =
 
= Link to repository =

Latest revision as of 22:07, 8 December 2014

List of group members

  • Sindre kvålsgard (sindrekv)
  • Jørgen Jacobsen Rognerud (jorgenjr)
  • Andreas Færøvig Olsen (andrefol)
  • Torgeir Ous (torgeiou)


Summary of requirements

Project: Touch-based messaging app

Will use CSS, Bootstrap, jQuery, Angular, Javascript, HTML5, Git.

Architecture:

- CSS: Bootstrap

- Client: HTML5, JavaScript.

- Server: DHIS

Features:

- Send message

- Add friend to friendslist

- Delete message/conversation

- Multiple people in same conversation, where conversation name = subject.

- One color for your messages and another color for the other peoples involved in the conversation.

- Headers with names displaying who said what and timestamp.

- Local storage for customizable number of months(1-6).  

- Responsive chat. When a message is sent, it'll automaticly pop up in the conversation, no page refresh is needed.

- Marking messages as read after they have been opened.

Time schedule

First deadline: (7/11)

  • Document architecture, features/functions and UI mockup to the wiki.

Second deadline: (15/11)

  • First bare-bone version - static HTML.
  • First version UI with Bootstrap.
  • Uploadable as DHIS web app.
  • Setting up Postgres database

Third deadline: (30/11)

  • Integrate with DHIS API.
  • Able to send/receive messages through DHIS.
  • Fully functional message system.

Milestone 1 (1st November)

  • Document features and architecture on Wiki
  • Show understanding of DHIS2 web apps

Milestone 2 (15th November)

  • First bare-bone version - static HTML
  • Uploadable as DHIS2 web app

Milestone 3 (30th November)

  • Finished, if applicable also with mobile app.
  • (see challenges/learning below)


Final delivery: 8th December
Presentation 9th December

How you are dividing tasks within the group

First deadline:

jorgenjr:

  • Update wiki.
  • Design a UI mockup. (This is just a first draft and we may change it slightly if there are some important functions/features we decide to implement)

sindrekv:

  • Design flow charts.
  • Update wiki.

torgeiou:

andrefol:

Everyone must understand the features and functionality of the project.

Second deadline:

jorgenjr:

  • Java backend (Service layer, make the GUI and Database work together)
  • QA and testing sindrekv's work.

sindrekv:

  • Bootstrap/HTML
  • Basic JavaScript

torgeiou:

  • QA and testing jorgenjr's work.
  • JUnit tests

andrefol:

  • Setting up the database (Postgres)
  • Deploy to mobile app (possibly delay it to third deadline)
  • JUnit tests

Third to final deadline:

jorgenjr:

  • Javascript
  • DHIS 2 API queries
  • Wiki update

sindrekv:

  • Javascript
  • DHIS 2 API queries
  • Wiki update

torgeiou

  • Javascript
  • DHIS 2 API queries

andrefol:

  • Javascript
  • DHIS 2 API queries
  • Wiki update

Screenshots and screen flows

Flowchart5750.jpg
Inbox.png

Fig 2: inbox

Outbox.png

Fig 3: outbox

Newmessage.png

Fig 4: new message

Friends.png

Fig 5: friends

Messaging.png

Documented learning during project

We started of by implementing a system like in the mandatory assignments, i.e. with Java backend. Unfortunately, that was not the proper approach to implement the message system, so we needed to delete a lot of work. Luckily, we had started creating a static HTML page. We are all rookies in front end development, so there has been a lot of failures while working with JavaScript.

Originally we thought the project was supposed to be done the same way as the mandatory assignments, so we did all the Java implementations similar to how they were done. Later we realized that we didn't have to do any Java, but just use the DHIS system.

There was an issue delivering the finished product by 30. november because many of us had very early exams this semester. So the finished App will be done by the real deadline 8. december.

GUI is modified sligthly from the mockup, we argue for the better. Smaller number of tabs and a better overall look of the whole GUI.

We've learned a lot by having four people working in the same repository, and yes, there have been several merge conflicts. After some frustrating moments trying to restore the repository, we learned that it is best to just split up code in many files and not work on the same files.

Suggested improvements to APIs etc

1. An easier way to see who sent the messages. When we've received conversations from the API, the messages has not contained a user ID from the sender. You can see the user IDs for all the users in the conversation, but not at a specific message. We had to add the parameters: ?fields=subject,id,messages[id,name,sender,created] in the URL.

2. Some sort of friends list for the user. As we implemented a friend list for our user, we had to manually add the list to the user.

3. Maybe a faster way to get all messages in a conversation. First, we had to do an AJAX call to: http://inf5750-4.uio.no/api/messageConversations and read through all the conversations and do another AJAX call to every conversation (since we needed the conversation ID). If you have 1000 conversations, you have to do 1000 AJAX calls.

4. For nearly every API calls we've used, we just sent a JSON or a GET request. But when we tried to send a new message in a new conversation, we really had to dig deep in the documentation and ended up finding the example in a spanish(!) version of the documentation: https://www.dhis2.org/doc/snapshot/es/user/html/ch23s10.html. We kind of found it strange that we had to suddenly switch over to sending XMLs while all other calls where done with JSON and jQuery.

Link to repository

gitolite@git.uio.no:u/sindrekv/project5750

Download link to sample web app or Android app