 Yes, so thank you. I'm so I'm Ludwig Dubast. I'm going to talk about displaying other application data in a wiki and other types of integration And so first who am I so I'm a creator of xwiki. I'm running xwiki ss. We're a company of 40 people Working on open source full-time. I'm an open source contributor and also a promoter xwiki ss also works on Crip pad, which is another software open source software that you can check out. We had a presentation before about it And so we've been working full-time on open source for 15 years now and so I personally worked on many xwiki projects So I passed the development of the core xwiki software to a team and so I'm But I'm getting involved more in the user in the client using or the users using xwiki and I'm working on On trying to have open source a bit everywhere either in our company or or also personally and so that's not so simple And I'm working on it So what is actually xwiki so xwiki is a professional wiki the x in xwiki means extended So it's an extended wiki. It has many advanced features for content editing It also and one of the key things is that it integrates a scripting language and a method to structure data And it has many macros so I won't go too much in the in the structuration of data in xwiki Actually there is a presentation by Anka in an hour I think that we'll talk more about the About the engine and everything it can do but so in xwiki you have the ability to structure data and create like databases That you can then talk to using a scripting language Here I will more talk about how we can integrate other tools So we have also a system to do macros so when we're in the wiki wig we can insert macros I'll show that in some demos So actually why talk about integrations? Well the thing is everybody uses lots of tools whether on the internet or in our company we have tons of different tools And so when we look at it information it can come from many places and have also different forms So the goal of xwiki is to help people manage information and organize information And so we provide a lot of tools to manage the information that we put in xwiki But there is no reason not to be interested also to manage information that is outside the wiki And also information that would be in formats that are more complex than the standard features of the wiki So text or structured data that are standard features of xwiki We want to also display data that could have different ways to be displayed And so wikis are really great to organize content This is why it's really interesting to try to see how we can integrate data from outside And another aspect is that if you actually when you have information in many places One of the difficulties that happen is that it's hard for people to understand that information So let's say we have a link where there is some statistics The problem is that there is a statistics but there is no explanation about the statistics And the wikis are great places to put explanation So if we bring the statistical information from the other tool inside the wiki We can actually explain the information next to the statistics So now how do we make integrations in xwiki? So we can either use existing macros and extensions We can embed html, we can embed JavaScript tools We can write our own scripts to call local or remote APIs We can write our own macros and we can do advanced integration using listeners So I'll try to show a bit of everything So first using existing macros and extensions So for example GR macros, video macros, diagrams, Kanban, UBOT or Elasticsearch So we have a bunch of macros in xwiki, so I'll show some of them So for example if I go here, it's actually not here So this is an xwiki instance on my computer And if I, I will go to JIRA for example So here I can show a good demo effect, superb I lost the internet, good So JIRA is not on my computer, so no, fail, nice, good failure So that's going to be tough, so not everything will work in my demos Try again What did you learn? Sputnik, why is sputnik? It's not No it's not, I don't have the time Try again I should have tested white before Aha, it might work, yes Ok so if we can talk to the JIRA server So we have JIRA macros, we can show the tasks that are done or not done We can show them at least We can make a JIRA query actually So if I look at the code in xwiki, we have a JIRA macro And we can use that macro to display data So that's one example We can also have, so actually this is a macro that we use internally at xwiki It's not published, we can actually even do charts So it takes a bit more time Let's hope it's fast enough No, it doesn't want to come I should have tested how long it took to run the macros So this is live data, as you can see Because it's really interesting data So here we can see a graph of the xwiki development cycle Version 10, who has done what So we can make a chart directly from xwiki With data coming from JIRA So potentially you can do the same thing Like calling a database, getting data And then giving it to a chart in xwiki that would graph the chart Here another graph, another type of graph that you can do So we have a bunch of macros like that For example here, a matrix macro Which actually just allows to embed the chart in a page So I took a chart room and if it loads So it loads on the internet again Because this is running our own matrix server here And it will show matrix chart live on the internet that I created for this So I will pass a bit on these macros Let's go to the next type of example In the meantime it might load Oops, no, it's here Sorry, I need to speed up now OK, so another type of things we can embed HTML So the matrix chart is an example But I can also embed a peer tube video or even a CripPad video Actually this document here This CripPad is actually coming from there I put it here directly inside the wiki page And I put a link, view full screen So I can run the presentation directly So this is a CripPad presentation that is on the CripPad server And is embedded on my page Actually if I look at the code This is just done with a bit of iframe HTML embedding So embedding HTML and other tools We can do that with peer tube here That's another example of integration I can show a video That's actually a first-in presentation from last year And I can run that presentation, that video directly So I can do that type of things Now, oops, I need to go back to my presentation now And the next step is Okay, I can embed HTML That's fairly easy Now, can I embed actually JavaScript code? So, hop And if I go back here I have, by the way, my first demo chart Embedded in my page So now JavaScript embedding So actually here I want to show Hop So this is actually an embedding Of a GraphWiz JavaScript library Here is the code Here I have my code This is defining my Graph And this is the JavaScript code The JavaScript library That is transforming this To a Graph With JavaScript embedding So in Xwiki we can embed some JavaScript Here just like that We can run JavaScript code And make it transform some data So I transform this data into JavaScript And now the thing is we actually Here we have the same, exactly the same thing But the difference is that instead of running JavaScript code from the internet It's actually running JavaScript code That is actually installed in Xwiki So these are APIs in Xwiki Which allows to talk to JavaScript module That we have installed with the Xwiki extension manager So Xwiki can install extensions And we can actually install any Maven extension from the Maven repository And this is a library, VizGS The library that we can get from the Maven repository So it's JavaScript code in a zip file And we install it And when it's installed we can use it So here I don't need the internet anymore For that viewing And so what is interesting Is that once I did that embedding I can actually make a macro So here I've transformed my code to a macro And now this JavaScript The same code that was before Is executed by the macro And I have a macro I can put any graph And I can have a different view here Hop And any graph with view And we can also do this For example with a timeline So here this is actually JavaScript code Which allows to view timelines So actually we can even move them Because it's editable This JavaScript allows to edit And so the tool doesn't save So it cannot save right now But we could improve it So that it would save the result Of this configuration on the JavaScript module Inside Xwiki Instead of just This is the one that we're loading So this is JSON here And then the JavaScript code Is after that to load the things So we can This type of things we can transform To macros inside Xwiki So that it would display Go back to the presentation Hop So now writing script with local APIs So I wanted to show another type Of integration Here I have Some ASCII art So this is actually Java code So here I This code here I installed From the extension repository of Xwiki I installed the figlet Java module in Xwiki Just with the administration And then I could use some groovy To actually convert this To a figlet So to a To a little display here So I can actually say This is cool And I have Changed my thing Same thing we can transform this to a macro Hop First name is really cool And can display So I wanted to point out That most of these things here Have been done pretty quickly So taking a Java module And inserting in Xwiki Another example Is working with an API So here I go back And now I have a demo with NASA Hop So I need the internet for this And hop I have a picture The astronomy picture of the day And with the explanation So I can actually Look at this And this is basically A bit of code To display From the NASA API To get a picture And display it in Xwiki So not only I can actually get the picture of the day But I can actually get the one from yesterday Hop Or the one from the day before Hop And the day before It's a rabbit hole Don't go on it please Yeah This one is very nice Actually They're pretty amazing Yeah That's why we keep on hitting previous And So Hop So Actually we can do that in JavaScript We can also do that in velocity Actually I have both in my demo I have a JavaScript version And this is the JavaScript version Of the API So this one also has next previous Actually previous The same thing But it's implemented in JavaScript Instead of being implemented In server side So you can do both So I'm going to speed up a bit Because I have a bit more That's not finished Things what we do We can write our own macro So actually I showed that I want to very quickly show How you actually do that So here If I take my macro My graph with macro This is what I had to do To write the macro Hop I had to move this code To an x-weekly object And then it's a macro In x-weekly Available everywhere So it was actually Just moving the code In a specific area In x-weekly And we have a macro That's available to everybody You can do that as an admin Of course Not as a standard user So I move the code And here this is how I get the parameters That I use in my macro Instead of actually Passing the data right away So And then Okay now I'm going to A bit more advancing So one of the Things I prepared For this demo Is an integration Of x-weekly with elastic search And so What I did Is I created An application in x-weekly Which is a database Of countries So here I have 266 Fourth countries So I didn't type it Myself I imported it From a World Bank data So I created Some CSV files Using the World Bank service I imported the data In x-weekly So I imported The list of the countries And I imported The list of The data of every year So for example If I say France here I can see The data for France For every year Population GDP GDP per capita Et cetera Et cetera And so What is interesting Is that if I If I go to countries Now Actually So not only I imported the data But I wrote a listener That is actually Pushing the data Storing it in x-weekly And pushing the data To an elastic search instance So who knows Elastic search here Yeah So it's pushing the data Using elastic search Was not a lot of code To do that To push the data And now And then In elastic search I created some graphs And this is a graph From elastic search That is embedded in the Wiki And it shows All the indicators For France That are stored In my wiki And pushed to Elastic search So this graph Was made in Elastic search So actually here This is the Kibana instance And I can actually View the data From the wiki So for example Here I can see The GDP Per country For example Or things like that In elastic search And when I do When I These graphs That I did I used The code Of the graph And embedded it In x wiki So Hop And the last thing I did Is here you have A dashboard World Bank dashboard Which contains The graph Of every country Here Of everything So you can see The GDP Of the United States Going very high And Actually You can see In x wiki Here My dashboard Embedded in x wiki Here And so Now if I go To show you That it's actually real I can Take that data here And I can also Go here And take France data And so Here you can see My graph That should load So here You can see Some data here That is 31 Okay Everybody See It's Value is 31 Okay Now actually It needs to go down To be better It's a genie It's an inequality index Okay It's better When it's down Well It depends What you believe It kicks you Hop So here I save my page In the wiki And actually I can reload The page now And that was Oh And it's 25 Magic So the data Was pushed And the graph Was Put up to date So actually Here I can edit And I can change If I want to see Another country Instead I can do that And I can show Another country Directly from the wiki That's it For demos Of integration In the wiki