Improving weather warnings and climate information dissemination in Africa

Speaker 1: Hello everyone, welcome to our presentation on improving weather warnings and climate information dissemination in Africa. This is Wattail Space US 2024. So we'll take you through how we leveraged on the power of Wagtail to develop an open source content management system for the National Meteorological and Ridrological Services. You'll be hearing NMHS from time to time. This stands for the National Meteorological and Hydrological Services. My name is Grace Amondi, I'm a geodeveloper. I'll be walking you through the introduction and the motivation behind the work that we do My colleague Eric Otenio, also a geodeveloper, will take you through the integration and development activities of the work that we do. So

Speaker 1: this work was supported by the World Meteorological Organization, Regional Office for Africa, in partnership and collaboration with NOCAP, part of the Norwegian Refugee Council. Majority of the NMHS face challenges in providing services through functional websites. You'll notice that they have outdated technologies in use The user experience and user interfaces are not friendly or driven, both on the user-facing side and on the content management interfaces this lack of interactivity in the data and the products that are produced, the websites may not fit the purpose to deliver climate and weather information services, and this would hinder the support on user growth.

Speaker 1: There's also limitations in terms of integration to third-party applications and services like online meetings, email marketing, user analytics, and so on and so forth. So to come and support the NMHS and fix this problem, we developed a solution, CleanWeb. which is a cutting-edge website template for the NMHSS. This website template is fully customizable and it allows for developing feed for purpose CMS interfaces that are able to fit the standards of the organization. The user interface is very user-friendly, including both the website itself and

Speaker 1: the content management system. It follows the best practices in data visualization and we adopted a decentralized workflow to allow for management of content in uh decentralized manner by different departments using roles and users. It also accommodates for integration of third-party apps, softwares, including online events, email marketing, user analytics to drive user growth. The CMS, known as CleanWeb, has various features. It is developed on top of the Wagtail framework. And it provides a user-friendly website content management system that allows

Speaker 1: both the staff at the national met to be able to add content onto the website in an easy manner It has a CAP alerting editor that allows for publishing of alerts. It has an interactive georeference data visualization. editor that allows for addition of products in an interactive manner and also visualization of the same products interactively. It supports event marketing or event registration and integration with Zoom. Also, in support is email marketing integrations which are included. It also accommodates for user analytics and survey creation and results analysis.

Speaker 1: There are many other more functionalities and you'll look at them in the next slides.

Speaker 2: We have developed a number of work tail-based applications as you can see here. So these are the ones that help us to have functionalities that we need that require across the clean web package. So they range from forecast managing to publishing surveys to publishing alerts in CAP protocol to integration with Zoom, integration with MailChimp, and so on. So we're going to look at uh some of them, see how we implemented them and how we integrate them across uh the cleanware package to be able to provide these uh components and functionalities to NMHSS So uh the first one here we have the forecast manager. So this is a package that you have developed to be able to allow uh the meteorological agencies to be able to manage and visualize their own forecast.

Speaker 2: So as a user, I expect that once I go to a website, I should be able, a weather-related website, in this case websites for Met, I shall be able to find the focus for today, the focus for the next hour, the focus for the next week, and so on. So this was a challenge in terms of having a robust uh application that allows you to seamlessly upload forecasts for any location in the country. So we developed this specifically to be able to provide a unified way across NMHSS to be able to upload their own forecast. So it provides you with different uh capabilities. One of them is to be able to find the different locations in the country that you will be uploading the forecast coming from the models and so on.

Speaker 2: The other one is that you're able to customize the different parameters. So the Met agencies are able to set the different parameters that are monitoring. If for example a country is not monitoring snow or they don't experience snowy conditions and there's no need to define this in the settings And uh the application or the package provides API integrations that allows to uh that allows to expose this this data to mobile applications or other systems that can further help disseminate this weather forecast data. So we display on the user interface, the user facing side like this On the back end, this is uh a sample of how a form for adding new forecasts looks like.

