1 / 15

Component-Based

Component-Based. Leveraging APIs for WordPress/.Stat Suite integrations. Prepared and presented by [Yves Jaques/Daniele Olivotti (UNICEF), Nicolas Briemant (Red Pelicans)]. The challenge. Use core .Stat Suite components: Data Lifecycle Manager SDMX web services Data Explorer

bhakta
Download Presentation

Component-Based

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Component-Based Leveraging APIs for WordPress/.Stat Suite integrations Prepared and presented by [Yves Jaques/Daniele Olivotti (UNICEF), Nicolas Briemant (Red Pelicans)]

  2. The challenge • Use core .Stat Suite components: • Data Lifecycle Manager • SDMX web services • Data Explorer • And integrate them seamlessly into our existing WordPress (and Drupal) publishing environment.

  3. What did we intend by “seamlessly”? • Our users should not be exposed to the underlying implementation. • Our SEO and analytics should remain integrated. • Data visualization must be able to run on our PaaS WordPress provider, Pagely. • Look and feel should match our current theme(s). • Search should be integrated with our existing search.

  4. Two main implementations (and a 3rd planned) • https://childmortality.org • A custom, inter-agency site with very exacting requirements from our partners. • A standard WordPress out-of-the-box would not do, we had to rethink it all. • https://data.unicef.org • The flagship site for UNICEF indicators, we required seamless integration of look-and-feel and search. • But we also wanted to create a generic plugin that could be of use to anyone wanting to provide SDMX data visualisation in their WordPress site. • And as mentioned before, we wanted seamless integration, so we couldn’t send users to another URL (not even a subdomain), and we couldn’t embed it as an IFRAME. • Drupal plugin • To be done, but Drupal is currently the CMS of choice for UNICEF, already deployed in 25+ regional and country offices. • Can we take the work we have done, and extend it to another CMS?

  5. Child MortalityEstimates By Nicolas Briemant

  6. Architecture overview • https://childmortality.org/ • <wp admin link> SDMX API Static server CME webapp Public user Headless API WordPress server Admin UI Admin user

  7. CME webapp • Common stack (react, d3, …) • Common practices (gitlab, ci/cd) utils SDMX Utils UNICEF Utils UNICEF CME webapp SISCC React WP components behavior React components

  8. Data portal & data visualiser By Daniele Olivotti

  9. The Goal • Show statistics in data.unicef.org (WordPress) • Reuse available .Stat Suite components as much as possible • Avoid major customization of existing components • Avoid using IFRAMEs (Search engines, integration…) • Enable seamless search over both editorial content and data using our current SaaS search provider Algolia

  10. How • Data visualization • A Wordpress plugin loads the Data Explorer (React) component in a Page • The Data Explorer creates the interface in a <div> and reads the parameters passed by the Wordpress Plugin • After the initialization the interactions between the page and the DE are done using JS events • Search • A Python script reads an SDMX structure + a data file and indexes the available data • Wordpress uses the Search index to present search results to the users (data and WP posts merged together)

  11. The architecture data.unicef.org Wordpress Search service Algolia Wordpress Plugin Data Indexing Python Data visualization Data Explorer

  12. How it looks

  13. What happens ‘behind’ (1) • Wordpress loads the Data Explorer App in the page. • The Data Explorer reads the parameters from the page, loads the SDMX structure and launches a ‘Structure loaded’ event when load + parse is complete

  14. What happens ‘behind’ (2) • The ‘Structure loaded’ event is used to trigger a search on the Algolia index. • The results are used to poulate the ‘related resources’ buttons

  15. What happens ‘behind’ (3) • The Dataexplorer loads the SDMX data and creates the visualization

More Related