Science Hack Day Singapore Nov 11 – 12, 2016

We are happy to announce our upcoming Science Hack Day Singapore! The event will take place on Nov 11 – 12, 2016 at Suntec City as a part of the ICM Youth Festival.

13432419_1051753604920198_1007694014532108522_n

Registration is now open at Eventbrite.

There are limited seats for participants intending to take part in the programme for 2 days. Visitors to the ICM youth festival are welcome to visit the space and give their hands where required.

Mark your Calendar

Do not miss this opportunity to explore the wonder of Science, to team up with inspiring people around you and to enjoy the amazing working facilities at Suntec City. Join our event on facebook for further announcement. 

What is Science Hack Day?  

Science Hack Day is a two-day event where anyone excited about making weird, silly or serious things with science comes together in the same physical space to see what they can prototype. Designers, developers, scientists and anyone who is excited about making things with science are welcome to attend – no experience in science or hacking is necessary, just an insatiable curiosity. Recommended age is 13 and up, though younger students are welcome to attend, with parental accompaniment.

13516393_1052157271546498_8056031674147160910_n

The mission of Science Hack Day is to get excited and make things with science! People organically form multidisciplinary teams over the course of a weekend: particle physicists team up with designers, marketers join forces with open source rocket scientists, writers collaborate with molecular biologists, and developers partner with school kids. By collaborating on focused tasks during this short period, small groups of hackers are capable of producing remarkable results.

Tentative program 

Day 1 Friday Nov 11, 2016
11:00  Arrive and check-in
11:30 Welcome & introduction
12:00 Hacking begin
12:15 Lightning talks
13:00 Lunch break
14:00 Hacking continues
19:00 Door closes

Day 2 Saturday Nov 12, 2016 
11:00 Doors open
13:00 Lunch Break
15:00 Hack stops
15:30 Hack demos begin! (Typically 2-3 minutes per demo)
17:00 Winning teams announced & given awards/medals

Organizers

Science Hack Day Singapore is organised by Science Centre Singapore and FOSSASIA. Venue is sponsored by IDA

Science Hack Day India 2016

Announcing Science Hack Day India – 2016

We are excited to announce our 1st Science Hack Day India. The event will take place on 22-23 October 2016 at Belgaum, a small city surrounded by some splendid nature, in Karnataka State of India.

We welcome you all to join us at SHD India. Let’s collaborate, learn, hack, build cool stuff and have lots of fun.

Registration is now open at eventbrite.

For more announcements follow us on…

facebooktwitter

What is Science Hack Day?

Science Hack Day is a two-day event where anyone excited about making weird, silly or serious things with science comes together in the same physical space to see what they can prototype within 30 consecutive hours. Designers, developers, scientists and anyone who is excited about making things with science are welcome to attend – no experience in science or hacking is necessary, just an insatiable curiosity.

The mission of Science Hack Day is to get excited and make things with science! People organically form multidisciplinary teams over the course of a weekend: particle physicists team up with designers, marketers join forces with open source rocket scientists, writers collaborate with molecular biologists, and developers partner with school kids. By collaborating on focused tasks during this short period, small groups of hackers are capable of producing remarkable results.

Venue

We have an amazing place called Sankalp Bhumi  Farm Resort for this event. It was once an abandoned quarry,  today natures glory restored. The resort resembles an enchanting oasis, with a thick set of trees, sprawling lawns, and a large lagoon surrounded by picturesque expansive rock walls as backdrop.

5

Tentative Program

Day 1:

09:00 Arrive, check-in, eat breakfast (provided)
10:00 Welcome, introductions
10:30 Hacking begins!
10:45 Lightning talks
12:00 Lunch (provided)
13:00 Hacking continues
18:00 Door closes

Day 2:

09:00 Doors open, breakfast (provided)
12:00 Lunch (provided)
13:30 Hacking stops
14:00 Hack demos begin! (Typically 2-3 minutes per demo)
16:00 Winning teams announced & given awards/medals

Science Workshops

Along with hacking we also have Science Workshops for kids. Workshops will run parallel to the SHD. We will be making amazing science toys and solar lanterns 🙂

Organisers:

FOSSASIA India Team.

Praveen Patil, Hong Phuc Dang, Rahul Khanolkar

FOSSASIA Code-In Grand Prize Winners Gathering at Google Headquarter