Speaker 2: So you can you select the date, uh you know you select the file if it's a csv We have a hands-on table here that shows you a preview. If there's an error, the save button is disabled until you fix everything looks nice and then you can upload the data. So once you do the upload. Then it will be visualized on the home page like this. On the banner, on the bigger hero banner, you'll see it like this. For the different days, you can choose the icons, or the NHS can choose icons for the different parameters and conditions. that they are monitoring and this is how it will be displayed on a map. So this is an example of a real instance of Burkina Faso This is a screen grab of how the website looks currently in

Speaker 2: from Burkina Faso. So you can see they have data showing across the different locations that they set on their back end And then showing if you click on any one of the icons, it will give you more details about the condition and the focus itself. So next up we have the uh cup composer. So as you know, meteorological agencies uh in most countries they are the authoritative voices in terms of publishing weather warnings, hazards and so on. So uh we are providing a tool, a modernized tool to be able to provide uh the capabilities for publishing alert in a very uh

Speaker 2: easy and intuitive way. So What this does is that uh it provides this interface that allows uh meteorological agencies to be able to quickly create new alerts let's say this ivy uh ivy rain that has been forecasted to occur in the next hour or in the next two hours so depending on the severity depending on the agency The NMHSS can quickly get into this interface. So they create a new page, they fill in the information as they fill in, they can see the preview of the alert itself And uh once they publish the alert is uh uh formatted to follow the CAP. Uh so this is the common alerting protocol. So it's a well-defined standard that allows to be able to

Speaker 2: uh disseminate and uh communicate uh weather alerts so this package formats all the alerts into this version And it provides also a workflow. This is already built in from Wagtail, a workflow for publishing. Since this is a page, you can define who can access it, who can edit, who can moderate it, and so on. So this way you can have uh someone draft the alert someone look at it and moderate it and then someone could actually have the rights to publish it so once it goes out there Uh it's it's been published actually uh for Queer Warnings. Once you publish, you cannot delete, you can only make updates uh by creating a new alert and referring to the previous alerts.

Speaker 2: So by using Wagtail Hooks, the before edit page, after edit or after publish page We are able to define all these hooks that help us to, for example, prevent deletions and modifications of an alert once it's been sent. So by also listening to signals, work tail signals like the page published, we are able to disseminate, we are able to disseminate further these alerts using protocols like MQTT, using web books, you can also automatically publish this data to social media so that it can be picked by platforms like Twitter or X and Facebook and so on. So this really provides us capabilities and new ways of us to be able to disseminate this data

Speaker 2: uh these alerts uh we want to be able to connect to telecommunication companies uh so that they can further disseminate this using their mobile network. want to be able to integrate this into radio stations so once there's an alert they can pick it automatically and you know televisions and so on. So Wagtail, we found that it gives us most of these things out of the box and we can just plug and play, organize it very nicely for users. Once you publish, it can be viewed in many channels Because the idea is that you refer to the CAP standard, you shall only publish once an alert and then you can send it to different places uh um at the same time. So Wactail

Speaker 2: provides us all these capabilities out of the box to be able to do that. So the next package is the Geo Manager. So we call it Geo Manager, but basically uh it's a package that allows uh NMHSS to be able to manage their data. So this includes data coming from weather models like numerical weather predictions models, historical observation data coming from stations. uh point data like infrastructure, airports, imagine there's heavy rainfall that has been forecast in some place. You want to know how many hospitals or how many buildings are being impacted So we're providing a very robust geospatial online management data management tool that allows you to not only visualize or rather manage your data

Speaker 2: but you can also get uh things like time series charts so you can click on a location you can click on a point you can draw a custom area and then you can get on the fly analysis time series analysis you can do overlay analysis very quickly and all this we are doing it uh with python using um What till as as the backend as the framework so you can see here you can manage all the categories. Uh this is like the landing page. You can see the things we have here Are the things that will appear on this left side of the map viewer? We call this the map viewer and this is the GeoManager backend side of it. So this is built using Next. js And using a very nice package called Django Next. js, we were able to actually integrate

