IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten...

72
Dominique Denie 2013-2014 | HUBRUSSEL IT project 3 TI

Transcript of IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten...

Page 1: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

Dominique Denie 2013-2014 | HUBRUSSEL

IT project 3 TI

Page 2: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

1 | P a g e

Page 3: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

2 | P a g e

Hogeschool-Universiteit Brussel

Academiejaar 2013-2014

Toegepaste Informatica

Dominique Denie

3IZ

234159

IT – PROJECT

Communicatie

Page 4: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

3 | P a g e

Page 5: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4 | P a g e

Permissie

Ondergetekende verklaart dat de inhoud van deze bachelor proef mag geraadpleegd en/of

gereproduceerd worden, mits bronvermelding

Dominique Denie

Page 6: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

5 | P a g e

Page 7: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

6 | P a g e

Voorwoord

Ik ben Dominique Denie, een laatstejaarsstudent aan de Hogeschool-Universiteit Brussel.

In dit document vindt u een verslag van mijn IT-project. Dit is een belangrijk onderdeel van

mijn studie en telt zwaar mee voor het behalen van mijn diploma.

U zal een concreet verslag vinden van de stappen die ik ondergaan heb om het project tot

een goed einde te brengen, ook zal ik vaak verwijzen naar de bijlagen waar u meer informatie

zal vinden.

Page 8: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

7 | P a g e

Page 9: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

8 | P a g e

Inhoudstafel Permissie .............................................................................................................................. 4

Voorwoord ............................................................................................................................ 6

1. Inleiding ......................................................................................................................... 9

2. Situatieschets .............................................................................................................. 10

2.1 Wie ben ik? ........................................................................................................... 10

2.2 Wat zie ik voor de toekomst? ................................................................................ 10

2.3 Realisatie van het project ...................................................................................... 10

2.4 Verloop van dit project. ......................................................................................... 10

2.5 ICKware ................................................................................................................ 11

2.6 CVO Lethas Brussel ............................................................................................. 11

3. Beschrijving van het project ......................................................................................... 12

4. Voorbereiding .............................................................................................................. 13

4.1 User stories........................................................................................................... 13

4.2 Opstellen van de requirements ............................................................................. 13

4.2.1 Lijst van mensen die online zijn. .......................................................................... 13

4.2.2 Ordenen op populariteit ....................................................................................... 14

4.2.3 Twee verschillende views .................................................................................... 14

4.2.4 Droppen van files in chat ..................................................................................... 14

5. Oplossingen ................................................................................................................. 15

5.1 Chat server ........................................................................................................... 15

5.2 Bestanden versturen ............................................................................................. 15

6. Design ......................................................................................................................... 16

6.1 Mockups ............................................................................................................... 16

7. Besluit .......................................................................................................................... 18

Bijlagen 1: PID .................................................................................................................... 19

Bijlage 2: Documentatie Faye server ................................................................................... 25

Bijlage 3: Documentatie PrivatePub .................................................................................... 26

Bijlage 4: Mockup volledig scherm ...................................................................................... 30

Bijlage 5: Mockup pop-up .................................................................................................... 31

Bijlage 6: overleg requirements ........................................................................................... 32

Bijlage 7: CV ....................................................................................................................... 33

Bijlage 8: Presentatie .......................................................................................................... 36

Bijlage 9: Taken YouTrack…………………………………………………………………………50

Page 10: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

9 | P a g e

1. Inleiding

In de eerste plaats bevat deze paper een grondige uitleg over wat er verwacht wordt. In dit

deel zal beschreven worden wat de huidige situatie is en waar we naartoe willen.

In een tweede deel van deze paper zullen we de mogelijke oplossingen bespreken en een

keuze maken over wat het beste past bij dit project. Hier zal u ook uitleg krijgen over het design

en het plan van aanpak.

Page 11: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

10 | P a g e

2. Situatieschets

2.1 Wie ben ik?

Ik ben Dominique Denie, een laatstejaarsstudent Toegepaste Informatica aan de Hogeschool-

Universiteit Brussel. In mijn laatste jaar heb ik gekozen voor de afstudeerrichting Netwerken

en Systemen. Ik blijf buiten deze mijn studies wel nog bezig met het ontwikkelen van websites

en kleine applicaties. Ik doe dit omdat ik men kennis van IT zo breed mogelijk wil houden en

me dus niet beperken tot wat ik op de schoolbanken leer. Zo ben ik bezig met het onderhoud

van de website voor een lokale zwemclub.

2.2 Wat zie ik voor de toekomst?

Bij afloop van men studies zou ik graag beginnen bij een jong bedrijf. Ik ben er zelf nog niet

uit of dit in de systemen en netwerken zal zijn of in het development van applicaties. Bij een

keuze van een job zal ik vooral kijken naar de leermogelijkheden en naar de werksfeer waar

ik terecht in zal komen.

2.3 Realisatie van het project

Tijdens het project zal ik de voorbereidingen treffen voor de realisatie van een uniforme

communicatie mogelijkheid binnen het bestaande project “Webschool”. Ik ben in dit project

terechtgekomen tijdens mijn stage bij ICKware. Hier speelde ik een begeleide rol voor het

development team.

2.4 Verloop van dit project.

Dit project zal bestaan uit verschillende fasen. Eerst zullen de voorbereidingen getroffen

worden, een tweede stap zal zijn om een plan van aanpak op te stellen en daarna zal de

design gebeuren. Dit project stopt juist voor de feitelijke implementatie gebeurd. Deze

implementatie zal gebeuren door twee professionele programmeurs.

Page 12: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

11 | P a g e

2.5 ICKware

De opdrachtgever voor dit project is een

bedrijf uit Buggenhout genaamd ICKware. Het

bedrijf steunt zijn klanten bij elke transformatie

van gegevensstromen in kennisstromen. Dit

kan gebeuren via kennisoverdracht onder de

vorm van training, coaching of realisatie van een software architectuur en beheersing van de

ontwikkeling. ( project management )

Dit bedrijf wordt geleid door Marc De Valckenaere, hij is tevens de projectleider van

“Webschool”. Hierbinnen zal het project dat besproken wordt plaatsvinden.

2.6 CVO Lethas Brussel

CVO Lethas is een school die zich

toespitst op volwassenen

onderwijs. Zij vertegenwoordigen

ongeveer 8000 cursisten die

verspreid zijn over meerdere

lesplaatsen en campussen. Hun

aanbod bestaat uit: Talen

(Nederlands, Frans, …),

boekhouden, informatica ….

Zij zijn tevens ook de gebruikers van “Webschool” en daarmee ook de gebruikers van de chat.

Page 13: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

12 | P a g e

3. Beschrijving van het project

De opdrachtgever maakt een onlineleerplatform voor CVO Lethas Brussel. Dit zal verder

