Research and Development 1/^Archief/2009-2010/06/Pilot/Verslag

Pilot Verslag

Inleiding

Voor onze studie moeten we erg vaak samenwerken aan opdrachten, meestal zijn dit programmeer opdrachten. Er staan dan een aantal uren ingeroosterd waarbij je aan de opdracht kan werken, maar als je bent verhinderd of als je de opdracht niet op tijd af hebt, dan moet je een andere keer afspreken. Als eerstejaars student woon je niet altijd in de buurt van Nijmegen, dus zul je een keertje extra moeten reizen naar de universiteit of je zal het digitaal moeten regelen, via msn of Skype. Dit laatste brengt een aantal minpunten naar voren:

• Je ziet niet wat de ander aan het maken is.
• Je kan in een andere programmeeromgeving bezig zijn (bijvoorbeeld: Netbeans of Eclipse) waardoor het moeite kost om de code die iemand gemaakt heeft te compilen in je eigen programmeeromgeving.
• Je moet de code die je hebt geschreven tijdens het practicum niet vergeten op te sturen naar jezelf.
• Overleg gaat langzaam, omdat je niet weet wat de ander heeft geschreven (getypt).
• Als je op een andere computer zit, zul je de programmeeromgeving moeten installeren.

De oplossing is een systeem ontwerpen dat je overal kan gebruiken, zonder het te installeren en waar je tegelijkertijd aan kan werken. De meest voor de hand liggende oplossing is om een web applicatie te maken. Dit systeem zou alle minpunten wegnemen:

• Je ziet meteen wat de ander programmeert.
• Je zit allebei in dezelfde editor te werken, dus heb je geen problemen meer met het gebruik van verschillende programmeeromgevingen.
• Je hoeft niets meer naar jezelf te mailen, het wordt online opgeslagen.
• Je kunt gemakkelijk overleggen, aangezien je gelijk ziet wat de ander aan het typen is.
• Het maakt niet uit op welke computer je zit, je kunt gewoon naar de site gaan en inloggen.

Nu we een idee hebben gekregen van wat we willen gaan maken, kunnen we er onderzoeksvragen bij gaan bedenken.

Vorig onderwerp

Toen we zaten te brainstormen, wilden we iets gaan doen met het herkennen van een getekend plaatje. De meest logische toepassing was een zoekmachine maken die afbeeldingen zoekt die lijken op het getekende plaatje, ofwel online via google, ofwel via een zelfgemaakte database. Nadat we een beetje onderzoek hadden gedaan, bleek dat er al meerdere sites bestonden waar je kon zoeken op basis van een getekend plaatje. We moesten dus op zoek gaan naar iets nieuws. Na een zoektocht die ongeveer 2 weken heeft geduurd, hebben we dOPE bedacht.

Uitgebreide onderzoeksvragen/punten

• Welke onderdelen heeft ons dOPE systeem minimaal nodig?
  • Er moet een Editor zijn (met de meest gebruikte taal, standaard erin zetten)
  • Je moet berichten kunnen achterlaten (reacties geven)
  • Je moet documentatie kunnen schrijven
  • Je moet een ontwerp/project kunnen starten (wiki-achtig en/of UML)
  • Er moet een compiler zijn
• Welke uitbreidingen zijn mogelijk? (plugins)
  • Documentatie verbergen, zichtbaar als je met muis erop staat
  • Autocompletion (zit waarschijnlijk standaard in de editor)
  • Colour highlighting (zit waarschijnlijk ook standaard in de editor)
  • Tab/Spatie inspringen
  • Meerdere verschillende programmeertalen supporten of zorgen dat mensen zelf hun taal kunnen maken als plugin
• Aandachtspunten:
  • Planning maken / aan planning houden
  • Werk goed verspreiden
  • Wetenschappelijk verantwoorde onderbouwde conclusies.
• Project guidelines:
  • Alles in het engels
  • We gaan het meest gebruik maken van php en javascript
  • Code moet modulair worden opgebouwd.

Onderzoek

Editor

Het onderzoek is gestart met het kijken of er al geschikte (kant-en-klare) editors te vinden zijn die aan onze eisen voldoen.

Voor een geschikte editor kunnen we het volgende doen:

• Een bestaande (opensource) editor aanpassen aan onze behoeftes/
• Delen gebruiken van een bestaande (opensource) editor(s) en samenvoegen / aanpassen aan onze behoeftes.
• Zelf een editor schrijven en bestaande algoritmen gebruiken.
• Alles zelf schrijven.

