Event – Page 17 – blog.fossasia.org

Recyclerview in Open Event Android: A great upgradation to ListView

Post author:mahikaw
Post published:June 27, 2017
Post category:Android Event Event Management FOSSASIA GSoC Open Event Tutorial
Post comments:0 Comments

Recently, I was fixing a trivial bug in the Open Event Android app, an interesting thing caught my attention. Most of the lists in the app where actually not implemented using the traditional ListView, but instead used something called RecyclerView. The beautiful transitions that make this app the beauty it is, is due to the amazing and easy to code Recycler Views used in it.

A screen shot showcasing the simplicity of the FOSSASIA Open event android app.

List View is one among the various views that Android provides. In a nutshell, it is literally a group of generic views in Android. Why then use an entire new and more complex view, if all that it offers is a number of views displayed together? Well, it certainly has certain add-ons to the most generic set of views like Image and TextViews in Android.

I encourage you to think about what different could the ListView be as compared to multiple declarations of TextView. The thing with multiple declarations of a Text or Image View is that they aren’t “scrollable”, that is, if you want numerous Views in a single activity, without List View, you will have to fit them on one screen, else make another activity. So, if you want a scrollable view with same basic view items, List View is the way to go about it in Android.

The next question that may arise is:

How does a Listview work?

Google defines Adapters as “a bridge between an AdapterView and the underlying data for that view”. List Views use Adapters that retrieve data from Arrays, Lists and other data structures and queries, plugs them into our List View and thus, creates a beautiful looking List in no time. In Spite of all this, List View certainly lags in various fields that deal with performance, memory and compactness issues. As a great improvement Recycler View was introduced.

Using Recyclerview you are not restricted to vertical scrollable views. It has the ability to provide horizontal, vertical, grid and staggered layouts among others, with the help of different layout managers:-

recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));

recyclerView.setLayoutManager(new LinearLayoutManager(RecyclerView_Activity.this,LinearLayoutManager.HORIZONTAL, false));

RecyclerView.ItemDecoration class allows us to add special drawings to our view. Thus, we can add dividers, borders and much more using this class.

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
 
     private Drawable mDivider;
 
     public DividerItemDecoration(Drawable divider) {
         mDivider = divider;
     }

Adding animation used to be a devil of a task in Listview days, however with the release of Recyclerview, it has become a lot more easy. RecyclerView.ItemAnimator class helps in animating items while the adapters are being changed.

Next, we have something related to the performance:-

In a List View, you might have come across the term, ‘Viewholder’, but if you haven’t, that’s okay too. However, in Recyclerview, using View Holders have been made mandatory and for a good reason. The class goes by the name RecyclerView.ViewHolder.

What exactly are View Holders?

The clean dividers and minimal design in the Recyclerview makes up for a subtle UI.

In a broader sense, it is used to provide information about the identity of an itemView and it’s position within a Recyclerview. Without View Holders we have an overhead of calling the function findViewById() for every item in our Recyclerview! This upgradation from the typical findViewById() to View Holders awards us with better and more smooth scrolling through the list.

How does Recyclerview work?

List View is an ancestor to Recyclerview. Recyclerview has everything that List View offers to us (except for a few things like setchoicemode(), which I might take up in my upcoming blog posts), and much more.

A great achievement that Android achieved through Recyclerview has been it’s ability to “recycle” views on the way. In laymen terms, if you scroll through a Recyclerview, the views that go away from the screen during scrolling are the same views that come into the screen. The only difference is that the data in the views leaving the screen is changed to the data of the views entering your screen and so they are presented as new views. In this way, a Recyclerview helps saving memory for sure as compared to List Views.

There are still a lot of other things to learn about Recycler and List Views and you find more resources here.

Implementing Google Maps in Open Event ember Front-end

Post author:anu-007
Post published:June 27, 2017
Post category:Event FOSSASIA GSoC Open Event Tutorial
Post comments:0 Comments

In the deployment of the Open Event Front-end on eventyay.com we want to show an event’s location on a map using Google Maps. Since Eventyay.com requires Google map to be used at several web pages, we can use Google map as an ember component for reusability.

How did we do it? The following walks you through the entire process.

The first step is to: Install g-map addon-

ember g-map, which is an addon, is available on ember add-on library which can be found at emberobserver.com. So first import that library using ember cli command

ember install ember-g-map

This command adds an ember-g-map module in our node_modules and also updated package.json file of our app now our ember-g-map modules contains the following directories. The following three are required to be highlighted that serves our purpose-
Addon/ – this directory contains all the implementation logic which acts as a prototype for the g-map component
App/- this directory basically exports a copy of g-map from our Addon/ directory to the web page where it is required. The export includes the logic implement inside the Addon/ directory which can later be imported by the parent app for use.Package.json – this file holds various metadata relevant to the ember-g-map

Generate Component-

The next step is to generate a component event-map (we can name our component anything we want but be sure to add a hyphen between the name). The component can be generated with the help of the following command of ember cli-

ember g component public/event-map

This will add three files in our app –

event-map.js located at app/component/public/event-map.js