vernoemd worden onder de naam “Webschool”.

Dit leerplatform vormt een belangrijke schakel in de werking van de school. Docenten kunnen

hier een lessen plannen, taken opstellen en verbeteren. Zelfs de deliberatie van de cursisten

kan via dit platform plaatsvinden.

Het enige hekelpunt in dit platform blijft nog de communicatie. Voorlopig verloopt deze nog

vooral via mails binnen Webschool. De opdrachtgever zou dit willen omzetten naar de

mogelijkheid om te chatten met de collega’s of met de cursisten. Het is de bedoeling dat dit

een “slimme chatapplicatie” zal worden. Dit wil zeggen dat de applicatie zelf zal bepalen wie

de meest relevante contactpersoon is op die bepaalde moment. Een voorbeeld hiervan is:

bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten

is bezig met het voorbereiden van de lessen. Dan zal hij in zijn contactenlijst de andere docent

bovenaan te zien staan. Ook zal er een lijst ter beschikking zijn van de recente

contactpersonen.

Page 14: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

13 | P a g e

4. Voorbereiding

4.1 User stories

Aan de hand van gesprekken met de opdrachtgever, Marc De Valckenaere, zijn er een paar

user stories ontstaan. Deze zijn hieronder te vinden.

A) Een gebruiker kan een chatgesprek te starten met een andere gebruiker.

B) Een gebruiker kan een groepsgesprek starten.

C) Een gebruiker andere gebruikers zien die op dat moment online zijn.

D) Een gebruiker kan zien met wie hij het laatst een gesprek heeft gehad.

E) Een gebruiker kan bestanden doorsturen.

4.2 Opstellen van de requirements

Door de user stories hebben we een lijst kunnen maken van de requirements van het

project.

1) Lijst met mensen die online zijn.

2) Ordenen op populariteit.

3) Twee verschillende views.

4) Droppen van files in de chat.

Bovenstaande requirements worden hieronder verder grondig besproken.

4.2.1 Lijst van mensen die online zijn.

Er moet een lijst zijn van de personen die op dat moment online zijn of online geweest zijn.

Dit moet duidelijk gemaakt worden aan de hand van gekleurde bollen die voor de naam van

deze persoon zullen geplaatst worden. Er zal een groene bol voorzien worden indien de

persoon actief is geweest in de laatste 20 minuten, een oranje bol voor de personen die tussen

de 20 en de 40 minuten geleden online zijn geweest en als laatste een rode bol voor de

mensen van wie het langer dan 40 minuten geleden is dat ze actief zijn geweest in Webschool.

Page 15: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

14 | P a g e

4.2.2 Ordenen op populariteit

De personen die in deze lijst staan moeten gerangschikt worden volgens populariteit. Dit wil

zeggen dat de persoon die het laatste online is geweest bovenaan zal staan.

4.2.3 Twee verschillende views

Er moeten twee verschillende views zijn. De eerste moet de mogelijkheid bieden om via een

pop-up onderaan het scherm te chatten. De andere zal een volledige pagina in beslag nemen.

4.2.4 Droppen van files in chat

Als laatste moet er de mogelijkheid bestaan om bestanden gemakkelijk te versturen via de

chat functionaliteit. Dit zou het beste zijn als de bestanden kunnen gedropt worden in het

chatvenster.

Page 16: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

15 | P a g e

5. Oplossingen

5.1 Chat server

Voor de chat server was er de keuze tussen

een Faye-server op te stellen of meer bepaald

door gebruik te maken van Private Pub. Dit is

een gem in het Ruby on Rails framework, een

gem is een kleine applicatie of plug-in dat kan

gebruikt worden tijdens het maken van een

Ruby on Rails applicatie. De documentatie over hoe men zo een Faye of Private Pub server

installeert en in gebruik kan nemen, vindt u in de bijlagen.

5.2 Bestanden versturen

Voor het versturen van bestanden door deze te

droppen in het gesprek is gekozen voor gebruik te

maken van DropzoneJS. Dit is een open source

bibliotheek dat de mogelijkheid geeft om bestanden

op te laden via een drag’n’drop systeem, hierbij

wordt ook een afbeelding voorzien als preview van

het bestand dat men via deze weg wil doorsturen.

Ook hier verwijzen we naar de bijlagen voor een

documentatie over het implementeren van

DropzoneJS.

Een andere mogelijkheid die zal aangeboden is om de bestanden op te laden via de

traditionele manier. Hiermee bedoelen we dus de pop-up naar de filestructuur van de

computer waarop je op dat moment aan het werken bent.

Page 17: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

16 | P a g e

6. Design

Nadat we beslist hadden welke technologieën we gingen gebruiken en wat de doelstellingen

zijn voor onze applicatie konden we beginnen aan het design ervan. Een deel hiervan was

ook al gebeurd tijdens de gesprekken over de requirements.

6.1 Mockups

Dit design is gebeurd aan de hand van Mockups. Dit maakt het gemakkelijk voor de

ontwikkelaars omdat ze op deze manier een grondig beeld hebben van hoe de applicatie er

zal moeten uitzien.

Hieronder vindt u de Mockups voor de 2 views die nodig zijn in onze applicatie, in de bijlage

vindt u ze ook nog eens groter terug.

Figuur 1 Mockup volledig scherm

Page 18: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

17 | P a g e

Figuur 2: Mockup chat pop-up

Page 19: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

18 | P a g e

7. Besluit Deze paper had als hoofddoel om een voorbereiding te zijn op het feitelijke implementeren

van de chatapplicatie. Ik denk dat ik hier wel in geslaagd ben. De ontwikkelaars hebben aan

de hand van deze paper voldoende informatie om de functionaliteit tot een goed einde te

brengen.

Het maken van deze paper is voor mij ook heel leerrijk geweest aangezien ik op deze manier

er achter ben gekomen hoeveel tijd de voorbereiding van een project in beslag neemt. De

laatste jaren zijn we immers steeds meteen met het programmeren van de software. Nu besef

ik dat er nog zoveel aan vooraf gaat.

Page 20: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

19 | P a g e

Bijlagen 1: PID

Project Initiation Document

Project definitie

Achtergrond

De opdrachtgever van dit project is Marc De Valckenaere. Hij is zaakvoerder van het bedrijf

ICKware dat gelegen is te Buggenhout. Zij maken een online leerplatform voor CVO Lethas

Brussel. Dit project heet “Webschool”. Het is binnen “Webschool” dat het project zal

plaatsvinden. Het is de bedoeling om te zorgen voor een uniforme communicatie mogelijkheid

en om een chatfunctie te implementeren.

Objectieven

Het project heeft als doel om de communicatie tussen studenten en docenten en

tussen docenten onderling te verbeteren en te versnellen.

De eindgebruiker dient dit onderdeel te kunnen gebruiken zonder enige moeite of extra