Speaker 2: a React-based, a Next. js based application into uh uh WagDale So um this way we are able to solve this as a different application but users will not be able to notice that this is actually coming from a different application but because it's inside uh uh it's served inside Django or rather worktail using the Django next. js package So this allows countries to be able to connect to even uh external sources like data coming from UMedSAT, so this is satellite information and so on. Next up we have the Worktail icon chooser package and this is a utility package that helps us to be able to select icons that have been registered on Worktail using the register icon

Speaker 2: sook. So these are SVG icons. And you'll find that in most sections, especially the snippets, we use the icon chooser to be able to associate an icon to things like services that the NMHSS provide So let's say like a with a forecasting service we want to associate that with a nice looking SVG icon. And uh most of these icons we actually get them from Fontosam Some of them have already been loaded by the default uh installation of Wagtail. But we have additional ones coming from places like OCA. So the humanitarian icons provided by OCA, one of the UN agencies. So we are able to load those icons and then use the register icons which loads the icons to worktail and then you can use this worktail icon chooser

Speaker 2: To be able to choose these icons to associate product, for example, product types, news types, you want to associate an icon to those ones, publication types, and so on. So this provides uh on the front end we use a template tag called uh SVG icon. So this allows to be able to actually render these SVG icons uh uh in the the templates themselves so worktail admin provides its own way of rendering icons in the templates But since that's basically or it's made for the admin, we wanted something that we can use for the front end parts and to be able to load them dynamically. So we don't want to load all of these icons.

Speaker 2: You can see they can get very many. But there to be able to, you know, you give the template tag and name of the icon and then it specifically renders that SVG icons. So this helps us to do that and it gives you a nice model. So when you click on the input, you're able to search for an icon. As long as it's been registered on Water, you'll find it. And then when you click it, it will be Putting that input and then it will be saved in the back end. The name will be saved and this can be used in the front end to be able to render this VG icons. Next up, we have the WalkTail Zoom integration, and this is now where we start bringing in uh integration with third-party tools.

Speaker 2: In this specific case, we are integrating worktail forms. So forms or pages that are being built using the Wagtail form builder. So we are now integrating them to Zoom so that uh when you register a user you can also uh uh register them on Zoom and then Zoom can be sending the automatic emails and reminders so you don't have to do it uh yourself or do it manually so we'll find that uh most methodological agencies they organize uh A lot of meetings and some of them are online meetings or hybrid meetings like Climatal Group Forums and so on And so what this does is that uh it allows uh you, uh it allows the NMHSS

Speaker 2: to be able to associate a form with an online meeting so that once I user registers uh as the data is being saved to the database then you can push the same data to zoom so zoom provides uh an API that you can plug into Uh so you basically need to put credentials for Zoom in settings somewhere in the CMS and then uh uh once you publish uh a form and you associate it with a given meeting on Zoom Then Zoom will take care now of sending the emails to users as you can see an example here and sending them reminders so you don't have to do this manually like you know trying to download the csv list of the of your users and sending one by one or

Speaker 2: using other tools Next we have the Wagtail MailChimp integration. So just similar to how we do the integration with Zoom, MailChimp provides an API that you can plug into. So first up we allow to connect or rather the uh the package allows you to connect to your audience so MailChimp as you are aware provides you a way to manage different audiences so this can be for your newsletter and so on So the package allows you to select a given audience and then it will automatically create this form for you so a sign up form as you know MailChimp also provides a sign up form that you can directly give links to your users

Speaker 2: but the link might look a bit uh uh note associated to your domain and so on. So uh this package what it does it just brings the same form renders it in worktail and provides this information uh provides this page to users So they can feel they are directly signing from your page, from your website. And what we do is that we just take this form and send it to MailChimp directly. So in this case you'll be required to put the API key for your MailChimp registration. So besides just providing the subscription form, the sign-up form We also uh the package allows to be able to connect to page