FOSSASIA was thrilled to be selected once again as a mentor organisation of Google Code-In (GCI) 2015 – a contest to introduce pre-university students (ages 13-17) to open source software development. Together with 13 other orgs we reached out to 980 students from 65 countries completed a total number of 4,776 tasks. As a part of our participation, I got a chance to present FOSSASIA at the Grand Prize Winners trip.

FOSSASIA Team, photo by Jeremy Allison
FOSSASIA Team, photo by Jeremy Allison

GCI 2015 Awards Ceremony

28 grand prize winners, their parents along with one mentor from each participating organisation were invited to a trip to the Bay Area as a reward to their hard work during the last GCI program. Students had a chance to meet with mentors and to interact with their fellow students from other projects, enjoyed a few days in San Francisco and received many cool gifts/swags from Google.

Chris DiBona and Jason Wong, photo by Jeremy Allision
Chris DiBona and Jason Wong, photo by Jeremy Allision

Chris DiBona – Director of Open Source at Google – a super busy man who was so kind to spend his morning personally congratulated each single student in front of his/her parent. I do believe enjoy what you are doing and get recognition for your work is the best gift ever and to be able to share it with your family is even better. Thanks Google for celebrating the open source culture.

Meet, learn and share

I was very impressed by the level of knowledge and abilities of all the 28 students. They are young, enthusiastic and inspiring. Thanks to all the parents for believing and supporting the kids in pursuing their open source journey.

Group photo by Jeremy Allison
Group photo by Jeremy Allison

It was wonderful to meet our two FOSSASIA GCI students for the first time. Jason grew up in the States, seemed a bit reserved while Yathannsh from India was very outspoken. They both were very new to open source when they joined the program and now have become active contributors and very eager to learn more. Three of us had a team presentation on FOSSASIA labs and our achievement from GCI 2015. Jason expressed his wish to go on as a mentor for the next GCI.

Jason and Yathannsh
Jason and Yathannsh

I had several interesting conversations with the parents who finally understood why their kids were on the computers all the time. About 14% of the parents are working in IT and very aware of open technology. The rest was super excited to learn about various open source projects. Many said to me they would love to have their second son/daughter to join the program as well.

The mentor group had a few discussions on pros and cons, how to improve and maximize the outcome of the program, and ways to keep students engaging afterwards. I learned a lot from other orgs and also shared FOSSASIA workflow and guidelines with them. The 7 weeks of GCI was an amazing experience for me and my team. I must give our FOSSASIA mentors credit for their incredible efforts. It was truly a pleasure to work with Mario, Sean, Mohit, Praveen, Nikunj, Abhishek, Jigyasa, Dukeleto, Manan, Saptaks, Aruna, Rohit, Arnav, Diwanshi, Martin, Nicco, Sudheesh, Samarjeet, Harsh, Luther, Jung and many more.

mentors
GCI 2015 – 14 Org Mentors, photo by Jeremy Allison

The Fun

It was the best field trip ever! The program was carefully planned: Meeting with Google engineers, a tour of the Google campus, a day of sightseeing around San Francisco and much more.

Segway Tour

I was my first time on a Segway and I loved it, so cool! Thanks Stephanie for encouraging me to try this. It is never too late to learn something.

Segway by the bay
Segway by the bay

Afternoon walk over the Golden Gate Bridge

Sanya and I could have completed the entire bridge but.. because of our slow male mentors we only made it halfway through. To all my geek friends out there – Please do more exercises!

On Golden Gate Bridge
On Golden Gate Bridge
Walking on the bridge, photo by Florian Schmidt
Walking on the bridge, photo by Florian Schmidt

Yacht Dinner Cruise

This was the highlight for many of us: sailing along the bay, relaxing time on the water, beautiful landscape, nice chats and yummy food.

Photo by Jeremy Allison
Photo by Jeremy Allison
Ladies pose, photo by Jeremy Allison
Ladies pose, photo by Jeremy Allison
with Cat Allman, photo by Jeremy Allison
with Cat Allman, photo by Jeremy Allison

Thank you organisers!

We just couldn’t thank Stephanie enough for her hard work and the extreme energy not only to GCI but also to the whole open source community and especially her care for us all during our trip. I was amazed by the level of details that been brought in: additional medication, sunscreen, chocolate tips, gift card, travel guide, luggage storage, special diet etc.

Stephanie Taylor, GCI program manager, photo by Jeremy Allison
Stephanie Taylor, GCI program manager, photo by Jeremy Allison

Last but not least thank to the lovely Mary, kind Helen, cool Eric, friendly Josh, awesome photographer Jeremy and of course my favorite Cat Allman for another unforgettable experience!