event-map.hbs located at app/template/component/public/event-map.hbs

event-map-test.js located at tests/integration/component/public/event-map-test.js

Define Component-

Now let us use these files to add a google map component in our app-

First of all, we have to tell index.hbs about our new component that we are going to add. So we add our component {{public/event-map}} in our index.hbs file which is located at app/templates/public/index.hbs And we fetch latitude, longitude and location name from model and store in the event object and pass it to our component so that this information is available in the component.

<div class="location">
<h1 id="getting-here">{{t 'Getting Here'}}</h1>
 {{public/event-map event=model.event}}
</div>

The event-map.js file will be used to add ui grid class to assign a class to the div of the component. This will alleviate the redundancy regarding the creation of an extra div to enclose the component and then giving it the ui grid class.

import Ember from 'ember';
 
const { Component } = Ember;
 
export default Component.extend({
 classNames: ['ui', 'stackable', 'grid']
});

In our event-map.hbs we have with us the latitude, longitude, and locationName available and we are good to use our g-map addon. So in our event-map.hbs we can directly add g-map and g-map-marker but make sure that we pass lat and lang attributes to it. We can use custom options like backgroundColor, draggable etc. but here we have used street view and gestureHandling. gestureHandling is set as “cooperative” so that for smaller screen device, zooming is possible only with two fingers so that scrolling would become easy.

<div class="eight wide column event-map">
 {{#g-map lat=event.latitude lng=event.longitude 
 zoom=12 gestureHandling='cooperative' 
 streetView='StreetViewPanorama' as |context|}}
 {{g-map-marker context lat=event.latitude lng=event.longitude}}
 {{/g-map}}
</div>
<div class="eight wide column address">
 <h1>{{t 'Address'}}</h1>
 <p>{{event.locationName}}</p>
</div>

Next we have to decide the size of aur google map canvas on which our map is to be displayed. We define the size of our canvas in the public-event.scss file which is located under styles/pages/public-event-scss.

.event-map > .g-map {
 height: 100%;
 width: 100%;
}
 
.event-map > .g-map > .g-map-canvas {
 height: 300px;
}

Lastly, we have to modify our event-map-test.js file. Here we perform integration test for our component. We create a dummy object with latitude, longitude, and locationName in it and pass it to our component and then check if it renders correctly or not.

import { test } from 'ember-qunit';

import moduleForComponent from 'open-event-frontend/tests/helpers/component-helper';

import hbs from 'htmlbars-inline-precompile';

moduleForComponent('public/event-map', 'Integration | Component | public/event map');

let event = Object.create({ latitude: 37.7833, longitude: -122.4167, locationName: 'Sample event location address' });

test('it renders', function(assert) {

  this.set('event', event);

  this.render(hbs `{{public/event-map event=event}}`);

  assert.equal(this.$('.address p').text(), 'Sample event location address');

});

Now use ember s command in our ember cli and visit localhost:4200

Then open a event at the end we see our Google map integrated.

Use ember test –server command to check if all our tests (integration, acceptance, etc.) are passed.

Find out more at – ember-g-map

Sorting language-translation in Open Event Server project using Jinja 2 dictsort.

Post author:magdalenesuo
Post published:June 5, 2017
Post category:Event Event Management FOSSASIA GSoC Open Event
Post comments:0 Comments

Working on the Open Event Server project an issue about arranging language-translation listing in alphabetical order came up. To solve this issue of language listing arrangement i.e. #2817, I found the ‘d0_dictsort’ function in jinja2 to sort dictionaries. It is a defined in jinja2.filters. Python dicts are unsorted and in our web application we at times may want to order them by either their key or value. So this function comes handy.

This is what the function looks like:

do_dictsort(value, case_sensitive=False, by='key')

We can write them in three ways as:

{% for record in my_dictionary|dictsort %}
    case insensitive and sort the dict by key

{% for record in my_dictionary|dicsort(true) %}
    case sensitive and sort the dict by key

{% for record in my_dictionary|dictsort(false, 'value') %}
    sort the dict by value, normally sorted and case insensitive

The first way is easily understood that dict has been sorted by key not taking case into consideration. It is just in the same way written as dictsort(false).
Second way is basically the first being case sensitive. dictsort(true) here tells us that case is sensitive.
Third way is dictsort(false,’value’). The first parameter defines that case insensitive while second parameter defines that it is sorted by ‘value’.

The issues was to sort translation selector for the page in alphabetical order. The languages were stored in a dictionary which to change in order, I found this function very easy and useful.

Basically what we had was:

This is how the function was used in the code for the sort. Like this:

<ul class="dropdown-menu lang-list">
   {% for code in all-languages|dictsort(false,'value') %}
       <li><a  href="#" style="#969191" class="translate" id="{{ code[0] }}">{{  all_languages[code[0]] }}<>a><li>
    {% endfor %}
<ul>

