Webapp: The generator for making schedule pages

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 –

  1. 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.

  2. Once we have an endpoint or JSON files locally downloaded, there a node.js script – generator.js   which generates a static HTML page.
  3. The generated HTML page is based on a handelbars template – schedule.tpl where all the required markup is there.
  4. 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.

Continue ReadingWebapp: The generator for making schedule pages

Self-Contained Folder For Webapp

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.

build file
build.sh

 

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.

4

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

1 .

8
Programm folder ( self-sufficient)

2.

9
Sub folders inside Programm folder

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

Continue ReadingSelf-Contained Folder For Webapp

FOSSASIA Summit 2016 Science Centre Singapore – Wrap Up

FOSSASIA 2016 took place from 18th -20th March in Singapore. Hong Phuc DangMario BehlingHarish 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.

Blog Posts

Many participants at FOSSASIA have blogged about the event. Some links here:

Kushal Das – kushaldas.in
Fedora Community Blog – p96.io
Anwesha Das – anweshadas.in
Garvit Delhi – garvitdelhi.blogspot.com
Ankit Ashukla – ankitashukla707.wordpress.com
Sundeep Anand – sundeep.co.in
Jigyasa Grover – jigyasagrover.wordpress.com
Michael Downey – talk.openmrs.org
Owais Zahid – eleventhlane.wordpress.com
Woo Hui Ren – woohuiren.me
Daniel Pocock – danielpocock.com
Tobias Mueller – blogs.gnome.org/muelli
Menghsuan Tsai – facebook.com/notes/

Links

FOSSASIA Photos: https://www.flickr.com/photos/fossasia/

FOSSASIA Videos: Youtube FOSSASIA 

FOSSASIA on Twitter: https://twitter.com/fossasia

FOSSASIA Sg Meetup: http://www.meetup.com/FOSSASIA

Continue ReadingFOSSASIA Summit 2016 Science Centre Singapore – Wrap Up

Enhancement of steam-shell plugin and Import from git

(ˢᵒᶜⁱᵉᵗʸserver) aims to be a platform for developing collaborative applications.
sTeam server project repository: sTeam.

Indentation of output made independent of the screen-width.

There were errors encountered in the pull request. These needed to be modified. The notable one’s were the Indentation of the output displayed by the look command in the steam-shell. The earlier display was taken into consideration that the default size of the linux terminal is 80 char long. However this can differ from individual to individual terminal settings. Therefore the module reference of pike was studied and a method to display the contents in the output of ls command format was written down. Thus,  now the output is independent of the screen width of an individual.

Issue. Github Issue Github PR
Indentation of output in steal-shell. Issue-24 PR-42

Indentation

Also there were minor errors in the edit.pike script. These were resolved too. The edit.pike was not able to exit the program. Therefore an exit(0) call was made. This resulted in the edit.pike being able to exit successfully but a new error was introduced in the steam-shell.pike. When the edit.pike command was called inside it, the steam-shell.pike would exit on successfully completing the edit command. The steam-shell should not exit in this case. There were changes made in the VisTeam.pike, edit.pike and applauncher.pike in order to get the utility working correctly.

Issue. Github Issue Github PR
Edit.pike hangs on closing Issue-29 PR-44
Edit command closes the steam-shell abruptly Issue-43 PR-44

The steam-shell vim plugin was modified and the support for multi line commands was added. Now the user can type the commands in multipe lines, format them and then execute them. The output will be displayed in a new tab.

Issue. Github Issue Github PR
Integrate sTeam-shell into Vi. Issue-37 PR-41

An example of it can be seen below:-

ListGates
Output:

OutputMult

The import-from-git.pike script is used to import contents from a normal git repository into the steam directory. The import from git script was studied and understood initially. The issue’s listed were replicated in the system and a possible solution for them was found out.

The script has support for importing multiple documents at the same time. Also the objects imported supported only text mime type. The script was modified to support other mime types by initially detecting them through an external process. However later in the server/factories/Document_factory.pike file the auto detecting of mime type was found out and used in the code. Now the mime types are detected and updated successfully for documents of other mime types like MP3, jpg, png etc

