Open Event: Planning the Scheduler UI

{ Repost from my personal bloghttps://blog.codezero.xyz/planning-the-scheduler-ui/ }

In the first phase of the GSoC coding period, Saptak Sengupta and myself have been working on the Scheduler UI.

The Scheduler UI would allow the organizers to graphically schedule/manage the sessions in their conference/event.

Event-Organizer by Josh Greco has been a major inspiration for the timeline design. The css styles have been borrowed from that project.

After some research, we have decided to use the interact.js javascript library for implementing drag-drop and resizing functionality to the project and lodash for array/collection manipulations and for some useful utility functions.

The following tasks have been formulated:

  • Drag-and-drop interface to add session blocks into a timeline
  • Resize sessions to change time
  • load live data from the server using the API
  • Handle session clashes within a track properly
  • Add Track button that opens up a modal to add a track.
  • Search option for unscheduled sessions
  • Save each session change/update using the API
  • Option to Export timeline as pdf
  • Option to export timeline/calendar as iCal

An umbrella issue (#349) has been created in the open-event-orga-serverrespository to track the progress. There will be a separate issue created for each task when that task is being worked upon and the same would be referred to in the umbrella issue.

We are targeting GSOC 2016: Milestone 4 (Due by June 12, 2016) to finish the Scheduler UI and we are confident that we’ll be able to reach our target. *fingers-crossed* :sweat_smile:

To know more about the Scheduler UI, read Enhancing the Open Event Server: Scheduler UI.

79 issues done in one week!

Have you ever wondered how to achieve such a result?

Screen Shot 2016-05-31 at 12.09.51I couldn’t believe that we’ve solved such many issues in Milestone 2. The 79 is 34% of all issues, isn’t it amazing? I think that defining what kind of project do we want to develop and what features should it have allows us to move quickly and cooperate with the whole team very effectively.

What you need to achieve similar score?

First of all, you need to prepare good document which help a whole team to get familiar with the project and its features. The most important part is to describe very precisely step by step a project flow, and features required to implement. It can help us to avoid obstacles, tie-ups and questions related to flow, because every developer is able to go through the document and find a desired answer.

Secondly, you need to define a target what are we going to achieve and when. Based on this info developers can define plan of work easily. We have divided 3 month period into 15 milestones. In each end of milestone we talk what we have achieved, what has been done, what hasn’t been done and what are we going to do in next week.

Daily, also works well in our team, because we are able to monitor what is currently happening in project. And you can quickly help if someone has a problem.

Flow of solving issues is very simple(Justin configured a CI). We have two branches – master and testing. Writing tests is essential to do before writing code. If tests are ready and passed successfully we can create a pull request. Then other developers review our code and finally if everything is ok we can merge changes with testing branch.

Open Source Event App Development

Some background about myself, I am a 3rd year Information Technology student from JSS Academy of Technical Education, Noida, India. I love Front-end development and is currently working on an awesome project Open-Event .

The project will make it easier for the events, tech summits to create a web app and mobile app quickly by providing necessary information such as speakers for the event, sessions, tracks, location etc. The project itself consists of three core components :
1. Open-Event Organiser Server
2. Open-Event Android App
3. Open-Event Web app
It’s the end of community bonding period before the past week, which was the best time to get ourselves familiar with the practices of the community, understanding of the codebase, making new friends and setting up goals. I have already set up my goals and is working on Open-event-web app.

The first version of the web app is to make the web app functional by just uploading a JSON file, the second part is to make it sync with the REST API provided by the Orga-server. I with Arnav have created the User-Story for the web app. Also, I have created the data-flow for the work, we will be carrying forward.

I am having a good time, and will work hard to complete the goals of the project.

Thanks

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.

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!

Community Building in India

Along with Arnav and Jigyasa we organised an event to promote contributions to open source projects. We especially wanted to get people interested in the projects we are working on this summer with FOSSASIA. So yeah, we had an awesome event planned in collaboration with the Organising committee of Esya’15 (My college’s Technical festival) and Women who code Delhi. Also, Another fellow working with the Python software Foundation Yash volunteered as speaker to share his experiences.

We had an awesome turnout of about 150 odd people. So Arnav started off with his presentation where he talked about his experience with Open source technologies and How he got into development. He talked about some important things like Why he likes FOSS, his contributions etc. which got the participants really excited. He also talked about some of his projects and GSoC. Then he moved on to our project and how’s it been like till now. You can find his slides here.

During Arnav’s presentation, Mario came online and just after Arnav was done, We put Mario on Live hangout’s video call with the participants. Mario talked about his experience with OSS and why he likes it. He also talked about some projects as well as answered questions that the attendees had. It was a very informative and inspiring talk. Thank you mario for that.

Then Jigyasa made her presentation. Right when she was in the middle of her presentation, his mentor Martin came online on hangouts and her presentation was cut short. It was pretty cool to have Martin as well. Though his children were playing in the background and making some noises😛 but the talk was pretty informative.

Next I put on the pre recorded video Mohit had sent me talking about his experience and some tips to start a beautiful journey into the open source world. His video very precise and to the point. I liked that about the video. The content was really good. Thank you Mohit to take out time to make the recording.

Lastly I gave my presentation where I talked about some myths regarding open source. Then I talked about my experience as a programmer and an Open source enthusiast. For the maximum part of my presentation, I talked about our GSoC project. Arnav also joined me during the time where I was showing some of our work. The participants also asked questions about our project during the allocated time. We also gave them the links to the repos and mailing list etc. to get them a starting point to contribute to FOSSASIA. It was a cool event all in all.

Personal Recap on First Project Phase

Time has has flown by. It feels like yesterday when we started working and now we’re half way through the GSoC project time already.

But I must say that it has been really lovely working with such awesome people. We are working really nicely as a team. The project that we’re doing ‘Open-Event’ is also going to help so many organisers. It would take away so much burden off of the organisers head. I mean the biggest worry for the organiser is to get the info about the event to the people and get them excited through the medium of the apps like the web-app and the android app and the pain of finding a developer who is worthy enough and then pay a lot to get the app ready in time. All of this is taken care off by our project. It’s cool, right?

Anyway, We have already done the basic stuff in the app and made it operational but yeah now I am working on some other necessary stuff like notifications, bookmarks etc. and Rafal is working on login and stuff to keep the editing rights with the owner only. Arnav is also working on the UI of the app and he has made the app totally on material UI using Bootstrap material. So has rafal on the server frontend.

All of us also had a hangouts call to discuss the future of the project and how we’re going to proceed. Unfortunately rafal couldn’t make it. We discussed about how we’re going to get ready for the final events. So the conclusion was to get 3 environments ready : Staging, production and development, So that we can develop cool new features without harming the work that has been accomplished. So this will be like keeping an alpha, beta and stable version for the server.

At the end I must say that I have learned a lot as well as enjoyed by working on this project and I am sure that ther’s a lot of learning to do in the future as well. Adios !!

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