opleiding.

Op basisch van het huidige onderwerp van de gebruiker zal er een voorstel gedaan

worden over de meest relevante persoon die men kan contacteren in geval van

problemen.

Een voorbeeld hiervan is indien er bepaalde lessen gegeven worden door twee

docenten dat deze bovenaan de lijst van contactpersonen komen te staan.

Beoogde doeleinden

Centrale communicatie tussen cursisten en docenten en tussen docenten onderling.

Gebruiksvriendelijke werking

Page 21: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

20 | P a g e

Scope van het project

De scope van dit project bedraagt volgende punten:

Opstellen van user stories

Opzetten van een chatserver

Implementatie van de nieuwe functionaliteit

Beperkingen en veronderstellingen

Beperkingen:

Het programmeren van deze functionaliteit zal gebeuren in de taal “Ruby”.

Deze nieuwe functie zal gemaakt worden binnen het “Ruby on Rails” framework

waarbinnen het overkoepelende project “Webschool” zich al reeds bevind.

Veronderstellingen:

De zaakvoerder, Marc De Valckenaere, zal een begeleidende rol spelen binnen dit

project. Hij zal er voor zorgen dat de nodige zaken aanwezig zijn om het werk tot een

goed einde te brengen.

Gebruikers en betrokken partijen

De gebruikers van het eindproduct zullen bestaan uit de volgende groepen:

Docenten van CVO Lethas Brussel

Studenten van CVO Lethas Brussel

Algemeen: elke gebruiker van Webschool

Project aanpak

Bij dit project zal er gekozen worden om verder te werken binnen het “Ruby on Rails”-

framework. Ook zal men het MVC design patroon toepassen.

Page 22: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

21 | P a g e

Het project zal worden onderverdeeld in volgende deeltaken:

1) Het bepalen van de requirements

a. User stories opstellen

b. Overleg met de directie van CVO Lethas

2) Analyse:

a. BPMN

3) Design:

a. Model – View – controller

b. Maken van Mockups

c. Het domeinmodel omzetten van een logisch naar een fysisch datamodel

4) Development:

a. Scrum development

b. Test Driven Development ( TDD )

5) Testing:

Business case

Binnen het bestaande project “Webschool’ is er dringend nood aan een uniforme

communicatie. Het beste zou zijn van deze te verkrijgen onder de vorm van een chat

mogelijkheid. Zodat de gebruikers te allen tijde op een efficiënte manier hulp kunnen zoeken

bij collega’s of in het geval van de studenten, bij hun medestudenten of hun docenten.

Project management

Marc De Valkenaere

opdrachtgever &

project manager

Anton Trushkevich

programmeur

Oleg Yakuntenok

programmeur

Page 23: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

22 | P a g e

Rolbeschrijvingen

Opdrachtgever

De opdrachtgever staat in voor de beschrijving van de scope en de doelstellingen van de opdracht. Ook

moet hij voor duidelijkheid zorgen omtrent de opdracht.

Project manager

Deze persoon zorgt voor de continue voortgang van het project. Hij zorgt ervoor dat alles in goede

banen loopt en dat de deadlines gerespecteerd worden.

Ontwikkelaar

Hij is verantwoordelijk voor het eindelijke ontwikkelen van het programma. Hij zal de code moeten

schrijven en deze testen. Een nauwe samenwerking met de project manager zal nodig zijn.

Page 24: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

23 | P a g e

Kwaliteit management

Agile en scrum

Door gebruik te maken van agile en scrum wordt de kwaliteit van het project gegarandeerd en

wordt er tevens gezorgd dat de deadlines gerespecteerd worden.

Configuratie management

De ontwikkelaars zijn verantwoordelijk voor het juist bewaren van de geschreven code.

Dit doen ze door gebruik te maken van een version control system, namelijk Gerrit.

De opdrachtgever is verantwoordelijk voor de controle op het project.

Risk management

Risk Impact Kans *

1 Nieuwe technologie ( chatserver ) 9 3 27

2 Conflicten met huidige code 5 3 15

Mitigerende acties

Risk 1:

Opleiding door middel van tutorials en bestudering van projecten die online ter

beschikking zijn.

Handleidingen opvragen en bestuderen.

Risk 2:

Bestaande documentatie grondig doornemen

Page 25: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

24 | P a g e

Communicatie management

De communicatie tussen de verschillende leden van het team zal op de volgende manieren

gebeuren:

Tweewekelijks een sprint planning meeting met de programmeurs over de volgende

punten op de backlog.

Over de lopende zaken zullen de programmeurs de project manager op de hoogte

houden. Dit houdt dan in dat ze hem verwittigen in het geval dat er errors opduiken of

onverwachte problemen waardoor ze de deadline niet zullen halen.

De communicatie die hierboven beschreven is zal via de volgende kanalen verlopen:

E-mail

Flowdock

Google Hangouts

Page 26: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

25 | P a g e

Bijlage 2: Documentatie Faye server

Page 27: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

26 | P a g e

Bijlage 3: Documentatie PrivatePub

Private Pub

Private Pub is a Ruby gem for use with Rails to publish and subscribe to messages

through Faye. It allows you to easily provide real-time updates through an open socket

without tying up a Rails process. All channels are private so users can only listen to events

you subscribe them to.

Watch RailsCasts Episode 316 for a demonstration of Private Pub.

Setup

Add the gem to your Gemfile and run the bundle command to install it. You'll probably want

to add "thin" to your Gemfile as well to serve Faye.

gem "private_pub"

gem "thin"

Run the generator to create the initial files.

rails g private_pub:install

Next, start up Faye using the rackup file that was generated.

rackup private_pub.ru -s thin -E production

In Rails 3.1 add the JavaScript file to your application.js file manifest.

//= require private_pub

In Rails 3.0 add the generated private_pub.js file to your layout.

<%= javascript_include_tag "private_pub" %>

It's not necessary to include faye.js since that will be handled automatically for you.

Page 28: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

27 | P a g e

Usage

Use the subscribe_to helper method on any page to subscribe to a channel.

<%= subscribe_to "/messages/new" %>

Use the publish_to helper method to send JavaScript to that channel. This is usually done in

a JavaScript AJAX template (such as a create.js.erb file).

<% publish_to "/messages/new" do %>

$("#chat").append("<%= j render(@messages) %>");

<% end %>

This JavaScript will be immediately evaluated on all clients who have subscribed to that

channel. In this example they will see the new chat message appear in real-time without

reloading the browser.

Alternative Usage

If you prefer to work through JSON instead of .js.erb templates, you can pass a hash

to publish_to instead of a block and it will be converted to_json behind the scenes. This can

be done anywhere (such as the controller).

PrivatePub.publish_to "/messages/new", :chat_message => "Hello, world!"

And then handle this through JavaScript on the client side.