Issue. Github Issue Github PR
Auto-detect Mime type. Issue-18 PR-45

ImportMimeType

The contents of objects of types other than text mime type were not been read by the existing process. As a result this resulted into creation of empty objects with the set mime type. The process to read the contents was modified and the contents of objects of other types were set accordingly. The content is read in the form of a string. Since every object can be read as a string.

However in the import-from-git an issue was encountered. Indexing over Null value with set_contents for every object created by the script. On running the script again the earlier object is successfully imported but the same error is encountered over the next object to be imported. This issue would be looked down and tried to be solved. Also support for importing single objects will be provided.

Error1

 

Checkout the FOSSASIA Idea’s page for more information on projects supported by FOSSASIA.

Continue ReadingEnhancement of steam-shell plugin and Import from git

Towards a unified digital aproach to knitting

Our idea is to create a knitting library for a format that allows conversion of knitting projects, patterns and tutorials. Usually, communities will only focus on the knitting format for their machines. Our approach should be different and be able to support any knitting communities efforts.

Here is our strategy to achieve this:

  • We connect to different communities to get a broader view on what their needs are.
  • Our knitting format is based on knitting instructions like knit, purl, yarn over, skp. We found a comprehensive list on Wikipedia.

Other Communities

From time to time we meet with other people who also knit and could use our software.

First, we met with Viktoria from ETIB Berlin. She taught us a lot about knitting, how she does it, that almost everything could be created from one peace with the machine. Also, that AYAB is used for lace patterns. We saw examples where she let meshes fall so that larger holes were created. Our goal is to support laces in the file format.  Color patterns should be possible across sewing edges.

We are also in touch with Valentina Project. With their software we would be able to connect to yet another community and use their sewing patterns for custom-fit clothes.

We got in touch with Kniterate. They and we share a lot of goals. Because they create a startup, they are very cautious what they release. They focus on their open-source knitting machine first and later on the software. They already created an editor much like we imagined ours to be, but as a web application. A way of collaboration could be that we understand their file format and see how we can support it.

Only talking about our GSoC project is worth it as other people may have seen alike at Maker Faires and other hacky places. We have the chance to bring communities and efforts together.

Knitting Format

A universal knitting format has many concerns:

  • Languages of users differ
  • It should be possible to knit by hand
  • Mesh sizes and wool differ
  • Different knitting machines with different abilities
  • A knitting format for exchange is never complete. A knitting format for machines must be complete.

In contrast to a knitting format for a automatic machine, it is possible, to have machines operate in semi-automatic modes or just to knit by hand. In both cases, meshes could be changed in a way that was never foreseen. This is why we did not base it on meshes and mesh types but rather on instructions – closer to the mental model of the knitters who perform instructions with their hand.

Some of the instructions are understood by the machines, some could be adapted a bit so the machine can do it automatically or faster and some are still necessary to be done by hand. We created a Python module for that, “knittingpattern“. We work on it in a test-driven way.

 

Continue ReadingTowards a unified digital aproach to knitting

New Color Schemes in Engelsystem

Engelsystem is a well-built MVC application. It seems to have everything an event manager could want. During the Week 2 of my Summer of Code, I worked on creating new color schemes/themes for the system. Engelsystem initially had 4 color schemes:

  1. Engelsystem cccamp15
    01

  2. Engelsystem 32C3

    02

  3. Engelsystem Dark

    03

  4. Engelsystem Light

    04

Color wields enormous sway over our attitudes and emotions. When our eyes take in a color, they communicate with a region of the brain known as the hypothalamus, which in turn sends a cascade of signals to the pituitary gland, on to the endocrine system, and then to the thyroid glands. The thyroid glands signal the release of hormones, which cause fluctuation in mood, emotion, and resulting behavior.

Research from QuickSprout indicates that 90% of all product assessments have to do with color. “Color,” writes Neil Patel, is “85% of the reason you purchased a specific product.” It’s a no-brainer fact of any website that color affects conversions. Big time.

So, the bottom line is: use the right colors, and you win.