De voorkeur ligt van boven naar beneden. Dus we proberen in deze volgorde een zo'n goed mogelijke oplossing te vinden.

Voor de editor moest alleen eerst een keuze gemaakt worden. In welke taal word de editor geschreven? Wij kwamen op de volgende (combinaties):

• PHP / HTML(4 / 5) / Javascript (Ajax)
• PHP / Java (Applet)
• PHP / Flash

Deze lijst is gebaseerd op voorkeuren, mogelijkheden en kennis over deze talen.
Er zijn nog veel meer mogelijkheden (zoals JSP, Asp.NET, etc.).

Programmeer taal onderzoek

Eerst onderzoeken we welke taal (combinatie) het beste is om te gebruiken voor onze webapplicatie.

Om duidelijk te krijgen welke taal welke voor- en nadelen heeft maken we een overzicht:

	Javascript+HTML4	Javascript+HTML5	Java	Flash (Actionscript)
Platform onafhankelijk	ja	ja	ja	ja
Traag	nee	nee	ja / nee	ja
Runtime script	ja	ja	nee	nee

Keuze

De keuzen voor de programmeertaal is Javascript. Dit om de volgende redenen:

• Javascript werkt in iedere browser (geen noodzaak tot installeren van plug-ins).
• Javascript is relatief snel (Java is sneller, maar het laden van een Java Applet duurt lang omdat bestanden groot zijn en initialiseren van Java duurt lang).
• In Javascript is het makkelijkst te ontwikkelen (geen compiler nodig, goede support door editors).
• Geeft goede mogelijkheid tot HTML lay-out features.
• de laad tijd
• de responsie tussen de gebruiker en de applicatie

Lijst van editor(s)(onderdelen)

• Java:
  • jEdit
  • jpEdit
• Javascript:
  • jsvi
  • SyntaxHighlighter
  • JSHighlighter
• Flash:
  • Flash Text Formatter

Keuze voor editor(onderdelen)

Het domein voor de keuze(n) voor de editor(onderdelen) is verkleint doordat er een keuzen is gemaakt voor de programmeertaal. De keuzen er is gevallen op een editor die zelf geschreven wordt maar die uit bestaande delen van andere libraries en/of editors bestaat. Op deze manier is de best mogelijke editor mogelijk die gebruikt maakt van features en het mogelijk maakt om met meerdere mensen te gelijk aan een bestand te werken.

Documentatie

Voor de documentatie kunnen we het volgende doen:

• Een bestaande (opensource) collaborative software applicatie gebruiken en aanpassen aan onze behoeftes.
• Delen gebruiken van bestaande (opensource) applicaties en samenvoegen / aanpassen aan onze bohoeftes.
• Zelf een applicatie schrijven en bestaande algoritmen gebruiken.
• Alles zelf schrijven.
• Een wiki applicatie gebruiken

De voorkeur ligt net als bij de editor van boven naar beneden. Dus we proberen in deze volgorde een zo’n goed mogelijke oplossing te vinden.

De keuzen van de taal waarin de applicatie geschreven is, is gelijk aan die van de editor keuze:

• PHP / HTML(4 / 5) / Javascript (Ajax)
• PHP / Java (Applet)
• PHP / Flash

Lijst van applicatie(s) (onderdelen)

• Javascript:
  • Etherpad
  • Synchro Edit
  • Media Wiki

Hoe zijn huidige systemen opgebouwd

Om te kijken hoe ons systeem eruit komt te zien en wat we moeten implementeren, kijken we naar andere systemen. Op die manier kunnen we het beste van meerdere systemen combineren in onze dOPE. Een aantal voorbeelden van IDE's zijn Bespin, Jedit and JPedit. We letten hierbij op gebruiksvriendelijk, eenvoudigheid, intuitief gebruik en duidelijkheid. Aangezien wijzelf de doelgroep zijn, zullen we elk plaatje zelf beoordelen op deze criteria. Wij maken dit systeem, zodat studenten samen aan een programmeer opdracht kunnen werken. We zijn er dan ook van overtuigd dat onze mening overeenkomt met de gemiddelde informatica student.

Het eerst wat opvalt is de eenvoud. Het ziet er overzichtelijk uit en er zijn weinig extra knoppen. De knoppen die er zijn, geven duidelijk aan waar ze voor bedoeld zijn. Er zijn regelnummers aangegeven en je kunt de geschiedenis bekijken. Er is gebruik gemaakt van kleuren, wat bevorderlijk is voor het lezen van de code. Een nadeel is dat er geen overzicht is van meerdere projecten.