PrivatePub.subscribe("/messages/new", function(data, channel) {

$("#chat").append(data.chat_message);

});

The Ruby subscribe_to helper call is still necessary with this approach to grant the user

access to the channel. The JavaScript is just a callback for any custom behaviour.

Page 29: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

28 | P a g e

Configuration

The configuration is set separately for each environment in the

generated config/private_pub.yml file. Here are the options.

server: The URL to use for the Faye server such as http://localhost:9292/faye.

secret_token: A secret hash to secure the server. Can be any string.

signature_expiration: The length of time in seconds before a subscription signature

expires. If this is not set there is no expiration. Note: if Faye is on a separate server

from the Rails app, the system clocks must be in sync for the expiration to work

properly.

How It Works

The subscribe_to helper will output the following script which subscribes the user to a

specific channel and server.

<script type="text/javascript">

PrivatePub.sign({

channel: "/messages/new",

timestamp: 1302306682972,

signature: "dc1c71d3e959ebb6f49aa6af0c86304a0740088d",

server: "http://localhost:9292/faye"

});

</script>

The signature and timestamp checked on the Faye server to ensure users are only able to

access channels you subscribe them to. The signature will automatically expire after the time

specified in the configuration.

The publish_to method will send a post request to the Faye server (using Net::HTTP)

instructing it to send the given data back to the browser.

Page 30: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

29 | P a g e

Serving Faye over HTTPS (with Thin)

To server Faye over HTTPS you could create a thin configuration

file config/private_pub_thin.ymlsimilar to the following:

---

port: 4443

ssl: true

ssl_key_file: /path/to/server.pem

ssl_cert_file: /path/to/certificate_chain.pem

environment: production

rackup: private_pub.ru

The certificate_chain.pem file should contain your signed certificate, followed by

intermediate certificates (if any) and the root certificate of the CA that signed the key.

Next reconfigure the URL in config/private_pub.yml to look

likehttps://your.hostname.com:4443/faye

Finally start up Thin from the project root.

thin -C config/private_pub_thin.yml start

Project Status

Unfortunately I have not had time to actively work on this project recently. If you find a critical

issue where it does not work as documented please ping me on Twitter and I'll take a look.

Development & Feedback

Questions or comments? Please use the issue tracker. Tests can be run

with bundle and rake commands.

Page 31: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

30 | P a g e

Bijlage 4: Mockup volledig scherm

Page 32: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

31 | P a g e

Bijlage 5: Mockup pop-up

Page 33: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

32 | P a g e

Bijlage 6: overleg requirements

Page 34: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

33 | P a g e

Bijlage 7: CV

Curriculum Vitae Dominique Denie

Personalia .................................................................. Naam: Dominique Denie

Adres: Vlasstraat 5

Postcode + woonplaats: 9255 Buggenhout

Mobiel: 0494/45.23.90

E-mail: [email protected]

Geboortedatum: 23/06/1992

Geboorteplaats: Sint-Niklaas

Nationaliteit: Belg

Rijbewijs: B

Burgerlijke staat: Ongehuwd

Objectief: Mijn professioneel doel is door te groeien in mijn ICT kennis en ervaring op te doen bij klanten

als consultant, niet enkel in systeem –en netwerkbeheer, maar ook in software

ontwikkelingsprojecten. Vanuit mijn brede interesse in ICT heb ik netwerken gekozen als

afstudeerrichting en bewust gekozen voor een stage waarin software ontwikkeling centraal

stond. Tijdens de stage heb ik meegewerkt aan het project “Webschool” een online

leeromgeving voor de studenten van CVO Lethas. Tijdens deze stage werkten we volledig

Agile met SCRUM. De applicatie zelf hebben we geschreven in Ruby on Rails. Ik zou graag

werken bij een organisatie waar veel interessante zaken bij te leren zijn en waar ook een

goede teamgeest aanwezig is. Ik vind het leuk om daar actief aan bij te dragen.

Opleidingen 2011-2014 Bachelor Toegepaste Informatica – momenteel 3e

jaar

Afstudeerrichting: Systeem –en netwerkbeheer

HUBrussel

Warmoesberg 26

1000 Brussel

Page 35: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

34 | P a g e

2004-2011 Economie-Wiskunde: 3-6 jaar ASO Sint-

Vincentiuscollege

Kloosterstraat 15

9255 Buggenhout

Werkervaring

Automatiseringskennis Uitgebreide kennis van Microsoft Office pakketten (MS Word, PowerPoint, Excel, Access)

Februari – mei

2014

ICKWare Brussel

Branche: IT consultancy

Functie: Stagiair

Werkzaamheden: Meewerken aan de ontwikkeling van

een online leerplatform: Webschool

Adres Stormstraat 2

Postcode 1000

Juli 2013 BNP Paribasfortis Brussel

Branche: Bank-en verzekering

Functie Jobstudent

Werkzaamheden: Invullen collectieve betalingen

Adres Kreupelenstraat 10

Postcode 1000

Juli 2012 BNP Paribasfortis Brussel

Branche: Bank-en verzekering, afdeling IT

Functie: Jobstudent

Werkzaamheden: Ontwerpen database i.v.m. bij te

houden applicaties ( MS Access +

VBA )

Voltijd/deeltijd: Voltijds

Adres: Kreupelenstraat 10

Postcode: 1000

Page 36: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

35 | P a g e

HTML5 & CSS3

C++ Visual C# PHP VBA Databases: SQL, MySQL, Transact-SQL Javascript Ruby on Rails ( basis ) Cisco networking and routing Servers: Linux en Windows 2008 R2

Talen Nederlands Moedertaal

Engels Grondig

Frans Goed

Duits Goed

Page 37: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

36 | P a g e

Bijlage 8: Presentatie

Page 38: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

IT - PROJECTDominique Denie

Page 39: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

INHOUDSTAFEL

• Over mezelf

• ICKware, Webschool en CVO Lethas

• Het project

• Voorbereiding

• Oplossingen

• Design

• Besluit

• Vragen

Page 40: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

OVER MEZELF

• Laatstejaarsstudent TI aan HUB

• Systemen en netwerken

• Vrije tijd programmeren

Page 41: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

ICKWARE, WEBSCHOOL EN CVO LETHAS BRUSSEL

• ICKware• Buggenhout

• Training, coaching en realisatie software architectuur

• Webschool• Online leerplatform

• Voor CVO Lethas Brussel

• Door ICKware

• CVO Lethas brussel• Volwassenonderwijs

• +/- 8000 cursisten

Page 42: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

HET PROJECT

• Communicatie tool binnen Webschool

• Slimme chatapplicatie

Page 43: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

VOORBEREIDING

• User stories

• Requirements

Page 44: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

VOORBEREIDING: USER STORIES

