Leestijd 7 min

Jan Eerdekens

In deze technische blogpost wil ik het hebben over hoe je eenvoudige en flexibele ETL-gebaseerde anonimisering kunt opzetten. Waarom? Wel, ik had onlangs de gelegenheid om een klein proof of concept uit te voeren voor een klant. De klant wilde weten welke opties beschikbaar waren om interne gegevens te nemen, alle persoonlijk identificeerbare informatie (PII) te verwijderen of anonimiseren en deze op een eenvoudige manier en vorm beschikbaar te maken voor externe partijen. Na het verzamelen van verdere vereisten werd de context voor dit proof of concept als volgt gedefinieerd: Welke oplossing dan ook, het moet in staat zijn om gegevens te extraheren uit een on premise Oracle database . Het eindresultaat moet een set CSV-bestanden zijn in een Amazon S3-bucket . Tussen het ophalen van de Oracle-gegevens en het dumpen ervan in CSV-vorm op S3, moet er iets zijn dat PII-gegevens verwijdert/anonimiseert. Indien mogelijk moet de gekozen oplossing cloud native zijn. In deze 3-delige blogreeks leg ik uit hoe je eenvoudige en flexibele ETL-gebaseerde anonimisering opzet: Het onderzoek naar producten die gebruikt zouden kunnen worden om het probleem op te lossen. Controleer ook hoe geschikt ze zijn voor wat de proof of concept moet bereiken. Hoe het gekozen product gebruikt kan worden om een ETL pipeline te maken die aan de eisen voldoet. Daarnaast, hoe je een lokale Oracle database opzet in Docker die gebruikt kan worden als databron voor het data ingestion deel van het proof of concept (gewoon omdat dit zo'n PITA was om te doen). En of dit op een cloud native manier kan worden gedaan. Onderzoek Het onderzoeksdeel van het proof of concept bestaat uit 2 delen: Hoe haal je data uit een Oracle database, anonimiseer je het op de een of andere manier en sla je het op als een stel CSV bestanden in een S3 bucket aka het ETL gedeelte. Uitzoeken wat de beste manier is om de anonimisering uit te voeren. De gegevens extraheren, transformeren en opslaan Het probleem van de klant klonk meteen al opmerkelijk als iets dat je zou kunnen oplossen met een ETL-product: Extract Transform Load . Het onderzoeksgedeelte voor dit deel van het proof of concept zou zich dus concentreren op dit type product. Ik kreeg ook wat input van iemand in mijn team om eens te kijken naar singer.io , omdat dat iets was dat ze in het verleden met succes hadden gebruikt voor dit soort problemen. Als je naar de homepage van Singer kijkt, vallen een aantal dingen meteen op: Singer maakt gegevensextractie en -consolidatie mogelijk voor alle tools van je organisatie. De open-source standaard voor het schrijven van scripts die gegevens verplaatsen. Unix-geïnspireerd: Singer taps en targets zijn eenvoudige applicaties samengesteld met pipes. JSON-gebaseerd: Singer-toepassingen communiceren met JSON, waardoor ze eenvoudig te gebruiken en te implementeren zijn in elke programmeertaal. Singer is dus gewoon een specificatie, zij het geen officiële. Het is een eenvoudig, op JSON gebaseerd dataformaat en je kunt iets in dit formaat produceren (een tap in Singer terminologie) of het formaat consumeren (een target ). Je kunt deze taps en targets aan elkaar koppelen om gegevens van de ene locatie te halen en op een andere locatie op te slaan. Singer wordt standaard geleverd met een heleboel taps (meer dan 100) en targets (10). Deze taps en targets zijn geschreven in Python. Omdat het centrale punt van het systeem slechts een gegevensformaat is, is het vrij eenvoudig om er zelf een te schrijven of een bestaand formaat aan te passen. Bij het controleren van de taps zou de standaard Oracle-tap het Extract-gedeelte van ons proof of concept moeten dekken. Hetzelfde lijkt echter niet het geval te zijn voor het Load gedeelte als we kijken naar de standaard targets. Er is een CSV target , maar deze slaat de resultaten lokaal op, niet in een S3 bucket. Er is een optie om gewoon dit doel te gebruiken en de S3 upload zelf te doen nadat de ETL pijplijn is voltooid. Een andere optie zou zijn om het bestaande CSV target aan te passen en de bestandsopslag te veranderen naar S3. Even Googelen levert een door de gemeenschap gemaakt S3 CSV Singer doel op. Volgens de documentatie zou dit target precies moeten doen wat we willen. Oeps, Singer transformeert niet Met de Extract en Load delen gedekt, blijft alleen het Transform deel van de ETL pijplijn over om uit te zoeken... en dit is waar het een beetje vreemd wordt. Ook al is Singer geclassificeerd als een ETL tool, het lijkt geen ondersteuning te hebben voor het transformatie gedeelte? Toen ik hier verder naar keek, kwam ik deze onheilspellend getitelde post tegen: Why our ETL tool does not do transformations . Als ik dit lees, lijkt het erop dat ze hun JSON specificatie/gegevensformaat beschouwen als het transformatiegedeelte. Dus ze ondersteunen transformatie naar ruwe gegevens en het opslaan ervan, maar ondersteunen geen andere soorten transformaties. Dat deel mag je zelf doen nadat het ergens is opgeslagen door een Singer-doel. Het blijkt dus dat Singer meer lijkt op het EL deel van een ELT product dan op een "old school" ETL product . Op dit punt zou Singer in ieder geval voldoende moeten zijn om de gegevens uit een Oracle database te halen en in CSV-formaat in een S3 bucket te zetten. En omdat Singer vrij eenvoudig, open en uitbreidbaar is, laat ik het hier voorlopig bij. Laten we verder kijken naar de anonimiseringsopties die in deze Singer-context zouden kunnen passen. Gegevens anonimiseren Net als bij het ETL-gedeelte, kreeg ik ook voor dit gedeelte wat input die me wees op Microsoft Presidio . Op de homepage kunnen we het volgende lezen: Het biedt snelle identificatie- en anonimiseringsmodules voor privé-entiteiten in tekst en afbeeldingen , zoals creditcardnummers, namen en meer. Het faciliteert zowel volledig geautomatiseerde als semi-geautomatiseerde PII de-identificatiestromen op meerdere platforms. Aanpasbaarheid in PII-identificatie en -anonimisering. Er staan dus veel veelbelovende dingen in die me zouden kunnen helpen bij het oplossen van mijn anonimiseringsbehoeften. Bij nader onderzoek lijkt het erop dat ik dit product evalueer tijdens een grote transformatie (snap je? 😉 ) van V1 naar V2. V1 bevatte wat ETL-achtige dingen zoals het ophalen van gegevens uit bronnen (hoewel Oracle-ondersteuning in de roadmap nooit lijkt te zijn gerealiseerd ) en het opslaan van geanonimiseerde resultaten in een aantal vormen/locaties. V2 heeft deze aanpak echter volledig losgelaten en concentreert zich puur op het detecteren en vervangen van PII-gegevens. In de kern is Presidio V2 een op Python gebaseerd systeem dat bovenop een AI-model is gebouwd. Dit stelt het in staat om automatisch PII-gegevens te ontdekken in tekst en afbeeldingen en deze te vervangen volgens de regels die je definieert. Ik heb wat tests gedaan met behulp van hun online testtool en het werkt min of meer, maar voor onze specifieke context moet het zeker worden aangepast. Als we kijken naar de meegeleverde testgegevens, lijkt het erop dat het vooral eenvoudige en korte gegevens zijn, maar geen grote tekstblokken of afbeeldingen. Dit roept de vraag op: zelfs als we Presidio kunnen configureren om te doen wat we willen, slaan we misschien kleine spijkers met een grote hamer? Is Presidio te veel? Laten we hier nog eens over nadenken. Als we gemakkelijk kunnen weten en definiëren welke eenvoudige kolommen in welke tabellen moeten worden geanonimiseerd en wanneer gewoon nulling of hashing van de kolomwaarden voldoende is, dan hebben we het autodetectie deel van Presidio niet nodig. We hebben ook geen Presidio-ondersteuning nodig voor volledige tekst of afbeeldingen en we hebben ook geen fancy substitutie-ondersteuning nodig. Presidio zou een krachtige bibliotheek kunnen zijn om een automatische anonimiseringsstap te maken voor onze Singer-gebaseerde pijplijn. Het helpt ook dat Presidio gebaseerd is op Python. Maar mijn gevoel zegt dat ik misschien eerst moet proberen om een iets eenvoudigere oplossing te vinden. Ik begon te zoeken naar iets dat een eenvoudige PII-vervanging kan doen en dat werkt in een Singer tap/target context. Ik vond deze Github repository: pipelinewise-transform-field . In de documentatie staat "Transformatiecomponent tussen Singer taps en targets". Klinkt verdacht veel als het " T " deel dat Singer als een ETL miste! Verderop in de configuratiesectie lezen we zelfs: "Je moet definiëren welke kolommen door welke methode moeten worden getransformeerd en in welke conditie de transformatie moet worden toegepast." en de mogelijke transformatietypes zijn: SET-NULL : transformeert elke invoer naar NULL HASH : transformeert stringinvoer naar hash HASH-SKIP-FIRST-n : Transformeert stringinvoer naar hash waarbij de eerste n tekens worden overgeslagen, bijv. HASH-SKIP-FIRST-2 MASK-DATE : Vervangt de maand- en dagdelen van datumkolommen door 1 jan. MASK-NUMBER : Zet elke numerieke waarde om in nul. MASK-HIDDEN : verandert een willekeurige tekenreeks in 'verborgen'. Dit lijkt volledig te voldoen aan onze eenvoudige anonimiseringseisen! We kunnen zelfs zien hoe we het moeten gebruiken in de context van Singer: some-singer-tap | transform-field --config [config.json] | some-singer-target Standaard Conclusie We hebben nu alle stukjes van de puzzel voor het opzetten van eenvoudige en flexibele ETL-gebaseerde anonimisering. In de volgende blogpost laten we zien hoe ze in elkaar passen en of ze de resultaten opleveren die de klant zoekt.

Leestijd 9 min

Laurens Slechten

Bij het bouwen van producten wordt steeds meer erkend dat succes niet alleen te maken heeft met het leveren van functies of het halen van deadlines. In plaats daarvan gaat het om het leveren van echte waarde aan klanten en het bereiken van zakelijke impact. Dit vereist een mentaliteitsverandering van outputgericht naar resultaatgericht denken. In dit artikel onderzoeken we waarom het belangrijker is om uitkomsten prioriteit te geven dan output om succesvolle producten te maken en hoe je deze benadering kunt toepassen in je eigen werk. Wat betekent "uitkomsten boven output"? In de bedrijfswereld worden de termen resultaat en output vaak door elkaar gebruikt, wat voor enige verwarring zorgt. Het is echter belangrijk om het onderscheid tussen deze twee termen goed te begrijpen. Hoewel ze misschien eenvoudig lijken, laten we ze toch eens definiëren om ervoor te zorgen dat we allemaal op dezelfde golflengte zitten. Laten we ons eens voorstellen dat je je de laatste tijd uitgeput voelt, dus begin je te trainen in de sportschool om je energieker te voelen. Sommige mensen zouden kunnen zeggen dat het resultaat van je fitnessroutine het aantal uren dat je hebt gesport en de hoeveelheid gewicht die je hebt getild is. Maar het echte resultaat van je routine is veel belangrijker dan dat . Het resultaat is dat je je sterker, zelfverzekerder en gezonder voelt. Het resultaat is de manier waarop je harde werk (de output) zich heeft vertaald in een betere levenskwaliteit en een positiever zelfbeeld. Het resultaat is de manier waarop je probleem werd opgelost door de output. In een zakelijke context verwijst een resultaat naar de impact die je product heeft op de organisatie en haar klanten en belanghebbenden, terwijl een output verwijst naar de tastbare dingen die je (ontwikkel)team produceert, zoals documenten, software en tests. Focussen op resultaat boven output betekent succes definiëren op basis van het bereiken van een specifiek resultaat en vooruitgang meten op basis van hoe dicht je bij het bereiken van dat resultaat bent. Het doel van je team is niet om output te produceren; het is om een specifiek resultaat te bereiken. Een succesvol team streeft ernaar het gewenste resultaat te maximaliseren en tegelijkertijd de hoeveelheid geproduceerd werk te minimaliseren. De voordelen van een resultaatgerichte aanpak 1. Het helpt je te ontsnappen aan de bouwval Het eerste Agile Principe stelt dat je topprioriteit is om je klanten gelukkig te maken door waardevolle software zo vroeg en consistent mogelijk op te leveren. Naarmate agile werkwijzen op verschillende gebieden worden toegepast, hebben mensen dit principe geherformuleerd om het belang van het snel en consistent leveren van waarde aan klanten te benadrukken. Als je succes meet op basis van een resultaatgerichte metriek, zoals " het aantal doorkliks op nieuwsbrieven binnen zes maanden met 15% verhogen ", koppel je de inspanningen van je team onmiddellijk aan de waarde voor je organisatie en klanten. Dit helpt je te begrijpen welke impact je maakt en wanneer je echt een verschil maakt. Als je daarentegen succes meet door alleen te kijken naar de dingen die je produceert, zoals " het aantal opgeleverde features " of " het aantal voltooide punten in een scrum sprint ", loop je het risico in wat Melissa Perri (product management expert, spreker en auteur) "de bouwval" noemt. Deze valkuil houdt in dat je je alleen richt op het maken van features zonder rekening te houden met de gewenste resultaten. Wanneer organisaties prioriteit geven aan output boven uitkomsten, lopen ze het risico verstrikt te raken in een cyclus van het bouwen van meer en meer features zonder echt te begrijpen of ze klantproblemen oplossen of bedrijfswaarde creëren. Door je te fixeren op het opleveren van features als maatstaf voor succes, kun je het grotere geheel uit het oog verliezen. Het vertelt je niet of je de juiste dingen bouwt. Het is dus essentieel om je focus te verleggen naar de resultaten die er toe doen. Dit vereist een mentaliteitsverandering die de behoeften en gewenste resultaten van de klant op de voorgrond plaatst. Door succes te definiëren op basis van resultaten, kan je team ontsnappen aan de bouwval . 2. Het helpt je te focussen op leren en itereren Als je kritisch gaat denken over het leveren van waarde in plaats van features, loop je al snel tegen het probleem aan waar ik het eerder over had: hoe weet je zeker dat de features die je bouwt ook echt waarde gaan leveren? Een resultaatgerichte aanpak erkent dat je misschien niet vanaf het begin alle antwoorden hebt en dat leren een belangrijk onderdeel van het proces is. Daarom heb je bij het werken met uitkomsten een hulpmiddel nodig: het experiment. Wanneer je resultaatgericht denken combineert met een proces dat gebaseerd is op het uitvoeren van experimenten, begin je echt het ware potentieel van agile benaderingen te ontsluiten. Dit is vooral waardevol in situaties waar veel onzekerheid is. Als je bijvoorbeeld een nieuw softwareproduct maakt, weet je misschien niet zeker of het de gewenste impact zal hebben op je bedrijf en of alle mooie functies die je hebt bedacht wel nodig zijn. Door te focussen op resultaten, kun je doelen stellen die je team toelaten om te experimenteren en verschillende oplossingen uit te proberen tot ze vinden wat het beste werkt. In een agile context behandelen we elke stap als een hypothese en een experiment gericht op het bereiken van een specifiek resultaat. Dit is waar het concept van een MVP, of Minimum Viable Product , om de hoek komt kijken. Beschouw MVP als het kleinste ding dat je kunt doen of het kleinste ding dat je kunt bouwen om te leren of je hypothese juist is. Dit iteratieve proces van testen, leren en aanpassen stelt teams in staat om te experimenteren, om verschillende oplossingen uit te proberen, totdat ze de oplossing vinden die werkt. 3. Het helpt je team meer autonomie te bereiken Werknemers vinden het vaak een uitdaging om een diep gevoel van doelgerichtheid en motivatie te ervaren, enkel door de output die ze produceren. Wat mensen echt drijft om elke dag op het werk te verschijnen, zijn niet de specifieke taken waarmee ze zich elke dag bezighouden, maar eerder de betekenisvolle resultaten waar hun werk uiteindelijk aan zal bijdragen . De nadruk op resultaten helpt om je team op één lijn te krijgen rond een gemeenschappelijk doel en gedeelde doelen. Door duidelijkheid te verschaffen over wat er bereikt moet worden, kun je je team motiveren en in staat stellen om samen te werken aan duidelijke doelen die het product moet bereiken. Hierdoor kan je team prioriteiten stellen in hun werk en functies bouwen die bijdragen aan het bereiken van die doelen. Door hen beslissingen te laten nemen over de functies die ze bouwen, krijgen ze een groter gevoel van eigenaarschap over het werk dat ze doen. De resultaten voor je product definiëren en implementeren Nu ben je het er misschien wel mee eens dat focussen op resultaten klinkt als een goed idee, maar ze daadwerkelijk implementeren in onze bedrijfspraktijken is niet zo eenvoudig . Elke methodologie heeft zijn nadelen. Eén uitdaging is dat uitkomsten minder gemakkelijk te meten en te kwantificeren zijn dan outputs. Ten tweede staan veel bedrijven onder druk om snel door te gaan naar het volgende project als het ene is afgerond . Helaas wordt het iteratieve proces van testen, leren en aanpassen nog steeds niet vaak toegepast. Tot slot, wat het moeilijk maakt, is dat we vaak doelen stellen die te hoog gegrepen zijn . Als je het team bijvoorbeeld vraagt om het bedrijf winstgevender te maken of de risico's te verminderen, dan is dat te complex omdat die uitdagingen bestaan uit veel variabelen om te beïnvloeden. Deze doelen op impactniveau zijn te complex voor teams. In plaats daarvan moet je je richten op kleinere en beter beheersbare doelen . Om dit te doen, moet je je team vragen om zich te concentreren op het veranderen van klantgedrag op manieren die positieve bedrijfsresultaten opleveren. In zijn boek "Outcomes Over Output: Why Customer Behavior Is The Key Metric For Business Success" presenteert Joshua Seiden drie magische vragen die je kunnen helpen bij het identificeren van geschikte resultaten: Wat zijn de gedragingen van gebruikers en klanten die bedrijfsresultaten genereren? (Dit is het resultaat dat je probeert te creëren.) Hoe kunnen we mensen meer van dat gedrag laten vertonen? (Dit zijn de functies, beleidswijzigingen, etc. die je gaat doen om te proberen de resultaten te creëren). Hoe weten we of we gelijk hebben? (Dit onthult de experimenten en statistieken die je zult gebruiken om de voortgang te meten). Ik zal je een voorbeeld geven van hoe dit werkt. Stel je voor dat je een e-commerce kledingwinkel runt en je hebt te maken met zware concurrentie van een concurrerend bedrijf. Je doel is om de klantloyaliteit te verbeteren, dus stel je het team een breed doel om de frequentie van klantbezoeken te verhogen van één keer per maand naar twee keer per maand. Om dit effect te bereiken, moet u specifiek gedrag van klanten identificeren dat correleert met het bezoeken van uw site. U merkt bijvoorbeeld dat klanten de neiging hebben om de site te bezoeken na het openen van de maandelijkse nieuwsbrief waarin nieuwe artikelen worden gepresenteerd. Daarom zou een mogelijke uitkomst kunnen zijn om de doorklikratio van de nieuwsbrief te verhogen. Daarnaast merkt u dat klanten de site ook bezoeken nadat een vriend een afbeelding van een van de artikelen heeft gedeeld op sociale media. Een andere mogelijke uitkomst is dus om klanten aan te moedigen vaker afbeeldingen van artikelen te delen. Door je te richten op deze klantgedragingen die het gewenste resultaat van sitebezoeken bepalen, zorg je ervoor dat je doelen zowel observeerbaar als meetbaar zijn. Dit is cruciaal omdat je zo de voortgang effectief kunt beheren en bijhouden. Ik hoop dat dit voorbeeld duidelijk maakt hoe resultaten specifiek kunnen zijn en gemakkelijk kunnen worden uitgesplitst. Onthoud dat een resultaat een gedrag is dat klanten vertonen en dat direct van invloed is op de bedrijfsresultaten. Door dit gedrag te begrijpen, kunt u uw inspanningen afstemmen op de resultaten die echt belangrijk zijn voor uw bedrijf. Aanknopingspunten Een resultaat verwijst naar de impact die je product heeft op de organisatie en haar klanten en belanghebbenden, terwijl een output verwijst naar de tastbare dingen die je team produceert, zoals documenten, software en tests. Het doel van je team is niet om output te produceren; het is om een specifieke uitkomst te bereiken. Een succesvol team streeft ernaar om het gewenste resultaat te maximaliseren en tegelijkertijd de hoeveelheid geproduceerd werk te minimaliseren. Door je te fixeren op feature delivery als maatstaf voor succes, kun je het grotere geheel uit het oog verliezen. Het vertelt je niet of je de juiste dingen bouwt. Het is dus essentieel om je focus te verleggen naar de resultaten. Een resultaatgerichte aanpak erkent dat je misschien niet meteen alle antwoorden hebt en dat leren een belangrijk onderdeel is van het proces. Daarom heb je bij het werken met uitkomsten een hulpmiddel nodig: het experiment. Als je je werk plant, wees dan duidelijk over je aannames. Wees bereid om je veronderstellingen te testen door je werk uit te drukken als hypotheses. Test je hypotheses voortdurend door in kleine iteraties te werken, te experimenteren en te reageren op de gegevens en feedback die je verzamelt. Verwar impact - ambitieuze doelen op hoog niveau - niet met uitkomsten. Impact is belangrijk, maar deze doelen zijn te complex voor teams omdat ze bestaan uit veel variabelen om te beïnvloeden. Gebruik deze vragen om resultaten te definiëren: wat zijn de menselijke gedragingen die bedrijfsresultaten stimuleren? Hoe kunnen we mensen meer van deze dingen laten doen? Hoe weten we of we gelijk hebben? 👀 Meer weten over onze diensten ? Klik hier om meer te weten te komen!

Leestijd 5 min

Stijn Huygh

Als ontwikkelaars begrijpen we dat GPS-nauwkeurigheid de ruggengraat vormt van veel mobiele toepassingen, van navigatie tot locatiegebaseerde diensten. De nauwkeurigheid van de GPS-functionaliteit van je app kan de gebruikerservaring maken of breken. In dit artikel geven we je vijf praktische manieren om de GPS-nauwkeurigheid van je mobiele applicatie te verbeteren en ervoor te zorgen dat je gebruikers zich nooit meer verloren voelen. Hoe een slechte GPS-locatienauwkeurigheid het succes van mobiele applicaties om zeep helpt: praktijkvoorbeeld Laten we beginnen met een voorbeeld uit de praktijk van hoe een slechte GPS-nauwkeurigheid je mobiele applicatie kan laten mislukken. Voorbeeld Elise heeft je nieuwe mobiele applicatie Commuter gedownload. De app belooft haar woon-werkervaring te verbeteren door haar tijdig meldingen te geven over bushaltes en verwachte aankomsttijden. Tot haar grote schrik presteert de app echter niet altijd even goed. Op sommige dagen biedt de app nauwkeurige realtime updates, maar op andere dagen ontvangt ze de meldingen te laat of te vroeg. Het is begrijpelijk dat Elise gefrustreerd is en haar ontevredenheid over uw mobiele applicatie deelt via een negatieve review. Wat gaat er mis met de GPS-nauwkeurigheid? Jij, als ontwikkelaar, staat perplex. Je hebt immers de standaard GPS-algoritmen van het platform geïntegreerd, dus waarom de inconsistentie? De app berekent haar gemiddelde snelheid op basis van het verschil tussen de GPS-locaties en de tijd tussen deze updates. De app is geprogrammeerd om haar te waarschuwen voor haar bushalte zodra haar GPS-coördinaten binnen een straal van 100 meter van het station vallen. Hoewel dit logisch klinkt, komen de resultaten in de praktijk niet overeen met de verwachtingen. Wat veroorzaakt de slechte nauwkeurigheid van GPS-locaties? Het kernprobleem komt voort uit de inherente onnauwkeurigheden in GPS-locatiegegevens. Hoewel GPS-locaties een foutmarge bevatten, meestal uitgedrukt in meters met een betrouwbaarheidsinterval van 68%, houdt deze marge geen rekening met de invloed van weerkaatsingen van het GPS-signaal , ook bekend als multipadfouten. Multipadfouten treden op wanneer GPS-signalen weerkaatsen op objecten of oppervlakken voordat ze de antenne van de GPS-ontvanger bereiken. Stedelijke gebieden met hoge gebouwen en een dichte infrastructuur zijn bijzonder gevoelig voor GPS-signaalreflecties. De weerkaatsing van signalen tegen wolkenkrabbers, voertuigen en andere structuren kan een complexe signaalomgeving creëren, wat leidt tot onvoorspelbare locatieonnauwkeurigheden. GPS-signaalreflecties kunnen het signaal kilometers ver omleiden, waardoor de app mogelijk ten onrechte aangeeft dat Elise haar bestemming al heeft bereikt of nog kilometers ver is. Uitdagingen van GPS-signaalreflecties voor ontwikkelaars van mobiele apps GPS-signaalreflecties stellen ontwikkelaars van mobiele apps voor verschillende uitdagingen: Onnauwkeurige positionering : GPS-signaalreflecties kunnen ervoor zorgen dat de GPS-ontvanger een onjuiste positie berekent. Wanneer het gereflecteerde signaal iets later aankomt dan het directe signaal, kan de ontvanger het interpreteren als komende vanuit een andere hoek, wat leidt tot onnauwkeurige positiebepalingen. Inconsistente metingen : GPS-signaalreflecties zijn vaak inconsistent, waardoor het moeilijk is voor ontwikkelaars om te voorspellen wanneer en waar ze zullen optreden. Deze inconsistentie kan resulteren in verschillende niveaus van onnauwkeurigheid, wat een uitdaging vormt bij het ontwerpen van locatie-afhankelijke diensten. Hoe kan de GPS-locatienauwkeurigheid worden verbeterd? Om de uitdagingen van GPS-signaalreflecties tegen te gaan en de gebruikerservaring te verbeteren, is een vernieuwde strategie nodig. Hier volgen enkele innovatieve strategieën om de GPS-locatienauwkeurigheid van de mobiele app Commuter in het bovenstaande voorbeeld te verbeteren: GPS-locaties filteren : Het is cruciaal om alle locatie-updates met een onnauwkeurigheid van meer dan 100 meter te verwijderen. Dit zorgt ervoor dat alleen de meest betrouwbare gegevens worden gebruikt voor berekeningen. Extra sensorgegevens gebruiken : Neem versnellingsmetergegevens op om de GPS-nauwkeurigheid te verbeteren. Gebruik een snelheidsverletalgoritme om locaties te voorspellen op basis van de versnellingsmetergegevens. Combineer deze voorspellingen met behulp van een Kalman Filter, waarbij rekening wordt gehouden met de onzekerheid van elke gegevensbron, het locatiesignaal wordt gestabiliseerd en een nauwkeurigere voorspelling wordt verkregen. Projectiealgoritmen voor busroutes: Aangezien Elise met de bus reist, kunnen projectiealgoritmen worden gebruikt om haar locatie af te stemmen op de route van de bus. Dit kan worden bereikt door de route te benaderen met behulp van gegevens van verschillende bushaltes. Crowdsourced Wi-Fi SSID's: Een andere innovatieve aanpak is het crowdsourcen van Wi-Fi SSID's (Service Set Identifiers). Deze SSID's kunnen fungeren als locatiemarkeringen en extra gegevenspunten leveren om de nauwkeurigheid van de locatie te verfijnen. Bluetooth-bakens voor verbeterde nauwkeurigheid : Het detecteren van crowdsourced Bluetooth beacons kan ook dienen als locatie-updates. Door gebruik te maken van deze BLE-bakens kun je de nauwkeurigheid van de app verder verbeteren. Door deze strategieën toe te passen, verbetert de nauwkeurigheid van de Commuter-app aanzienlijk en wordt een consistente en betrouwbare gebruikerservaring gegarandeerd. Als gevolg daarvan kunnen Elise en veel gebruikers zoals zij genieten van tijdige en nauwkeurige updates, wat leidt tot positieve beoordelingen en algehele klanttevredenheid. Conclusie Hoewel de uitdagingen voor de Commuter-app uniek lijken, weerspiegelen ze de echte hindernissen die veel ontwikkelaars van mobiele apps tegenkomen. Bij ACA hebben we deze uitdagingen met succes aangegaan met behulp van de hierboven beschreven strategieën. Hoewel GPS een waardevol hulpmiddel is, is het begrijpen van de beperkingen en het aanvullen van de gegevens met andere technologieën de sleutel tot betrouwbare locatiegebaseerde diensten. Op zoek naar een ervaren partner voor het ontwikkelen van mobiele toepassingen? {% module_block module "widget_137b2ccd-e194-4a50-a7ff-05def1e6085b" %}{% module_attribute "buttons" is_json="true" %}{% raw %}[{"appearance":{"link_color":"light","primary_color":"primary","secondary_color":"primary","tertiary_color":"light","tertiary_icon_accent_color":"dark","tertiary_text_color":"dark","variant":"primary"},"content":{"arrow":"right","icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"tertiary_icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"text":"Contact us"},"target":{"link":{"no_follow":false,"open_in_new_tab":false,"rel":"","sponsored":false,"url":{"content_id":230950468795,"href":"https://25145356.hs-sites-eu1.com/en/contact","href_with_scheme":null,"type":"CONTENT"},"user_generated_content":false}},"type":"normal"}]{% endraw %}{% end_module_attribute %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 5 min

Kamen Zhekov

De webapplicaties en websites van tegenwoordig moeten 24/7 beschikbaar zijn vanaf elke plek ter wereld en moeten bruikbaar en prettig in gebruik zijn vanaf elk apparaat of schermformaat. Daarnaast moeten ze veilig, flexibel en schaalbaar zijn om pieken in de vraag op te vangen. In deze blog laten we u kennismaken met de architectuur van moderne webapplicaties en gaan we dieper in op verschillende back-end en front-end frameworks en hoe ze samenwerken. Wanneer mensen oplossingen vergelijken die worden gebruikt voor het bouwen van webapplicaties en websites, is er meestal sprake van een soort pitting tegen de ander. Hier gaan we tegen deze stroom in en proberen we de verschillen in kaart te brengen, zodat je kunt beslissen of de ene, de andere of beide passen bij de use case die je in gedachten hebt. Een essentieel concept dat moet worden opgemerkt is dat back-end frameworks, zoals Flask of FastAPI , en front-end frameworks, zoals React of Vue JS , twee fundamenteel verschillende technologieën zijn die verschillende, hoewel verwante, problemen oplossen. Ze tegen elkaar uitspelen is daarom geen goede aanpak. Tegenwoordig, als je een iets complexere webapplicatie of websiteoplossing wilt bouwen, heb je vaak solide frameworks nodig die stukjes van zowel de front-end als de back-end kant aanpakken om te bereiken wat je zoekt. De specifieke kenmerken van je applicatie zullen bepalen wat die onderdelen zijn en of het de moeite waard is om te investeren in het gebruik van slechts één van de twee technologieën, of beide in combinatie. Doel van een back-end framework Een back-end framework is het "brein" van je webapplicatie. Het moet zorgen voor de meeste, zo niet alle, taken op het gebied van berekeningen, gegevensbeheer en modelmanipulatie. Laten we het voorbeeld van FastAPI nemen. Hoewel dit back-end webframework voornamelijk wordt gebruikt voor het ontwikkelen van RESTful API's, kan het ook worden toegepast voor het ontwikkelen van complete webapplicaties als het wordt gekoppeld aan een front-end engine zoals Jinja2. Het gebruik van alleen FastAPI en wat templating zou ideaal zijn als je een standalone API wilt waar andere ontwikkelaars mee kunnen communiceren. Een ander goed doel zou een website of webapp zijn die dashboards en inzichten biedt over gegevensinvoer (grafieken gebaseerd op bestanden die je uploadt, etc.) zonder functionaliteiten die afhankelijk zijn van snelle gebruikersinteracties. Hieronder vind je een voorbeeld van een applicatie die volledig is gebouwd met een Python back-end en Jinja2 als templating engine. Klik hier voor meer informatie over het project, de broncode, enz. Het probleem dat je zou kunnen tegenkomen bij het maken van een complete web app of website met FastAPI is dat de hele logica van het programma naar de back-end wordt geduwd, en de enige taak voor de browser en het apparaat aan de kant van de client is het renderen van de HTML/CSS/JS respons die er naar toe wordt gestuurd. De tijd tussen het moment dat de browser het verzoek doet om iets weer te geven en het moment dat de gebruiker het ziet, kan dan enorm variëren op basis van een heleboel factoren. Denk aan de belasting van de server, de snelheid van het internet van de gebruiker, het geheugengebruik of de CPU-efficiëntie van de server, de complexiteit van de gevraagde taak, ... Doel van een front-end framework Tot nu toe kan de back-end zorgen voor alle operaties die we willen dat onze webapp heeft, maar er is geen manier om echt te interageren met de gebruiker. Een front-end framework zorgt voor de gebruikerservaring - UI-elementen zoals knoppen, een landingspagina, een interactieve tutorial, het uploaden van een bestand - in principe verloopt elke interactie met de gebruiker via het front-end framework. Als we kijken naar React of Vue JS - dit zijn front-end frameworks voor het ontwikkelen van dynamische websites en single page applicaties. Ze hebben echter een back-end technologie nodig (zoals FastAPI, Flask of NodeJS) om een RESTful API te bieden, zodat wat ze tonen dynamisch en interactief kan zijn. Alleen React gebruiken zou gebeuren in situaties waarin er al bestaande gegevensbronnen zijn waarmee je kunt interageren (openbare API's, externe gegevensleveranciers, cloudservices, enzovoort) en het enige wat je wilt creëren is de gebruikersinteractie met die services. Maar we kunnen hier al zien dat, in theorie, het combineren van de sterke punten van een solide back-end framework - zoals Flask, FastAPI, of NodeJS - met een goed front-end framework een optie is, en dan nog een hele goede ook. Voorbeelden van die combinatie zijn de BBC World Service News websites die worden gerenderd met behulp van een React-gebaseerde Single Page Application met een NodeJS back-end (Express). Klik hier voor een gedetailleerd overzicht op de GitHub-pagina van het project. In deze gevallen proberen front-end frameworks een deel (of veel) van de taken van de back-end te delegeren naar de client-side. Alleen de computationeel zware delen blijven op de server, terwijl alles wat overblijft en snel uit te voeren is in de browser op het apparaat van de client wordt gedaan. Dit zorgt voor een goede gebruikerservaring, "snappiness" en is in feite een soort decentralisatie van delen van de uitvoering van de webapplicatie, waardoor de belasting en verantwoordelijkheden van de server afnemen. De twee combineren 🤝 Tegenwoordig bestaat de architectuur van goed gebouwde en schaalbare webapplicaties uit een client-side framework dat een toestand bijhoudt, bestaande uit een toestand van de gebruikersinterface en een toestand van het datamodel. Deze toestanden vertegenwoordigen respectievelijk UI-elementen die de visuele ruggengraat van een applicatie vormen, en data-elementen die gekoppeld zijn aan wat voor soort gegevens of modellen (bijvoorbeeld een gebruiker) gebruikt worden doorheen de applicatie. Elke verandering in de toestand van het gegevensmodel veroorzaakt een verandering in de UI-toestand van de applicatie. Veranderingen in de datamodellen worden veroorzaakt door een gebeurtenis die direct van de gebruiker komt (zoals een muisklik) of een gebeurtenis aan de serverkant (zoals de server die zegt dat er een nieuwe melding voor de gebruiker is). De combinatie van al deze factoren zorgt voor een geweldige gebruikerservaring die dichter in de buurt komt van een desktopapplicatie in plaats van een ouderwetse, trage website. Klaar voor meer? In onze volgende blog leggen we de sterke punten van Python en NodeJS uit, en hoe je daartussen moet kiezen.