Color schemes lets the user to set the system looks (i.e how the system will appear) which the user likes. During the week 2 of my Summer of Code, I worked on implementing 2 new color schemes for the system:

  1. Engelsystem color scheme-1

    05

  2. Engelsystem color scheme-2

    06

In the later weeks, other developers and I would be working on creating more themes and enhancing them. Anyone who would like to work in the project are welcome. Developers can feel free to take up any issues they would like to work on just like any other open source projects.

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

Continue ReadingNew Color Schemes in Engelsystem

Challenges with Migrations

So I am sitting in front of my laptop one day working on some issue. I remember it to be adding a database table. Since this is the first time I am actually creating a table I didn’t know how much this issue is going to haunt me! So I created a table SessionType just like other previously created tables and I make a PR happy to solve an issue. But just when I thought everything was going smooth this error comes up…

“Table session_type does not exist”

I understand that you have to again create the database so I run python create_db.py. But still I get the error. I search about it and find that every time I make changes to the database tables I have to update and generate a new migration script. Thus I run python manage.py db migrate and I get THE error:

“Cant locate revision identified by *some random revision number* ”

I literally went mad trying to solve this issue. Moreover whenever I would switch branches and the database tables were different I would get this error. Finally I found out a way to solve all the migration related problems (most of them :p). I added a script to drop the entire database.Since right now we are in the development stage it doesnt matter if the data in the database is deleted. So you run :

  1. python drop_db.py
  2. python create_db.py
  3. Use super_admin password to create the database
  4. But No! Migration is a little mean bastard!It wont leave you like that. You have to make the current revision and the head equal. Thus if your current is referring to some other revision ID then stamp the database table with the head.
  5. Run python manage.py db stamp head
  6. Now run python manage.py db migrate

 

Finally! The issue is solved. 🙂

 

 

Continue ReadingChallenges with Migrations

Bower Dependency & Configure .bowerrc to use Proxy

2 weeks into GSOC 2016, the project has really started to grow at a rapid pace. There have been a lot of issues related to UI as well as other different bugs. As we use more and more libraries for the user interface of the dashboard, we added bower dependencies to install the libraries.

Why Use Bower?

Some of the benefits of using bower dependencies are:

  • Simplify what might be called declarative dependency management; i.e. you declare your dependencies in bower.json so that other things can determine them easily
  • No need to commit dependencies to version control
  • Semantic versioning is used to help define a range of acceptable versions for a dependency, which makes it easy to update to newer versions within the defined range
  • No need to locate various builds (debug, minified, etc)
  • Simple to use different builds of a dependency for dev vs. prod
  • Bower lets you easily search and install libraries even locking to a specific version. Bower makes it easy to list and update dependencies.
  • You can distribute the bower.json file and everyone can get up to speed with a simple “bower install”

Prerequisites

There are some things you’ll need before you can start working with Bower:

  • The command line.
  • Node and NPM.
  • Git.
  • Global Installation. .

To install Bower globally:

$ npm install -g bower

bower.json

The `bower.json` file looks a lot like Node’s `package.json`. It is a manifest file that allows you to specify the various packages you want to download along with their version number and various features. This is how the `bower.json` looks for the open-event-orga-server project.Screenshot from 2016-06-04 05:25:08.png

.bowerrc

The `.bowerrc` file can be seen as a configure file for bower which dictates various rules to it. Though mostly this file is ignored and is used mainly to specify the directory where the libraries are to be installed instead of the default `bower_components`, however it can be used to do a lot more than that.

Screenshot from 2016-06-04 05:29:50.png

For example, one of the biggest problem you might face while installing using bower is if your organization/institute has a proxy network through all network connections pass. In that case bower install might not be able to install the libraries. However we can configure the .bowerrc to work via proxy.

Configure .bowerrc to use Proxy

To use http proxy, we can add 2 properties to .bowerrc which will make bower search and install libraries using the proxy. The properties are “proxy” and “https-proxy”. This 2 properties dictate that both http:// and https:// links are to be searched via the proxy. So, to make this settings, we can configure the .bowerrc something like this:
Screenshot from 2016-06-04 05:35:13.png