• Een gebruiker kan een chatgesprek te starten met een andere gebruiker.

• Een gebruiker kan een groepsgesprek starten.

• Een gebruiker andere gebruikers zien die op dat moment online zijn.

• Een gebruiker kan zien met wie hij het laatst een gesprek heeft gehad.

• Een gebruiker kan bestanden doorsturen.

Page 45: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

VOORBEREIDING REQUIREMENTS

• Lijst met mensen die online zijn.

• Ordenen op populariteit.

• Twee verschillende views.

• Droppen van files in de chat.

Page 46: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

OPLOSSINGEN

• Chat: Faye server => Private Pub

• Versturen van files => DropzoneJS

Page 47: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

DESIGN

Page 48: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

DESIGN

Page 49: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

BESLUIT

• Leerrijk

• Veel stappen voor het feitelijke programmeren

Page 50: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

VRAGEN

Page 51: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

Bijlage 9: Taken YouTrack

Page 52: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 1/21

WS-398

TBD usability communication

WS-1043

recent most contacted people list

Priority: Normal Type: Future requirement State: New Assignee: Unassigned Fix versions:

Sprint23 Affected versions: Sprint22 Estimation: ? Spent time: ?

this is a generalization of what we already have for 1-1 chat

Subtask of: WS-36

remove groups from 1-on-1 chat

Priority: 1 Very useful (this sprint) Type: Feature State: New Assignee: Anton Trushkevich

Fix versions: Sprint23 Affected versions: Sprint21, Sprint22, Sprint23, Sprint24, Sprint25, Sprint26,

Sprint27 Estimation: ? Spent time: ?

User reported to have added three people in one-on-one chat (as a test), he could then remove

one, but the other two he can not remove. Those two now remain present even when he logs out

and logs back in.

We need:

functionality to return to the initial 1-to-1 (instead of group)

so this would remove the group from the top of the list

Subtask of: WS-36

Page 53: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 2/21

WS-1056

functional_bug bug

WS-1037

communication functional_bug bug

Remove people not working with the school anymore from

chat contact list.

Priority: Normal Type: Bug State: New Assignee: Anton Trushkevich Fix versions: Sprint23

Affected versions: Sprint22, Sprint23, Sprint24, Sprint25, Sprint26, Sprint27 Estimation: ? Spent

time: ?

People with status "Niet meer in dienst" or "Met pensioen" should not appear in the contact lists

for 1-1 chat (and in no lists for communication - of course they may appear in historical data

relating to past courses).

Subtask of: WS-36

Group chat (extension of 1-on-1) improvements requested

Priority: 1 Very useful (this sprint) Type: Feature State: New Assignee: Anton Trushkevich

Fix versions: Sprint23 Affected versions: Sprint21, Sprint22, Sprint23, Sprint24, Sprint25, Sprint26,

Sprint27 Estimation: ? Spent time: ?

allow the user to add from "recent" contacts list (which would make more sense after a

while)

you need (currently) to select from contacts, and can't even search for the content as then

the green "+"-symbol isn't even availabe !

(done?) see WS-1038 ... add pictures of people (they are lacking and now a "?" is shown)

(removing works till 2) removing a person from a group chat

removing the group altogether if you don't need it anymore

See movie https://docs.google.com/file/d/0BzQae1rYHUCQbEFZNTkzTnhNOTQ/edit?

usp=drivesdk.

This ticket probably needs to be split in several tickets.

Subtask of: WS-36 Relates to: WS-1020 WS-1038

Page 54: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 3/21

WS-486

communication

WS-1045

functional_bug bug

Rich text feedback

Priority: 3 Must have (this sprint) Type: Future requirement State: New Assignee: Marc De

Valckenaere Fix versions: Sprint23 Affected versions: Sprint21, Sprint22, Sprint23, Sprint24,

Sprint25, Sprint26, Sprint27 Estimation: 1d Spent time: ?

Please create implicitly an IB as the feedback is saved. So a feedback object + an IB +

relationship

between both is created in the database.

At the moment the feedback is given as plain text. Please make it so that we can create feedback

in rich text like it’s done with the newsletters.

If it is an IB, then we can also add attachments which should be treated as such when sending out

emails (via messaging) from Webschool.

Subtask of: WS-36 Relates to: WS-1036 WS-1015 WS-354

Starting a new 1-1 chat impossible ?

Priority: Major Type: Bug State: Verified on test & staging Assignee: Oleg Yakutenok Fix

versions: Sprint21 Affected versions: Sprint21, Sprint22, Sprint23, Sprint24, Sprint25, Sprint26,

Sprint27 Estimation: ? Spent time: ?

Starting a new 1-1 chat based on the search of a (in this case) student's first name, and clicking

on the resulting name I need from the list, results in the recent contacts to be selected, but

nothing else. I can't start a chat with that person. It used to work very well, I suspect it's related

to the group chat feature.

https://docs.google.com/file/d/0BzQae1rYHUCQemNJWjZySnNMN1U/edit?usp=drivesdk

Subtask of: WS-36

Page 55: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 4/21

WS-1042

bug data_issues

WS-1038

communication

Chat entries sent are mixed within WS messages sent

items.

Priority: 1 Very useful (this sprint) Type: Bug State: Verified on test & staging Assignee: Oleg

Yakutenok Fix versions: Sprint21 Affected versions: Sprint21 Estimation: ? Spent time: ?

The sent items list in messages in WS should be filtered to not show chat messages.

(in the future we might group on type of message, but that's not a small fix I think)

Untitled.png

Subtask of: WS-36

Join chat: add pictures of people (they are lacking and now

a "?" is shown)

Priority: 1 Very useful (this sprint) Type: Feature State: Verified on test & staging Assignee:

Oleg Yakutenok Fix versions: Sprint21 Affected versions: Sprint21, Sprint22, Sprint23, Sprint24,

Sprint25, Sprint26, Sprint27 Estimation: 30m Spent time: ?

currently in staging the pictures of all chat-people in a group-chat (which were intended to

appear, I guess), are replaced by "?").

maybe this is some small issue ?

if it is not you can postpone it until Anton comes back (or until more important tickets are

solved)

I estimate this task to max 30 min

Subtask of: WS-36 Relates to: WS-1037 WS-1020

Page 56: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 5/21

WS-1020

communication

WS-1030

usability communication

join chat partner(s) to 1-on-1 chat into group chat

Priority: 0 Nice to have (this sprint) Type: Feature State: Verified on test & staging Assignee:

Anton Trushkevich Fix versions: Unscheduled Affected versions: Sprint21, Sprint22 Estimation:

? Spent time: ?

Allow adding/inviting more chat partners in the 1-on-1 chat, like you do in Skype. We could

keep it simple and just allow another person to see and participate in the chat (problem is the

other person will see all chat history). Since group chat already exists in shared containers