Leestijd 4 min

Stijn Vandereyken

Je bent misschien wel bekend met de term 'data mesh'. Het is een van die modewoorden over data die al een tijdje de ronde doen. Hoewel data mesh het potentieel heeft om een organisatie in heel wat situaties veel waarde te bieden, moeten we ons niet blind staren op alle mooie terminologie. Als je een goede datastrategie wilt ontwikkelen, doe je er goed aan om jezelf eerst de volgende vragen te stellen: wat is de uitdaging die we met data willen aangaan? En hoe kan een oplossing bijdragen aan het bereiken van onze bedrijfsdoelstellingen? Er is zeker niets nieuws aan het gebruik van data door organisaties, maar we hebben wel een lange weg afgelegd. Aanvankelijk verzamelden bedrijven gegevens uit verschillende systemen in een datawarehouse. Het nadeel was dat het databeheer door een centraal team werd gedaan en dat de doorlooptijd van rapporten ernstig opliep . Bovendien moesten deze data engineers een goed begrip hebben van het hele bedrijf. In de jaren die volgden, zorgde de opkomst van sociale media ervoor dat de hoeveelheid gegevens als paddenstoelen uit de grond schoten, wat op zijn beurt leidde tot de term Big Data. Als gevolg hiervan werden tools ontwikkeld om enorme hoeveelheden gegevens te analyseren, waarbij de focus steeds meer verschoof naar selfservice. Deze laatste trend betekent nu dat het bedrijf zelf steeds beter in staat is om op eigen kracht met gegevens om te gaan. En dat brengt weer een nieuwe uitdaging met zich mee: zoals vaak het geval is, zijn we niet in staat om technologie los te koppelen van de processen in het bedrijf of van de mensen die deze gegevens gebruiken. Zijn deze mensen klaar om gegevens te gaan gebruiken? Hebben ze de juiste vaardigheden en heb je nagedacht over het soort vaardigheden dat je morgen nodig zult hebben? Wat zijn de doelen van het bedrijf en hoe kunnen werknemers bijdragen aan het bereiken ervan? Het menselijke aspect is een cruciaal onderdeel van elke krachtige datastrategie. Hoe maak je het verschil met data? In de praktijk blijkt dat veel bedrijven op het gebied van datastrategieën niet verder zijn gekomen dan een paar jaar geleden. Onnodig te zeggen dat dit nauwelijks een solide basis is om door te gaan naar de volgende stap. Laten we ons daarom richten op enkele van de belangrijkste elementen in een datastrategie: Gegevens moeten aanzetten tot actie: het is niet genoeg om alleen maar een paar cijfers te vergelijken; een kwalitatief hoogstaand rapport leidt tot een beslissing of moet op zijn minst duidelijk maken welke actie nodig is. Sharing is caring: als je toch gegevens hebt, waarom zou je ze dan niet delen? Niet alleen met je eigen interne afdelingen, maar ook met de buitenwereld. Als je erin slaagt om gegevens weer beschikbaar te maken voor de klant, is er een echt concurrentievoordeel te behalen. Visualiseren: gegevens worden vaak verzameld in slecht georganiseerde tabellen zonder goede lay-out. Studies tonen aan dat het menselijk brein moeite heeft om dit soort tabellen te lezen. Door gegevens te visualiseren (bijvoorbeeld met GeoMapping) kun je tot inzichten komen waar je eerder niet aan had gedacht. Verbind datasets: in het geval van datasets moet 1+1 altijd gelijk zijn aan 3. Als je bijvoorbeeld de effectiviteit van een marketingcampagne meet, kijk dan niet alleen naar het aantal kliks. De echte toegevoegde waarde zit in het correleren van de gegevens die je hebt met gegevens over het bedrijf, zoals (toegenomen) verkoopcijfers. Maak gegevens transparant: wees duidelijk over je bedrijfsdoelen en KPI's, zodat iedereen in de organisatie de gegevens kan gebruiken en zo kan bijdragen aan het behalen van een benchmark. Train mensen: zorg ervoor dat je mensen begrijpen hoe ze technologie moeten gebruiken, maar ook hoe gegevens hun taken kunnen vereenvoudigen en hoe gegevens bijdragen aan het behalen van de bedrijfsdoelen. Welk probleem wil je oplossen met data? Als je de basis eenmaal op orde hebt, kunnen we een stappenplan opstellen. Een oplossing mag nooit uitgaan van de gegevens zelf, maar moet altijd gekoppeld zijn aan een uitdaging of een doel. Daarom organiseert ACA Group altijd eerst een workshop om te achterhalen wat de doelstellingen van de klant zijn. Op basis van de uitkomst van deze workshop komen we tot een concrete probleemstelling, die ons op het juiste spoor zet om voor elke situatie een oplossing te vinden. De integratie van datasets zal in de nabije toekomst nog belangrijker worden, onder andere als onderdeel van duurzaamheidsrapportage. Om bedrijven zo goed mogelijk voor te bereiden en te begeleiden, zullen we in de loop van dit jaar met een reeks blogs dieper ingaan op enkele belangrijke terminologieën, methoden en uitdagingen rond gegevens. Bent u in de tussentijd benieuwd wat 'Data Mesh' precies inhoudt en waarom dit lonend kan zijn voor uw organisatie? {% module_block module "widget_1aee89e6-fefb-47ef-92d6-45fc3014a2b0" %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 5 min

