Enhancing the Open Event Server: Scheduler UI

{ Repost from my personal blog @ https://blog.codezero.xyz/enhancing-open-event-scheduler-one/ }

The community bonding period went pretty well. Worked on the OpenTechSummit 2016‘s website. Fixed a few issues. Got to know the team. :smile:

Now comes the coding period which started yesterday (23rd May 2016).
In the first phase, I (Niranjan Rajendran) will be primarily working on creating a Scheduler tool for each event. Saptak Sengupta and myself will be working on this.

The Scheduler would allow the organizers to graphically schedule/manage the sessions in their conference/event. The proposed features for the Scheduler are:

  1. Drag-and-drop sessions into tracks on a timeline.
  2. Change the timings of the sessions by resizing the sessions’ element on the timeline.
  3. Create a new event by dragging a time period on the timeline.
  4. Create new tracks.
  5. Switch between timelines of the different days of the event.
  6. Load existing sessions from the database into the timeline.
  7. Print the timeline or convert it into a PDF file.
  8. Export the schedule in different formats such as iCalendar.

The scheduler UI would not be practical on small screens (Mobile phones) and would be hard to use. So, we will be thinking of some alternative – a simpler interface for smaller screens.

Organizer Server and REST APIs

The Open Event Organizer Server is a server application written in Flask. It provides an admin interface for the organizers of events to manage events and related services like Sessions, Tracks, etc. Additionally it provides GET APIs for developers to read data from the server. These APIs are consumed by the Open Event Webapp and Android Client to display details to the users. The existing APIs could only fetch data. My is to create REST APIs that write data to the server.

Developers are divided into groups with every group handling one aspect of the project. Avi Aryan and I would be working on REST APIs. Currently I’m working on porting the existing GET APIs to newer spec. Justin decided on our stack and technologies we would be working with (link). We are using Flask-Restplus extension for building APIs.

The write API is not going to be the only big change to the server. The new authorization system is also going to change a lot. It would include more user roles, with each of them having different set of permissions. Apart from the Administrator and Organizer, a user can be:

  • Attendee
  • Moderator
  • Speaker
  • Track Organizer

Other changes to User Management are mentioned in the docs.

Besides these, adding support for OAuth 2.0 is also on the list. This would let users sign up through Social Media platforms.

I had thought of a possible work flow for my group.

  1. Port existing GET APIs with newer spec on Flask-Restplus.
  2. Add the user roles mentioned above to the authorization system. A user role defines what type of services a user has access to. For example, an Attendee has write access to feedback and rating system for Sessions but he does not have permissions to create or modify Tracks. This needs to be done before creating write (POST/PUT/DELETE) APIs, so that access to services can be defined according to the user roles. The GET APIs are public and do not require any such permissions.
  3. Create write APIs.
  4. Set up user authentication system to register and sign in users.
  5. Add support for OAuth 2.0.

Many of these changes require other changes to the server. Like the feedback and rating system for Attendees has not been implemented yet and would first require definitions for its database models. Existing models would also require changes. A lot of work to do.

I have previously worked with Python and Django. This project brings a lot of new stuff for me. Python2, Flask, Swagger and RESTful APIs. DukeJustin and Mario are going to be mentors for the Organizer Server. All in all, this summer is going to be an exciting one 😀.

About Me:

I’m Shivam, a 3rd year Computer Engineering student from College of Technology, Pantnagar. This is my first attempt at GSOC and I’m grateful to FOSSASIA for accepting my proposal. I started out with FOSSASIA by contributing to their Open Source projects.

Enhancing Open Event Organizer Server

Today, the coding phase of GSoC 2016 starts and marks the beginning of the implementation of all the prototypes and brainstormed ideas. Open Event Organizer Server as explained previously is the backend server for the organizers to create events, sessions, mark tracks, add social links, date/time, etc. It acts as the dashboard for creating data which then gets displayed through the client side apps , i.e open event webapp and android app. Sounds perfect. But as we know there is always scope for improvement.

So, this year we focus on making the server even better. The purpose is not only to make it more useful and powerful with added features but also to make it intuitive for the organizer so that the app can be used to its fullest benefits. A lot of brainstorming by a lot many students and mentors of this project have resulted in a final protoype to be implemented with some features and a better UI.

Some of the features that we have decided to add are:

  • API authentication to provide proper permissions. This helps in improving the overall security.
  • Oauth authentications. No more registration required. The organizer can straightaway use their google, fb and other login credentials to login and create events.
  • Social Links. The organizer can now add social links for their events such as google plus event link, facebook event link, hashtag values, etc.
  • Schedule UI. Now the organizer can directly add the events in calendar and get notified on that particular day. One can also export it in different formats.
  • Overall UI Improvement. We aim to make the UI much more intuitive and easier to use for the organizer so that all the features can be used to its fullest advantage.

This is briefly the aim for making open event organizer server bigger, better and more useful. With this aim, we start our coding today and try to provide a great product by the end of GSoC 2016. A product so good that every event organizer starts using this. Looking forward to making it a success.

Vote for Open Event in Google Impact Challenge

Please vote for Open Event in the Google Impact Challenge: https://impactchallenge.withgoogle.com/deutschland/charity/lxde

The idea of Open Event is to give organizers and participants a tool to plan events and distribute information to attendees. We are working on an organizers server and mobile apps (https://github.com/fossasia/open-event).

Your vote for Open Event will support the development of the project. Thank you!

FOSSASIA and Openclipart Launch Internet of Things T-shirt Design Contest

Special prizes await international designers, students and artists who join the competition and create T-shirt designs for Asia’s premier Open Technology event taking place from March 18-20 at the Science Centre Singapore.

FOSSASIA and Openclipart are launching a contest for International students, artists and designers to design a T-shirt graphic representing “The Internet of Things for Me.” 1st place winner of the contest will win a FiftyThree Pencil and final design placement on the official FOSSASIA 2016 T-shirt. Second and third place winners’ graphics will be used as design elements at the conference main party on the second day of the event.

FOSSASIA Openclipart

“FOSSASIA 2016’s theme is about the Internet of Things for Me,” said chair of FOSSASIA, Hong Phuc Dang. “What better way to represent this idea visually than to unleash local Singaporean and international designers, artists, professionals and students to make artwork representing their ‘things’ and expression about this topic.”

FOSSASIA 2016 challenges all participants to join the contest at Openclipart, the world’s largest collection of original and free to use clipart. The contest begins February 11, 2016 and runs for two weeks until February 24, 2016 where three judges will select the top three compositions. The 1st, 2nd and 3rd place winners will be selected, awarded, and announced publicly.

“Since 2004, Openclipart has been a dynamic creative community of artists and designers producing more than 89,000 clipart by more than 4,900 artists,” stated Openclipart founder, Jon Phillips. “This competition is to bring creativity to the conference, and use the powerness of Open to create image composition of what the Internet of Things is all about. Even better, all the artwork made in the competition will be released into the public domain using Creative Commons Zero 1.0 license so that anyone may use the images for any reason, even commercially.”

Judges for the competition will be Singapore-based artist and designer Gloria Chiang, chair of FOSSASIA Hong Phuc Dang and technologist and co-organizer Mario Behling. After the two-week competition ends on February 24, 2016, results will be announced March 2, 2016.

“Singapore is a hub of software and cultural innovation,” said Singapore-based artist, Gloria Chiang. “FOSSASIA 2016 is a brilliant place to showcase international innovation trends and work with local artists, designers and students to illustrate these concepts.”

“FOSSASIA 2016 T-shirt design competition participants artwork will be showcased not only on T-shirts and publicly on the web, it will also be used to create an atmosphere for the 2nd night of the FOSSASIA 2016 conference,” said organizer Hong Phuc Dang. “All participants of the FOSSASIA 2016 conference are invited to attend this special event and share the works found at our party with the hashtag #FOSSASIA. With lots of surprises, you will not want to miss FOSSASIA 2016.”

Join the competition at: http://openclipart.org/fossasia2016

How to use Open Event framework to host your event website and app

So, we intended to write “Open Event” to allow event/conference organisers to be able to have their own website, and android app without having to code or build them. Our GSoC project is not yet complete, and we are adding new feartures everyday, but it is at a stage where, if you have a small event to host in your school or something, you can take a shot at it, to get versed with how the server works and how the app and website is generated.

The “Open Event” system consists of a server (code), where organisers make an event database, and add list and details of all speakers, sessions, sponsors, locations etc.

We currently have a dev and staging server set up, where organisers can create an account and try out the interface. Neither of these servers are production servers, and their databases keep getting reset when we change code, so use them only to learn how the server dashboard works for now, not to host your final event data.

Next, the organisers might want to have a webapp (code). The webapp is just a responsive, mobile friendly website that shows the details of the events in a easily readable format for the attendees. To create your own webapp, you need to fork this repository and adjust the parameters of the config.js to represent your app.

var config = {
"title": "OpenEvent", // Title of your event.

“apiBaseGetUrl”: “http://open-event.herokuapp.com/get/api/v1/”, // Base URL of the orga-server from where data comes.

“eventId”: “3”, // The event-id of your event
.
“use_testApi”: false // Must set to false, or else uses testcase json files.
};

After changing the config.js, you can deploy the webapp on any webserver that supports hosting static files (example bitballoon.com), or you can host it via github by creating a gh-pages branch, like the example app.

Next, the organisers, can create and deploy an android app (code) for their event. There are some automated configuration options still left to be manipulated, but organisers need to change the BASE_URL variable, in the Urls.java file to point to the data server, and change the package name to their liking in build.gradle. The app can be built using the command ./gradlew build . We have a FDroid flavour, that uses Open Street Maps instead of Google Maps and is completely and purely FOSS.

Wrapping up our first steps – Event Server, Material Design, Daily Scrum

The Event Organizer application has already the basic features and we can move to apply more advanced feature. But let explain me, what me and my friends have done recently.

Our application is already able to manage conferences and events. An owner can edit and change events in the way he/she wants to. And we have two version of this app for websites and for mobile phones(Android). The orga serv which I prepared share Json API to both Android and Web app. I guess it is really comfortable solution because it enables to share date between web and mobile app. Our app’s template style is based on material bootstrap, the same is used by Arnav in his application. It is very flat design.

Zrzut ekranu 2015-07-06 o 22.58.07
First Version of Open EVent Menu Bar

What I really like during this term is daily scrum, where we can share what we have already done, what are we going to do next, and what were the obstacles. Because of it, we can easily be in touch and avoid duplicating our work. We can also discuss and quickly choose the most useful solution. Duke and Mario accompany us and as always were ready to help with any trouble.

Arnav and Manan also organized a conference on their university. Many students were invited and discussed about taking part in open source projects. I regret not to having taken part in it, but India is so far from my country, that I could not get there.

I hope that the starting up part of this project will be also so developing and exciting, and we will finish it with a huge success. And all of us will be very proud, learn many new things, and improve our experience.

In the nearest future Arnav, Duke and me are going to create three environments: staging, production, and development. It helps us to organize our work. I am sure that we manage to do it.

Ok, so stay tuned. “Show must go on”! We don’t stop working! 😉

Using Material Design for the Open Event App

This week I had the chance to go into more depth on the material design principles and I must say that the design itself is awesome. So, I got  started building the user interface of our event app.

After looking at a lot of apps. I decided to make a recycler view list of cardviews. Cool right? Looks awesome too. I did this by put an imageview, relative layout and a linear layout in a linear layout. In the second linear layout I added the textviews for the position, organization. Finally the description textview was added in the relative layout. This is how I designed the card layout. Now for the recycler view of cardviews, I added cardview layout to the recycler view adapter to make the list of cardviews.

I also wrote unit tests for the database this week as suggested by Mohit. At first, they were failing and since I didn’t have any experience writing tests for databases, I wasn’t able to debug them. So, I took help from mohit who ended up identifying the problems which was arising due to the singleton in the database. Apparently, You can’t use singletons in a test because we don’t control the creation of the singleton object, as it is performed inside a static method. There is no way to mock the object in order to test the behavior of our method in isolation. So for now mohit has used dependency injection to make the tests work but I am working on a way to remove the injection.

This is pretty much all from this week. Adios !!

Basic UI implementation for Event app

I am enjoying this a lot. It has been a wonderful experience till now working with all my team members and my mentors. I mean I am learning something new everyday. Like I have learned squashing git commits using rebasing and pushing, which I am using a lot now. I am also following a code review policy suggested by mohit where I push to a new branch on my fork and then create a PR, after which mohit reviews my code and then merges it. This is a very nice practice and I think that every open source developer should follow such practices to get the best quality code out there.

Moving on, this week I was mainly working on implementing the UI for the app. For this I studied layouts of various apps and came out with what I though was best. So I though I should implement the Tracks Fragment First where I add all the tracks I have updated inserted into the database in a recycler view. I take up a very basic layout for now just showing the track name and description.

Screenshot_2015-06-12-20-53-13

I also added the sponsor fragment where I have used Picasso by Square Inc. to download the Logo images and displayed them in a recycler View. Here also I researched various options to download the Sponsor Logo images and I come up with one clear winner : Picasso. We can resize image, load from URL’s,drawables etc. all in just one line of code.

I also added the speaker fragment in which I used a bit complex layout as I had to get the speaker image, name, designation and description all in one recycle view ViewHolder. So after some hiccups I managed to get it right. I used Picasso here as well for the speaker Image. Although I still have to add further details to this fragment and the others. I’ll do so in this week. I am planning on adding some material design with some clickables for different holders. I have also started to work on a list of cardviews as well.

Screenshot_2015-06-12-20-53-28

Open Event Management Application: An Exciting Beginning

The idea of Open Event is to build an App and Management Utility for Tech Conferences and related events. It was selected under Google Summer of Code 2015. I will be working with the organisation FOSSASIA which is the largest Open Source organisation in Asia. To add to my excitement, my mentor is @mariobehling who is none other than the founder of Lubuntu. And my other mentor is @dukeleto who has been teaching us a lot of useful stuff like how to write scrum mails, manage issue tracking and documentation on github, among others.

So, let me describe a little more about the project. We call it ‘Open Event’, and we aim to make it a easy to use solution for all Open Source (or otherwise) event/conference/seminar/workshop organisers to be able to host data about their sessions, speakers, tracks, and be able to show this to the attendees using a Webapp and an Android App. You can always read more about the project goals and track the current progress at the umbrella project on Github.

Rafal is mainly working on the server that will host the data and he’s writing that up in Python, and using flask-admin to create the dashboard. Manan is responsible for the Android app (which I secretly wish I had got, because I love to work more on Android than anything else), while I am going to create the webapp .

The idea behind both the Android and webapp will be to allow event organisers to generate their own apps, without having much technical knowledge. Ideally, when our project is finished, The organisers should be able to create an Android app and a webapp, without writing a single line of code. They would just fill the event name, the color scheme etc, and then fill the data about the sessions, speakers, sponsors, tracks, locations etc of the event.

We hope by the end of the summer we can be ready with a service/product that all event organisers would love to use to host their events on in the future. I’ll follow this blog post up soon with technical details about each component, and the API schema we have adopted.

Right now, it’s 4 days past the ‘coding start’ date, and I have not coded a lot, because I have spent most of my time trying to learn AngularJS, which was very new to me. I should get back to writing more code, and stop writing blog articles, or else Duke and Mario won’t be too happy with me 😛