context, I guess it should be possible to add this functionality by reusing some of the other one

?

Subtask of: WS-36 Relates to: WS-1038 WS-941 WS-1037

Manage potential abuse of chat (large video files)

Priority: Critical Type: Future requirement State: New Assignee: Unassigned Fix versions:

Unscheduled Affected versions: Sprint21, Sprint22 Estimation: ? Spent time: ?

I have a concern about dnd big videos … on the one hand I prefer not to block users too much,

on the other hand we may want some precaution to avoid big files to be uploaded without no

reason. Some thaughts:

as an admin have a view (and maybe even an automatic warning) for big files (size to be

defined) dropped in WS => option to block a user (with a message) to a size limit

– users get a chance to use the system in a reasonable way, if they don't, they know they will

be reprimanded

as a student being allowed to animated gifs, and small videos (< 2,5 MB ?) - if bigger must

be exchanged an approval should be asked within WS to a responsible (tbd: coordinator of

that department, or teacher if it is within that process, …)

Subtask of: WS-36 Relates to: WS-941

Page 57: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 6/21

WS-941

communication

chat

Priority: Major Type: Feature State: Verified on test & staging Assignee: Anton Trushkevich

Fix versions: Sprint20 Affected versions: Sprint19, Sprint20 Estimation: ? Spent time: ?

approximate UI is on screenshot

(this ticket realizes http://projteam.ickware.be/issue/WS-874, which I (MDV) marked (21 July

2014) as duplicated)

Even though a user might tell us he has no time for a chat, we still can "know" he is (or very

recently was, e.g. 5 min ago) in WS … I think it's useful to see a distinct type of "not available" -

1 (automatic?) that shows the person was no in WS for hours … another that shows the user is

in WS but asked not to be disturbed.

Having the difference between both can be important if you have an urgent message. Typically if

you leave a message very interesting for the person, he'll all of a sudden be available (in most

cases) … but if you know up front the user isn't even there … you are informed you should pick

the phone or find another channel of communication if it's really urgent.

The goal is not to disrespect people's 'privacy' but to improve communication.

This is maybe a little bit in contradiction with the way needs are discribed under WS-874 (and

in fact typical in most chat programs).

Another aspect of chat: I think it would be most valuable to see the picture (even very small) of

the people you want to chat with. Having a catalog of contacts to select from, showing the

picture right away + some details (first name, last name …) seems to be the right way to present

it. In fact this catalog is the current who-is-who (although potentially expanded with students

and external collaborators or partners - not currently in who-is-who) … so filtering on campus,

study area (if applicable - deducible from assigned courses or assigned coaching tasks to a

person), lesson location/moment/intensity would be ideal to quickly find the right people to

send (chat) messages to. As I already showed in the mock-up I sent to Anton, I don't see

messaging as a completely distinct tool from chat, it's rather another channel. If some chat

message can not be delivered, it might be reused as a message (possibly backed up by an e-

mail).

communication_overview.png Requirements+for+the+chat+module.pdf

Page 58: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 7/21

Votes: 1

WS-1025

usability communication

Subtask of: WS-36 Is duplicated by: WS-874

Relates to: WS-1030 WS-1023 WS-994 WS-976 WS-974 WS-973 WS-972 WS-1025 WS-1021 WS-1020 WS-1009WS-1008 WS-1006 WS-1002 WS-1000 WS-992 WS-991 WS-990 WS-987 WS-986 4 more…

Is required for: WS-976 WS-974 WS-973 WS-972 WS-1003 Depends on: WS-982

View new chat input in browser tab via symbol (*)

Priority: 0 Nice to have (this sprint) Type: Feature State: New Assignee: Unassigned Fix

versions: Unscheduled Affected versions: Sprint21, Sprint22 Estimation: ? Spent time: ?

Like in FlowDock (chat tool) it would be nice to have a mark that a new chat entry has been

typed by a chat partner, even if you're on another tab it is easy to see when interesting things

happen in WS.

Subtask of: WS-36 Relates to: WS-941

Page 59: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 8/21

WS-1008

usability communication functional_bug

Firewall breaking chat features

Priority: 1 Very useful (this sprint) Type: Future requirement State: Verified on production

Assignee: Oleg Yakutenok Fix versions: Unscheduled Affected versions: Sprint21, Sprint22

Estimation: ? Spent time: ?

We experienced several broken features for chat because of working on a corporate network

behind a firewall most probably blocking ports we need (faye-service).

A suggested "solution" by MDV was : showing user a little refresh-button to click manually

when such issues would occur.

Detailed implementation / technical advice (from Anton):

In case of firewall issues we won't be able to know that there are any new/updated messages

without implementing polling (sending requests to a server each 3-5 seconds) which is better to

avoid as it will add unnecessary load to the server.

So the suggested solution by MDV would be better than implemening polling, but actually there

is a lot of functionality which will be broken because of firewall - for example new message

counters, online status of users. Maybe it's better to show some notification modal if faye can't

be loaded (and maybe show navbar icons in red + add some title on mouseover) - only for the

first time, when user hides it then set a cookie which will show that the user knows about the

firewall issue.

... also may be we should use lower port numbers ?

Subtask of: WS-36 Relates to: WS-941

Page 60: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 9/21

WS-1006

communication

WS-1009

functional_bug bug

Show when chat partner is typing a message.

Priority: 0 Nice to have (this sprint) Type: Feature State: Verified on test & staging Assignee:

Anton Trushkevich Fix versions: Sprint22 Affected versions: Sprint20, Sprint21, Sprint22

Estimation: ? Spent time: ?

Like in most chat-tools it'd be nice to know if/when a user is typing a message, even before it

has been sent.

Subtask of: WS-36 Relates to: WS-941

Search matches yellow text only in chat name column.

Priority: 1 Very useful (this sprint) Type: Bug State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint21 Affected versions: Sprint21 Estimation: ? Spent time: ?

See movie in FD :

https://www.flowdock.com/rest/files/45175/KxzzPiK3O35YxxOOG85bZA/Search%20matche

s%20in%20yellow%20text%20only%20in%20chat%20name%20column..webm.

Subtask of: WS-36 Relates to: WS-1002 WS-941

Page 61: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 10/21

WS-1002

functional_bug bug

WS-1000

functional_bug bug data_issues

Highlight chat name if mentioned explicitly (Firefox 31 -

Mac).

Priority: 2 Needed (this sprint) Type: Bug State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint21 Affected versions: Sprint20, Sprint21, Sprint22 Estimation: ?

Spent time: ?

FF/31 (on Mac) the yellow background is not appearing when first name of contact is used. It

was tested from Chrome to FF, the other direction worked (typing first name of contact in FF

was shown with yellow background in Chrome).

Fri 8 Aug 2014 : I just tested with IE10 and Chrome 36 and the issue is not occurring in either