Speaker 2: uh form uh form page builder or other pages uh created using form page builder So in this way you can think of it like you have an event, but you can use this to also get subscribers to your email uh emailing list so this is a very nice opportunity let's say you have an online meeting uh before users finish the registration and hit submit You can provide them with this tool asking them if they want to be receiving periodic updates or newsletters from uh from your uh from your institution. So what this does, it adds at the end of the form, it adds this option, these checkboxes that connect to your groups.

Speaker 2: If you have used MailChimp and you know the groups You can basically allow users to select from your groups which things they want to be receiving automatically and MailChimp will check the user's information so you have to associate the form with the fields uh that MailChimp expects or the fields that you set in MailChimp so this means that your form should be almost similar to what uh your sign up form looks like on MailChimp but the good thing is that you can associate the different fields to the fields that exist in MailChimp So this allows you to extend the font page and allows you to get more subscribers to your mailing list.

Speaker 2: Next up, we have the Wagtail Web Stories Editor. This is also another interesting tool we developed, or rather we uh we ported from the WordPress Google Web Stories editor. So uh Google developed a web stories editor that allows you to publish web stories. So web stories are the version is the web version of things like Instagram stories, WhatsApp stories and so on. So this allows you to publish stories but for the web. So WordPress had a nice plugin already developed. And the good thing that is this editor was developed using React. We looked into the code into the different packages they provide

Speaker 2: and we brought it uh to Arctail. Um So we're using the snippet view set functionality that allows you to you know create uh a view set for models that are Uh different from pages, so you can also you can do drafting, you can do publishing of models that are not pages. And I will also provide you view sets to customize different pages like the index page, the editing page, and so on. So by attaching to those different view sets, we're able to have an editor that looks like this. So this basically just renders the JavaScript. And then this is what uh once you do the editing we save it back to the model and then you can do the drafting, the publishing, and so on.

Speaker 2: So once uh you're done This can now be associated with a page and then it will render uh this story like this. So this is really uh interesting uh for uh meteorological agencies to be able to use this to engage users in a new and interesting way. So they can publish like educational materials, they can publish warning materials to their social medias but also on their website. And uh this can also be used to promote events and so on. So next up you also have uh another tool that we have brought to uh inside the work sale admin So this is called Wagtail Survey. js and uh basically what this does is that we are bringing the open source, the free and open source survey.

Speaker 2: js uh uh tool into Active to be able to allow uh metrological agencies to publish surveys directly in their website So you'll find that uh um most of the uh uh uh agencies how they do it currently or institutions. Is that they use external tools like Kobo Toolbox or other tools to be able to or Google forms and so on to be able to collect user feedback But in this case we are bringing this very nice uh tool, Survey. js, which is free, into the system. Uh so you can it provides you a designing or an editor interface where you can create the form. You can present it to users, uh, you can render it to users on your website and then you can start collecting data

Speaker 2: and it gives you this nice interactive uh results analysis dashboard. So by also using the snippet uh we have set uh um We're able to extend them to bring this JavaScript-based Syriac application also. We're able to bring it to the system and do all these integrations. to be able to publish surveys and these are very nice in for example co-designing products with users so enemies can ask users if uh they want to you know Collect more information about their products, they want to get feedback and so on.

Speaker 1: Now, with all these development activities in place, how far are we on the ground? Out of 54 countries in Africa, we have installed the CMS in 17 countries. On the map you see the dark areas or countries. These have installed the CMS. We have eight more countries that are at the initial stages of installation. You will find live instances with links In this presentation, you can click and explore each of the websites to have a feel of what the CMS feels like. We have 8 out of the 17 countries that have gone live. Thank you so much for your attention. These are our GitHub

Speaker 1: links for the CMS as well as the documentation.