Tim Van Laer

Apache Kafka is een zeer flexibel streamingplatform. Het richt zich op schaalbare, realtime gegevenspijplijnen die persistent en zeer performant zijn. Maar hoe werkt het en waarvoor gebruik je het? Hoe werkt Apache Kafka? Lange tijd werden applicaties gebouwd met behulp van een database waarin 'dingen' werden opgeslagen. Die dingen kunnen een bestelling zijn, een persoon, een auto ... en de database slaat ze op met een bepaalde status. In tegenstelling tot deze aanpak, denkt Kafka niet in termen van 'dingen' maar in termen van 'gebeurtenissen'. Een gebeurtenis heeft ook een toestand, maar het is iets dat in een bepaalde tijd is gebeurd. Het is echter een beetje omslachtig om gebeurtenissen in een database op te slaan. Daarom gebruikt Kafka een log : een geordende opeenvolging van gebeurtenissen die ook duurzaam is. Ontkoppelen Als je een systeem hebt met verschillende bronsystemen en doelsystemen, dan wil je die met elkaar integreren. Deze integraties kunnen vervelend zijn omdat ze hun eigen protocollen, verschillende gegevensformaten, verschillende gegevensstructuren, enz. hebben. Dus binnen een systeem met 5 bron- en 5 doelsystemen zul je waarschijnlijk 25 integraties moeten schrijven. Dat kan heel snel heel ingewikkeld worden. En dit is waar Kafka om de hoek komt kijken. Met Kafka ziet het bovenstaande integratieschema er als volgt uit: Wat betekent dat? Het betekent dat Kafka je helpt om je gegevensstromen te ontkoppelen. Bronsystemen hoeven alleen hun gebeurtenissen naar Kafka te publiceren en doelsystemen consumeren de gebeurtenissen uit Kafka. Bovenop de ontkoppeling is Apache Kafka ook zeer schaalbaar, heeft het een veerkrachtige architectuur, is het fouttolerant, is het gedistribueerd en is het zeer performant. Onderwerpen en partities Een topic is een bepaalde gegevensstroom en wordt geïdentificeerd door een naam. Topics bestaan uit partities. Elk bericht in een partitie wordt geordend en krijgt een incrementele ID die een offset wordt genoemd. Een offset heeft alleen betekenis binnen een specifieke partitie. Binnen een partitie is de volgorde van de berichten gegarandeerd. Maar wanneer je een bericht naar een topic stuurt, wordt het willekeurig toegewezen aan een partitie. Dus als je de volgorde van bepaalde berichten wilt behouden, moet je de berichten een sleutel geven. Een bericht met een sleutel wordt altijd toegewezen aan dezelfde partitie. Berichten zijn ook onveranderlijk. Als je ze wilt wijzigen, moet je een extra 'update-bericht' sturen. Brokers Een Kafka-cluster bestaat uit verschillende brokers. Elke broker krijgt een ID toegewezen en elke broker bevat bepaalde partities. Als je verbinding maakt met een broker in het cluster, ben je automatisch verbonden met het hele cluster. Zoals je in de bovenstaande afbeelding kunt zien, wordt onderwerp 1/partitie 1 gerepliceerd in broker 2. Slechts één broker kan leider zijn voor een onderwerp/partitie. In dit voorbeeld is broker 1 de leider en broker 2 zal automatisch de gerepliceerde topic/partities synchroniseren. Dit noemen we een 'in sync replica' (ISR). Producenten Een producer stuurt de berichten naar het Kafka cluster om ze naar een specifiek onderwerp te schrijven. Daarom moet de producer de topicnaam en één broker kennen. We hebben al vastgesteld dat je automatisch verbinding maakt met het hele cluster als je verbinding maakt met een broker. Kafka zorgt voor de routering naar de juiste broker. Een producer kan geconfigureerd worden om een bevestiging (ACK) te krijgen van het schrijven van data: ACK=0: producer wacht niet op bevestiging ACK=1: de producent wacht op de bevestiging van de leidende broker ACK=ALL: de producent wacht op de bevestiging van de leidende broker en de replicabroker. Het is duidelijk dat een hogere ACK veel veiliger is en garandeert dat er geen gegevens verloren gaan. Aan de andere kant is het minder performant. Consumenten Een consumer leest data van een topic. Daarom moet de consument de naam van het onderwerp en één broker kennen. Net als bij de producenten geldt dat wanneer je verbinding maakt met één broker, je verbonden bent met het hele cluster. Ook hier zorgt Kafka voor de routering naar de juiste broker. Consumenten lezen de berichten van een partitie in volgorde, rekening houdend met de offset. Als consumenten van meerdere partities lezen, lezen ze deze parallel. Consumentengroepen Consumenten zijn georganiseerd in groepen, oftewel consumentengroepen. Deze groepen zijn nuttig om parallellisme te verbeteren. Binnen een consumentengroep leest elke consument van een exclusieve partitie. Dit betekent dat in consumentengroep 1 zowel consument 1 als consument 2 niet van dezelfde partitie kunnen lezen. Een consumentengroep kan ook niet meer consumenten dan partities hebben, omdat sommige consumenten geen partitie hebben om van te lezen. Consumentenoffset Als een consumer een bericht van de partitie leest, legt hij elke keer de offset vast. In het geval dat een consumer dood gaat of netwerkproblemen heeft, weet de consumer waar hij verder moet als hij weer online is. Waarom we geen berichtenwachtrij gebruiken Er zijn enkele verschillen tussen Kafka en een message queue. Enkele belangrijke verschillen zijn dat nadat een consument van een berichtwachtrij een bericht heeft ontvangen, het uit de wachtrij wordt verwijderd, terwijl Kafka de berichten/gebeurtenissen niet verwijdert. Hierdoor kun je meerdere consumenten op een onderwerp hebben die dezelfde berichten kunnen lezen, maar er verschillende logica op uitvoeren. Omdat de berichten persistent zijn, kun je ze ook opnieuw afspelen. Wanneer je meerdere consumenten op een berichtwachtrij hebt, passen ze over het algemeen dezelfde logica toe op de berichten en zijn ze alleen nuttig om de belasting af te handelen. Gebruikscases voor Apache Kafka Er zijn veel gebruikssituaties voor Kafka. Laten we enkele voorbeelden bekijken. Telemetrie van pakketbezorging Wanneer je iets bestelt op een webshop, krijg je waarschijnlijk een melding van de koeriersdienst met een trackinglink. In sommige gevallen kun je de chauffeur zelfs in real-time volgen op een kaart. Dit is waar Kafka om de hoek komt kijken: de bestelbus van de koerier heeft een ingebouwde GPS die zijn coördinaten regelmatig naar een Kafka-cluster stuurt. De website die je bekijkt, luistert naar die gebeurtenissen en toont je in realtime de exacte positie van de koerier op een kaart. Website-activiteit volgen Kafka kan worden gebruikt voor het volgen en vastleggen van website-activiteit. Gebeurtenissen zoals paginaweergaves, zoekopdrachten van gebruikers, enz. worden vastgelegd in Kafka topics. Deze gegevens worden vervolgens gebruikt voor een reeks use cases zoals real-time monitoring, real-time verwerking of zelfs het laden van deze gegevens in een data lake voor verdere offline verwerking en rapportage. Applicatie gezondheidsmonitoring Servers kunnen worden bewaakt en ingesteld om alarmen te activeren in geval van systeemfouten. Informatie van servers kan worden gecombineerd met de syslogs van de server en naar een Kafka-cluster worden gestuurd. Via Kafka kunnen deze onderwerpen worden samengevoegd en ingesteld om alarmen te triggeren op basis van gebruiksdrempels, met volledige informatie voor het eenvoudiger oplossen van systeemproblemen voordat ze catastrofaal worden. Conclusie In deze blogpost hebben we in grote lijnen uitgelegd hoe Apache Kafka werkt en waarvoor dit ongelooflijke platform kan worden gebruikt. We hopen dat je iets nieuws hebt geleerd! Als je nog vragen hebt, laat het ons dan weten. Bedankt voor het lezen!