This should then fix your problem of proxy and will install your libraries as desired.

Continue ReadingBower Dependency & Configure .bowerrc to use Proxy

Promises, REST API’s & Angular JS

week2gsoc1

Before breaking it down, to all those who don’t know what REST API’s are :

“REST is acronym for REpresentational State Transfer. It is architectural style for distributed hypermedia systems ans was first presented by Roy Fielding in 2000 in his famous dissertation.”

Source : “restfulapi.net”

So what is a Promise ?

Generally promises are representation of a value that which might not be available to us as of now but at some point eventually it will be available. Observe the below image to understand how promises work.

week2gsoc2

So how is this better than callbacks ?

Generally if you are using callbacks in your codebase then at some point of time either for i/o’s or file buffers or something might come in your way and makes you write nested callbacks. Writing nested callbacks is difficult and an alternative to that is promise.

week2gsoc3

REST API’s, promises what are you about to explain ?

Angular has this beautiful service called $q which is helpful for creating promises and using them in your angular applications. Generally many people have concerns over $q but $q is tightly integrated with the scope life cycle. So be it any task it contains all the necessary features needed by most of the heavy duty asynchronous tasks.

Now to start off angular can be really powerfull with the $http Service provided the fact that it has immense potential in allowing us to create heavy duty REST ful API’s, CRUD operation based web applications etc. So let us understand the $http service first before using promises for creating a REST ful API.

$http
|_____ .success()
For a success(), callback is called asynchronously when the request completes and the response arrives from the server
|_____ .error()
For an error(), the error callback is fired

Callbacks which are accpeted by above methods are :

  • data: It is a response obtained from server.
  • status: HTTP status codes 100x, 200x, 300x, 400x, etc which returned from server.
  • config: Object used for generating the request.
  • headers: Headers sent by the server.
  • statusText: HTTP status text of the status code.

Promise Chaining

Chaining is one of the most important aspects of promises. Here the basic idea is that promises can be composed through chaining. This means you can trigger a specified task only after previous promise has been resolved.

Handling errors by designing a promise that always rejects

No API is complete without writing a handler or a middleware that takes care of all the requests which are generally errored. Designing this will be useful if we want to tell a user about the occurrence of an error in terms of a promise rather than a simple value.

week2gsoc4

NOTE : Generally while using $http Service there are somethings which one should have knowledge of, If we happen to send a JS object as POST data in a POST/PUT request, it’s serialized to JSON before getting sent. Similarly, if the server responds with a JSON string it’s parsed into a JavaScript object and passed to the success callback attached to the promise.

Thats it folks,
Happy Hacking !!

Continue ReadingPromises, REST API’s & Angular JS

Better project definitions with User Stories and Themes

The Open Event project of FOSSASIA’s consists of a group of applications which involve making an application for managing events including the Open-Event Webapp, the Open-Event Android, Open-Event ios, and Open-Event Server of which I am working on.

The Open-Event Server is responsible for handling all the backend or the database aspect of the Open Event application. All the data for the application – the user details, the sessions details, the event details etc… is being managed by the server. But up till now we only had a basic working server with an prototype UI. In short not ready for people to use for their events . Thus my project was developed – Improving the Open-Event Organization project.

What is my project about?

The first versions of Open Event Server and the other subprojects – the Webapp and Android were not based on a user experience. So what we did this time was to create a user story for each of the projects. For the server, we created a user story wherein we decided what all functionalities will a user encounter when he /she uses our server. Thus step by step our project is being developed based on the user story created.

I have already solved a lot of issues which involve both – adding code to the backend as well as the frontend aspect. We have now a pretty good and properly functioning server with a login system involving Google and Facebook supported login. We also have a very awesome UI all thanks to gentelella. Presently we are working on the sessions part of the event creation wizard which is broken in various stages – Draft, Call for Papers, Schedule, Completed. The Draft part is almost finished and the Call for Papers part is going on.

Continue ReadingBetter project definitions with User Stories and Themes