 So, hello, I am Sumed, I study at NIT Surat, National Institute of Technology Surat, and yeah, I am basically from Maharashtra state in India. Okay. Thanks for joining us. Yeah. Thank you. Okay. So, let's just get started. Hello, everyone. I am Sumed. Today, I will be talking about how you can set up open event front end and open event server locally on your system. So, why I chose this topic was like many of the new contributors when they come to open event project, they found it really difficult to set up both of the domains locally, like the current open event front end, if they set up only the front end, the online hosted version of Heroku is used as the API. So, I decided to set up both of them and how you can hook them up. So, yes, a little bit more about me. So, I am a third year computer engineering undergrad at NIT Surat. I was a Google code in mentored in 2017 with FOSS Asia on open event front end project. I was Google summer of code student with FOSS Asia. I mentored code hit students. I have worked with hacker rank in past and currently I am working as a developer at Web Dev Labs NIT Surat. So, yeah, like everyone else has told before, but I will just repeat it. What is open event? The open end project offers event managers a platform to organize all kinds of event including concert, conferences, summits, regular meetups, like consider you are an event organizer. For example, if you want to organize any event, any regular meetup in your community or college. So, what you do is you have a lot of things to plan like you have to do the whole event planning what all are you gonna do in the event you have to schedule everything you have to organize like open up the call for speakers. You have to track the ticket sales and orders everything and stuff and yeah, so we have so all of these things become a whole lot of mess when you have to do this separately. So open event is a platform which helps you in just getting all of these things together at a one place and you can just go ahead and give it a try and like the components of like open event works in many components which help you in event planning publicizing your event like it's one of the most important thing that you have to publicize you have to make it live on the web and you have to build your online presence. So open event helps you in doing that with the help of its Android app generator and web app generator and it also helps in tracking sales orders and stuff. So yeah, so a little bit about the architecture that we adapted in from GSOC 2017. So initially the current open event that is in production is event EA from which you have bought the tickets. So yeah, it's a tightly coupled app like the front end and back end is tightly coupled so from so it was hard to manage that code and it was really difficult for new beginners like to contribute to the project. So we decided to shift toward the rest architecture decoupled architecture and we just separated out the front end and back end. So what this helps in is you can scale your project you can manage the like it's easy to code you remove a lot of redundancy in your project. So yeah loosely coupled or the rest architecture that's are the same. So there are some certain ways where which you can deploy the open event like front end and the back end. So one way is to set up it locally other ways to like you can deploy it to Hiroku or Vagrant Vagrant is like for if you just want to give it a try you can just run the command Vagrant up and it's just sets up if you want to give it a try. Docker like containerization if you want to do if you want to scale you can always do it with Docker. AWS Google Compute Engine these like offer you the bare instances where you can set up your the both the domains and Kubernetes. So in this talk we'll be focusing more on how you can set up it locally that will help you to begin the development flow and like help you to contribute to this project. So currently the structure of open event project is like we have like we adopted this structure in GSOC 2017 we have a API server in the middle and which serves our multiple services as you can see on the screen we have Android app generator which generates the Android app for the attendees we have web app generator 2 which generates the website from and we also have the event organizer app which helps the event organizers to keep a track of attendees and stuff. So there are basically three steps involved in setting up the open event front end server locally. So what you need to do is first set up the server secondly set up your front end and just the third step is to make them work together right. So we'll just go by the steps and one by one and we'll just go ahead and set it up. So the very first thing we'll just go ahead and set up our server API server. So a little bit more about server. So our API server is built on Flask where micro framework and currently we use Celery and Redis for handling our and handling and scheduling our jobs. We use PostgreSQL as a database and Elasticsearch and Kibana the basic setup is ready we'll just improve it more. So yeah there are several steps which I'll indicate like I'll demonstrate to you live how you can set up both of them. So first let's get started with the open event server. So there are some prerequisites that you need to have some prerequisites that you need to have on your system which aren't related to the project. So that's why that's your concern to make them work properly. So these are really basic like you need to have Python 2 on your system. You need to have PostgreSQL database and you need to have Node.js. So all of the steps to install the prerequisites are listed over here. You can just go ahead and check this out in the open event server repository. So once you are done with installing the prerequisites I'll just show you how we can set up the open event server. So the steps as you can see the step number 0 is to clone the repository. So currently I have cloned the repository in my local so that I won't waste any more time in cloning it. So after cloning it there is a step you have to install the Python dependency. This step is basically common in every Python project like if you see any Flask or Django project or any Python project you have to install the dependencies and we do it with the help of pip and there is a file called requirement.txt which lists all the dependencies that have to be installed. So what we'll do is we'll just go ahead and install all our dependencies in our project. So as you can see on the screen I just install all the dependencies that are required by our project. So if you face any issues in installing this you will have to update your version of pip and other Python or anything if the prerequisites are not working on your system then it will break. So the next step that we have here is we need to have a database and since we are using PostgreSQL you need to have PostgreSQL installed on your system. So what we'll do is we'll just create a user for our database and we'll also create our database by setting the user as the owner. So let's just go and launch the PostgreSQL console and we'll create a user for our database. So as you can see I have launched the console and now what I'll do is I'll just go ahead and create a user here with just let's just say name and read and let's just keep it simple by time. So as you can see it has created a role and now that user is created we are just going ahead and creating a database so that we can set the created user as the owner of the database. So as you can see we have created our database and if I am going ahead and listing all the database you can see over here that a user the owner with the open event database is created over here. So now that this step is done we have to make our server use our database so we'll just exit our PostgreSQL console and we will go ahead and we have a sample environment file that we need to modify. So this file contains the database user and password so this helps us in like having multiple databases for development and production so that's a pretty efficient way to develop. So as you can see I have changed the URL of the database that we currently created so let's just go ahead and save it and we will restart our PostgreSQL service so that it will be loaded with the new configurations. So as you can see it is stopping and it will start again so we will have our process restarted. So now that you can see it has successfully restarted our PostgreSQL we will just go ahead and create our DB like you can see the step number 5 it says python create db.py so what it does is it creates the empty tables in our database. So when I'll just as you can see it will ask me for email or for the super admin a super admin is like you can keep a track of everything everything like your users what and what or not I mean the events everything everything so I'll just go ahead and enter email and password and then you can see it is listed that it's creating roles services permissions and everything and it has successfully created now that our database is ready we'll just go ahead and check for migration. So since we are setting it for the first time there is no need to set up migration migration are only like a get for the database right. So still if you want to run it like we can just go ahead and run it right. So now basically we are ready to launch our API server we are and we can just go ahead and execute our command that is listed over here in the step number 6 which says python manage.py run server and as you can see it's the server is running on localhost 5000 and we'll just go ahead and see if it yeah so as you can see we are having our API server ready over here it's running it's successfully running so we have done until this part then the next part would be to set up our open event front end right we have the three parts we are setting up our open event server open event front end and open event and just linking them together to make use of them right. So yeah let's just go ahead with open event front end so this year since we adapted the rest architecture for open event we decided to go with Ember.js because of because of its some of its advantages like it has two way data binding it has convention it follows convention or configuration policy plus yeah since like it with the help of Ember data you can just go ahead and fetch everything and store it in your browser so it's easy for the users to access everything rather than like the when it's helpful in scalability yeah so yeah we'll just go ahead and set up open event front end locally right so I have clone the repository to save time here so what are the prerequisites that you need these are also the basic one you'll need a git on your system you'll need Node.js right to install our npm packages you'll need bower to install your front end dependencies plus there is one more tool called Ember CLI so Ember CLI is a very robust tool to which provides you which which gives you like facility to create the routes components test controllers in Ember.js easily with the help of Ember CLI you can generate the like you have to it enables you to focus more on your code logic rather than the structure of your project right so yeah Ember CLI you can install it from its official site it's just npm package so you don't need to worry much and phantom.js yeah we are using phantom.js for our testing purposes it's a headless website testing tool so we are using phantom.js and it's a basic npm package which is check node version so open your front end like we don't want our front end to break on any at any instance so we check when we install the npm packages we first check with the help of check node version whether our front end project is compatible with the Node version of the user or not so let's it's it's pretty easy to set up front end locally it's just you need to install your npm packages and power packages power dependencies and you need to start the server so let's just go ahead as you can see I have these files I have package.json file here I'll just go ahead and do npm install which will install all the dependencies here in the so as you can see it's checking for the it's checking the check node version and when it is fine it will run all the commands and install all your dependencies the next step is to do a bower install which will install our so bower dependencies are already installed so it didn't show up anything so bower install will install your front end dependencies the whatever you are using the CSS or JS packages on the front end side right so now that we have installed all the dependencies we'll just spin up our server so with ember you can just do it with the help of ember serve and it will just start your server we are just waiting to start our server right so once our server is started we'll just go ahead and visit it at locales 4 to 0 it's still starting so the current front end that you will see in a moment will be using the API that is hosted on the Heroku which is and that isn't the one that we have set up in that terminal that you can see in that terminal right so the we what our aim is to link them together like this front end server like should make request to this back end that we have running here on the 5000 port right so this front end so what we'll do is we'll just go ahead and just as I'm stopping the server and we need to so for this purpose what have we done in the project is we have a file called environment.js where you have a API host set up you are where we are accepting our API host as an environment variable and if it is not there we are just going ahead and using open event API.herokuapp.com so let's just go ahead and set up our open and export environment variable called API host which will which will just point towards our local running server right so yeah okay so I'll just go ahead and restart our server so that the front end our front end will use our local server rather than using the online hosted version of Heroku right we'll just wait till it starts so how this can be helpful like consider you are you are like you are you have your own organization and if you want if you want to deploy your own event management system for your organization to a bare instance bare Ubuntu instance or any any any of them like so you can just go ahead and clone these repositories and follow these steps to just and then you have you just have to do a DNS setup right and you have a whole whole event management system of your organization ready a separate one like event.com still exists but if you run our organization it's it's more of like helpful to have a separate event management system right so as you can see I'll just reload the page and it will just a second yeah so as you can see there it just shows no upcoming events found since we haven't we have our database empty so we'll just I'll just show you how we can create events for example the super admin email that I created at the time of creating database was hello I'm logging with those credentials and as you can see you can just go ahead and create the event here you can just go ahead and have the location and just I'm just publishing this one I'll show the whole product later so as you can see that we have used the both front end and our back end and we have hosted it like we can we are able to set up the whole event management system separate for any any org or anything right so yeah now the next part I will like so the GSOC work product so this project was at a front end project was adopted in GSOC 2017 what we built I am going to show you the whole screencast of the front end that we created using mber.js and semantic UI so as Abhinav said that semantic UI is a very robust framework it has a lot more components that Twitter bootstrap it has a great community to help out and you need to write a very less CSS I mean negligible CSS to have a very beautiful front end like this right so yeah semantic UI is a great framework and you as you can see this is the new product that we built in Google summer of code 2017 so the current one that is in production is evented outcome from which you purchase the tickets but now that this is in development we'll still we'll just release it this year at the end of the GSOC this year so you will see this in production and yeah we'll be shifting to this UI so yeah as you can see you can just go ahead and edit your events and you can add tickets you can add sponsors for your tickets you can just go ahead and have session micro locations right as you can see and you can also manage the event from this dashboard you can add rules you as an attendee or as a organizer track organizer you you are able to invite people for different roles you are also able to delete the roles you are able to track like group the tickets by attendee attendees or orders and we have a scheduler too right so there are many more sections like event export so yeah as you can see there is a profile section of the user and admin section to where we where the admin can manage everything related to the project that he has created the related to the event that he has created as you can see you here we are having here the admin can manage the sessions events users how many super admins that you have how many number of sessions that like are accepted that are in draft or rejected so this whole you are that we built and yeah you can just go ahead and check the sales which are grouped by events organizers location marketed discounted events fees and invoices and a lot more and the admin can also see the activity who has logged in or into the open event and yeah the notifications report settings and the modules right so this was the front end that we created during Google summer of 2017 and we'll be making it live as soon as possible there are notifications to like so yeah so as you can see I have told I have distributed this talk in three parts first one was setting up your front end setting up your back end and just hooking them up so that you can have your own event management system either on locally on your system or you can host it somewhere to for your university or the organization right so this is the project link and document and communication part so if you want to note this one you can just go ahead and have a look at the project also if you found a bug just go ahead and report it there I'll share the link to the slides to yeah so that's it from my side if you have any questions so please do let me know and here are some links that you may want to note down okay if you have any questions please please do let me know yeah this one yeah yeah sure okay okay that's it from my side thank you guys