Links

Photos: https://goo.gl/photos/htCKY4yJooX9ZSNBA

Google Code-In: developers.google.com/open-source/gci/

Google Summer of Code: developers.google.com/open-source/gsoc/

FOSSASIA Labs: http://labs.fossasia.org/

File upload progress in a Node app using Socket.io

If you look at the webapp generator, you’ll see that there is an option to upload a zip file containing event data. We wanted to give visual cue to the user when he is uploading to see how much file has uploaded.

We are uploading the file, and giving the generate start command via socket.io events instead of POST requests here.

To observe file upload progress on socket (when sending file using a Buffer), there is an awesome node module available called socketio-upload-progress.

In our webapp you can see we implemented it on the frontend here in the form.js and here in the backend in app.js

Basically on the backend you should add the socketio-file-upload module as a middleware to express

var siofu = require("socketio-file-upload");
var app = express()
    .use(siofu.router)
    .listen(8000);

After a socket is opened, set up the upload directory and start listening for uploads

io.on("connection", function(socket){
    var uploader = new siofu();
    uploader.dir = "/path/to/save/uploads";
    uploader.listen(socket);
});

On the frontend, we’ll listen for an input change on an file input type element whose id is siofu_upload

var socket = io.connect();
var uploader = new SocketIOFileUpload(socket);
uploader.listenOnInput(document.getElementById("siofu_input"));

One thing to note here is that, if you observe percentage of upload on frontend, it’ll give you false values. The correct values of how much data is actually transferred can be found in the backend. So observe progress in backend, and send percentage to frontend using the same socket.

  uploader.on('progress', function(event) {
    console.log(event.file.bytesLoaded / event.file.size)
    socket.emit('upload.progress', {
      percentage:(event.file.bytesLoaded / event.file.size) * 100
    })
});

 

Engelsystem GSoC 2016 Summary

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

Screenshot from 2016-08-23 13:17:53

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.

Screenshot from 2016-08-23 11:23:28

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.

Screenshot from 2016-08-23 11:40:25.png

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.

Screenshot from 2016-08-23 11:35:41

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

Screenshot from 2016-08-23 11:26:59

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.

Screenshot from 2016-08-23 11:56:29

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.

Screenshot from 2016-08-23 11:44:33

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.

Screenshot from 2016-08-23 12:20:02

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

Screenshot from 2016-08-23 11:30:55

Issues:

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

Worked on Improving the Codacy Project Grade

Screenshot from 2016-08-23 19:15:09

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.

Screenshot from 2016-08-23 11:46:47

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.

88114b3e-4753-11e6-9afa-207e55650c1e

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

54e62618-3866-11e6-8869-4ebde48ee964

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

cd4276d2-1e19-11e6-9a04-2f8ab4510656

fcee0612-1e19-11e6-85b7-aade025f1e9f

0b131d04-1e1a-11e6-9225-48455914e885

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.

Screenshot from 2016-05-28 13:18:27

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.

d6c77bd6-2f61-11e6-9464-60f4c098d392

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.

Screenshot from 2016-06-18 20:29:46

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.

05ef86f8-3195-11e6-91a7-2f468efa0bb2

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

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.

 

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.

Involving to the end-user

The Knit Editor software aims to be installable and usable by end-users. In the whole summer of code, we focused on development and code documentation from the perspective of a developer. In this blog post we will discuss how the Knit Editor is presented to the end user. So, you reading this blog: Please comment with your thoughts on the sketches.

Currently, a site is in the making that shall present the Knit Editor software as is state of the art. The inspiration came from the talk by Tracy Osborn at PyCon 2016: “Web Design for Non Designers”. The site is currently in the making at fossasia.github.io/kniteditor. If you click on the following images, you get redirected to the implementation of the concept.

The Main Page

First thing that comes into view is the download button. This leads to the download site. Then, wen can see three popular use-cases of the knit editor. At the bottom, new developers can see that they can contribute.

End users are knitters of all ages. As tested with my mom, they expect the language to be at the top-right of the page.Main Page

Both, the download and the start developing button are highlighted in a different color to make certain that they are an action the user is expected to perform.

When you access the site you get automatically redirected to your browsers configured language.

The Download Site

When you click the download button on the main page, you reach the download site. Depending on the operating system information the browser sends, your download starts automatically, below, this is  sketched for Windows.

P1040129

