{"id":3155,"date":"2019-07-02T12:11:34","date_gmt":"2019-07-02T10:11:34","guid":{"rendered":"https:\/\/www.opencirclesolutions.nl\/?p=3155"},"modified":"2019-07-02T12:11:34","modified_gmt":"2019-07-02T10:11:34","slug":"reactieve-web-applicatie-bouwen-met-vert-x-3","status":"publish","type":"post","link":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/","title":{"rendered":"Een reactieve web applicatie bouwen met Vert.x – deel 3"},"content":{"rendered":"

[et_pb_section bb_built=”1″ admin_label=”header met foto + titel (automatisch gegenereerd)” _builder_version=”3.22.7″ _dynamic_attributes=”background_image” background_image=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9mZWF0dXJlZF9pbWFnZSIsInNldHRpbmdzIjp7fX0=@” custom_padding=”300px||50px||false|false” next_background_color=”#ffffff” global_module=”953″][et_pb_row global_parent=”953″ custom_padding=”0|0px|0|0px|false|false” custom_margin=”||-100px” _builder_version=”3.25″ width=”72%” max_width=”72%” use_custom_width=”on” width_unit=”off” custom_width_percent=”72%” locked=”off” column_structure=”3_5,2_5″][et_pb_column type=”3_5″ global_parent=”953″ _builder_version=”3.0.47″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_post_title admin_label=”Module” global_parent=”953″ meta=”off” featured_image=”off” _builder_version=”3.22.7″ title_text_color=”#ffffff” title_font_size=”36px” background_color=”rgba(85,84,73,0.8)” custom_padding=”20px|20px|20px|20px|true|true” custom_padding_tablet=”10px|10px|10px|10px|true|true” custom_padding_last_edited=”on|phone” z_index_tablet=”500″ title_font_size_tablet=”30px” title_font_size_phone=”20px” title_font_size_last_edited=”on|phone” locked=”off” \/][\/et_pb_column][et_pb_column type=”2_5″ global_parent=”953″ _builder_version=”3.0.47″ custom_padding=”|||” custom_padding__hover=”|||”][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Content blogartikel” _builder_version=”3.22.3″ max_width=”80%” module_alignment=”center” custom_margin=”50px||50px||true” prev_background_color=”#000000″ next_background_color=”#000000″][et_pb_row custom_padding=”0|0px|27px|0px|false|false” _builder_version=”3.22.7″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” z_index_tablet=”500″][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding__hover=”|||” custom_padding=”|||”][et_pb_text admin_label=”Intro” _builder_version=”3.25.2″ header_2_text_color=”#bab9b3″ header_2_line_height=”1.4em” z_index_tablet=”500″ text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]<\/p>\n

Voorwoord<\/h3>\n

In deze laatste aflevering gaan we de front-end en een aantal onderdelen van de back-end verder implementeren. De backend stelt ons inmiddels in staat om site statistieken te importeren en te verrijken met weerdata uit een weerstation ergens in Nederland (De Bilt).<\/p>\n

Nu gaan we deze data opslaan in een gebruikerssessie en voeden aan onze webpagina zodat we grafieken van de data kunnen maken. Ook gaan we de data pagineren zodat we in de webpagina heen en weer kunnen \u201cscrollen\u201d tussen de pagina\u2019s.<\/p>\n

De code voor deze aflevering is te vinden in:<\/p>\n

https:\/\/github.com\/Piepers\/site-analytics\/tree\/episode-3<\/a><\/p>\n

Voor deze aflevering is weer behoorlijk wat code geproduceerd dus, net zoals in de vorige aflevering, nodig ik je uit om de code uit te checken en zelf te bestuderen, aan de hand van dit artikel.<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”Broodtekst” _builder_version=”3.25.2″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” z_index_tablet=”500″ text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]<\/p>\n

De backend voorbereiden<\/h3>\n

Omdat we de pagina gaan uitbreiden met functionaliteit voor het tonen van een grafiek en het pagineren van data voor deze grafiek, gaan we een aantal dingen voorbereiden in de backend om dit mogelijk te maken.<\/p>\n

Sessies<\/h3>\n

In de HttpServerVerticle slaan we sessies op met de verrijkte statistieken die de gebruiker heeft geladen. We hebben hiervoor een instantie van de klasse LocalSessionStore nodig uit de Vert.x web module. Deze declareren we in de HttpServerVerticle.<\/p>\n

Op regel 40 zie je:<\/p>\n

private LocalSessionStore sessionStore;<\/pre>\n
En vervolgens in de init() method van HttpServerVerticle:<\/p>\n
sessionStore = LocalSessionStore.create(rxVertx);<\/p>\n
Om het gebruik van sessies verder te activeren hebben we een CookieHandler en een SessionHandler nodig. In de start() methode van HttpServerVerticle maken we deze aan en koppelen we ze aan de router:<\/p>\n
SessionHandler sessionHandler = SessionHandler.create(sessionStore);<\/pre>\n
router.route().handler(CookieHandler.create());
router.route().handler(sessionHandler::handle);<\/pre>\n
De routering van deze handlers moet aan het begin staan van de configuratie van de router.<\/p>\n
Het valt je mogelijk op dat we naast de sessionStore ook nog een variabele localStatisticsStore hebben gedeclareerd in de HttpServerVerticle. In deze Map houden we de sessie-ids bij met de bijbehorende representatie van verrijkte statistieken zodat we kunnen pagineren. Hierover later meer.<\/p>\n
Omdat de SessionStore wordt bijgehouden door Vert.x moeten we de localStatisticsStore wel periodiek opruimen. We gebruiken hiervoor een timer functionaliteit die standaard bij Vert.x zit:<\/p>\n
rxVertx
.setPeriodic(THREE_MINUTES, handler -> {
   (implementatie)
}<\/pre>\n
Mocht je interesse hebben in de details van de implementatie van deze timer: je vindt deze in regel 119 en verder in de HttpServerVerticle.<\/p>\n
Routering<\/h3>\n
Vanaf regel 90 in de HttpServerVerticle hebben we een aantal end-points toegevoegd voor het pagineren van de statistieken. Momenteel hebben we de service zodanig ge\u00efmplementeerd dat we maximaal een jaar aan statistieken kunnen inladen en daarbij zoeken we de bijbehorende weerdata. Een jaar is natuurlijk veel te veel om in \u00e9\u00e9n keer in een grafiek te tonen, dus we bieden de mogelijkheid om te pagineren. Je ziet vanaf regel 90:<\/p>\n
subRouter.get(\"\/statistics\/current\").handler(this::getLatestSiteStatistics);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 
subRouter.get(\"\/statistics\/first\").handler(this::first);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 
subRouter.get(\"\/statistics\/next\").handler(this::next);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 
subRouter.get(\"\/statistics\/previous\").handler(this::previous);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 
subRouter.get(\"\/statistics\/last\").handler(this::last);<\/pre>\n
De implementatie van de end-points zorgt voor de paginering van de gegevens. Die implementatie gaan we kort bekijken in \u00e9\u00e9n van de volgende paragrafen.<\/p>\n
Uitbreiding op de import<\/h3>\n
De grafiek zal de data tonen per uur. De x-as bevat de uren waarbij we per middernacht een tekst willen die een nieuwe dag aanduidt en vervolgens per uur een waarde op de y-as voor de temperatuur en het aantal bezoekers. We krijgen dus twee lijnen (en kunnen dit later eenvoudig uitbreiden met de aanwezige data) in de grafiek zoals we later in het artikel zullen zien.<\/p>\n
Om de grafiek te voorzien van data gaan we hetgeen we hebben ge\u00efmporteerd en verrijkt met weerdata omzetten naar een pagineerbare representatie waarbij we het voor de front-end ook makkelijk maken om de data in de grafiek te plaatsen. Verder bieden we de mogelijkheid om te pagineren.<\/p>\n
De logica voor dit alles zit in de SiteStatisticsDto klasse. Nadat we de gegevens hebben opgehaald en verrijkt maken we een instantie aan van de SiteStatisticsDto klasse met de verkregen SiteStatistics. We hebben hiertoe de importHandler() methode uitgebreid. Deze methode hebben we in de vorige afleveringen ook al gezien. Als we inzoomen op de implementatie waar het omzetten van de gegevens naar de SiteStatisticsDto gebeurt dan zien we vanaf regel 247 het volgende (dikgedrukt de meest relevante code):<\/p>\n
[\/et_pb_text][et_pb_image align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.25.2″ z_index_tablet=”500″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” src=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/07\/Vertx-Episode-3-afbeelding-1-1.png”]<\/p>\n
[\/et_pb_image][et_pb_text admin_label=”Broodtekst” _builder_version=”3.25.2″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” z_index_tablet=”500″ text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]<\/p>\n
Dit is nogal een verschil met wat we in aflevering 2 zagen. Toen stond er namelijk nog:<\/p>\n
vertx
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.eventBus()
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .<JsonObject>rxSend(\"file-upload\", jsonObject)
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .subscribe(message -> LOGGER.debug(\"Imported response: {}\",
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message.body()
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .encode()),
 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throwable -> LOGGER.error(\"Something went wrong while importing the file.\", throwable));<\/pre>\n
Destijds zonden we een bericht naar het event-bus adres: \u201cfile-upload\u201d. De ImportProcessVerticle verwerkte het bestand en hetgeen we terugkregen toonden we ter voorbeeld in het log bestand.<\/p>\n
\u00a0Wat gebeurt er allemaal in de nieuwe versie?<\/p>\n
    \n
  1. Eerst halen we de SiteStatistics op uit het antwoord van de ImportProcessVerticle (just(new SiteStatistics(message.body))))<\/li>\n
  2. De SiteStatisticsDto heeft een factory method \u2018fromOrderedStatistics\u2019 waarmee het de statistieken omzet naar een pagineerbare representatie.<\/li>\n
  3. We roepen een methode aan (.first()) die naar de eerste pagina gaat.<\/li>\n
  4. De dto voegen we toe aan de eerdergenoemde Map zodat we bij een latere request de session id kunnen correleren aan de dto die bij die sessie hoort.<\/li>\n
  5. De eerste pagina (verkregen uit de aanroep naar first()) wordt naar de front-end verzonden.<\/li>\n<\/ol>\n
    Paginering<\/h3>\n
    De logica voor het pagineren van de statistieken heeft niets met Vert.x te maken aangezien het slechts logica bevat om op basis van de gegevens per dag te pagineren. We gaan op de logica zelf dan ook niet heel diep in.<\/p>\n
    Wat wel interessant is om te melden is dat het object uiteindelijk JSON-informatie teruggeeft. Hiertoe hebben we de OneDayStatisticsDto klasse geannoteerd met @DataObject zodat we het object makkelijk kunnen transformeren naar een json repsentatie. De SiteStatisticsDto klasse bevat een getPageAsJson() methode om de Json representatie van een pagina aan te vullen met wat handige velden (deze dag-representatie zit dus in de OneDatStatisticsDto):<\/p>\n
    JsonArray result = new JsonArray(this.currentPage);
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return new JsonObject()
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .put(\"count\", statistics.size())
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .put(\"startKey\", keyFormatter.format(this.startKey))
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .put(\"endKey\", keyFormatter.format(this.endKey))
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .put(\"sop\", keyFormatter.format(this.sop))
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0.put(\"eop\", keyFormatter.format(this.eop))
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .put(\"page\", result);<\/pre>\n
    Voor de rest van de logica zou je in de code kunnen kijken.<\/p>\n
    Het verdiend niet de schoonheidsprijs en er zijn genoeg verbeteringen te bedenken maar de front-end kan met deze klasse dus door de data heen pagineren waarbij we ook nog een \u201cfirst()\u201d en \u201clast()\u201d methode hebben om naar het begin en het einde te gaan.<\/p>\n
    chart.js<\/h3>\n
    Ook de implementatie van de grafiek is niet Vert.x specifiek maar omdat het leuk is om te zien hoe we de JSON-data eenvoudig kunnen verwerken in de grafiek, lichten we het toch even toe.<\/p>\n
    Om de gegevens te tonen op de webpagina werken we met een library genaamd chart.js<\/a>. Dit is een open-source project die eenvoudig is toe te passen in onze pagina.<\/p>\n
    In de templates in de directory: \/src\/main\/resources\/templates zie je in header.ftl de import staan naar versie 2.8.0 van de library:<\/p>\n
    <script src=”https:\/\/cdn.jsdelivr.net\/npm\/chart.js@2.8.0″><\/script><\/p>\n
    In het index.ftl bestand initialiseren we de \u201cchart\u201d wanneer de pagina geladen is (in de init()) methode, en vullen we de gegevens van de grafiek in de processData() methode.<\/p>\n
    Vanaf regel 77 zien we:<\/p>\n
    let chartData = {
    ...
    }<\/pre>\n
    Daar zetten we de gegevens in die we terugkrijgen van de server. De niet al te effici\u00ebnte code daarvoor is ervoor om de arrays te vullen van de grafieken:<\/p>\n
    let pages = statisticsData.page;
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let labelData = [];
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let tempData = [];
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let vititorData = [];
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 pages.forEach(page => {
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let labels = page.labels;
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 labels.forEach(lbl => labelData.push(lbl))
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let temps = page.tempData;
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 temps.forEach(tmp => tempData.push(tmp));
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 let users = page.usersData;
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 users.forEach(usrs => vititorData.push(usrs));
     \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });<\/pre>\n
    Nu kunnen we de ge\u00efmporteerde data per dag tonen en heen en weer pagineren:<\/p>\n
    [\/et_pb_text][et_pb_image src=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/07\/Vertx-Episode-3-afbeelding-2.jpg” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.25.2″ z_index_tablet=”500″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]<\/p>\n
    [\/et_pb_image][et_pb_text admin_label=”Broodtekst” _builder_version=”3.25.2″ text_line_height=”1.8em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” z_index_tablet=”500″ text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]<\/p>\n
    En verder?<\/h3>\n
    We hebben in de afgelopen drie afleveringen een Vert.x applicatie ontwikkeld die site statistieken in CSV formaat kan ontvangen, verwerken en verrijken met weer-data van een weerstation in Nederland. De applicatie zoals die nu is, is slechts een ruw prototype en er zijn vele mogelijkheden om de applicatie uit te breiden. Doel van deze afleveringen was om te laten zien hoe je met Vert.x een applicatie ontwikkelt en hoe je het zou kunnen inzetten als web applicatie. De functionaliteit wordt waardevoller als je de data van meerdere weerstations kunt kiezen, weerdata uit het buitenland zou kunnen verzamelen en meer uitgebreide data kunt tonen in de front-end. Verder zou de weerdata beschikbaar moeten zijn op storage waarbij je niet steeds naar een web-site van het KNMI zou moeten gaan om de data op te halen.<\/p>\n
    Vert.x kun je voor veel doeleinden gebruiken. De kracht zit \u2018m in de asynchrone verwerking, het mult-reactor pattern, en de manier waarop dit gebeurt staat je toe om snel zeer goed presterende applicaties te bouwen.<\/p>\n
    Een aantal zaken heb ik ervaren als relatief lastig. Alle objecten die via de event-bus naar de diverse componenten van de applicatie worden verstuurd moet je mappen naar een Json object. En hoewel het niet moetilijk is om deze mapping te schrijven en de API je veel tools biedt om dit makkelijk te maken is het wel zo dat je redelijk veel \u201cboiler-plate\u201d code moet schrijven om deze mapping te bewerkstelligen.<\/p>\n
    Als je de RxJava componenten gebruikt is de leercurve tenslotte naar mijn idee vrij hoog. Het geheel vereist gewoon een heel andere denkwijze. Ook is het eenvoudig om buiten ontwerp-principes om te ontwikkelen omdat RxJava heel flexibel is en veel mogelijkheden biedt. Prettis is echter dat deze manier van ontwikkelen goed aansluit bij JavaScript frameworks en je op die manier meer richting full-stack development kunt groeien.<\/p>\n
    Omdat Vert.x polyglot is past het goed in een omgeving waar applicaties in verschillende talen worden geschreven. Een lichtgewicht component bouwen die met deze applicaties communiceert is relatief eenvoudig.<\/p>\n
    Ik heb Vert.x inmiddels voor twee projecten mogen gebruiken. De \u00e9\u00e9n is een web applicatie waar gebruikersinteractie centraal staat maar waarbij ook veel taken automatisch worden uitgevoerd. Hierbij wordt de gebruiker met feedback op de hoogte gehouden van de status. We gebruiken hiervoor het Stomp protocol.<\/p>\n
    De andere applicatie is meer een \u201ccollector\u201d die grote hoeveelheden data verwerkt uit tekstbestanden en deze op gestructureerde wijze opslaat. De Verticles die verantwoordelijk zijn voor de verwerking van deze data zijn zogenaamde \u201cworker verticles\u201d (zie: https:\/\/vertx.io\/docs\/vertx-core\/groovy\/#worker_verticles<\/a>) die doormiddel van timers bestanden ophalen en verwerken.<\/p>\n
    Deze afleveringen zijn geschreven door Bas Piepers. Bas is Java ontwikkelaar bij Open Circle Solutions.<\/p>\n
    [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Our Process” _builder_version=”3.22.3″ custom_margin=”||50px” custom_padding=”0|0px|0|0px|false|false” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”4%” prev_background_color=”#000000″ next_background_color=”#39a248″][et_pb_row custom_padding=”0|0px|23.9667px|0px|false|false” _builder_version=”3.22.3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding__hover=”|||” custom_padding=”|||”][et_pb_text admin_label=”Header tekst Tutorial” module_class=”ds-vertical-align” _builder_version=”3.22.7″ text_font=”Montserrat||||” text_text_color=”#1f1f1f” text_font_size=”36px” text_line_height=”1.8em” header_font=”Raleway|900|||||||” header_text_align=”center” header_text_color=”#f47620″ header_letter_spacing=”2px” header_2_font=”|600|||||||” header_2_text_align=”center” header_2_text_color=”#757468″ header_2_font_size=”23px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” z_index_tablet=”500″ locked=”off”]<\/p>\n
    Tutorials<\/span><\/h1>\n
    [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ custom_padding=”0|0px|0|0px|false|false” custom_margin=”|||” make_equal=”on” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”90%” module_alignment=”center” use_custom_width=”on” width_unit=”off” custom_width_percent=”90%”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding__hover=”|||” custom_padding=”|||” background_position=”top_left”][et_pb_blog admin_label=”Blog categorie Tutorial” fullwidth=”off” posts_number=”3″ include_categories=”1″ show_more=”on” show_author=”off” show_date=”off” show_categories=”off” show_pagination=”off” module_class=”ds-limit-excerpt” _builder_version=”3.22.7″ z_index_tablet=”500″ custom_css_title=”height: 60px;” custom_css_content=”display:none;” custom_css_read_more=”padding:7px 17px;background: #555449;margin-top:15px;display:inline-block;color:#fff;”]<\/p>\n
    [\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Globale sectie met aanmeldform e-mailnieuwsbrief” _builder_version=”3.22.7″ background_color=”#39a248″ background_image=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/01\/OCS-background-dots-1.png” background_blend=”soft-light” custom_margin=”||50px” custom_padding=”20px||19px||false|false” animation_style=”slide” animation_direction=”bottom” animation_duration=”450ms” animation_intensity_slide=”8%” saved_tabs=”all” prev_background_color=”#ffffff” next_background_color=”#ffffff” z_index_tablet=”500″ inner_width=”90%” inner_max_width=”1200px” global_module=”517″][et_pb_row global_parent=”517″ custom_padding=”0|0px|0|0px|false|false” _builder_version=”3.19.3″ width=”90%” max_width=”1200px”][et_pb_column type=”4_4″ global_parent=”517″ custom_padding__hover=”|||” custom_padding=”|||”][et_pb_text admin_label=”Kop en introtekst” global_parent=”517″ _builder_version=”3.19.3″ text_font=”||||||||” text_text_color=”#ffffff” header_font=”||||||||” header_text_color=”#ffffff” header_font_size_tablet=”30px” header_font_size_last_edited=”on|phone” header_4_font=”||||||||” header_4_text_color=”#f8f8f7″ header_4_font_size_phone=”16px” header_4_font_size_last_edited=”on|tablet” header_4_line_height=”1.3em” text_orientation=”center” max_width=”70%” module_alignment=”center”]<\/p>\n
    Nieuwsbrief<\/h1>\n
    Meld je nu aan voor Open Circle Stories en krijg een verzameling artikelen, tips, nieuws en verdiepingen in je mailbox.<\/h4>\n
    [\/et_pb_text][et_pb_signup admin_label=”Formulier” global_parent=”517″ mailchimp_list=”marketing@opencirclesolutions.nl|8b228671ce” layout=”top_bottom” first_name_fullwidth=”off” last_name_fullwidth=”off” email_fullwidth=”off” button_text=”aanmelden” module_id=”email-optin” _builder_version=”3.19.12″ use_background_color=”off” border_radii_fields=”on|0px|0px|0px|0px” custom_button=”on” button_text_size=”20px” button_bg_color=”#f47620″ button_font=”||||||||” button_use_icon=”off” button_text_size_tablet=”20px” button_text_size_phone=”20px” button_text_size_last_edited=”on|tablet” max_width=”90%” max_width_last_edited=”on|phone” module_alignment=”center” button_bg_color__hover_enabled=”on” \/][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Vorig \/ volgend artikel” _builder_version=”3.22.7″ custom_padding=”0|0px|0|0px|false|false” z_index_tablet=”500″ locked=”off” prev_background_color=”#39a248″ next_background_color=”#555449″][et_pb_row _builder_version=”3.22.3″ border_width_top=”1px” border_color_top=”#bab9b3″][et_pb_column type=”4_4″ _builder_version=”3.0.47″ custom_padding__hover=”|||” custom_padding=”|||” background_position=”top_left”][et_pb_post_nav in_same_term=”on” _builder_version=”3.22.7″ title_font=”Oswald||||||||” title_text_color=”#39a248″ title_font_size=”16px” title_letter_spacing=”1px” animation_style=”slide” animation_direction=”top” animation_duration=”450ms” animation_intensity_slide=”19%” z_index_tablet=”500″]<\/p>\n
    [\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Globale sectie met Footer” module_id=”footer” _builder_version=”3.19.3″ background_color=”#555449″ parallax=”on” custom_padding=”0px|0px|0px|0px|true|true” saved_tabs=”all” prev_background_color=”#ffffff” inner_width=”90%” inner_max_width=”1200px” global_module=”212″][et_pb_row global_parent=”212″ use_custom_gutter=”on” custom_padding=”0px||0px|” custom_margin=”0px||0px” make_equal=”on” padding_top_bottom_link_3=”true” padding_left_right_link_3=”true” _builder_version=”3.25.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”100%” width_last_edited=”on|desktop” max_width=”100%” max_width_last_edited=”on|desktop” z_index_tablet=”500″ column_structure=”1_3,1_3,1_3″ background_color=”#555449″][et_pb_column type=”1_3″ global_parent=”212″ _builder_version=”3.0.47″ background_color=”#f47620″ background_position=”top_left” custom_padding=”50px|40px|50px|40px” custom_padding__hover=”|||”][et_pb_contact_form global_parent=”212″ captcha=”off” email=”marketing@opencirclesolutions.nl” title=”vragen?” custom_message=”%%Name%% heeft een boodschap gestuurd via het contactformulier van de website.||et_pb_line_break_holder||Het bericht is: %%message%%” success_message=”Bedankt voor uw belangstelling! We nemen zo snel mogelijk contact met u op.” submit_button_text=”versturen” module_id=”et_pb_contact_form_1″ _builder_version=”3.19.12″ form_field_background_color=”#ffffff” title_font=”Oswald||||||||” title_text_color=”#ffffff” title_font_size=”28px” form_field_font=”Oswald||||||||” form_field_font_size=”16px” border_color_all=”rgba(0,0,0,0.12)” border_style_all=”solid” custom_button=”on” button_text_size=”20px” button_text_color=”#ffffff” button_bg_color=”#757468″ button_border_width=”0px” button_border_color=”#6eba01″ button_border_radius=”0px” button_letter_spacing=”0px” button_font=”|||on|||||” button_use_icon=”off” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”20%” custom_css_contact_button=”text-align: left;” use_border_color=”on” border_color=”rgba(0,0,0,0.12)” form_background_color=”#ffffff” button_text_color_hover=”#6eba01″ button_bg_color_hover=”rgba(0,0,0,0)” button_border_color_hover=”#6eba01″ button_border_radius_hover=”0px” button_letter_spacing_hover=”2px”][et_pb_contact_field field_id=”Name” field_title=”Naam” fullwidth_field=”on” _builder_version=”3.19.3″ border_radii=”on||||” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_contact_field][et_pb_contact_field field_id=”Email” field_title=”E-mail” field_type=”email” fullwidth_field=”on” _builder_version=”3.19.12″ border_radii=”on||||” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_contact_field][et_pb_contact_field field_id=”Message” field_title=”Bericht” field_type=”text” fullwidth_field=”on” _builder_version=”3.19.12″ border_radii=”on||||” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_contact_field][\/et_pb_contact_form][et_pb_social_media_follow global_parent=”212″ _builder_version=”3.0.87″ \/][\/et_pb_column][et_pb_column type=”1_3″ global_parent=”212″ _builder_version=”3.25.2″ background_color=”#555449″ background_position=”top_left” custom_padding=”50px|40px|50px|40px” custom_padding__hover=”|||”][et_pb_text admin_label=”Titel ‘Contact'” global_parent=”212″ _builder_version=”3.19.3″ header_font=”Montserrat||||” header_text_color=”#1f1f1f” header_font_size=”22px” custom_padding=”0px|0px|0px|0px” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”20%”]<\/p>\n
    Contact<\/h2>\n
    [\/et_pb_text][et_pb_text admin_label=”Tekst naw-gegevens” global_parent=”212″ _builder_version=”3.19.12″ text_font=”||||||||” text_text_color=”#ffffff” text_line_height=”1.8em” header_font=”||||” header_text_color=”#1f1f1f” custom_margin=”20px||40px|” custom_padding=”0px|0px|0px|0px” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”20%”]<\/p>\n
    Algemeen: +31 40 304 1330
     Afdeling verkoop: +31 40 304 1572
         info@opencirclesolutions.nl<\/a>
     Kantoor adres:
     Daalakkersweg 16
     Kantoor 6
     5641 JA Eindhoven<\/p>\n
    [\/et_pb_text][et_pb_image admin_label=”logo” global_parent=”212″ src=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/01\/OCS-logo-dia.png” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ max_width=”53%” module_alignment=”left” custom_padding=”0px||0px||false” \/][\/et_pb_column][et_pb_column type=”1_3″ global_parent=”212″ module_id=”footer_3″ _builder_version=”3.25.2″ background_color=”#555449″ background_image=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/01\/OCS-vorm-bolletjes-1.png” background_size=”initial” background_position=”bottom_right” custom_padding=”50px|40px|50px|40px” custom_padding__hover=”|||”][et_pb_text admin_label=”Tekst ‘Verder kijken'” global_parent=”212″ _builder_version=”3.19.3″ header_font=”Montserrat||||” header_text_color=”#1f1f1f” header_font_size=”22px” custom_padding=”0px|0px|0px|0px” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”20%”]<\/p>\n
    Verder kijken<\/h2>\n
    [\/et_pb_text][et_pb_text admin_label=”Losse links” global_parent=”212″ _builder_version=”3.19.3″ text_font=”||||||||” text_text_color=”#ffffff” text_line_height=”1em” header_font=”||||” header_text_color=”#1f1f1f” custom_margin=”20px||40px|” custom_padding=”0px|0px|0px|0px” animation_style=”fold” animation_direction=”bottom” animation_intensity_fold=”20%”]<\/p>\n
    Over Open Circle Solutions<\/a><\/p>\n
    Werken bij<\/a><\/p>\n
    Klantervaringen<\/a><\/p>\n
    Onze partners<\/a><\/p>\n
    Blogs<\/a><\/p>\n
    <\/p>\n
    [\/et_pb_text][et_pb_social_media_follow admin_label=”Social media volgen” global_parent=”212″ _builder_version=”3.19.3″ border_radii=”on|100%|100%|100%|100%” text_orientation=”left” custom_margin=”|||” link_shape=”circle”][et_pb_social_media_follow_network social_network=”facebook” url=”https:\/\/www.facebook.com\/opencirclesolutionsnl” _builder_version=”3.19.3″ background_color=”#c1c1c1″ custom_margin=”|10px||” bg_color=”#3b5998″ link_shape=”circle” follow_button=”off” url_new_window=”on”]facebook[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” url=”https:\/\/twitter.com\/OpenCircleSolut” _builder_version=”3.19.3″ background_color=”#c1c1c1″ custom_margin=”|10px||” bg_color=”#00aced” link_shape=”circle” follow_button=”off” url_new_window=”on”]twitter[\/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” url=”https:\/\/www.linkedin.com\/company\/open-circle-solutions-b-v-” _builder_version=”3.19.3″ background_color=”#c1c1c1″ custom_margin=”|0px||” bg_color=”#007bb6″ link_shape=”circle” follow_button=”off” url_new_window=”on”]linkedin[\/et_pb_social_media_follow_network][\/et_pb_social_media_follow][et_pb_image admin_label=”Connect the dots” global_parent=”212″ src=”https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/01\/OCS-payoff-dia.png” align_tablet=”center” align_last_edited=”on|desktop” _builder_version=”3.23″ max_width=”70%” module_alignment=”left” custom_padding=”28px||28px||true” \/][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
    Voorwoord In deze laatste aflevering gaan we de front-end en een aantal onderdelen van de back-end verder implementeren. De backend stelt ons inmiddels in staat om site statistieken te importeren en te verrijken met weerdata uit een weerstation ergens in Nederland (De Bilt). Nu gaan we deze data opslaan in een gebruikerssessie en voeden aan […]<\/p>\n","protected":false},"author":1,"featured_media":2185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[38,40,37,34,39,35],"yoast_head":"\nEen reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions<\/title>\n<meta name=\"description\" content=\"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Een reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions\" \/>\n<meta property=\"og:description\" content=\"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Open Circle Solutions\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/opencirclesolutionsnl\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-02T10:11:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"wordpress\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@opencirclesolut\" \/>\n<meta name=\"twitter:site\" content=\"@opencirclesolut\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"wordpress\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\"},\"author\":{\"name\":\"wordpress\",\"@id\":\"\/#\/schema\/person\/08d8a4baaa771e9eaa034ed4568e3596\"},\"headline\":\"Een reactieve web applicatie bouwen met Vert.x – deel 3\",\"datePublished\":\"2019-07-02T10:11:34+00:00\",\"dateModified\":\"2019-07-02T10:11:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\"},\"wordCount\":6575,\"commentCount\":0,\"publisher\":{\"@id\":\"\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png\",\"keywords\":[\"API\",\"Dynamisch\",\"Java\",\"reactief\",\"Vert.x\",\"webapplicatie\"],\"articleSection\":[\"Tutorial\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\",\"url\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\",\"name\":\"Een reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions\",\"isPartOf\":{\"@id\":\"\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png\",\"datePublished\":\"2019-07-02T10:11:34+00:00\",\"dateModified\":\"2019-07-02T10:11:34+00:00\",\"description\":\"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage\",\"url\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png\",\"contentUrl\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png\",\"width\":1200,\"height\":525},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/acceptance.www.opencirclesolutions.nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Een reactieve web applicatie bouwen met Vert.x – deel 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"\/#website\",\"url\":\"\/\",\"name\":\"Open Circle Solutions\",\"description\":\"Unieke oplossingen voor unieke klanten\",\"publisher\":{\"@id\":\"\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"\/#organization\",\"name\":\"Open Circle Solutions bv\",\"url\":\"\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/05\/logo_OCS.jpg\",\"contentUrl\":\"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/05\/logo_OCS.jpg\",\"width\":1700,\"height\":739,\"caption\":\"Open Circle Solutions bv\"},\"image\":{\"@id\":\"\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/opencirclesolutionsnl\/\",\"https:\/\/x.com\/opencirclesolut\",\"https:\/\/www.linkedin.com\/company\/open-circle-solutions-b-v-\/?originalSubdomain=nl\"]},{\"@type\":\"Person\",\"@id\":\"\/#\/schema\/person\/08d8a4baaa771e9eaa034ed4568e3596\",\"name\":\"wordpress\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f653d27d3c2e40a4c1674977ceaf810e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f653d27d3c2e40a4c1674977ceaf810e?s=96&d=mm&r=g\",\"caption\":\"wordpress\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Een reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions","description":"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/","og_locale":"nl_NL","og_type":"article","og_title":"Een reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions","og_description":"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.","og_url":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/","og_site_name":"Open Circle Solutions","article_publisher":"https:\/\/www.facebook.com\/opencirclesolutionsnl\/","article_published_time":"2019-07-02T10:11:34+00:00","og_image":[{"width":1200,"height":525,"url":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png","type":"image\/png"}],"author":"wordpress","twitter_card":"summary_large_image","twitter_creator":"@opencirclesolut","twitter_site":"@opencirclesolut","twitter_misc":{"Geschreven door":"wordpress","Geschatte leestijd":"34 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#article","isPartOf":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/"},"author":{"name":"wordpress","@id":"\/#\/schema\/person\/08d8a4baaa771e9eaa034ed4568e3596"},"headline":"Een reactieve web applicatie bouwen met Vert.x – deel 3","datePublished":"2019-07-02T10:11:34+00:00","dateModified":"2019-07-02T10:11:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/"},"wordCount":6575,"commentCount":0,"publisher":{"@id":"\/#organization"},"image":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png","keywords":["API","Dynamisch","Java","reactief","Vert.x","webapplicatie"],"articleSection":["Tutorial"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/","url":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/","name":"Een reactieve web applicatie bouwen met Vert.x - deel 3 - Open Circle Solutions","isPartOf":{"@id":"\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage"},"image":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png","datePublished":"2019-07-02T10:11:34+00:00","dateModified":"2019-07-02T10:11:34+00:00","description":"Dit artikel is onderdeel van een serie artikelen van Open Circle Solutions over de Java API genaamd \u201cVert.x\u201d.","breadcrumb":{"@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#primaryimage","url":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png","contentUrl":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/03\/serveimage-1.png","width":1200,"height":525},{"@type":"BreadcrumbList","@id":"https:\/\/www.opencirclesolutions.nl\/reactieve-web-applicatie-bouwen-met-vert-x-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/acceptance.www.opencirclesolutions.nl\/"},{"@type":"ListItem","position":2,"name":"Een reactieve web applicatie bouwen met Vert.x – deel 3"}]},{"@type":"WebSite","@id":"\/#website","url":"\/","name":"Open Circle Solutions","description":"Unieke oplossingen voor unieke klanten","publisher":{"@id":"\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"\/#organization","name":"Open Circle Solutions bv","url":"\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"\/#\/schema\/logo\/image\/","url":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/05\/logo_OCS.jpg","contentUrl":"https:\/\/www.opencirclesolutions.nl\/wp-content\/uploads\/2019\/05\/logo_OCS.jpg","width":1700,"height":739,"caption":"Open Circle Solutions bv"},"image":{"@id":"\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/opencirclesolutionsnl\/","https:\/\/x.com\/opencirclesolut","https:\/\/www.linkedin.com\/company\/open-circle-solutions-b-v-\/?originalSubdomain=nl"]},{"@type":"Person","@id":"\/#\/schema\/person\/08d8a4baaa771e9eaa034ed4568e3596","name":"wordpress","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f653d27d3c2e40a4c1674977ceaf810e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f653d27d3c2e40a4c1674977ceaf810e?s=96&d=mm&r=g","caption":"wordpress"}}]}},"_links":{"self":[{"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/posts\/3155"}],"collection":[{"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/comments?post=3155"}],"version-history":[{"count":15,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/posts\/3155\/revisions"}],"predecessor-version":[{"id":3183,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/posts\/3155\/revisions\/3183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/media\/2185"}],"wp:attachment":[{"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/media?parent=3155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/categories?post=3155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.opencirclesolutions.nl\/wp-json\/wp\/v2\/tags?post=3155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}