Het eerste wat opvalt, is eigenlijk de chaos. Het is niet echt duidelijk wat waarbij hoort. Er is erg veel gebruik gemaakt van veel tabbladen en extra vensters in vensters. Nadat je het geheel beter hebt bekeken, geven de knoppen duidelijk aan waar ze voor dienen. Er is een overzicht van je projecten en wat er in elk project zit. De tabbladen zijn erg handig en houden het overzicht. Hier is echter gebruik gemaakt van zowel horizontale als verticale tabbladen. Het lijkt ons handiger als dit of allemaal horizontale, of allemaal verticale tabbladen zijn, om de regelmaat en het overzicht te behouden. Er is gebruik gemaakt van kleuren om gemakkelijker de code te kunnen lezen. Ook zijn er regelnummers aangegeven.

Het eerste wat opvalt, is het overzicht dat er gemaakt is. Er zijn vier verschillende onderdelen die elk een doel hebben. De knoppen zijn duidelijk en overzichtelijk. Er is gebruik gemaakt van kleuren om het lezen van de code makkelijker te maken. Er zijn geen regelnummers aangegeven. Het lijkt ons handig om zelf te bepalen waar je welk onderdeel kan neerzetten en dat je elk onderdeel kan verbergen of vergroten.

Ontwerp van dOPE

In de vergaderingen zijn deze punten allemaal behandeld, die kan je hier vinden.

De basis

We hebben besloten om dOPE op te bouwen uit verschillende modules.

• Projectmanager

  De projectmanager beheerst de verschillende projecten waar jij op dit moment mee bezig bent. Je hebt een overzicht van alle projecten waar jij op dit moment voor bent aangemeld. Je kunt nieuwe projecten aanmaken en andere projecten toevoegen aan een huidig project.

  Als een project wordt toegevoegd aan je huidige project, dan zal dit een hard copy worden van de source code. Wel wordt er mogelijk tot slim sync aangeboden die het mogelijk maakt om deze harde copy up-to-date te houden.

• Editor

  In de editor kun je programmeren. Je schrijft hierin je programma. We willen dat dit zo gebruiksvriendelijk mogelijk gebeurd, dus willen we zorgen voor syntax highlighting, overzichtelijkheid (door middel van tabbladen), autocompletion en collaborative real time editten.

• Rechten

  Om ons dOPE systeem goed te laten werken, moet je bepaalde rechten kunnen verlenen aan andere gebruikers. Je kan op elk gewenst moment bepalen of je project een open source of een closed source project is. Een open source project is voor iedereen te zien en je kan jezelf uitnodigen om mee te helpen aan een open source project. Als je gaat werken aan een closed source project, moet jij andere gebruikers kunnen uitnodigen die mogen meewerken aan de code.

• Settings per project

  Per project moet je bepaalde instellingen kunnen aanpassen. Je moet kunnen selecteren in welke taal je wilt programmeren, maar bijvoorbeeld ook welke compiler en layour je wilt hebben.

• Documentatie

  In de documentatie kun je bijvoorbeeld de programmeeropdracht opslaan, zodat je deze altijd makkelijk bij de hand hebt. Maar je moet er ook kunnen omschrijven wat je project inhoudt en eventueel in UML een project kunnen opbouwen.

Details

Als je bent ingelogd in dOPE dan zie je de applicatie standaard in de editor mode. Bij editor mode zie je de editor met modules er om heen.

Modules zijn een soort van kleine vensters, ook wel views' genaamd. Deze kan je verplaats, scalen en indelen zoals jij dat wilt (op de pagina). Deze instellingen worden bewaard voor de gebruiker waar mee je bent ingelogd. De editor zelf is ook een module, maar dan in modus full screen.

Een module wordt in het systeem als een class gezien (in PHP) die de volgende methoden heeft:

• generateHTML

  Hier bij word de initiële HTML code gegeneerd. Mocht de module extra Javascript nodig hebben, dan word deze met deze HTML code mee geleverd / opgestart.

• receive

  Deze methoden word aangeroepen d.m.v. een Ajax aanroep. Hierbij verstuurd een module via Javascript gegevens naar een module (kan dezelfde zijn). Deze formalisering voor deze protocol is JSON.

• send

  Deze methoden word aangeroepen d.m.v. een Ajax aanroep. Hierbij ontvangt een module via Javascript gegevens van een module (kan dezelfde zijn). Deze formalisering voor deze protocol is JSON.

Om deze modules over de pagina te kunnen verplaatsen, ze te kunnen scalen, etc. moet een Javascript library geschreven / gebruikt worden.

Voorbeeld login page