Here: {{ all_languages }} is the list which contained the languages like French, English, etc., which could be accessed with its global language code. code here(index for all_languages) is a tuple of {‘global_language_code’,’language’} (An example would be (‘fr’,’French’), so code[0] gave me the language_code.

Finally, the result:

This is one of the simple ways to sort your dictionaries.

Open Event Server: No (no-wrap) Ellipsis using jquery!

Post author:magdalenesuo
Post published:June 5, 2017
Post category:Event Event Management FOSSASIA GSoC Open Event
Post comments:0 Comments

Yes, the title says it all i.e., Enabling multiple line ellipsis. This was used to solve an issue to keep Session abstract view within 200 characters (#3059) on FOSSASIA‘s Open Event Server project.

There is this one way to ellipsis a paragraph in html-css and that is by using the text-overflow property:

.div_class{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}’’

But the downside of this is the one line ellipis. Eg: My name is Medozonuo. I am…..

And here you might pretty much want to ellipsis after a few characters in multiple lines, given that your div space is small and you do want to wrap your paragraph. Or maybe not.

So jquery to the rescue.

There are two ways you can easily do this multiple line ellipsis:

1) Height-Ellipsis (Using the do-while loop):

//script:
if ($('.div_class').height() > 100) {
    var words = $('.div_class').html().split(/\s+/);
    words.push('...');

    do {
        words.splice(-2, 1);
        $('.div_class').html( words.join(' ') );
    } while($('.div_class').height() > 100);
}

Here, you check for the div content’s height and split the paragraph after that certain height and add a “…”, do- while making sure that the paragraphs are in multiple lines and not in one single line. But checkout for that infinite loop.

2) Length-Ellipsis (Using substring function):

//script:
$.each($('.div_class'), function() {
        if ($(this).html().length > 100) {
               var cropped_words = $(this).html();
               cropped_words = cropped_words.substring(0, 200) + "...";
               $(this).html(cropped_words);
        }
 });

Here, you check for the length/characters rather than the height, take in the substring of the content starting from 0-th character to the 200-th character and then add in extra “…”.

This is exactly how I used it in the code.

