Navigatie

Facilitair communicatietool Webapplicaties

Booking.com behoeft als organisatie tegenwoordig geen toelichting meer. Het betreft een gevestigde naam in hun niche. Zover is het voor ons niet, desondanks mochten we een door hen gebruikte verouderde webapplicatie herschrijven.

Deze grondig gereviseerde versie van onze hand, wordt door Booking.com vestigingen in Nederland dagelijks gebruikt om het facilitaire reilen en zeilen binnen hun organisatie af te handelen.

Vormgeving:
Bootstrap
Talen:
html, css, javascript, php, ajax
Oplevering:
Zomer 2017
Facilitair communicatietool

Naast een responsive update, diende vooral de onderliggende techniek aangepakt te worden. Ook de database opzet was niet volledig genormaliseerd opgezet, waardoor we gedwongen werden om de oude programmatuur te laten varen en op een nieuwe basis voort te borduren.

Dit hebben we voor maximale flexibiliteit en tegelijkertijd optimale performance, gedaan op basis van ons eigen CRM systeem. Hierin zit de basis van een uitgebreide autorisatie-structuur, benodigd voor de vele type gebruikers en daarmee gebruikersgroepen die gebruik dienen te maken van de webapplicatie.

Data(base) migratie

Het reeds opgebouwd archief van berichten, afspraken, bestellingen, producten en uiteraard medewerkers, moesten overgeheveld worden van de oude, ongenormaliseerde nederlandstalige databaseopzet, naar onze engelstalige meer genormaliseerde database opzet. Blijven hangen in de oude omgeving, was ook hier geen optie, en dus moest er een conversie van deze data plaats vinden. Na veel test-rondes is dit soepel en vlekkeloos verlopen. Ook eventuele bestanden, bijgevoegd bij berichtwisselingen, zijn feilloos overgekomen.

Applicatie responsiveness

Middels Bootstrap, aangevuld met eigen styling, is de webapplicatie tevens op een smartphone uitstekend te bedienen. De selectie-mogelijkheden en informatie-blokken herpositioneren zich dusdanig, dat men enkel horizontaal hoeft te blijven scrollen.

Overzicht schermen

Een kleine uitdaging, was sorteren van data. Normaliter, op groot scherm, kan dit effect bereikt worden door op kolomkoppen van het overzicht te klikken. Zo kan bijvoorbeeld gesorteerd worden op datum, laatste reactietijd, aantal reacties, status, type, onderwerp en afzender. Hiervoor is de jquery datatables plugin gebruikt, al tijden een vast onderdeel van ons arsenaal.

Echter, op een smartphone, is er geen ruimte voor deze kolomkoppen. Middels een door ons geschreven javascript uitbreiding bovenop deze plugin, worden de kolomkoppen vertaald naar een dropdownlijst, waarmee mobiele gebruikers alsnog in staat zijn op alle data-entiteiten te sorteren, ook al zijn deze kolommen op zichzelf niet zichtbaar.

Berichtenscherm

Het toevoegen van een ontvangers gebeurt in een laag over de applicatie, omdat dit een actie binnen een actie is. Op de achtergrond blijft het berichtenscherm intact. Voor het invoeren van een bericht, kan men gebruik maken van een beknopte maar praktische editor, waar enige opmaak toegestaan is.

De keuze voor de type berichtenveld (met of zonder opmaak mogelijkheden), kan door per accounthouder uitgesproken worden. In het profiel is aan te geven of men uberhaupt gebruik wilt maken van een editor. Om een stortvloed aan opties te voorkomen, verschijnen de opmaak-knoppen overigens pas wanneer men de focus legt in het berichtenveld. Gekopieerde teksten worden bij eventueel knip & plak werk, automatisch opgeschoond voor security maar vooral ook consequente opmaak-doeleinden.

Bericht geheugen

Via HTML5's localStorage, worden eventueel getypte berichten bovendien onthouden. Ben je bezig met typen en klik je per ongeluk op een link, klik je het scherm weg of valt de computer uit? Dan zal de reeds getypte tekst automatisch hersteld worden wanneer je terugkeert naar hetzelfde bericht. Dit stukje geheugen, wordt automatisch gewist wanneer je het bericht daadwerkelijk verstuurt.

Bericht bijlages

Geuploade bijlages worden direct onder het bericht opgesomd. Documenten worden in een fancybox laag geopend over de webpagina. Op deze manier blijft men feitelijk binnen de berichten pagina, maar krijgt men toch maximale informatie voorgeschoteld, behorende bij het aangeklikte document.

Organisaties

Verschillende organisaties als ook suborganisaties (vestigingen) kunnen met elkaar communiceren. Vooral tussen organisaties, kan een hoofdorganisatie eigen urgenties, statussen en type berichten inrichten.

Ook is het in een berichtenscherm mogelijk om alle ontvangers van een specifieke organisatie, via een enkele knop aan te melden voor eventuele notificaties van nieuwe reacties. Bovendien kunnen privé berichten verstuurd worden, om eigen teamleden te voorzien van aanvullende informatie, die niet bedoeld is voor andere partijen.