browser (both show background correctly).

Subtask of: WS-36 Relates to: WS-941 WS-1009

Online status in chat not always updated.

Priority: 1 Very useful (this sprint) Type: Bug State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint21 Affected versions: Sprint20, Sprint21 Estimation: ? Spent

time: ?

Two users chatting (Marc and Steven) but the status of Marc remains red ... Steven is orange (in

the screen shot) because I waited a little, but even if I typed a text being "Marc", my status was

still red in the window of Steven.

onlinestatus.png

Subtask of: WS-36 Relates to: WS-941

Page 62: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 11/21

WS-985

functional_bug bug

WS-1007

functional_bug bug data_issues

Cannot find bundle which should be created after dropping a

file in the chat drop zone.

Priority: Normal Type: Bug State: Verified on test & staging Assignee: Anton Trushkevich Fix

versions: Sprint21 Affected versions: Sprint20, Sprint21 Estimation: ? Spent time: ?

When I look at the file I dropped (screen shot 1 below), I can't find the bundle (even when I do a

search for it) (screen shot 2

1) https://www.dropbox.com/s/29cm8edfz1yacan/Screenshot%202014-07-

31%2009.23.19.png

2° https://www.dropbox.com/s/exff3l5ufryqu5i/Screenshot%202014-07-31%2009.24.29.png

Subtask of: WS-36 Relates to: WS-941

(IE10 bug) refresh contact list in 1-on-1 chat manual.

Priority: Minor Type: Bug State: Won't fix Assignee: Unassigned Fix versions: Unscheduled

Affected versions: Sprint21, Sprint22 Estimation: ? Spent time: ?

When opening 1-on-1 chat user must click the 'contacts'-button before the list of contacts (and

the recent contacts) is updated.

This problem doesn't occur in IE11, FF30/31, Safari.

Subtask of: WS-36 Relates to: WS-941

Page 63: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 12/21

WS-1003

functional_bug bug data_issues

WS-976

Refresh issue when changing chat entries.

Priority: 2 Needed (this sprint) Type: Bug State: Won't fix Assignee: Anton Trushkevich Fix

versions: Sprint21 Affected versions: Sprint20, Sprint21, Sprint22 Estimation: ? Spent time: ?

https://docs.google.com/file/d/0BzQae1rYHUCQWl84My03djhQWVk/edit?usp=drivesdk

(Issue in Chrome 36)

Anton (9:38 8 Aug 2014):

"actually I refactored a bit message posting/editing in frames of dropping bundles ticket (in

order to avoid code duplication) so the issue may not exist in fact, you'll need to retest it after I

deliver the new code "

Subtask of: WS-36 Depends on: WS-941

include/drop an existing IB in the chat

Priority: Normal Type: Feature State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

(more complex) include/drop an existing IB in the chat (maybe start by having at least a link

to the IB)

> use the preview (if available) of the IB as if you dropped a picture (same feature, but if you

click you enter the bundle - I'm just afraid user will lose chat-context)

postbundle.png

Subtask of: WS-36 Relates to: WS-941

Depends on: WS-941

Page 64: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 13/21

WS-974

WS-992

resolve a link to a picture

Priority: Normal Type: Feature State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

like FD does

+ show a picture if you drop a picture file

we might have a small toolbar appearing on the picture to :

1) reduce it (only feature in case of normal picture)

2) open the associated bundle - or view it in the list (then user knows exactly what he's doing)

Subtask of: WS-36 Relates to: WS-941

Depends on: WS-941

Define scope of contact list for chat 1-1

Priority: 1 Very useful (this sprint) Type: Feature State: Verified on test & staging Assignee:

Anton Trushkevich Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time:

?

(see screen shots to give the context of this ticket)

1) filter away users defined in WS as deactived (incl. invalid login in WS ("tobecorrected..."))

for all lists described below

2) broaden the list of contacts to chat with using the study area & location - based on currently

logged-in user (CU):

student :

select all students linked to the same study area(s) as the CU (see (*) for how to define this)

select all employees from the same lesson location(s) as the CU (see (**) for how to define

this)

employee ('personeel'-role): (later also partners !)

=> show all employees

if only teacher role => show all students linked to his {study area(s) + levels} from his courses

of the current+past year

if no levels involved (e.g. SLO, Computer Science, ...) then take full study area

if also another role => show all students

(for now ok since most students are not active in WS anyway, in the future better group per

Page 65: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 14/21

communication

organizational unit / lesson location (+moment) / study area / level ...)

(*) pick the study area (set) of his complete history in the school

only completely new students should wait until they are registered in WS (sounds acceptable,

no ?)

(**) 'same lesson location' only applies to teachers of course, so all other employees will be

invisible. This is not always what we want: chat with secretary, chat with student coach ... on the

other hand director and even administration doesn't want to be disturbed in many (most?)

situations. Until we have the processes straight or circumstances under which students can chat

with other employees but (their) teachers, we'll hide those other employees (for students).

We'll NOT implement an "escape mechanism" to support exceptions to the predefined contact

list scope rules (we'll wait for what is described below under NOTE):

IMPORTANT NOTE :

The above nicely illustrates the need for the matching of a "user context" with a "current

process-activity (=softw.feature, e.g. chat) context".

Today you'll have to implement quite some logic just for the chat-feature.

But any contact list in WS will require the same logic:

– any communication-features (1-1 chat, group-chat (linked to class, coaching,

administration-process), messages (idem), forum (idem), ...)

– any content-sharing features (view/edit content posted by another user, share your content

with another user, post news, post feedback about interaction with students/colleagues)

– etc

The reason for the above is that it is the interaction between actors which defines the scope you

need.

This interaction is defined in business processes . As long as processes are not defined and used

within code to dynamically determine what SCOPE a user needs for selecting contacts to

interact with (in that process), we'll have to settle for a common denominator (or some escape

mechanism).

Screenshot 2014-08-04 09.37.06.png Screenshot 2014-08-04 09.43.25.png

Subtask of: WS-36 Relates to: WS-941

Page 66: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 15/21

WS-986

WS-991

WS-987

1-to-1 chat - capability to choose whether to include

students to contacts list or not

Priority: Normal Type: Task State: Verified on test & staging Assignee: Anton Trushkevich Fix

versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

If user has activated checkbox for students, then that choice would remain active until user

deactivates it (even after quiting WS and re-entering).

Also when both students and employees are activated (and later 'partners', …), it still makes

sense to see if a contact is an employee or not somehow (little mark (icon?), different font

color, or separate groups, or …).

Subtask of: WS-36 Relates to: WS-941

p2p chat - yellow-highlighted personal messages

Priority: Normal Type: Task State: Verified on test & staging Assignee: Anton Trushkevich Fix

versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

No description

Subtask of: WS-36 Relates to: WS-941

p2p chat search improvement