$.each($('.short_abstract',function() {
   if ($(this).html().length > 200) {
       var  words = $(this).html();
       words = words.substring(0,200 + "...";
       $(this).html(words);
    }
});

So ellipsing paragraphs over heights and lengths can be done using jQuery likewise.

FOSSASIA OpenTechSummit 2016. http://2016.fossasia.org/

Apply for Your Free Stay during the FOSSASIA Summit 2017 with our 100 #OpenTechNights Program

Post author:Hong Phuc
Post published:February 7, 2017
Post category:Event FOSSASIA loklak Open Event
Post comments:0 Comments

The FOSSASIA Summit 2017 takes place from Friday March 17 – Sunday March 19 at the Science Centre Singapore. We are now inviting Open Source contributors to apply for a free stay in a Singapore hostel and a free ticket to the event. All you have to do is convince us, that you are an awesome Open Source contributor!

The details

Developers from all over the world are joining the FOSSASIA Summit. We want to connect established and new Open Tech contributors alike. Therefore FOSSASIA is supporting the Open Source community to join the event by offering 100 free nights stay at a hostel in the centre of Singapore and a free ticket to the event. All you have to do is to fill in the form with information that convinces us that you are an awesome contributor in the Open Source community.

The Process

Step 1: Please fill in our form here before February 17 (23:00 Singapore Time).

Step 2: We will get back to you at latest within 3 days after the deadline if you are selected. But, also we are choosing very convincing applicants on an ongoing basis. So, the earlier you apply the higher your chances to get a free stay might be.

Step 3: The selected applicants will need to confirm their itinerary and tickets before March 1st to re-assure their free stay in Singapore.

Expectations of Participants – Share what you learn

1. Please support volunteers, speakers and participants at the event. Let’s bring all this good spirit of sharing Open Technologies and learning together!

2. Help to reach out to participants who cannot join us at the event. For example make some tweets, share what you learn on social media, publish photos and put up blog posts about the summit.

Our Team

Our team of “100 #OpenTechNights” – Hong Phuc Dang, Mario Behling, and Roland Turner – is excited to meet you in Singapore!

Apply Now

Apply for a free stay with #FOSSASIA #OpenTechNights and participation at the FOSSASIA Summit 2017 now here!

More Information

More updates, tickets and information on speakers also on our #OpenEvent system: https://eventyay.com/e/45da88b7/

FOSSASIA Summit 2017 Singapore – Call for Speakers

Post author:Hong Phuc
Post published:September 28, 2016
Post category:Event FOSSASIA
Post comments:0 Comments

The FOSSASIA OpenTechSummit is Asia’s leading Open Technology conference for developers, startups, and IT professionals. In 2017 the event will take place from March 17th – 19th at the Science Centre Singapore.

During three days, thousands of developers, technologists, scientists, entrepreneurs and artists get together to showcase latest technologies, communicate, exchange ideas, learn from each other, and collaborate. Topics range from information technology and Open Source software development to hardware and maker projects, open design tools, machine learning, DevOps, knowledge tools, and citizen science.

For our 2017 feature event we are looking for speaker submissions for the following tracks:

* Open Source Software
* Design, Art & Culture,
* Internet, Society & Politics,
* Hardware & Making,
* Health and Technology
* Science
* Kernel Track and
* Startup and Business Development

Apart from the conference program, the FOSSASIA Summit offers an exhibition space for company and project stands and areas for community assemblies, and developer meetings.

Submission Guidelines

Please propose your session as early as possible and include a description of your session proposal that is as complete as possible. The description is of particular importance for the selection. Once accepted, speakers will receive a code for a speakers ticket. Please indicate on the submissions form if you would like to apply for a sponsored community ticket.

Submission Link: 2017.fossasia.org/speaker-registration

Dates & deadlines

Please send us your proposal as soon as possible via the FOSSASIA Summit speaker registration.

December 20th, 2016: Deadline for submissions
January 18th, 2017: Notification of acceptance
March 17th – 19th, 2017: FOSSASIA OpenTechSummit

Sessions and Tracks

Talks and Workshops
Talk slots are 20 minutes long plus 5-10 minutes for questions and answers. You can also sign up for either a 1-hour long or a 2-hours workshop. Longer sessions are possible in principle. Please tell us the proposed length of your session at the time of submission.

Lightning talks
You have some interesting ideas but do not want to submit a full talk? We suggest you go for a lightning talk which is a 5 minutes slot to present your idea or project. You are welcome to continue the discussion in break out areas. There are tables and chairs to serve your get-togethers.

Stands and assemblies
We offer spaces in our exhibition area for companies, community projects, installations, workshops, team gatherings and other fun activities. We are curious to know what you would like to make, bring or show. Please add details in the submission form.

Developer Rooms/Track Hosts
Get in touch early if you plan to organize a developer room at the event. FOSSASIA is also looking for team members who are interested to co-host and moderate tracks. Please sign up to become a host here.

Publication

Audio and video recordings of the lectures will be published in various formats under the Creative Commons Attribution 4.0 International (CC BY 4.0) license. This license allows commercial use by media institutions as part of their reporting. If you do not wish for material from your lecture to be published or streamed, please let us know in your submission.

Sponsorship & Contact

If you would like to sponsor FOSSASIA or have any questions, please contact us via office@fossasia.org

Links

FOSSASIA Summit 2017: 2017.fossasia.org

FOSSASIA Summit 2016 Event: Wrap-Up

FOSSASIA Photos: flickr.com/photos/fossasia/

FOSSASIA Videos: Youtube FOSSASIA

FOSSASIA on Twitter: twitter.com/fossasia

FOSSASIA Coding Contest: codeheat.org

Engelsystem GSoC 2016 Summary

Post author:Sreeja Kamishetty
Post published:August 23, 2016
Post category:Event FOSSASIA GSoC
Post comments:0 Comments

This blog post I would like to share my work done during the GSoC period (May – August). Doing GSoC has been one of the most wonderful experience in my life.

Introduction

ENGELSYSTEM – Engelsystem is a volunteer management application for events written in PHP. It is used for coordination among different angels who want to volunteer.

END USERS FOR ENGELSYSTEM

SYSTEM ADMINS

It will make it easy for them to coordinate with the volunteers by the product we developed.

VOLUNTEERS /USERS

Those who want to volunteer finds it difficult to coordinate, contact admins. This platform helps all those who want to help.
Volunteers can register and can allot their shifts. A better User Interface, Integration with different Asian languages will allow the system to be used globally and in their local languages and ease for the volunteers to use.

As a part of the project I developed many new features for engelsystem. Implemented a workflow similar to wordpress, Implemented MVC model, Importing user data to database directly through script, Implemented a copy function for shifts, sending messages to entire group/ AngelType, Implemented a search for all Angels View, Date Picker for shifts, New Settings Page for admin where we can write event related information, Deployed the system on different platforms, Added Documentation, Re-factor the code, Improved the code standards, Blog Post tutorials on various technologies.

I am really happy with the outcome of the project. I learnt lot of new technologies and was improving day by day.

My initial proposal, time line of the project

My GSOC 2016 Proposal.

I have proposed a many UI changes for the system, Improving Documentation, Refactoring. All of these are done during the period. And I have implemented extra features and surpassed the proposal.

I have finished most of the proposed features before the Mid Evaluation. There was a shift in the timeline but I am very happy that the outcome was excellent. I was able to finish all the issues assigned to me on time.

What I have done to make Engelsystem better?

Overview of my contributions

Commits: 172

Additions: 87,528

Deletions: 80,555

Issue Completed: 60

Pull Requests Merged: 36

Scrum Reports: 99

Blog Posts: 15

Daily Timeline during GSOC.

Everyday we need to write a scrum report about our progress and submit it before 10 AM local time. Scrum consists of the following information.

1.What did you do yesterday? (which areas, issues you worked on, links)

2.What do you plan to do today? (which areas, issues you want to work on, links)

3.What is currently preventing you from achieving your goals? What blockers do you encounter?

I have written total of 99 scrum reports from May 10 – August 23. I have never missed a scrum report.

My Activity on Engelsystem Google Group : https://groups.google.com/forum/#!forum/engelsystem

Working Environment

All the issues for engelsystem are available on github. Whenever we need to implement a new feature or resolve a bug we need to make a issue and start working on it.

There are 15 milestones for the project starting from May 10 – August 28th.

For discussions we need to use slack and google groups.

Development: https://github.com/fossasia/engelsystem/

Issues: https://github.com/fossasia/engelsystem/issues/

Engelsystem Features

Implemented work flow similar to wordpress.

wordpress has a famous 5 minute installation flow. We need to implement it for our project engelsystem.

Implemented the following tasks as a part of the workflow:

Changed engelsystem/config/config.default.php to engelsystem/config/config-sample.default.php.
Installation script where admin can define name and email at the beginning
Script to import tables directly
Instructions to Configure document root.
Documented the new flow in a blog post and in all installation readme’s

As part of flow similar to wordpress. I have created a script which directly imports the tables. Initially user need to do it through mysql.

Parent Issue: https://github.com/fossasia/engelsystem/issues/161

Sub Issues:

https://github.com/fossasia/engelsystem/issues/212
https://github.com/fossasia/engelsystem/issues/213
https://github.com/fossasia/engelsystem/issues/216

Pull Requests:

https://github.com/fossasia/engelsystem/pull/211
https://github.com/fossasia/engelsystem/pull/197

Implemented script to install all the dependencies

To setup engelsystem on local server. User need to install LAMP, clone the repository, configure document root, create database.
My script allows to do that all in one command.

Issue: https://github.com/fossasia/engelsystem/issues/209

Pull Request: https://github.com/fossasia/engelsystem/pull/211

Implement MVC Model

Initially the code has no clear MVC model. There were code in pages which is a mix of model and controller.
We need to remove the pages directory and move them to controller and model.
There were 26 pages. Created model files and controller files for the pages. Now the code structure is in clear MVC model.

Parent Issue: https://github.com/fossasia/engelsystem/issues/163

Sub Issues:

https://github.com/fossasia/engelsystem/issues/168
https://github.com/fossasia/engelsystem/issues/169
https://github.com/fossasia/engelsystem/issues/170
https://github.com/fossasia/engelsystem/issues/171
https://github.com/fossasia/engelsystem/issues/172
https://github.com/fossasia/engelsystem/issues/173
https://github.com/fossasia/engelsystem/issues/174
https://github.com/fossasia/engelsystem/issues/175

Pull Request:

https://github.com/fossasia/engelsystem/pull/176
https://github.com/fossasia/engelsystem/pull/178
https://github.com/fossasia/engelsystem/pull/185
https://github.com/fossasia/engelsystem/pull/192

Import user data from a spreadsheet

For FOSSASIA events we will be having lots of user data. If we can import the user data to engelsystem then it will very useful.
Implemented a script where admin just needs to browse a csv file containing data and information will be imported successfully

Issue: https://github.com/fossasia/engelsystem/issues/20

Pull Request:

Configuring Document Root

To avoid security issues. User need to configure Document Root. Added instruction to configure document root.

Issue: https://github.com/fossasia/engelsystem/issues/213

Pull Request: https://github.com/fossasia/engelsystem/pull/211

Implemented Search in All Users View

In All Users Page admin can view all the user information. If there are many users and admin wants to search for a particular name/field it becomes difficult.
I Implemented a search which makes it easy for admin to search any user.
We can search an user by any field like name, organisation, github username etc.

Issue: https://github.com/fossasia/engelsystem/issues/3

Pull Request: https://github.com/fossasia/engelsystem/pull/126

Design New Settings Page

Admin Settings Page: Here admin can enter event related information which will be shown on the login page to the all Angels and the welcome message is displayed near the registration page.

Issues:

https://github.com/fossasia/engelsystem/issues/218
https://github.com/fossasia/engelsystem/issues/145

Pull Request:

https://github.com/fossasia/engelsystem/pull/224
https://github.com/engelsystem/engelsystem/pull/264

Deployed Engelsystem to Heroku

Heroku: Heroku is a cloud application platform – it is used to build and deploy web apps.
We need not worry about dependencies and testing. We can directly deploy a branch to heroku and test code whenever there is a new feature or new code added.
An automatic test deployment for engelsystem from the development branch is http://volunteersys.herokuapp.com

Issues:

https://github.com/fossasia/engelsystem/issues/136
https://github.com/fossasia/engelsystem/issues/156

Worked on Improving the Codacy Project Grade

Issue: https://github.com/fossasia/engelsystem/issues/158

Viewing the shifts in respective time zone

Initially the user views all the shifts in server timezone.
Shifts should be shown to the volunteers/ angels in their respective time zone to avoid confusion.
Now User gets an option to select a time zone and view it in the respective time zone.
User needs to select the timezone while registering or change it in the settings page.

Issues:

https://github.com/fossasia/engelsystem/issues/120
https://github.com/fossasia/engelsystem/issues/119
https://github.com/fossasia/engelsystem/issues/111
https://github.com/fossasia/engelsystem/issues/108

Pull Request: https://github.com/fossasia/engelsystem/pull/138

Database migrations with Phinx

Database migrations can transform your database in many ways such as creating new tables, inserting rows, adding indexes and modifying columns.
It avoids the use of writing MYSQL by hand and instead offers a powerful API for creating migrations using PHP code.
Implemented database migrations for update.sql file.

Issues: https://github.com/fossasia/engelsystem/issues/137

Pull Request: https://github.com/fossasia/engelsystem/pull/160

Sending message to entire group/AngelType

Initially admin was able to send messages to individual angels. Implemented Admin Feature where admin can send messages to entire group/ AngelType

Issue: https://github.com/fossasia/engelsystem/issues/13

Pull Request: https://github.com/fossasia/engelsystem/pull/116

Unit Tests for php files

Writing unit tests

I have written unit test for PHP files using PHPUnit. With PHPUnit, the most basic thing you’ll write is a test case. A test case is just a term for a class with several different tests all related to the same functionality.This is an example unit test for AngelType_model.php

Issue: https://github.com/fossasia/engelsystem/issues/1

Pull Request: https://github.com/fossasia/engelsystem/pull/138

Localization – Viewing your site in different languages

Advantages of Localisation : It will also allow the system to be used globally on a large scale. As a part of this project I have implemented localisation in couple of languages.User can select I of the languages and the total information will be available in that language.

Issue: https://github.com/fossasia/engelsystem/pull/8

Pull Request: https://github.com/fossasia/engelsystem/pull/48

Admin User View : Added email and mobile fields

Added important fields to the view of users by admin. Added email and mobile fields so that admin can contact users easily.

Issue: https://github.com/fossasia/engelsystem/issues/11

Pull Request: https://github.com/fossasia/engelsystem/pull/38

Shifts: Map View

Viewing the shifts in map view form which makes user easy to find and sign up for shifts.

Issue: https://github.com/fossasia/engelsystem/issues/91

Pull Request: https://github.com/fossasia/engelsystem/pull/106

Admin Feature – Create New Shift From Existing Shift

Admin can create new shift from existing shift or update the shift by selecting the shift.

Issue: https://github.com/fossasia/engelsystem/issues/15

Pull Request: https://github.com/fossasia/engelsystem/pull/112

Admin Features – Edit Display Message

As this system is used by different organisations for different purposes . New feature has been added where admin can change the display message in registration.

Issue: https://github.com/fossasia/engelsystem/issues/97

Pull Request: https://github.com/fossasia/engelsystem/pull/98

Admin Features – Date/Time Picker For Edit Shifts

Date Picker – While editing shifts also Date picker is implemented For Edit shifts view.

Issue: https://github.com/fossasia/engelsystem/issues/77

Pull Requests: https://github.com/fossasia/engelsystem/pull/106

Admin Features – Date/Time Picker For Shifts

Date Picker – Where User and admin Can easily Pick date for shifts.

Issue: https://github.com/fossasia/engelsystem/issues/16

Pull Request: https://github.com/fossasia/engelsystem/pull/41

Features – Register Page UI/UX

Before GSOC Design of register page doesn’t follow any pattern.

After changing the UI. Design looks like this.

Issue: https://github.com/fossasia/engelsystem/issues/54

Pull Request: https://github.com/fossasia/engelsystem/pull/69

Fixed different bugs

Different Timestamp error for shifts.
Initially we were unable to view the shifts in map view form. Fixed the error.
Fixed Different Timestamp Error in Log Page.
Fixed Name Error in User Page.
Heroku Deployment.
Codacy errors and travis CI errors.
Content in german

Issues:

https://github.com/fossasia/engelsystem/issues/36
https://github.com/fossasia/engelsystem/issues/44
https://github.com/fossasia/engelsystem/issues/78
https://github.com/fossasia/engelsystem/issues/84
https://github.com/fossasia/engelsystem/issues/91
https://github.com/fossasia/engelsystem/issues/121

Code Quality and Refactoring

Refactoring:

Refactoring is very important to maintain code standards.
After implementing MVC model all the model files have duplicate and unorganised code. Refactored the code based on table it is accessing.
It will make any user easily find the function and create in the respective table.

Maintaining code quality:

When we add new code we need to explain what a particular variable is and what are the parameters of a function.Added comments to the code and function created. It will help new developers to easily understand the code.

Issues:

https://github.com/fossasia/engelsystem/issues/99
https://github.com/fossasia/engelsystem/issues/135
https://github.com/fossasia/engelsystem/issues/223

Documentation

As much as we code we need to document. For good software we need to have good documentation also. Added several documentation about installation, setup, configuration, features.

Added the following Documents during May-August

Instructions to configure document root in ubuntu

Steps to run database migration

How do I deploy Engelsystem on HEROKU

INSTALLATION OF ENGELSYSTEM

How do I install Engelsystem on Docker

Five Minute Installation of Engelsystem

Running tests for Engelsystem

Features of Engelsystem

Blog Posts

It’s very important for us to share our knowledge to entire world. The easiest way to do this is by blog posts.

I have written 15 blogs posts during May-August on wide variety of topics.

Engelsystem GSOC 2016 Summary

Software Testing

Working with Apache Web server

Importing database with php script

Configuring Document Root Apache2 Ubuntu

Installing Engelsystem in Five Minutes

Writing Installation Script for Github Projects

Dockerizing PHP and Mysql application

Implementing Database Migrations

Import Excel File Data in MYSQL Database using PHP

Implementing multiselect dropdown

Deploying PHP and Mysql Apps on Heroku

Engelsytem – Sending messages to users or groups with PHP

Adding Notifications, Volunteer Shifts and DB Export in Engelsystem

Engelsystem – Implementing Localization

Technologies Used

PHP: Most of the code written is in PHP. I used PHP for implementing new features.

MYSQL: Tables and database are written in mysql. For any new addition or deletion of queries is done in sql.

HTML: The layout is rendered in HTML. To change the layout or add new layout style is done in html.

CSS: Bootstrap code for styling, Fonts etc.

JS: Forms, datepicker, multi select dropdown.

Phinx: For database migrations

Bash: For dependencies script.

Markdown: For Documentation.

Drupal: Coding Standards.

After GSOC

Contributing to FOSSASIA After GSOC

This is the beginning of my contributions to open source. There is lot more to come.
Will really miss Writing scrums, Discussions with mentors, issues, Pull requests, Travis CI. GSOC has been an amazing experience for me.
I will create new issues, allow new developers to contribute to our project. Will help them in fixing bugs. I will be continuing contributing to FOSSASIA after my gsoc to engelsystem and other projects as well.

Participate in Google Code In and Fossasia Summit.

I will participate in Google Code In. I would like to be a mentor for young developers if given a chance.
I will be conducting meetups and explain about GSOC and FOSSASIA for young developers in college.
I am very interested in attending summits and meeting new developers.I will surely attend the Fossasia summit in 2017 and present my work.

Special Thanks

I would like to Thank my mentors Mario Behling, Hong Phuc Dang, Quan Nguyen, Vu Hung Nguyen for being there to help me and guide me.
I have worked very hard and sincerely during this period. I have gained a lot of knowledge from you all. Yours suggestions and support have helped me a lot.
I would like to Thank FOSSASIA Community for giving me this opportunity and believing in me.
I would like to Thank Google Summer of Code for this experience.

Webapp: The generator for making schedule pages

Post author:championswimmer
Post published:June 6, 2016
Post category:Event Event Management
Post comments:1 Comment

Why a static HTML generator

Before we start working on more advanced features like push notifications and iCal exports etc, we have been working on getting a generator (a simple node.js script) up, that can take data for an event either in form of json files, or from a given API in open-event data format, and generate a schedule page.

It has been used to generate the programm page of OpenTechSummit 2016 (http://2016.opentechsummit.net/programm/)

It is based on the open-event-scraper project of FOSSASIA, and some more features had been added when developing it for OTS16. Some of the new features include –

Ability to define copyright and license in the API/Json, and generator adds it in the footer
Ability to define sponsors (support for upto 3 levels are there), and the generator adds sponsor logos with links at the bottom of the page.
Ability to embed audio, slides and videos into the session cards.

How the process works

Right now if you take a look at the open-event-scraper project under opentechsummit (which is a fork from the FOSSASIA repo, and being used to develop the new features) , you’ll see the process goes like this –

The scraper.py file scrapes data about sessions and speakers from an internal Google Sheet we have. Then the event.py file gets data about the event itself (copyright, links to social channels).
This step is not needed if we are using a JSON API endpoint. This is needed only if the data source is a Google Sheet, then local JSON files are created.
Once we have an endpoint or JSON files locally downloaded, there a node.js script – generator.js which generates a static HTML page.
The generated HTML page is based on a handelbars template – schedule.tpl where all the required markup is there.
And finally there is our own stylesheet which is called schedule.css and is a very lightweight styling addition, on top of what is majorly a vanilla bootstrap layout.

The road ahead

Going forward we will pull back in this source code to our main repo https://github.com/fossasia/open-event-webapp .

Then we’ll add some parameters that can be fed to generator.js when calling it, like –

Name of event
Color scheme
URL of endpoints

This will have a minimal form-like frontend

We can host this on heroku then, where filling the form, will run the generator.js and the generated HTML and associated CSS files will be available as a zip.

Self-Contained Folder For Webapp

Post author:aayush
Post published:June 6, 2016
Post category:Event Event Management
Post comments:0 Comments

The first version of Open-event-webapp will be a generator that will create the web app.

This week I have worked on various OTS issues that will become the basis for the web app. The OpenTechSummit web app works along with Open-event-scraper.

The web app can be generated in any empty repository and can be hosted with gh-pages by just running build.sh file from the Open-event-scraper. This is the build.sh file I have written for doing this.

How can you create the webapp from scraper in your repository ?

1 . Replace the URL of the repository in git clone command.

git clone – – depth=1 < destination repo url > ots-repo

2 . Run the file build.sh from Open-event-scraper.

./build.sh

Utility for transferring content using build.sh

The build.sh file is written to make a folder that is self-sufficient. It means it can be taken anywhere and it should work on its own.

The build.sh file first creates a clone of the destination repository in the local Open-event-scraper. It itself make the required folders inside the cloned repository and runs generator.js which provides index.html file according to the template schedule.tpl. The resync command that is known as remote sync is used to transfer the files remotely. A programm folder is created automatically that includes all the CSS, JS, JSON and other important files used to run the web app.

Finally, the programm folder along with all necessary files is pushed to gh-pages branch of the destination repository.

Working Example

To create the web app I have replaced the destination URL as shown in the image.

After running the build.sh we will get the output as shown :

1 .

That’s how a folder is generated which contains all the necessary files needed to run the web app.

FOSSASIA Summit 2016 Science Centre Singapore – Wrap Up

Post author:Hong Phuc
Post published:June 5, 2016
Post category:Event FOSSASIA loklak

FOSSASIA 2016 took place from 18th -20th March in Singapore. Hong Phuc Dang, Mario Behling, Harish Pillay, and Roland Turner were leading the organization efforts for the 2016 summit supported by many volunteers, speakers and the community. With a good mix of 37 nationalities, we are proud to be one of most international developer events in Asia.

We would like to especialy thank our host venue and the wonderful team of the Science Centre Singapore, our partner UNESCO Youth Mobile and our sponsors Red Hat, Google, GitHub, MySQL, Hewlett-Packard Enterprise, gandi.net, General Assembly and the Internet Society Singapore for their support and participation. Thanks to everyone who helped to make FOSSASIA 2016 in Singapore possible!

FOSSASIA 2016 Group Photo at Science Centre Singapore by Michael Cannon

FOSSASIA’16 NUMBERS & FACTS

We reached the number of 2,917 attendees over 3 days including 230 speakers and 72 volunteers.
With a good mix of 37 nationalities, we are proud to be one of most international developer events in Asia.
There were 201 scheduled sessions and lightning talks, and more 50 exhibitors.
This was the first year we organised Tech Kids program with 14 hands-on workshops that covered Mobile Development, Electronics, Digital Fabrication, Pocket Science and 3D Modeling.
Dozens of talks are already available as videos. Thousands of photos have been uploaded to social networks. 1500+ tweets with the FOSSASIA hashtag were posted during the event.
A trend analysis of FOSSASIA shows that web technologies, data analytics and Internet of Things have a huge momentum. The attention of developers is also increasingly turning to open hardware.

Opening HallMario Behling the superman behind our programCat Allman

Happy Volunteers

Day 1 Opening of FOSSASIA

The first day started at the OpenTech and IoT track with a warm welcome message from Mr. Lim Tit Meng, the director of Science Centre, follow by some of our keynotes including Cat Allman with her inspiring story on Science & Education Program at Google; Harish Pillay with his intriguing title ‘A Funny Thing Happened On My Way To The Science Centre’ revealing the history of Internet and Open Source; Bernard Leong caught a huge attention on ‘Rethinking Drone Delivery with Open Source’; and Davide Storti introduced the exciting MobileYouth Program at UNESCO. The day continued with many other interesting talks/discussions and five other tracks were opened that afternoon of the same day namely Tech Kids, Hardware and IoT, DevOps, Big Data, Internet Society and Community.

More Photos: [Photo 1], [Photo 2], [Photo 3] – Tech Kids Track

Day 2 Intensive day of workshops and more discussion

Stephanie Taylor opened the second day of FOSSASIA with her informative presentation on Google Summer of Code Program and Google Code-In. Many GSoC and GCI students from Asia attended this year FOSSASIA. The day continued with series of workshops and discussions on Hardware, IoT, and DevOps. Four new tracks were added into the program including OpenTech Workshop, Python, WebTech and Databases.

Popular DevOps Track

Harish Pillay proudly presenting his first computer

Day 3 Hack Sunday and the closing notes

At the last day, we opened another three new tracks: Privacy and Security, Linux and MiniDebConf, Design VR and 3D. More hacking activities took place on Sunday. Participants formed in-depth discussion groups.

People gathering at the closing

Exhibition

More than 50 project booths and hand-on demos were set up in the Science Centre’s public space where participants could hang out, chat, discuss, share, learn, and hack.

Nanyang Polytechnic teacher and students presenting their Student Enrich ProgramExhibition hallUNESCO YouthMobile InitiativeSnapshot of Red Hat booth – Developers ChatGitHub corner

FOSSASIA – a place of friendship and joy.

As always thanks to our photographer Michael Cannon and his team for capturing some of the very best moment of us. You can search for more photos by typing #fossasia on Twitter or Flickr. If you also want to share some photos you took during FOSSASIA with us, please get in touch with me hp@fossasia.org

Excited developers from across Asia

Baby Py with her parents at the social event

What’s next in 2016?

FOSSASIA will again participate at Google Summer of Code
Call for collaboration: We welcome new contributors to FOSSASIA current projects
A number of new releases of FOSSASIA software projects and our event planning applications are planned. Please check out http://github.com/fossasia and http://github.com/loklak
Many people in the FOSSASIA community organize developer meetups throughout the year. Please join our meetups in Singapore, in Dubai and many other cities in Asia.