Next to the download page, you may want to find other versions of the software or not. This is to be evaluated. Maybe a slightly less visible button is right for that or it can be left out. Usually, no-one uses the old software.

At the bottom, you can see that there is a predecessor of the software which is called “AYAB-Apparat”. Some people may expect to find this software, too.

The Developer Site

If you clicked “Start Developing” on the main page, you will be confronted with the site for development.

There are two ways main flavors of contributing. Either you translate or you write program code. Therefore, we have two buttons that skip to the corresponding sections.

P1040130

At the bottom, you can see that there are tutorials on how to set up the environment for development. Videos for this can be found under this Youtube playlist.

Summary

At the end of GSoC we should document the code. Since we did documentation-driven development, there was already a focus on the developers from the start. End-user involvement fell short during the development phase. “Documentation is the way of informing people.” – this is something I learned from a talk. Thus, I create the new site for the knit editor as a documentation about the project fit for non-developers.

Flavors in Gradle

Ever wondered how do people maintain different versions of the same app on play store with some customisations in each version. For example, Lite version and a pro version which signify free and paid versions with extra features in paid one.

With the arrival of gradle as a build tool, we got gradle flavors which is an excellent way to have some variations in your app versions.

It can also be leveraged to do hermetic testing with prod/mock flavors. Some other examples could be free/paid flavors and stable/experimental flavors etc.

Now let’s talk about on how to proceed :

The process is very simple

  1. Create the flavors in you build.gradle file
android {  
      productFlavors {  
           mock {   
                applicationIdSuffix = ".mock"  
           }  
           prod  
      }  
 }

Here prod and mock are two flavors and the customisations we add are that mock has a applicationIdSuffix. We can also add altogether different applicationIds as well as define a different version for different flavors and a lot of other different things

2. Now we sync the project

If you now open Build Variants tool window either using the quick access menu located in the status bar in the bottom left hand corner of the Android Studio main window or using the Build Variant tool window bar. Once loaded, clicking in the Build Variant cell for the app module should now list the four build variants: mockDebug, mockRelease and prodDebug, prodRelease

After this we get different folders corresponding to the different flavors. We go ahead and add the different folders where we want the changes to occur. For example if I want to show two different maps for two different versions, where one version is for fdroid and another one is for googleplay and hence we replace google maps with OpenStreet Maps in the fdroid version. Hence, We add res/values and res/layout folders for different resources and we also add different java folders and add the classes that would be different for both the flavors. Since both of these will require different set of permissions we can also add AndroidManifest.xml for these were we define the permissions etc. we want.

Not that we only add the changes for each file. All the other essential things can be added from the Main flavor of the android project.

Any variable available through your code

Another thing to know is that the you can have add variables like this so that you can use different variables for different flavors. For examle if you have different api’s and different options for each flavor like if you want to report crashes in one of the flavors and not in other. Here HOST variable is not the only one you can expose in your code. You can do it with whatever you want:

prod {  
    applicationId "zuul.com.android"
    buildConfigField 'String', 'HOST', '"http://api.zuul.com"'
    buildConfigField 'String', 'FLAVOR', '"prod"'
    buildConfigField "boolean", "REPORT_CRASHES", "true"
}

You can access them as follows:

BuildConfig.HOST  
BuildConfig.FLAVOR  
BuildConfig.REPORT_CRASHES

So I think this is a really useful thing to know and is used in almost every app. We all need some configuration differences in our apps and gradle flavors is the best way to go about it. Go nuts with your imagination on the usage of flavors 😛

Adios!

Templating with Handlebars and Nodejs

There are many frameworks present today that does DOM manipulation. But, DOM manipulation is useful only with simpler Javascript apps. If we want to deal with huge amount of data, we will need to take the support of templating.

One of the templating libraries is Handlebar.js. Handlebars.js is the lightest and one of the fastest templating libraries I have worked with.

How to work with Handlebars ?

Handlebars can be said as the superset of Mustache templating language. In Open-event-web app, Handlebars is used along with Node.js.

1. To install Handlebars
npm install handlebars
2. To include handlebars
const handlebars = require('handlebars');
const fs         = require('fs-e'xtra);
3. To compile a file ( Extension .tpl or hbs)
const tpl = handlebars.compile(fs.readFileSync(__dirname +   '/templates/schedule.hbs').toString('utf-8'));
fs.writeFileSync(distHelper.distPath + '/' + appFolder + '/tracks.html', tpl(jsonData));

Here jsonData is the JSON Array of objects provided to the template.