Leestijd 5 min

Gregory Van Dorpe

In deze blog duiken we dieper in 'Low-Code' als concept en hoe je het beste Low-Code platform kiest voor jouw bedrijf. Low-Code als concept Low-Code, visual development application modelling, citizen development, ... Als je een ontwikkelaar bent, zullen deze termen zeker een belletje doen rinkelen. Maar wat is Low-Code precies, waarom is het belangrijk voor jou en wie heeft er baat bij? Het antwoord is eenvoudig: "Dat hangt ervan af". Als we een stap terug doen, is Low-Code een concept dat draait om visuele ontwikkeling of modellering en dat op grote schaal wordt ondersteund door automatisering . Deze definitie maakt het toepasbaar op veel verschillende gebieden in IT en meer. Hoe kies je het beste Low-Code platform? Een snelle blik op de rapporten van Forrest en Gartner levert meer dan 300 verschillende Low-Code platforms en producten op. Zijn deze allemaal gelijkwaardig? Duidelijk niet. Zijn ze allemaal bedoeld voor applicatieontwikkeling? Nogmaals, nee. Dus hoe kun je bepalen welk Low-Code platform, product of oplossing relevant zou kunnen zijn voor jou en je klanten? Als we ons concentreren op de leiders en bekende namen, kunnen we gemakkelijk enkele patronen herkennen om ze te categoriseren (zie het voorbeeld hieronder). Low-Code oplossingen per categorie - Robotische procesautomatisering (RPA) Het gebruik van Low-Code en visuele ontwikkeling/modellering voor het creëren van processen, integraties en automatisering. - Automatisering van levering van software op maat Traditionele ontwikkelingsframeworks versterken met Low-Code accelerators om delen van applicaties of startpunten te genereren. - Aanpassing van pakketten De meeste toonaangevende pakketleveranciers investeren in Low-Code oplossingen binnen hun eigen platform om aanpassingen te vergemakkelijken. - Testautomatisering Iedereen kent Selenium , een zeer krachtige tool om testscripts te maken en te onderhouden. Sommige platformen passen zelfs een no-code benadering toe om de testgevallen te modelleren en de Selenium-scripts te laten genereren, uitvoeren en onderhouden zonder dat codering nodig is. - Citizen ontwikkeling voor team- en afdelingsapps Moe van het werken met Excel of Google Sheets? Zoek je een makkelijk te gebruiken en te leren oplossing om kleine en eenvoudige applicaties voor je team of afdeling te bouwen? Dan zijn Citizen Development platforms de oplossing voor jou. Het is echter niet geschikt voor bedrijfsapplicaties. Gebruik het dus waarvoor het bedoeld is. Je wilt toch ook niet dat je tuinman je nieuwe elektrische auto in elkaar zet? - Enterprise full-stack ontwikkelingsplatformen Een Low-Code enterprise ontwikkelplatform biedt een grafische gebruikersinterface voor programmeren en genereert de onderliggende code automatisch, waardoor ontwikkelaars minder met de hand hoeven te coderen. Deze tools helpen niet alleen met snelle front-end ontwikkeling, maar ook met logica, back-end, integraties en zelfs lifecycle management. In met Low-Code ontwikkeling, uit met traditionele ontwikkeling? Kan Low-Code traditionele ontwikkeling zoals .Net of Java volledig vervangen? Natuurlijk niet! Maar Low-Code ontwikkelingsplatforms kunnen zeker helpen om meer projecten in minder tijd op te leveren met hetzelfde aantal mensen . Het stelt organisaties in staat om sneller te reageren op kansen met een kortere time-to-market. Bovendien kan het helpen om een geldige business case te maken voor projecten die op de lange baan werden geschoven vanwege "andere prioriteiten" en teams die zich voornamelijk richten op bedrijfskritische systemen in uw bedrijf. Waarom we Low-Code gebruiken bij ACA Group Als IT-consultancybedrijf en integrator richten we ons op het leveren van software op maat om aan de specifieke behoeften van onze klanten te voldoen. Low-Code biedt ons een krachtig hulpmiddel om dit te doen. En niet alleen voor de eenvoudige apps! Met het juiste Low-Code platform kunt u zelfs uw legacy moderniseren en klantgerichte web- en mobiele apps bouwen die geïntegreerd zijn met uw ERP, CRM, IAM en brede bestaande landschap. Het kan je ook helpen je IT-landschap te rationaliseren en te vereenvoudigen en de tools van je bedrijf terug te brengen onder IT Governance zonder dat je de business hoeft te vertellen "sorry, we hebben andere prioriteiten". Onze strategische keuze: OutSystems ACA koos voor een strategisch partnerschap met OutSystems , een toonaangevend en veruit het meest productieve, veelzijdige en stabiele Low-Code platform op de markt voor enterprise full-stack ontwikkeling. Ons team van experts werkt al sinds 2016 met OutSystems en heeft ook projecten opgeleverd met andere toonaangevende platforms. We blijven op de hoogte van de laatste aankondigingen, nieuwe functionaliteiten en grote verschillen tussen de 3 toonaangevende Low-Code platforms voor algemene applicatieontwikkeling. Op die manier kunnen we onze klanten adviseren over wat het beste past bij hun behoeften. OutSystems Developer Cloud: de beste oplossing voor full-stack ontwikkeling OutSystems Developer Cloud is het toonaangevende PaaS cloud native high performance Low-Code platform voor full-stack ontwikkeling en integraties. Het dekt de breedste set use cases. Van interne apps tot B2B- en B2C-klantgerichte web- en mobiele applicaties, processen en zelfs kernsystemen. Het gebruik ervan voor legacymoderniserings- en innovatieprojecten is een grote versneller voor uw digitale transformatie. De voordelen van OutSystems Developer Cloud Wat levert OutSystems Developer Cloud op voor bedrijven en de ontwikkelaars en software engineers die het gebruiken om de projecten op te leveren? 3-4x snellere levering Eén uniforme manier voor het ontwikkelen van web, mobiel, front-end, back-end en integraties Gemakkelijk te leren voor software engineers en webontwikkelaars AI-ondersteunde ontwikkeling en ingebouwde generatieve AI Geen extra ontwikkeltools nodig (GitHub, Eclipse, Visual Studio, ...) Ontwikkelteams gericht op het leveren van waarde Beveiligd vanuit de doos Veel minder onderhoud Geen infrastructuur om te beheren Ingebouwd levenscyclusbeheer Automatisch schalen Dit alles terwijl je nog steeds de architectuur en best practices in handen hebt. Wil je aan de slag met Low-Code? {% module_block module "widget_90cf7739-dc28-449d-9a8c-ff948108e163" %}{% module_attribute "buttons" is_json="true" %}{% raw %}[{"appearance":{"link_color":"light","primary_color":"primary","secondary_color":"primary","tertiary_color":"light","tertiary_icon_accent_color":"dark","tertiary_text_color":"dark","variant":"primary"},"content":{"arrow":"right","icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"tertiary_icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"text":"Let's do it together"},"target":{"link":{"no_follow":false,"open_in_new_tab":false,"rel":"","sponsored":false,"url":{"content_id":null,"href":"","href_with_scheme":"","type":"CONTENT"},"user_generated_content":false}},"type":"normal"}]{% endraw %}{% end_module_attribute %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 7 min

ACA Group Team

De Global Accessibility Awareness Day vindt elk jaar plaats op de derde donderdag van mei met als doel toegankelijkheid in de kijker te zetten. Voor ACA Group zijn de toegankelijkheid, gebruiksvriendelijkheid en inclusie van technologie al lang een belangrijk aandachtspunt. In deze blog ontdek je enkele van onze projecten waarbij toegankelijkheid hoog op de prioriteitenlijst stond. De bedoeling van de Global Accessibility Awareness Day (GAAD) is om zoveel mogelijk mensen te laten nadenken en praten over hoe technologie toegankelijk kan worden gemaakt voor mensen met een beperking. Op deze manier wil het initiatief bijdragen aan een meer inclusieve digitale wereld. Wat is toegankelijkheid? Digitale toegankelijkheid betekent dat digitale technologieën, zoals online tools, applicaties en elektronische documenten, zo zijn ontworpen dat ze voor iedereen toegankelijk zijn, ook voor mensen met een beperking. Hierdoor kunnen zij, net als iedereen, blijven deelnemen aan de digitale economie en samenleving. Een van de belangrijkste aspecten van toegankelijkheid is dat mensen met een visuele, auditieve, cognitieve of fysieke beperking digitale content effectief kunnen waarnemen, begrijpen, ermee kunnen navigeren en ermee kunnen interageren. De visie van ACA Group op toegankelijkheid "Ons duurzaamheidsbeleid is veel meer dan onze sponsoring van goede doelen," zegt Dorien Jorissen , Chief Digital Officer Sustainability Manager bij ACA Group. "We streven ernaar om alle aspecten van duurzaamheid te analyseren en te integreren in onze activiteiten. Toegankelijkheid is ook een integraal onderdeel van ons duurzaamheidsbeleid. " De SDG's (Sustainable Development Goals) van de Verenigde Naties vormen de basis van het duurzaamheidskader van ACA Group. "Dit willen we niet alleen uitdragen in onze kantoren, in ons team en bij onze stakeholders, maar ook in onze digitale dienstverlening en onze projectmethodiek ", zegt Dorien. "In een snel evoluerende wereld, waarin technologie steeds meer verweven raakt met ons dagelijks leven, zijn we als toonaangevend IT-bedrijf verplicht om digitale toegankelijkheid hoog op de agenda te houden." Hieronder een foto van ACA Group die de DataNews Award 2022 voor Most Environmentally Responsible ICT Company of the Year'👇🏻 wint. Toegankelijkheid in de praktijk Hieronder vind je drie projecten van ACA Group waarvoor toegankelijkheid een belangrijke ontwerpeis was. ⭐️ Mobiele app voor De Lijn met focus op toegankelijkheid Toegankelijkheid is heel belangrijk voor De Lijn . Niet alleen in termen van gemakkelijke toegang tot hun voertuigen, maar ook in termen van hun digitale toepassingen, zoals de mobiele app. De uitdaging De vervoersmaatschappij wil dat hun app toegankelijk en gebruiksvriendelijk is voor iedereen, ook voor mensen met een visuele beperking. Zij zijn vaak afhankelijk van het openbaar vervoer en moeten de app daarom gemakkelijk kunnen gebruiken. "In het verleden konden mensen met een visuele beperking gebruikmaken van een aparte app die routes en realtime informatie beter kon voorlezen", zegt Joren Vos , Mobile Solution Engineer bij ACA Group. "Deze app was echter verouderd. Daarnaast was ook de algemene app van De Lijn aan een update toe." De oplossing Er was dus nood aan een update van zowel de gewone De Lijn app als de BLS app . Daarom werd besloten om de BLS-app en de algemene De Lijn-app te integreren in één gebruiksvriendelijke app voor iedereen. "In het nieuwe ontwerp van de app hebben we ons gefocust op eenvoudige en gebruiksvriendelijke navigatie," legt Joren uit. "We vervingen de oude complexe navigatiestructuur door een gebruiksvriendelijke navigatiebalk onderaan het scherm. We realiseerden ook een duidelijke context bij het lezen vanaf het scherm, de ondersteuning van grotere tekstgroottes en een voice-over." "We hebben ook de realtime informatie verbeterd en een filebarometer toegevoegd. Hiermee kan een reiziger zien hoe druk het is op een bepaalde bus of tram." Het resultaat Dankzij de nieuwe menustructuur maakt de vernieuwde app van De Lijn het voor iedereen veel gemakkelijker om tickets te kopen, openbaar vervoerroutes uit te stippelen en haltes en bestemmingen op te zoeken. Dankzij nieuwe functionaliteiten zoals voice-over, waarschuwingen bij het uitstappen en de ondersteuning van grotere lettergroottes kunnen ook mensen met een visuele beperking de app gemakkelijk gebruiken. Na een toegankelijkheidsonderzoek door Eleven Ways en het behalen van het vereiste label mag de app van De Lijn zich nu officieel 'toegankelijk' noemen. ⭐️ ACA website volgens Web Content Accessibility Guidelines In 2020 wilden we de ACA-website een redesign geven. Stijn Schutyser , tegenwoordig UI/UX designer bij ACA Website, was destijds als copywriter en SEO Specialist betrokken bij het project. Hij zegt: "We vinden het belangrijk om onze collega's bij elke fase van zo'n project te betrekken. Daarom hebben we tijdens de voorbereidingsfase intern een eerste voorstel gestuurd. Een van de ACA-collega's stelde voor om vanaf het begin extra aandacht te besteden aan toegankelijkheid voor mensen met een beperking. Aangezien inclusie een belangrijke focus is van ons duurzaamheidsbeleid, zijn we meteen aan de slag gegaan met dit fantastische idee." Webontwikkeling volgens internationale standaard "We besloten de website te ontwikkelen volgens de Web Content Accessibility Guidelines," legt Stijn uit. "Het was de eerste keer dat we een website volgens deze internationale standaard zouden ontwikkelen. Dat maakte het een hele uitdaging voor ons technische team: de richtlijnen bestuderen, nagaan hoe we ze het best konden implementeren, de codering, ..." "Een van de belangrijkste doelen was om de website gebruiksvriendelijk te maken voor mensen die gebruik maken van een screenreader die de tekst op een website voorleest. We hebben er bijvoorbeeld voor gezorgd dat een schermlezer met één druk op de knop direct naar de hoofdinhoud van een pagina springt, zonder de overbodige inhoud in de menubalk voor te lezen, enzovoort." Audit door Eleven Ways en AnySurfer "Na de ontwikkeling en lancering van de nieuwe website hebben we deze laten testen door Eleven Ways ," vertelt Stijn. "Zij gaven ons een aantal werkpunten mee die we moesten aanpakken om aan de richtlijnen te voldoen. Na deze aanpassingen hebben we de site laten auditen door AnySurfer met als doel het AnySurfer-label niveau AA te ontvangen. Dat label bewijst dat je website is getest door AnySurfer en dat hij voldoet aan de WCAG-standaard om te spreken van een toegankelijke website." Wist je trouwens dat de website van ACA een Lighthouse toegankelijkheidscore van 98 heeft, een bijna perfecte score. Toegankelijkheid zal ook in de toekomst een belangrijke ontwerpparameter zijn voor onze website. ⭐️ Hoe we de toegankelijkheid van PDF-bestanden verbeteren Toegankelijkheid is niet alleen belangrijk voor websites en apps. "Elk stukje content moet toegankelijk zijn voor iedereen, dus ook PDF-bestanden", zegt Ibn Renders , Lead Branding bij ACA Group. "Daarom zorgen we er bij ACA Group voor dat onze PDF-bestanden worden aangepast voor mensen met een visuele beperking die een schermlezer gebruiken." Hieronder geeft Ibn drie tips om PDF-bestanden voor iedereen toegankelijk te maken: Toegankelijkheidscontrole: Om de toegankelijkheid van onze PDF-documenten te verbeteren, gebruiken we de functie 'toegankelijkheidscontrole' van Acrobat Pro. Deze tool controleert je document en geeft aan welke dingen je moet aanpassen. Leesvolgorde: Het is belangrijk om je PDF-bestand te structureren met de juiste koppen en paragrafen. Als je dat niet doet, wordt je document één grote chaos voor mensen met een schermlezer. In Acrobat Pro kun je met de toegankelijkheidsopties eenvoudig de gewenste leesvolgorde bepalen. Alt-tekst: Schermlezers weten niet wat er op een afbeelding, audio- of video-element staat. Gelukkig kun je ze helpen door een alt-tekst toe te voegen met een korte beschrijving van het relevante audiovisuele element. Wil je meer weten over toegankelijkheid voor PDF-bestanden? Lees het blogartikel "3 eenvoudige tips om je PDF-bestanden voor iedereen toegankelijk te maken" . Conclusie In een steeds digitalere wereld moeten we ervoor zorgen dat iedereen, ook mensen met een handicap, toegang blijft houden tot online en offline digitale oplossingen en content. Als toonaangevend IT-bedrijf willen we samen met ACA Group onze verantwoordelijkheid nemen om toegankelijkheid te integreren in onze diensten, onze methodologie en onze oplossingen. We doen al veel inspanningen om dit te bereiken, maar het blijft een voortdurende inspanning om het nog beter te doen. Op zoek naar een IT-partner die u echt begrijpt? {% module_block module "widget_721f158c-b460-4017-9a15-8780ca97dc15" %}{% module_attribute "buttons" is_json="true" %}{% raw %}[{"appearance":{"link_color":"light","primary_color":"primary","secondary_color":"primary","tertiary_color":"light","tertiary_icon_accent_color":"dark","tertiary_text_color":"dark","variant":"primary"},"content":{"arrow":"right","icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"tertiary_icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"text":"Let's talk"},"target":{"link":{"no_follow":false,"open_in_new_tab":false,"rel":"","sponsored":false,"url":{"content_id":230950468795,"href":"https://25145356.hs-sites-eu1.com/en/contact","href_with_scheme":null,"type":"CONTENT"},"user_generated_content":false}},"type":"normal"}]{% endraw %}{% end_module_attribute %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 4 min

Stijn Schutyser

Enkele verschillen: de labels Shop en Shop/Upgrade zijn niet consistent, de vage labels staan op een andere plaats, zoals "Support" en "Account", "TV", "labels" en "Aanmelden" zijn soms labels en soms pictogrammen, de zoekfunctie ontbreekt in de bovenste header, alleen de eerste header had een hamburger menu. Je herkent deze situatie misschien wel: als je applicatie groeit, groeit de diversiteit aan elementen mee. Knoppen op verschillende pagina's staan net iets anders of niet precies op dezelfde plek, pictogrammen behoren niet allemaal tot dezelfde set, nieuwere formulieren volgen niet dezelfde structuur als vorige, er zijn verschillende lettertypen of -groottes voor hetzelfde doel, enzovoort. Dat is vervelend en ronduit rommelig. Het is nog erger als deze inconsistentie ervoor zorgt dat je applicatie volgens je gebruikers niet meer werkt zoals verwacht omdat er ook te weinig consistentie is in de interactiepatronen. Dit kan ertoe leiden dat gebruikers je applicatie of een deel ervan steeds minder gebruiken of er zelfs niet meer mee werken. Het belang van consistentie "Consistentie" is een belangrijke metriek die de meeste bedrijven onderschatten. Consistentie is een cruciaal onderdeel van elk bedrijf met een digitaal platform of dienst. Het zorgt niet alleen voor een gebruiksvriendelijk product, maar ook voor tal van andere voordelen, zoals: een uniforme ervaring op verschillende apparaten, correcte implementatie van branding, merkbekendheid en nog veel meer... We erkennen allemaal het belang van die consistentie, maar hoe kun je er nu voor zorgen dat je dit ook binnen je organisatie waarborgt? Wat is een 'design systeem'? Een ontwerpsysteem is een centrale plek waar alle onderdelen van een digitaal product of set van digitale producten worden beschreven . Je kunt het zien als een soort bibliotheek waarin verschillende visuele componenten zijn opgeslagen voor gebruik in je website, app of social media content. Kleur en typografie zijn primaire componenten in een design systeem, net als knoppen, formulieren, voetteksten en andere componenten. Ontwerpsysteem 'Atomus' , gratis beschikbaar binnen Figma De voordelen van een ontwerpsysteem Het gebruik van een ontwerpsysteem heeft 3 grote voordelen: het creëert meer samenhang en consistentie, het zorgt voor een hoge mate van herbruikbaarheid, en is zeer eenvoudig te gebruiken. Een ontwerpsysteem helpt bij het creëren van een consistent merkimago . Als je eenmaal een ontwerpsysteem hebt gemaakt, wordt het de "enige bron van waarheid" voor je visuele identiteit. Iedereen kan ontwerpen maken die er hetzelfde uitzien, hetzelfde aanvoelen en volgens dezelfde interactiepatronen werken. Hoge mate van herbruikbaarheid Je team kan snel nieuwe componenten ontwerpen op basis van bestaande kleinere elementen die atomen worden genoemd. Je kunt je huidige atomen dus altijd hergebruiken om nieuwe dingen te maken die meteen passen binnen het ontwerp en de look feel van je ontwerpsysteem. Snel en eenvoudig te gebruiken Bestaande of nieuwe collega's die minder ervaring hebben met UX- of UI-ontwerp kunnen helpen bij het maken van moderne, gebruiksvriendelijke en mooie interfaces. Dit versnelt het werk van uw ontwikkelaars en verhoogt uw efficiëntie! Daarnaast biedt deze efficiëntie nog een ander voordeel, namelijk dat veranderingen in uw product of dienst zeer snel kunnen worden doorgevoerd. Dit betekent dat u een veel snellere time-to-market kunt realiseren. Herkent u een of meer van deze uitdagingen? Hebben je applicaties soms last van een inconsistente werking of visuele weergave en ben je benieuwd hoe je dit kunt verhelpen met een ontwerpsysteem? Of heb je vragen over hoe je een ontwerpsysteem precies kunt inrichten om ervoor te zorgen dat je niet tegen consistentieproblemen aanloopt? Reserveer dan hieronder een gratis en vrijblijvend plekje in onze agenda voor een vraag- en antwoordsessie. Tijdens dit gesprek luisteren we graag naar je vragen en geven we je gericht advies. {% module_block module "widget_4ef2ded0-7241-4df2-939c-0070891b3837" %}{% module_attribute "buttons" is_json="true" %}{% raw %}[{"appearance":{"link_color":"light","primary_color":"primary","secondary_color":"primary","tertiary_color":"light","tertiary_icon_accent_color":"dark","tertiary_text_color":"dark","variant":"primary"},"content":{"arrow":"right","icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"tertiary_icon":{"alt":null,"height":null,"loading":"disabled","size_type":null,"src":"","width":null},"text":"Book Q A session with an expert"},"target":{"link":{"no_follow":false,"open_in_new_tab":true,"rel":"noopener","sponsored":false,"url":{"content_id":null,"href":"https://calendly.com/q-and-a-session/boek-een-q-a-sessie-met-onze-expert-clone?month=2022-11","href_with_scheme":"https://calendly.com/q-and-a-session/boek-een-q-a-sessie-met-onze-expert-clone?month=2022-11","type":"EXTERNAL"},"user_generated_content":false}},"type":"normal"}]{% endraw %}{% end_module_attribute %}{% module_attribute "child_css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "css" is_json="true" %}{% raw %}{}{% endraw %}{% end_module_attribute %}{% module_attribute "definition_id" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "field_types" is_json="true" %}{% raw %}{"buttons":"group","styles":"group"}{% endraw %}{% end_module_attribute %}{% module_attribute "isJsModule" is_json="true" %}{% raw %}true{% endraw %}{% end_module_attribute %}{% module_attribute "label" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "module_id" is_json="true" %}{% raw %}201493994716{% endraw %}{% end_module_attribute %}{% module_attribute "path" is_json="true" %}{% raw %}"@projects/aca-group-project/aca-group-app/components/modules/ButtonGroup"{% endraw %}{% end_module_attribute %}{% module_attribute "schema_version" is_json="true" %}{% raw %}2{% endraw %}{% end_module_attribute %}{% module_attribute "smart_objects" is_json="true" %}{% raw %}null{% endraw %}{% end_module_attribute %}{% module_attribute "smart_type" is_json="true" %}{% raw %}"NOT_SMART"{% endraw %}{% end_module_attribute %}{% module_attribute "tag" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "type" is_json="true" %}{% raw %}"module"{% endraw %}{% end_module_attribute %}{% module_attribute "wrap_field_tag" is_json="true" %}{% raw %}"div"{% endraw %}{% end_module_attribute %}{% end_module_block %}

Leestijd 6 min

Davy Steegen

Heb je ooit gehoord van de BroadcastChannel API? Wij een paar weken geleden ook niet. We stuitten er toevallig op na een zoektocht naar een oplossing waarmee we konden communiceren tussen verschillende browservensters van dezelfde oorsprong. In deze blogpost bespreken we de API zelf en leren we je hoe je de BroadcastChannel API kunt gebruiken binnen een Angular-applicatie. De BroadcastChannel API Stel je voor dat je een webpagina hebt geopend in meerdere tabbladen, en je wilt communiceren tussen deze tabbladen om ze up-to-date te houden. Hoe zou je dat moeten doen? Na wat speurwerk op internet kwamen we de BroadcastChannel API tegen die rechtstreeks in webbrowsers is geïmplementeerd. Het blijkt dat deze API al sinds 2015 beschikbaar is. Mozilla Firefox 38 was de eerste browser die de specificatie overnam. In de loop van de volgende jaren volgden andere browsers Mozilla's voorbeeld. Bekijk de demo hieronder om een voorbeeld te zien van wat er allemaal mogelijk is met deze technologie. Hoewel het een erg eenvoudige demo is, laat het toch de ware kracht van de BroadcastChannel API zien. In dit voorbeeld wordt de teller in sync gehouden tussen de twee vensters. Het is misschien geen typisch voorbeeld uit de echte wereld, maar je zou de API kunnen gebruiken om : een gebruiker uit te loggen van een applicatie die in meerdere browsertabbladen draait, een winkelwagentje in een ander browsertabblad synchroon te houden , en gegevens in andere tabbladen te verversen . De BroadcastChannel is in feite een gebeurtenisbus met een producent en een of meer consumenten van de gebeurtenis: Hoe een BroadcastChannel opzetten Een BroadcastChannel maken Het aanmaken van een BroadcastChannel is heel eenvoudig. Je hoeft geen bibliotheken te importeren in je code. Je hoeft alleen maar de constructor aan te roepen met een String die de naam bevat van het kanaal dat moet worden aangemaakt. const broadcastkanaal = nieuw Broadcastkanaal('demo-broadcast-kanaal'); Een bericht verzenden Nu we een kanaal hebben opgezet, kunnen we het gebruiken om berichten te posten. Het posten van een bericht kan worden gedaan door het aanroepen van postMessage op het BroadcastChannel dat je eerder hebt gemaakt. this.counter++; broadcastChannel.postMessage({type: 'counter', teller: this.counter }); } De postMessage kan allerlei objecten als bericht aannemen. Je kunt in principe alles versturen wat je wilt , zolang de consumer maar weet hoe hij met de ontvangende objecten om moet gaan. Het is echter een goed gebruik om een veld in je berichten te hebben dat het type bericht beschrijft. Dit maakt het eenvoudiger om je te abonneren op berichten van een specifiek type in plaats van een BroadcastChannel per type bericht. Een bericht ontvangen Aan de consumentenkant moet je een BroadcastChannel maken met dezelfde naam als aan de producentenkant. Als de namen niet overeenkomen, zul je (uiteraard) geen berichten ontvangen. Vervolgens moet je de onmessage callback implementeren. const broadcastChannel = new BroadcastChannel('demo-broadcast-channel'); this.broadcastChannel.onmessage = (message) = { console.log('Bericht ontvangen', message); } Het BroadcastChannel dat een bericht plaatst zal het bericht zelf niet ontvangen, zelfs als het een luisteraar geregistreerd heeft. Echter, als je een aparte BroadcastChannel instantie aanmaakt voor het posten en consumeren van berichten, dan zal het browservenster dat het bericht gepost heeft het bericht ontvangen . Dat is waarschijnlijk niet iets wat je wilt. Om dit te vermijden, is het de beste gewoonte om een singleton instantie per BroadcastChannel aan te maken. Een herbruikbare BroadcastService maken Je wilt niet overal in je code waar je berichten moet produceren/consumeren naar de BroadcastChannel API verwijzen. Laten we in plaats daarvan een herbruikbare service maken die de logica inkapselt. Op die manier hoef je, als je ooit het BroadcastChannel wilt vervangen door een andere API, slechts één service aan te passen. import {Observable, Subject} from 'rxjs'; import {filter} from 'rxjs/operators'; interface BroadcastMessage { type: string; payload: any; } export class BroadcastService { private broadcastChannel: BroadcastChannel; private onMessage = new Subject any (); constructor(broadcastChannelName: string) { this.broadcastChannel = new BroadcastChannel(broadcastChannelName); this.broadcastChannel.onmessage = (message) = this.onMessage.next(message.data); } publish(message: BroadcastMessage): void { this.broadcastChannel.postMessage(message); } messagesOfType(type: string): Observable BroadcastMessage { return this.onMessage.pipe( filter(message = message.type === type) ); } } In deze specifieke service hebben we goed gebruik gemaakt van RxJS Observables. Let goed op de messagesOfType functie : in dit geval hebben we de standaard RxJS filter operator gebruikt om alleen de berichten te retourneren die overeenkomen met het opgegeven type. Mooi en eenvoudig! De service is bijna klaar voor gebruik in je Angular-applicatie. Er is nog één uitdaging die je moet aangaan. Werken in de Angular-zone Als je Angular al een tijdje gebruikt, ken je waarschijnlijk de Angular Zone . Code die binnen de Angular Zone draait, zal automatisch de wijzigingsdetectie activeren. De bovenstaande service draait niet in de Angular zone, omdat het een API gebruikt die niet in Angular haakt. Als het een bericht ontvangt en de interne status van een component bijwerkt, is Angular hier niet onmiddellijk van op de hoogte. Dat betekent dat je de wijzigingen niet onmiddellijk terugziet in de browser. Pas nadat de volgende wijzigingsdetectie is geactiveerd, zullen de resultaten zichtbaar zijn in de browser. Om dit probleem te omzeilen, kun je een aangepaste RxJS OperatorFunction maken. Het enige doel van de OperatorFunction is om ervoor te zorgen dat elke levenscyclushaak van een Observable wordt uitgevoerd in de Angular Zone. import { Observable, OperatorFunction } from 'rxjs'; import { NgZone } uit '@angular/core'; /** * Aangepaste OperatorFunction die ervoor zorgt dat alle levenscyclushaken van een Observable * worden uitgevoerd in de NgZone. */ exportfunctie runInZone T (zone: NgZone): OperatorFunction T, T { return (source) = { return new Observable(observer = { const onNext = (value: T) = zone.run() = observer.next(value)); const onError = (e: any) = zone.run() = observer.error(e)); const onComplete = () = zone.run() = observer.complete()); return source.subscribe(onNext, onError, onComplete); }); }. NgZone is een door Angular geleverd object dat je kunt gebruiken om code programmatisch uit te voeren binnen Angular's zone. Het enige dat overblijft is het gebruiken van de bovenstaande OperatorFunction in onze BroadcastService. ... import {runInZone} from './run-in-zone'; export class BroadcastService { ... constructor(broadcastChannelName: string, private ngZone: NgZone) { this.broadcastChannel = new BroadcastChannel(broadcastChannelName); this.broadcastChannel.onmessage = (message) = this.onMessage.next(message.data); } ... messagesOfType(type: string): Observable BroadcastMessage { return this.onMessage.pipe( // Het is belangrijk dat we in de NgZone draaien. Dit zorgt ervoor dat Angular-componentwijzigingen onmiddellijk zichtbaar zijn in de browser wanneer ze worden bijgewerkt na het ontvangen van berichten. runInZone(this.ngZone), filter(message = message.type === type) ); } }. Na het bijwerken van de service zijn wijzigingen direct zichtbaar bij het ontvangen van berichten. De service injecteren Je kunt Angular's InjectionToken gebruiken om een singleton instantie van de service te maken. Declareer het InjectionToken: export const DEMO_BROADCAST_SERVICE_TOKEN = new InjectionToken BroadcastService ('demoBroadcastService', { factory: () = { return new BroadcastService('demo-broadcast-channel'); }, }); Injecteer de service via het InjectionToken: constructor(@Inject(DEMO_BROADCAST_SERVICE_TOKEN) private broadcastService: BroadcastService) { } Wordt de BroadcastChannel API overal ondersteund? Je moet het volgende in gedachten houden als je de BroadcastService gebruikt. Het werkt alleen als alle browservensters op dezelfde host en poort draaien, alle browservensters hetzelfde schema gebruiken ( het zal niet werken als één app is geopend met https en de andere met http), de browservensters niet in incognitomodus zijn geopend , en de browservensters zijn geopend in dezelfde browser ( er is geen cross-browser compatibiliteit). Alle moderne browsers ondersteunen de BroadcastChannel API, behalve Safari en Internet Explorer 11 (en lager). Kijk voor een volledige lijst met compatibele browsers op Caniuse . Als je een vergelijkbare oplossing moet implementeren in browsers die niet worden ondersteund, kun je in plaats daarvan de LocalStorage van de browser gebruiken. Afhaalmaaltijden In deze blogpost hebben we kort beschreven hoe je gebruik kunt maken van de BroadcastChannel API van de browser in een Angular-applicatie. We hebben ook gekeken naar een oplossing voor het koppelen van de API aan Angular's Zone. Je kunt de volledige code van de demo vinden op Stackblitz . Bovendien kun je de BroadcastChannel API documentatie raadplegen op MDN Web Docs .

Leestijd 10 min

Dorien Jorissen

Tegenwoordig vinden we heel veel van de functionaliteit die vroeger in de backend werd afgehandeld nu in de frontend. Ik laat je als frontend designer zien hoe je een simpele SPA (Single Page Application) kunt creëren zonder gedoe met onderhoud in de backend. Wat maken we? We maken een eenvoudige CRUD (Create, Read, Update, Delete) applicatie in de vorm van een notitie app. Voor deze demo gebruiken we: VueJS CLI , VueRouter , ElementUI en Google Firebase . Houd er rekening mee dat dit deel één is van een blogpostserie . In dit deel gaan we Firebase opzetten, VueJS lokaal installeren via de command line interface, de nodige views aanmaken en de routing instellen. Onze databaseverbinding wordt beperkt tot 'alleen lezen'. Het aanmaken, bijwerken en verwijderen van notities via onze app zal binnenkort beschikbaar zijn in deel twee van de blogpostserie. Waarom VueJS? Er zijn veel frameworks en technologieën die geschikt kunnen zijn voor dit project, dus de keuze voor VueJS is een persoonlijke voorkeur. Ik heb VueJS boven andere frameworks gekozen omdat: VueJS maakt gebruik van HTML templates, waardoor het veel leesbaarder aanvoelt dan bijvoorbeeld JSX in React. De leercurve is veel acceptabeler voor frontend ontwikkelaars die meer naar design neigen dan naar backend ontwikkeling, wat goed past bij ons creatieve team bij ACA. Componenten in één bestand (HTML/CSS/JS) en hun grote herbruikbaarheid. Het wordt geleverd met een geïntegreerde state manager (vuex) en router (vue-router) in plaats van afhankelijk te zijn van externe bibliotheken zoals bijvoorbeeld redux. Het is lichtgewicht en gemakkelijk te integreren in bestaande projecten. Angular alleen is enorm en heeft een behoorlijk steile leercurve. De aanpak van React voelt voor mij gewoon veel te rommelig. Aan de andere kant heeft het ook wat nadelen: Het is minder aangepast in het Westen. VueJS is gemaakt door Evan You, een voormalige Google-ingenieur. Evan heeft Chinese roots, en VueJS heeft veel marktaandeel in China. Het kan voorkomen dat je wat Chinese documentatie tegenkomt als je op zoek bent naar addons van derden. Er zijn niet zoveel VueJS banen / ontwikkelaars beschikbaar in Europa, hoewel er steeds meer kennis over het framework beschikbaar komt. Het wordt (nog) niet ondersteund / overgenomen door een multinational, als je dat belangrijk vindt. Maar het heeft veel Github-bijdragen van veel mensen die gewoon van VueJS houden. Het was vorig jaar het #1 meest gewaardeerde project op Github. Waarom Firebase? Firebase is een geweldige service waarmee je je kunt richten op wat het belangrijkst is: het maken van fantastische gebruikerservaringen. Firebase gebruiken betekent dat je geen servers hoeft te beheren of API's hoeft te schrijven. Firebase kan je hosting, authenticatietool, API en datastore zijn. Het kan worden aangepast aan veel van je behoeften en bovendien kan het perfect meeschalen met je project als het in de loop van de tijd groeit. Het 'Spark'-plan, dat helemaal gratis is, biedt je tot 100 gelijktijdige verbindingen, 1GB opslag en een downloadlimiet van 10GB. Genoeg voor een klein project, startups of voor indie-ontwikkelaars die hun idee(ën) gevalideerd willen hebben. De applicatie maken Afhankelijk van je vaardigheidsniveau duurt het ongeveer 30 tot 60 minuten om de volgende stappen uit te voeren. Stap 1: Onze Firebase-omgeving opzetten Ga naar https://firebase.google.com/ en meld je aan met je Google-account. Zodra dat gedaan is, ga je naar de Firebase console en maak je een nieuw project aan. Ik heb het mijne 'FireNotes' genoemd. Omdat we de Firestore-database gaan gebruiken, ga je naar het tabblad 'Database' in de zijbalk onder de sectie 'Ontwikkelen' en schakel je databasegebruik in testmodus* in, zoals hieronder te zien is. * Belangrijke opmerking: dit geeft iedereen toegang tot je database. Als je van plan bent een project uit te brengen met Firebase, verdiep je dan in de documentatie over databaserechten en stel het goed in. Laten we nu wat notities toevoegen aan onze database. Voeg een nieuwe collectie toe en noem deze 'notes'. Dit wordt de bovenliggende verzameling waar al onze notities in staan. Vul deze met een aantal dummy notities zoals in de schermafbeelding hieronder, met een automatische ID, postdatum, titel en inhoud: Stap 2: Ons VueJS Project opzetten Redelijk eenvoudig tot nu toe, toch? Laten we nu de focus verleggen naar onze applicatie. Open je console en navigeer naar je projecten map. Ervan uitgaande dat je NPM al geïnstalleerd hebt, installeer je Vue CLI via het volgende commando: npm install -g @vue/cli Standaard Laten we vervolgens je project opstarten met het volgende commando: vue create firenotes Standaard Dit vraagt je om een keuze voor standaard of handmatige voorinstelling. Laten we nu beginnen met de standaard optie met NPM. Ga na de installatie naar je map firenotes en start je webserver met het volgende commando: npm run serve Standaard Als u naar het opgegeven IP-adres navigeert (normaal gesproken localhost:8080), ziet u de standaard 'hello world'-weergave die Vue biedt: Stap 3: De hoofdlay-out maken Laten we nu visualiseren hoe onze applicatie eruit zou moeten zien. Ik ga in deze blogpost niet door de styling details heen, dus ik gebruik de ElementUI kit om de dingen te versnellen. # In je ~/projects/appname map npm install element-ui -S Standaard Ga naar /src/main.js en voeg de ElementUI imports toe en registreer het in onze VueJS app, direct onder de 'import Vue' zoals hieronder getoond: import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Standaard Nu kunnen we ElementUI componenten gaan gebruiken in onze sjablonen. Ik heb het Vue-logo vervangen door mijn eigen logo (hier te downloaden ) en het App.vue-sjabloon als volgt gewijzigd: template div id="app" el-container el-header img class="logo" src="./assets/logo.png" / /el-header el-container el-aside width="300px" el-menu default-active="home" class="el-menu-vertical-demo" el-menu-item index="home" i class="el-icon-menu" /i span Home /span /el-menu-item el-menu-item index="notes" i class="el-icon-document" /i span Notes /span /el-menu-item /el-menu . /el-aside el-main h1 Welkom bij FireNotes /h1 p Een eenvoudige CRUD-toepassing (Create, Read, Update, Delete) in de vorm van een notitie-app. /p p Voor deze toepassing gebruiken we: VueJS CLI, VueRouter, ElementUI en Google Firebase. /p /el-main /el-container /el-container /div /template script export default {naam: 'App' } } /script style html, body { margin: 0; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } .el-header { border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; width: 100%; } .el-header button { float: right; } .el-menu-item { border-bottom: 1px solid #e6e6e6; } .logo { max-width: 50%; max-height: 50%; margin-right: auto; } /style Standaard Zo ziet het eruit: Stap 4: Onze routes instellen Tot zover alles goed! Vervolgens kunnen we vue-router installeren, wat de officiële VueJS router is. Het integreert diep met de kern van je VueJS-applicatie, waardoor single page-applicaties een fluitje van een cent worden. Met vue-router kunnen we navigeren naar onze notitiepagina, die we later zullen instellen. # In je ~/projects/appname map npm install vue-router Standaard Net als ElementUI moet de vue-router worden geïmporteerd en geregistreerd binnen onze VueJS app. Ga naar main.js en vervang deze door de volgende code: import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) import VueRouter from 'vue-router' Vue.use(VueRouter) import App from '@/App' import HelloWorld from '@/components/HelloWorld' import Notes from '@/components/Notes' const routes = [ { path: '*', redirect: '/home' }, { path: '/', redirect: '/home' }, { path: '/home', name: 'HelloWorld', component: HelloWorld }, { path: '/notes', name: 'Notes', component: Notes }, ] const router = new VueRouter({routes }) new Vue({ el: '#app', router: router, render: h = h(App), components: { App } }) Standaard Wat is hier gebeurd? In principe hebben we de URL's van onze twee navigatie-items gespecificeerd en ze toegewezen aan twee verschillende componenten. We hebben ook regels toegevoegd om automatisch naar de homepage te gaan bij het laden of wanneer een URL een niet-geregistreerde route triggert. Last but not least hebben we de routes geregistreerd via 'new VueRouter', die nu is ingebed in de kern van onze applicatie omdat deze wordt doorgegeven aan onze 'new Vue'-instantie. Dit opslaan zal waarschijnlijk wat fouten veroorzaken, omdat we nog niets gedaan hebben aan de Notes component. Laten we een eenvoudig Notes.vue-bestand maken in de map components. template div class="notes" Notities komen hier /div /template script export default {naam: 'Notes' } /script Standaard Vervolgens moeten we ervoor zorgen dat onze app de juiste onderdelen weergeeft op basis van deze gespecificeerde routes. Dit vereist enkele wijzigingen in ons App.vue-bestand voor zowel de navigatie als het inhoudspaneel (el-main). template div id="app" el-container el-header img class="logo" src="./assets/logo.png" / /el-header el-container el-aside width="300px" el-menu default-active="home" :router="true" class="el-menu-vertical-demo" el-menu-item index="home" i class="el-icon-menu" /i span Home /span /el-menu-item el-menu-item index="notes" i class="el-icon-document" /i span Noten /span /el-menu-item /el-menu /el-aside el-main router-view/ /el-main /el-container /el-container /div /template script export default {naam : 'App' } } /script style html, body { margin : 0 ; } #app { font-family : 'Avenir' , Helvetica , Arial , sans-serif ; -webkit-font-smoothing : antialiased ; -moz-osx-font-smoothing : grayscale ; color : #2c3e50 ; } . el-header { border-bottom : 1px solid #e6e6e6 ; display : flex ; align-items : center ; width : 100% ; } . el-header button { float : right ; } . el-menu-item { border-bottom : 1px solid #e6e6e6 ; } . logo { max-width : 50% ; max-height : 50% ; margin-right : auto ; } /style CSS Hier hebben we router="true" toegevoegd aan het component, waardoor de 's indexen kunnen worden gebruikt als 'pad' om de route-actie te activeren. We hebben ook de introductiekop en paragrafen verplaatst naar HelloWorld.vue (dat zou jij ook moeten doen ;-)) en vervangen door router-view/ . Nu is de router volledig verantwoordelijk voor welk component wordt weergegeven in dat paneel. Geweldig! Vervolgens gaan we Notes.vue aanpassen om daadwerkelijk notities weer te geven. Voorlopig is alle inhoud statisch. Later zullen we de notitietabel vullen met gegevens uit onze Firestore-database. template div class="notes" h1 Notities el-button type="primary" size="medium" i class="el-icon-circle-plus" /i Notitie toevoegen /el-button /h1 el-table :data="tableData" border el-table-column type="expand" template slot-scope="props" p {{ props.row.details }} /p /template /el-table-column el-table-column label="Note title" template slot-scope="props" {{ props.row.name }} /template /el-table-column el-table-column label="Datum toegevoegd/gewijzigd" prop="date" /el-table-column el-table-column fixed="right" label="" width="90" template slot-scope="scope" el-button type="info" size="small" icon="el-icon-edit" circle /el-button el-button type="danger" size="small" icon="el-icon-delete" circle style="margin-left: 5px;" /el-button /template /el-table-column /el-table /div /template script export default {naam: 'Notities', data() {retour {tableData: [ {datum : '2018-07-03' , naam : 'Lorem ipsum dolor sit amet' , details : 'Lorem Ipsum is simpelweg dummytekst van de druk- en zetindustrie. Lorem Ipsum is al de standaard dummytekst van de industrie sinds de jaren 1500, toen een onbekende drukker een lettergalei nam en deze door elkaar husselde om er een specimenboek van te maken." } }, {datum : "2018-07-02" , naam : "Consectetur adipiscing" , details : 'Lorem Ipsum is simpelweg dummytekst van de druk- en zetindustrie. Lorem Ipsum is de standaard dummytekst van de industrie sinds de jaren 1500, toen een onbekende drukker een proefdruk nam en deze door elkaar husselde om een proefdrukboek te maken.' }] }; } /script style h1 { margin-top : 0 ; display : flex ; align-items : center ; width : 100% ; } .el-button { margin-left : auto ; } .el-collapse-item__header { font-size : 16px ; } .el-table { font-size : 14px ; font-weight : 700 ; } .el-table__expanded-cell p { font-size : 16px ; font-weight : 400 ; } .el-table th { background : #fafafa ; } .el-table th .cell { color : #333 ; } /style CSS Zo ziet het eruit: Stap 5: Firebase koppelen aan ons project Geweldig! Nu staat alles klaar om de statische applicatie om te zetten naar een Firestore data driven applicatie. Laten we de afhankelijkheden installeren om verbinding te maken met Firebase: # In je ~/projects/appname map npm install firebase Standaard import firebase from 'firebase' import 'firebase/firestore' firebase.initializeApp({ apiKey: '', projectId: '' }) export const db = firebase.firestore() const settings = { timestampsInSnapshots: true } db.settings(settings) Standaard Hier moet je nog de 'apiKey' en 'projectId' invullen, die je kunt vinden onder de link Projectinstellingen via het tandwiel: Ga vervolgens naar het Notes.vue component waar we de statische array van notities leegmaken en vullen met de notities die we eerder in onze Firestore database hebben aangemaakt. We hebben ook een lege tekst op de tabel gedefinieerd, die zal worden getoond terwijl er gegevens in onze tabel worden geladen. template div class="notes" h1 Notities el-button type="primary" size="medium" i class="el-icon-circle-plus" /i Notitie toevoegen /el-button /h1 el-table :data="tableData" empty-text="Bezig met laden, of geen records te tonen." border el-table-column type="expand" template slot-scope="props" p {{ props.row.content }} /p /template /el-table-column el-table-column label="Note title" template slot-scope="props" {{ props.row.title }} /template /el-table-column el-table-column label="Datum toegevoegd/gewijzigd" prop="date" /el-table-column el-table-column fixed="right" label="" width="90" template slot-scope="scope" el-button type="info" size="small" icon="el-icon-edit" circle /el-button el-button type="danger" size="small" icon="el-icon-delete" circle style="margin-left: 5px;" /el-button /template /el-table-column /el-table /div /template script import { db } from '@/main' export default {naam: 'Notes', data() { return { tableData : [] } } , created () { db.collection('notes').get().then(querySnapshot = { querySnapshot.forEach(doc = { const data = { ' id' : doc.id , ' date' : doc. data ( ) .date , ' title' : doc. data ( ) .title , ' content' : doc. data ( ) .content } this.tableData. push ( data ) }) } /script style h1 { margin-top : 0 ; display : flex ; align-items : center ; width : 100% ; } .el-button { margin-left : auto ; } .el-collapse-item__header { font-size : 16px ; } .el-table { font-size : 14px ; font-weight : 700 ; } .el-table__expanded-cell p { font-size : 16px ; font-weight : 400 ; } .el-table th { background : #fafafa ; } .el-table th .cell { color : #333 ; } /style CSS Dit zorgt ervoor dat de notities die we eerder handmatig hebben toegevoegd in onze Firestore-database te zien zijn in onze applicatie, waardoor deze iets minder statisch wordt. Geweldig succes! Hoe nu verder? In onze vervolg blogpost over dit onderwerp gaan we verder in op de overige functionaliteiten: het aanmaken, bijwerken en verwijderen van notities in onze Firebase database, volledig aangestuurd door onze VueJS app. Omdat we in de comments een vraag kregen over inlogfunctionaliteit, hebben we die ook toegevoegd als bonus!