Priority: Normal Type: Task State: Verified on test & staging Assignee: Anton Trushkevich Fix

versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

- searching a (new) contact, see my movie "1-1 chat search (new) contact.webm" for a suggested

improvement (also note I have to click 2x for selecting the new contact, 1st time doesn't work)

Subtask of: WS-36 Relates to: WS-941

Page 67: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 16/21

WS-990

WS-984

communication functional_bug bug

p2p chat - message box is not resizing for multiline text

Priority: Normal Type: Bug State: Verified on test & staging Assignee: Anton Trushkevich Fix

versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

No description

Subtask of: WS-36 Relates to: WS-941

(Chrome issue)(IE11 less) part of chat entries (bottom) not

accessible

Priority: 1 Very useful (this sprint) Type: Bug State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

I tested it in Safari, Firefox 30, IE11 (at first I had to refresh to get my own message, but after

resizing different sizes, it always worked, so I'm not sure, maybe a small issue in IE11?).

This issue only seems to occur in Chrome ... although also (to a lesser extend) in IE11 - no

matter if my window is maximized or not. It seems that the scroll bar doesn't allow me to reach

the last entry (which is hidden, because if I press "up"-arrow, I can edit it (still invisible in the

main window).

In Chrome (36.0) in my case (see the movie in FlowDock) it seemed like a more pronounced

issue of the view which was not OK, at the bottom of the chat (just above the chat input window)

I have the impression that chat entries were compressed so you can't see them, even if you try

to scroll, sometimes you can get at them by clicking a little bit in the bottom.

Subtask of: WS-36 Relates to: WS-941

Page 68: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 17/21

WS-983

communication

Technical doc on commgate server / usage of that server.

Priority: 2 Needed (this sprint) Type: Task State: Verified on test & staging Assignee: Oleg

Yakutenok Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

create please a small documentation (1 or max 2 pages) showing :

- a diagram which includes the 3 servers (staging, production, commgate)

> indicate their name + IP-addresses

> indicating relationships (drawing lines showing the exchange of information)

> showing (at least) the names of the components/code files involved

> ideally showing the objects/method calls

- document the conditions that are expected from WS calls :

> in what state must the commgate server be ?

> which services must be active/running (firewall, ...) - what extra components did you

install/configure on top of the server Dries gave you

GOAL:

1) Imagine the server has to be rebuilt : I make a snapshot of the server and we start from the

point where Dries left of ... the document should give me the needed information.

2) Imagine we want to extend the chat service - how do I exploit the commgate, what do I need

to know as a developer ? Try to imagine a poor developer in 1 year and both you and Anton are

on a long vacation ...

The idea is to add this to a full technical/architectural documentation (later) to have a complete

view on all components interacting

(among other things: we'll have monitoring - probably via a software like nagios - we'll need to

forget no servers;

if we need to track down a problem we need to know which components interact;

for maintenance reasons we need to know which code calls)

Screen Shot 2014-07-31 at 17.51.53.png

Subtask of: WS-36 Relates to: WS-982

Page 69: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 18/21

WS-981

communication

WS-972

communication

Communication server configuration firewall

Priority: 3 Must have (this sprint) Type: Task State: Verified on test & staging Assignee: Oleg

Yakutenok Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

configure firewall of commgate (server allowing to manage chat-communication without

interference of Proxy-server which is linked to the WS-production server)

hostname: commgate.lethas.be

IP: 94.103.155.107

SSH port: 2005

user: commgate

(pwd see FD)

Subtask of: WS-36 Relates to: WS-982

1-to-1 chat

Priority: Normal Type: Feature State: Verified on test & staging Assignee: Anton

Trushkevich Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

No description

Subtask of: WS-36 Relates to: WS-941

Depends on: WS-941

Page 70: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 19/21

WS-982

WS-874

Adapt current chat communication to use 'commgate'-

server.

Priority: 3 Must have (this sprint) Type: Feature State: Verified on test & staging Assignee:

Oleg Yakutenok Fix versions: Sprint20 Affected versions: Sprint20 Estimation: ? Spent time: ?

Make sure the communication of chat messages is sent over the commgate-server in order to

avoid loss of messages and/or delay in delivery of messages.

Subtask of: WS-36 Relates to: WS-981 WS-983

Is required for: WS-941

Chat module

Priority: Major Type: Future requirement State: Duplicate Assignee: Unassigned Fix versions:

Sprint18 Affected versions: Unknown Estimation: ? Spent time: ?

Please find in attachment a list of requirements for the Chat module.

Requirements for the chat module.doc

Subtask of: WS-36 Duplicates: WS-941

Page 71: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 20/21

WS-927

communication

WS-650

Recover chat from Manu

Priority: 1 Very useful (this sprint) Type: Feature State: Verified on test & staging Assignee:

Anton Trushkevich Fix versions: Sprint18 Affected versions: Sprint18 Estimation: ? Spent time:

?

gw.ickware.be:4300

user: emmanuel-verbraecken

pwd: 123456

Using these RDP credentials it is possible to solve the issue with check-in (see screen shot

attached). You can run his version of WS including chat to see what it looks like and normally it

worked well (so he told me, I didn't see it for myself). Hopefully this can easily be included and

then in the coming weeks we can improve it.

chat_checkin_errors.jpg chat webschool.docx

Subtask of: WS-36

css chats

Priority: 3 Must have (this sprint) Type: Task State: Closed Assignee: Dominique Denie Fix

versions: Sprint14 Affected versions: Sprint14, Sprint15 Estimation: ? Spent time: ?

make a pretty chat window and make sure the correct css is loaded for each user

chat1.JPG chat2.JPG chat3.JPG chat4.JPG

Subtask of: WS-36

Page 72: IT project - TypepadEen voorbeeld hiervan is: bijvoorbeeld een bepaalde les wordt door twee docenten gegeven en een van deze docenten is bezig met het voorbereiden van de lessen. Dan

4-9-2014 Subtask of: WS-36 chat | YouTrack

http://projteam.ickware.be/printIssues?q=Subtask+of%3A+WS-36+chat 21/21

WS-629 make summary of requirements needed for chat

Priority: Normal Type: Future requirement State: New Assignee: Unassigned Fix versions:

Unscheduled Affected versions: Unknown Estimation: ? Spent time: ?

list of people checking if they are online by criteria:

if active in last 20 minutes –> green dot

if inactive between 20 and 40 minutes –> orange dot

if inactive for 40 minutes –> red dot

order people by 'populatity'

people who you talk often to are above in the list

2 views ( screenshots ) :

one with popup at the bottom of the screen

one that fills the screen

ability drop files in the chat

2014-04-29 15.42.50.jpg 2014-04-29 15.42.52.jpg 2014-04-29 15.42.37.jpg chat webschool.docx

Subtask of: WS-36