An example of a .hbs templating file can be :

 <div class="track-names col-md-2">
 {{# tracks}}
 {{#if title}}
 
 <ul class="title-inline">
 <li style="background-color:{{{color}}}" class="titlecolor"></li>
 <li>{{title}}</li>
 </ul>
 
 {{/if}}
 {{/tracks}} 
 </div>

 

 

Final submission post: Engelsystem

This summer has been really amazing, I learnt a lot and worked crazy hours it has been a crazy yet amazing ride. I am not going to stop working on open source projects and posting the blog post.

In this post, I would like to summarize all the work that I did during this summer. Working with FOSSASIA was an amazing experience for me. I got to learn a lot during this summer. Thanks to such amazing mentors.

My project Engelsystem is an online tool for helper and shift planning on major events. It lets the user organize their helper in teams, they share in layers or let them decide when and where they want to help themselves.

GithHub Commits
GithHub Commits

 

Codacy certifications

The Project was provided an A-Grade certificate from CODACY.

Here the link to view all my GitHub contributions to the project during this summer,
https://github.com/fossasia/engelsystem/commits/master?author=dishantk1807

commits new 2
My GitHub Contributions (DishantK1807)

The list of issues solved and features implemented by me is provided below.

  1.    Themes

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

Creating new themes for Engelsystem. Two themes have been added to the system, Engelsystem color scheme-1 and Engelsystem color scheme-2.

 

  1.    Languages for Localisation

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

Sub-issue:

  1.   https://github.com/fossasia/engelsystem/issues/52 [Language support-I]

Implement localization in different languages as it will make this system reach many people across the world. There 10+ International languages added to the system. The list of languages can be checked in the issue tracker

 

  1.    Added Travis-CI

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

Setup the Travis-CI for Engelsystem. Added a stable .travis.yml file to the system

 

  1.    Feature Request: User: Registration form

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/33 [Marking First Name and Last Name as required]
  2.   https://github.com/fossasia/engelsystem/issues/35 [Adding more item to the Registration form]

Adding more fields to the registration form(First name, Last Name, GitHub, Facbook, Twitter, Organization)

 

  1.    Feature Request: Admin: Export database of all Angels

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/114 [Use temporary files for exporting the database]
  2.   https://github.com/fossasia/engelsystem/issues/144 [Improve User export]
  3.   https://github.com/fossasia/engelsystem/issues/155 [remove password hashes from the export]
  4.   https://github.com/fossasia/engelsystem/issues/154 [Restore Frab import]

Exporting the database of the angels in the .csv format.

 

  1.    Feature Request: Admin: Shifts: Batch Deleting of Shifts

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/113 [Adding checkboxes and delete button]

Implementing batch deleting of Shifts in the shifts page allowing the admin to delete multiple shifts at once. Created checkbox for selecting the shifts to be deleted and a delete button in the Shifts page to delete the selected shifts.

 

  1.    Feature Request: User: Registration Form and Shifts [Captcha]

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

Sub-issues:

  1.    https://github.com/fossasia/engelsystem/issues/124 [Captcha in the Registration form]
  2.   https://github.com/fossasia/engelsystem/issues/128 [Captcha in Shifts       page]
  3.    https://github.com/fossasia/engelsystem/issues/132 [Documentation for captcha]
  4.   https://github.com/fossasia/engelsystem/issues/142 [Refining captcha code]
  5.   https://github.com/fossasia/engelsystem/issues/148 [Removing keys and added it via config.php]
  6.   https://github.com/fossasia/engelsystem/issues/148 [enable and disable re-Captcha]

Implementing Google re-Captcha in the Registration form and Shifts pages for enhancing the security

  1.    DB: Convert char(1) to Booleans

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

This issue was listed in the engelsystem/engelsystem issue tracker.

 

  1.    Bug: Disallow self-signup of shifts

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/199 [Create new Groups Page]
  2.   https://github.com/fossasia/engelsystem/issues/201 [Providing Privileges to the new Groups Created]

Disallowing self-signup of restricted shifts when an Engel is approved for certain groups. Created a page to create new groups and provide specific privileges to them so that they won’t get Admin privileges to automatically signup for the Shifts

  1.  Feature: User: Date/time picker for Shifts

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

Implementing a date/time picker in the Shifts view for selecting the shifts.

  1.  Documentation: Setting up the system

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

Added documentation for setting up the system on the local as well as online server.

 

  1.  Feature: User : Registration Form: Check if E-mail already exist

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

Implement a check in the registration form to check if an Email already exists in the system.

  1.  User : Registration Form : Update database for setting email as unique

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

Set constraint in the registration from to set email as unique.

  1.  Solving bug

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

  1.  Implement database migrations

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

Worked in implementing database migrations for the system.

  1.  Improving code quality and documentation.

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/57 [Code and branch cleanup]
  2.   https://github.com/fossasia/engelsystem/issues/59 [Updating documentation]
  3.   https://github.com/fossasia/engelsystem/issues/100 [Translate comments in install.sql]
  4.   https://github.com/fossasia/engelsystem/issues/118 [Translating comments of user_shift.php and sys_template.php]
  5.   https://github.com/fossasia/engelsystem/issues/135 [Cleanup Project: Delete Branches, set up development branch, deploy dev branch to heroku]
  6.   https://github.com/fossasia/engelsystem/issues/156 [Improving documentation]

 

  1.  Feature Request: Creating new Settings page for Admin

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

Created a separate settings page for Admin, which allows admin to change specific Admin settings

  1.  Updating settings page for User

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

Updating the settings page for both Admin and User to change the new fields that were added to the registration form.

  1.  Updating users_view.php

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

Updating the users_view.php for the changes made in the Users table.

  1.  Update user_model.php

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

Updating the users_model.php for the changes made in the Users table.

  1.  Adding more search options in user_model

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

Implementing function for search by Facebook link, GitHub link, Twitter link, Organization name.

  1.  Feature Request: Languages as profile attributes

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/103 [Updating the DB for `Users` table]
  2.   https://github.com/fossasia/engelsystem/issues/104 [Updating the registration form]
  3.   https://github.com/fossasia/engelsystem/issues/105 [Displaying native and other languages in the users view]
  1.  Adding forgot password link in the registration form

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

Adding forgot password link in the error message of the registration form, when “Email already exist” error message is displayed.

  1.  Integrate more automated testings to the system

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

Integrated Travis-CI, Codacy, Code climate, Circle-CI, Gemnasium to the system

  1.  Fixing errors Codacy and Circle-CI issues

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

  1.  Improving Code quality: Removing whitespaces, translating comments and soving CI issues

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

  1.  Implementing MVC model for the system

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/169 [ Implement MVC for admin free, groups and import pages]
  2.   https://github.com/fossasia/engelsystem/issues/171 [Implement MVC for admin rooms, settings, shifts pages]
  3.   https://github.com/fossasia/engelsystem/issues/173 [Implement MVC for guest start, stats and user atom pages]
  4.   https://github.com/fossasia/engelsystem/issues/174 [Implement MVC for user ical, messages, myshifts pages]
  5.   https://github.com/fossasia/engelsystem/issues/175 [Implement MVC for user news, questions, settings and shifts pages]
  6.   https://github.com/fossasia/engelsystem/issues/186 [Implement MVC for user_shifts]
  7.   https://github.com/fossasia/engelsystem/issues/190 [Implementing MVC for the existing controller files]

There were 26 pages. Create controller files for all of them. For the pages which accesses the SQL queries, needed to be separated them into model files. There were only model files for a few pages.

  1.  Managing different events on the same system

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/82 [Creating new table ‘Events’]
  2.   https://github.com/fossasia/engelsystem/issues/81 [Create new Events page]
  1.  Implement an upgrade process for Engelsystem similar to WordPress

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/219 [Add enable/disable for Auto-upgrade]
  1.  Writing tests for Travis-CI

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

Sub-issues:

  1.   https://github.com/fossasia/engelsystem/issues/215 [update .travis.yml for setting up the database]

Setting up the database in travis. Updated .travis.yml for setting up the database for testing.

  1.  Writing test codes for all the model files

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

Sub-issue:

  1.   https://github.com/fossasia/engelsystem/issues/194 [Write test codes for ShiftType, Shift models]
  2.   https://github.com/fossasia/engelsystem/issues/195 [Test codes for NeededAngelType, Room, Angeltype Models]
  3.   https://github.com/fossasia/engelsystem/issues/207 [Unit Tests for Groups, GroupPrivileges, NewsComments, News, Privileges model files]
  4.   https://github.com/fossasia/engelsystem/issues/208 [Unit Tests for Questions, Settings, User AngelTypes, UserGroups, User, WelcomeMessage model files]
  1. Update Documentation
        Issue: https://github.com/fossasia/engelsystem/issues/227
        Updated the documentation for the code.

This kind of make me feel happy that I have around 230 commits on the master branch now and I believe that I will be working a lot more on EngelSystem to bring a lot of cool and useful feature to it. In case you have any suggestion feel free to file issues on EngelSystem Issues.

 

Lambda expressions in Android

What are Lambda expressions

Lambda Expressions are one of the most important features added to Java 8. Prior to Lambda Expressions, implementing functional interfaces i.e interfaces with only one abstract method has been done using syntax that has a lot of boilerplate code in it.
In cases like this, what we are trying to do is pass a functionality as an argument to a method, such as what happens when a button is clicked.

Lambda expressions enables you to do just that, in a way that is much more compact and clear.

Syntax of Lambda Expressions

A lambda expression consist of the following:

  • A comma separated list of formal parameters enclosed in parentheses. The data types of the parameters in a lambda expression can be omitted. Also the parenthesis can be omitted if there is only one parameter. For example:
TextView tView = (TextView) findViewById(R.id.tView);
tView.setOnLongClickListener(v -> System.out.println("Testing Long Click"));
  • The arrow token ->
  • A body which contains a single expression or a statement block. If a single expression is specified, the java runtime evaluates the expression and then return its value. To specify a statement block, enclose statements in curly braces "{}"

Lambda Expressions in Android

To use Lambda Expressions and other Java 8 features in Android, you need to use the Jack tool-chain. Open your module level build.gradle file and add the following:

android {
  ...
  defaultConfig {
    ...
    jackOptions {
      enabled true
    }
  }
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

Sync your build.gradle file and if you are having any issue with build tools, you may need to update buildToolsVersion in your build.gradle file to "24rc4" or just download the latest Android SDK Build-tools from the SDK Manager, under the Tools (Preview channel).

Example

Adding a click listener to a button

without lambda expression

Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(this, "Button clicked", Toast.LENGTH_LONG).show();
    }
}););

with lambda expressions It is as simple as:

Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(v -> Toast.makeText(this, "Button clicked", Toast.LENGTH_LONG).show(););

As we can see above, using lambda expressions makes implementing a functional interface clearer and compact. Standard functional interfaces can be found in the java.util.function package [included in Java 8]. These interfaces can be used as target types for lambda expressions and method references.

Another way to have Java 8 features in your Android app is using the RetroLambda plugin.

Software Testing

In this post I would like to explain what is software testing and different methods, levels of software testing.

What is software testing?

Software Testing is the process of evaluating a system or its components with the intent to find whether it satisfies the specified requirements or not.

Testing is executing a system in order to identify any gaps, errors, or missing requirements in contrary to the actual requirements.

What are the Levels of software testing?

Software products are tested at four levels:
  • Unit testing
  • Integration testing
  • System testing
  • Acceptance testing

Unit testing

  • During unit testing, modules are tested in isolation. If all modules were to be tested together, it may not be easy to determine which module has the error.
  • Unit testing reduces debugging effort several folds. Programmers carry out unit testing immediately after they complete the coding of a module.

Role of Unit Testing

  • Assure minimum quality of units before integration into system
  • Focus attention on relatively small units
  • Testing forces us to read our own code – spend more time reading than writing
  • Automated tests support maintainability and extendibility

Integration testing

After different modules of a system have been coded and unit tested:
  • modules are integrated in steps according to an integration plan
  • partially integrated system is tested at each integration step.

Role of Integration Testing

  • Gain confidence in the integrity of overall system design
  • Ensure proper interaction of components

Integration Testing Strategies

  • Big-bang
  • Top-down
  • Bottom-up
  • Critical-first
  • Function-at-a-time
  • As-delivered
  • Sandwich

System Testing

  • Gain confidence in the integrity of the system as a whole
  • Ensure compliance with functional requirements
  • Ensure compliance with performance requirements

Acceptance Testing

  • Testing performed by the customer or end-user himself
  • to determine whether the system should be accepted or reject

Testing is very important step of software development. We have used unit testing for our project Engelsystem. We are developing new features. Interested Developers can work with us.

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

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

AngularJS structure and directives

Today I am going to tell you how to build a well worked Angular JS structure, as well as to be able to maintain your app’s elements correctly. It’s a basic and most important thing to learn and remember before you start building your own website or app because in the early phases of a project the structure doesn’t matter too much, and many people tend to ignore it, but in the long term it will affect code maintainability. It also helps you to develop it quicker and solve bugs without any additional troubles.

I must admit that I was one of them who  had made this mistake and ignore AngularJS correct structure. The thing is that I had not known how to build Angular JS app correctly before I started coding CommonsNet, and I wanted to start and provide a real outcome as quickly as possible. But unfortunately my mistake has stoped me later. I have realised it this week while implementing a quite simple feature – adding HTML elements dynamically. It turned out that I had a trouble while adding them. I had’t known that it’s better not to manipulate DOM elements in Controllers, but instead do it in directives.

Let me to explain it step by step from lessons I’ve learned while refactoring CommonsNet code structure. Please note that I’m just sharing my experience in building rather a small project and I’m covering only a small part of that subject, so some of these tips may be first – useless if you want to build an extended one, and then – not enough if you want to learn more. I recommend you to find further resources.

AngularJS Structure

First of all please see at AngularJS structure provided below. It’s a very basic structure, but it’ is important to have in mind that you should follow that pattern while developing your own app. If you want to have an order in your files you should seperate them by directories and create different ones like: controllers, directives, services, js and views. This structure makes it very easy for the reader to visualize and conceptualize the concepts you are covering.

AngularJS structure.png

My CommonsNet structure differs a bit because I have one main js directory, and all subdirectories like directives, controllers and services  inside it. I think it’s also an acceptable solution. Imagine that I hadn’t had any directives or services directives’ files before last Wednesday…

Then,  it’s also recommended to put index.html at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.

Next, controllers are main part of AngularJS apps. It always happens that developers when starting out tend to put too much logic in the controllers. It’s a bug. Controllers should never do DOM manipulation or hold DOM selectors, that’s where we use directives and ng-model. Likewise business logic should live in services, not controllers.

Data should also be stored in services, except where it is being bound to the $scope. Services are singletons that persist throughout the lifetime of the application, while controllers are transient between application states. So, if the controller is a coordinator between the view and the model, then the amount of the logic it has should be minimal.

Directives

Take a look at a very basic AngularJS directive. Let’s name this file appInfo.js as well as create an .html file appInfo.html as in example below.

Learn AngularJS 1.X   Codecademy.png

In this example we create a new directive called appInfo. It returns an object with three options – restrict, scope and templateURL

  1. restrict specifies how the directive will be used in the view. The 'E' means it will be used as a new HTML element.
  2. scope specifies that we will pass information into this directive through an attribute named info. The = tells the directive to look for an attribute named info in the <app-info> element, like this: The data in info becomes available to use in the template given by templateURL.
  3. templateUrl specifies the HTML to use in order to display the data in scope.info. Here we use the HTML in js/directives/appInfo.html.

Then we need to build a structure to directive in our appInfo.html

<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

Of course <h2> and <p> are just examples. You can use here what you only want. The title and developer are controller $scope.elements. Let’s take a look at controller’s content.

$scope.apps = [ 
 { 
 title: 'MOVE', 
 developer: 'MOVE, Inc.', 
 price: 0.99 
 }, 
 { 
 title: 'Shutterbugg', 
 developer: 'Chico Dusty', 
 price: 2.99 
 }, 
]

In index.html we use only  ng-repeat to loop through app element in $scope.apps, and then app-info info=”app”

<div ng-repeat="app in apps">
     <app-info info="app"></app-info>
</div>

That’s it. It’s quite a simple example, but it helps me to refactor my code in CommonsNet project and avoid a long, boring, repetitive work while adding new elements to website. It also helps me to implement a feature I have mentioned above. I’am going to tell more about it in next blog post. Stay tuned!

Resources:

https://scotch.io/tutorials/angularjs-best-practices-directory-structure

https://www.codecademy.com/learn/learn-angularjs.

https://commonsnetblog.wordpress.com/

 

Adding Google Analytics To All Pages Using Flask

Google Analytics gives a detailed insight about your website including how many people visited, time, demography, how many returning visitors and all such information. It’s a real important tool to have. All you have to do is create a Universal Analytics Tracking code and use it in a javascript code. The only problem is this code needs to be present in all the pages that you wants the analytics data for. So changing any part of the javascript code anytime, needs to be changed in all .html files.

However, there is a better way of doing it in flask. Create a file base.html and write the code:

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘<track-code>’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

Then using the property of jinja2 template extend this file in all the html files, i.e. {% extends ‘gentelella/admin/base.html’ %}. Thus now when you make some change in the above mentioned javascrpt code, you need to change it only in one place and it is changed in all other places.