 So, hello everyone, today I am going to talk about how we introduced analytics in Sousa skill CMS. So, I have mentioned my GitHub and Twitter handle there, so please feel free to reach out to me. So, the agenda for today would be to first I will give you a brief about me and then I will give you a brief about the entire Sousa architecture like what is Sousa and what are the several components and how everything is working. So, after that we will look into React, what React is and how we use React to develop our UI solutions for Sousa and how it helped us to create really amazing web solutions. After that we will get into the Sousa skill CMS which is a branch of the Sousa web projects. So, it mainly deals with skills and bots and all that stuff, it helps you manage it essentially. And after that we will get into how we introduce analytics in the CMS. So, the skill creators and the users of the skill can get more analytical details about how the skill is performing and all that stuff. So, let's get started. So, first I will give you a brief about me. So, I am a pre-funneling undergraduate student from Tripoli, Vododra, India and I am presently pursuing computer science. So, I started with software development in 2016 because I had a course where I had to create a web project and then I started exploring various web aspects like HTML, CSS, JavaScript. So, I created a really basic web project and then I started learning about Git and GitHub and what it is and how it works. That was really interesting and I was really fascinated about the entire ecosystem, the web development ecosystem. So, I continued with the web development after that and that was also the time when I started doing open source and I created some basic projects of my own and then I started contributing to various organizations as well. So, Fossature was one of them and the projects were really easy to get started with. So, I started contributing, first I started with really basic contributions like updating documentation and fixing some really basic UI bug like that can be just fixed using some CSS. So, I started with that and then eventually my contributions go over and the quality also increase. So, that was really nice and that was a real learning experience for me because that is from where I evolved and got professional in the web development. So, in 2016 when I got into my university, I started exploring several programming languages and domains of programming. So, web development was really interesting as I said and I also really like JavaScript. So, I started exploring the JavaScript ecosystem. So, and I learned that there was a lot to the JavaScript ecosystem. So, React was also really coming up at that time. So, I started learning React as well and then I contributed to several open source projects in Fossature. I became a code and I also participated in a contest called Hoodit by Fossature in 2017. So, I also emerged as a finalist, so that was really exciting. And then I got into GSO getting with Fossature last year. So, my project was to introduce analytics in the CMS and I worked with in a team of three. So, my team members were Rakshad Gag and Anupan Var. And all three of us worked into analytics part. So, we handled everything from server to the front end and all of the analytics. And I really enjoy anime and football as well. I really pursue my free time. So, my journey with Fossature started with really great projects that easy to get started with. So, I found repositories and then I used to set them and then used to understand the code base. And then that got me really interested in it. And so, I actually become a member of various programs that Fossature has. So, I participated in CodeHeat, I participated in G-SIM, and then I participated in GSO finally last year. The thing was for the admin side, they are all able to help me to face in the community. So, it's really common that he can play some setting up issues in my face. So, the mantis are always available in the Gita channel. We have dedicated the channel for all the projects. So, people can just reach out there and there's no, I mean, watching system or anything like that. You can, if you want to just get started, you can just join the Gita channel, open an issue and open a pill request to just start your contribution. So, that is really easy and amazing. So, let's talk about SoC now. So, SoC is basically a web framework, a framework to develop conversational solutions. So, the great thing about SoC is that it's open and you can create your solutions on any platform. So, we have platforms developed on our own. So, we have web clients, several web clients. We have mobile apps, we have bots, and then we have the smart speaker, that is the SoC hardware. So, the server is basically the entire brain of SoC. So, we have several clients, like web clients, web apps, bots, all the clients communicate to the server via REST API. So, the server exposes REST API endpoints. So, the clients can just talk to the server. So, this is the entire wireframe about how everything's working. So, as you can see, this is the brain, which is the server that we have hosted online. And then we have all these clients, which can talk to the server via an API request. And we have users who can just send a query via any client and then talk to the server using that. So, we have all other, setting a personalization and user data that is oriented for the user. So, and then here we have the skills CMS, and here we have skills. So, what basically a skill is, skills are something that is aggregated by the community. So, the community works to gather skills, and skills is something that SoC uses to respond to the user. So, if you want to create a weather skill, so you can just create a weather skill, and then you'll be able to ask SoC about what's the weather today. But we have a weather skill, so I'm just giving an example. But if you want, like, the SoC didn't have any skill to recommend an anime, so the skill to recommend an anime is, and yeah, that was it. So, it's really community oriented, so because open source is really driven by the community, and it takes a huge community effort to sustain open source. So, if you want to improve any skill, you can just go to the skills CMS, register there, and then you can edit any skill as per your wish. So, that is really amazing, and that also makes sure that all of the skills are fine tuned and they perform well. So, let's talk about React now. So, how many of you already know, or heard of it? Okay, so how many of you have heard it before this? Okay, yeah, nice. So, React is a JavaScript library for building user interfaces by Facebook, so. And the catch is that React is not a framework, because many people have a misconception that React is a framework, but React is a library, as Facebook says. So, it follows a component-based pattern, so everything in React is a component, basically. So, you can just compose components, and then you can create a UI solution as per your wish. And React does the hard parts of managing state for your application, so you just have to focus on a UI, and then it will handle automatically to update and handle the DOM tree. So, React makes it really simple to create UI solutions, and it's really accessible, and it's really easy to get started with as well. So, another question that you may have is, why did you choose React? You wanted to try new things, firstly, because by the time we started with Sushi Web Projects, we already had projects in Angular and EmberJS. So, React was really emerging at that time, and it was really popular, and we thought, why not let's just start the Sushi Apps family in ReactJS, and we also had contributors, great contributors at that time, so they were also really excited for choosing React as a web framework for this. So, another some highlights that React has is, it has easier state management for your application. So, manage your state really efficiently, and then we have helper libraries, libraries like Redux and Flux as well. So, Redux is basically like you have a centralized store for your application, so all of the data in an application is stored in a centralized store, and anywhere the data from the store is used. So, if any component updates the store in the data, it will be updated throughout your DOM tree. So, that is really amazing. So, it also facilitates code sharing and code splitting. So, because many people already have, so what you can do is you can just create a React component, and then you can put it anywhere and it will work the same throughout any application that you use. So, I've published a few React components on my own as well like they are really basic components, but yeah that's how it is. And we also have several UI libraries which offer great React components. So, what you can do is you can just import that library and then you can use the components from that library. So, that is really cool. So, let's get into what Suci Web projects are. So, all of the Suci Web projects are in React. We have three web clients that we started some years back. The first is the chat application that is basically a chat window that you can use to interact with Suci and then you can just shoot in your queries to the Suci server and then Suci will reply you appropriately. That we have the CMS. So, it allows you to manage skills that the Suci server uses and then it allows you to manage and create bots as well. And then it also allows you to get the analytics about your skills. So, you can know how many users your skill has and how like we have the rating system as well. And how many people are using it in various countries and what is your skills done. So, all that analytics is also developed at the CMS. After that we have the accounts web app which is it also basically handles stuff related to your account. So, in Suci you can just register your account then you can manage your account from the accounts web app. So, these are the three web apps that we started for Suci. So, let's get into CMS. So, the CMS basically comprises of three things that is skills management, bots management and then it also provides you the analytics there. So, the workflow for how we use the server to hook up our frontend is that we have current APIs on the server for various things like you can we have APIs for authentication, we have APIs for getting a skill, we have APIs for sorting stuff and searching stuff. All that APIs are available on the Suci server. So, what we can do is we just import relevant components from the material UI library. So, we are using material UI right now but we are looking to port to our own components. So, we just import components from the material UI library. We place them in the UI appropriately like how we want to as per the design spec. We just place them in the UI, we check responsiveness and fix all of the styling issues that we have and then we just call the API from the server, we fetch our data and then we input all of this data into our component. So, that's how the frontend and the server is connected. So, basically the UI components that live on the frontend consume data from the restful APIs that are exposed on the backends. And API is written in JSON standard, JSON response with the requested data and then this data is brought into the components. So, JSON is just a response format and some people use XML as well but I don't know the advantage of that but okay. So, let's look at example. This is, this URL is a sample API called to the server. So, if you just visit this URL, you'll get this kind of JSON response. So, this JSON response has key called skill rating then it has a key called stars and then all of the stars are distributed in this fashion. So, one star, two star, three star. So, this is for getting data for any skill. So, you just get the metadata for any skill. You get the skill rating in that data as well. So, this is just a sample of that. So, this is how we data from the server and then we just use this JSON data in the frontend to fill in to the components. And for the request library we're using, we recently coded to Axios. So, and on the frontend once we have the data we are using a library called recharts right now which provides charting solutions for as many as kind of stars like pie chart, bar chart, line chart and all that stuff. So, this is how the basic architecture looks like. We, for the ratings we have using bar chart. So, we just import bar chart from recharts library and then while in the render function we just return this JSX, this renders a bar chart component from the recharts. We fill in the data which is equal to the ratings data that we fetched earlier and then we just close this JSX style. So, this is the basic workflow about how everything's working, we fetch the data, we fetch the UI components from the library is that we're using and then we just hook all of this data together. So, our app is rendered in that way. So, let's get a quick insight into our code base. So, this is the suci-skill CMS code base and all this is majorly documentation. The main thing is the source folder which has tests that contain the tests for our UI. It has the API folder which mainly handles all of the API calls that we have. So, as I said before, it has various API calls for authentication, for fetching your skills, for rating and all that stuff. So, after that we have the components folder. So, this basically contains all of our UI components that we are using in our UI. And after that we have a helper folder which contains all of our helper files. It has files for checking email, it checks your phone number and all that stuff. After that we have images that we are using on our front end. We have a redux folder. So, we recently put it to redux because the app was getting really used and the code base was really getting complicated. So, it was really difficult for new contributors to get started with. So, we recently put it to redux.