GSoC 2018 Final Project Report

GSoC 2018 Project:

Sugarizer Primero1°

Organisation:

Sugar Labs

Developer:

Iqra Muhammad

Mentors:

  1. Samson Goddy
  2. Caryl Bigenho
  3. Peace Ojemeh

Profiles:

  1. GSOC proposal – https://docs.google.com/document/d/1jdTAZD9oyYU-rBP_Ob3_4p0MrsbTJ2MbGnbWkMs1XoI/edit?usp=sharing
  2. Github profile – https://github.com/iqraceme
  3. IRC nickname – iqra (or) iqra_
  4. Sugar Labs wiki username – iqra
  5. Email – iqra1804@gmail.com

Introduction of the Project:

Primero1° is a free web application, designed for children aged 4-7, to enhance their learning abilities in a fun, creative, and natural way. This app will be a smaller version of Sugarizer. The app will be targeted towards Pre-k1 and Pre-k2 grade curriculum. The app will be focus on learning and collaborating abilities. The app will be colorful so that it is fun & enjoyable for the users. Sugarizer Activities will include things like, paint and music. Many existing educational apps, available online, are too difficult for kids and the small size of the icons of existing apps makes it difficult for young children to play. Our application addresses these shortcomings. The goal of Primero1° is to allow kids to use Sugarizer as a powerful learning tool. We have ensured that the graphics in the user interface is bright and of a suitable size, so that it will attract children’s attention. 

Project Progress and Work Done:

All the changes made during the development of the project can be checked out at – “https://github.com/iqraceme/Primero1“. You can check the time periods to see the changes made in any particular period. You can also observe the progress of the project over the whole period.

The Final report of GSoC 2018 is available at: https://iqragsoc.wordpress.com/2018/07/30/gsoc-final-project-report/

I also wrote blog posts weekly summarizing the work I did for that particular week. (Please take a look at the Blog Posts section below):

iqragsoc.wordpress.com

Please take a look at the Commits section below to see the commits made during the development of the project.

https://github.com/iqraceme/Primero1/commits/master

Major Goals Accomplished:

1.  Added an attractive design layout and ensured that the required structure of the website is implemented.
2.  Made the Primero1° website responsive for all screen sizes.
3.  Made color changes to the existing activities
4.  Make Primero1° website compatible with most browsers and environments.
5. Produced an Android Primero1° app
6. Produced a Primero app for the Amazon Kindle.
7. Changed the background and tiles of the TamTam micro Activity.
8. Added a colorful background to maze activity
9. Worked on solving a few issues with the original web version and android version.
10. Removed unnecessary features of Sugarizer app not required in Primero1°.
11. Worked on a promotional YouTube video for Primero1° that will guide teachers, children, and parents on how to use the app.
12. Compiled and worked on the documentation of Primero1° App for developers. You can view the documentation on https://github.com/iqraceme/Primero1/blob/master/README.md
15.Added additional and important features like:
a) Loader screen
b) Created an animated particles based background
c) Created attractive colored icons for activities

Documentation of Project:

The documentation for the project is written in the “readme.md” file present in the code repository (Please refer to the Repositories section to access code repository)

The documentation is available via the following link:

https://github.com/iqraceme/Primero1/blob/master/README.md

Live Demonstration of the Project:

The new website has not yet been officially launched but I have hosted it using Github pages to use it during the development of the project. It can be accessed at:

http://iqragsoc.com/iqragsoc.com/primero1/

The Beta Version of Primero can be downloaded and installed at:

https://play.google.com/apps/testing/com.sugars.primero1

The android apk can also be downloaded via the link below and installed on android device:

https://drive.google.com/file/d/18TOINRykmR5eya4mKPZ0-FGDtQtc2yCA/view?usp=sharing

The Amazon Kindle app beta version can be downloaded via the following link:

https://www.amazon.com/dp/B07FYZ526S/ref=cm_sw_r_tw_dp_U_x_JAwCBbA9ZX3SK

For a video demonstration of how to use the Primero App:

Few Screenshots:

Screenshot 1: Opening Screen

iqragsoc.com_iqragsoc.com_primero1_(Laptop with HiDPI screen) (1)

Screenshot 2: Main Screen with Activity Icons

pic8

Screenshot 3: TamTamMini Shown on an Android smartphone screen

Capture2

 

Screenshot 4: The Paint Activity

new2

 

Repositories:

The main repository where I worked during the development of the project is https://github.com/iqraceme/Primero1. However, this is not the forked version of the original website’s repository.

I have added my project as a branch to sugar labs sugarizer repo on: 

https://github.com/sugarlabs/sugarizer/tree/iqraceme/primero

I have added my project as a branch to the repo of the original website’s repository: https://github.com/iqraceme/Primero/tree/iqraceme/primero

You can check the android repo on: https://github.com/iqraceme/Primero-Android-

Commits:

  1. You can see all my commits at the link – https://github.com/iqraceme/Primero1/commits/master

Blog Posts:
I have written weekly blog reports in which I mention the progress I did in that particular week. All the blog posts can be accessed at:

iqragsoc.wordpress.com


Future Development and Improvements:

  1. I wasn’t able to make a user interface of the MathStix activity as per my mentor Caryl’s choice. The activity is working 100% functionality wise but according to my mentor a simpler user interface needed to be made for younger children. I plan to make the UI of Math Sticks simpler in the coming months after GSoC.
  2. Secondly, I wasn’t able to work on an iOS app because I don’t have a MAC. For future reference, I have included an addendum for developing iOS version of the app through cordova. I may assist another developer, with access to a Mac, in developing ios version
  3. The loader screen rendering can be made better. I plan to make the rendering of loader screen better in future.

Acknowledgements:

I learned a lot throughout the entire development period. Every day was a great journey for me and I got to learn many new things. I also got the chance to utilize my skills in developing a potential project. The success of the project would not have been possible without the help of the below-mentioned names:

  1. Sugar Labs organisation and community:
    Under the nurturing environment provided by Sugar Labs and the community members, I have learned a lot. Sugar Labs is playing a vital role in the world through their contributions and I am really proud to be part of the family.

 

  1. Mentors (Samson Goddy, Caryl Bigenho, and Perrie Fidelis):
    They have always been supportive and active. They were very responsive and ready to help whenever I was stuck at any point in time. They provided suggestions on how I could improve the project every time. They also cleared all my doubts including the silly ones.

    Along with them, my mentors and  Walter Bender also provided a lot of encouragement during the development of the project which played a major role in the success of the project.

    A big thank you to everyone for making my first GSOC experience a great one.

GSoC 14th week

This week has been about working on the documentation,the final report of the Primero app and making some minor changes in the kindle app.

1.I have made a rough draft of the Final Report which will be submitted in last week of google summer of code.

2.In addition to this, I am also working on the documentation of the project. I am also in the process of writing the documentation for developers and  a section of the documentation will also include step by step instructions on how to use the android and web app for non-technical people.

3.I also did some testing of the android and kindle app. Caryl had suggested to make some small changes in memorize activity.

4. I have changed the range of numbers in addition part of memorize activity from 0-9. Caryl said that double digit addition will be difficult for small kids to solve hence we decided to keep single digit addition.

Github Link for branch of primero repo on sugarizer forked repo:

https://github.com/iqraceme/Primero/tree/iqraceme/primero

Original Github Repo for Primero app:

https://github.com/iqraceme/Primero1

Android Primero Github Repo:

https://github.com/iqraceme/Primero-Android-

Web App URL: http://iqragsoc.com/iqragsoc.com/primero/

GSoC Coding Week 13

The google summer of code is coming to an end. We have around 2 weeks left before the final evaluation. Last week, I worked on the following points regarding the primero android and primero web app.

  1. I have added audio to the blocks of Math Sticks activity.
  2.  Fixed positioning of homeview in landscape mode.
  3. Made the web version changes also in android app.
  4. Fixing stop button issues in android app.
  5. Caryl asked to work on Amazon app for primero1. I have send a testing link to caryl for testing the kindle app version on her device.
  6. I was also asked to move the primero app code to sugar labs github. I am working on it at the moment.

I plan to release the android app on this saturday. I will email the apk link to sugar labs developer community email list.

For next week:

  1. Work on documentation of code and final report for the final evaluation phase
  2. Work on fixing issues in android app

Links for github repo, primero web version url  can be found below:

Web Version:   http://iqragsoc.com/iqragsoc.com/primero/

Github Repo: https://github.com/iqraceme/Primero1

 

GSoC Coding Week 12

This week, I covered the following features in the Primero1 app

1. Remove nav bar
2. Remove name textbox
3. Changed animation
4. Changed background of homeview
5. have added green and yellow dropdowns

With pressing of green drop down like for paint activity icon a new activity starts, then user draws something and  then press red stop button and then press yellow drop down on homeview and you can previous version of paint

 

iqragsoc.com_iqragsoc.com_primero1_(Laptop with HiDPI screen) (1)

Green and yellow dropdownssnap2

What I plan to do in next coming days

1. Write blog post on friday
2.Remove unecessary journal dropdowns from all activities
3. make the all above previous web version changes in android
4. Start working on the app restart and log off button on XO man
5. Add sounds to MathStiX

Primero1 github repo: https://github.com/iqraceme/Primero1

Android Primero1 github repo: https://github.com/iqraceme/Primero-Android-

Live Preview Link: http://iqragsoc.com/iqragsoc.com/primero/

 

GSoC Coding Week 11

As per last week, while working on the android version of the sugarizer primero I faced some issues like that of related to loader and homeview. The issues were resolved . In addition to this:

1.Increasing the size of XO man disturbs the overall alignment of the grid of icons .
2. I have included loader.
3.I have corrected the alignments. I have included a light background that doesn’t interfere with the icons.
4.there are scroll bars on main screen to help scroll the icons.
I had faced some serious issues while setting up Mac OS High Sierra in Virtual Box with limited memory of my laptop for the ios app. The VM was crashing again and again and after trying it multiple times, I decided with discussion of my mentors to leave sugarizer primero ios version. Hence I have discussed this and it has been decided that we will only be focusing on the web and android versions of sugarizer primero for the rest of Google Summer of Code. Links for android apk and updated sugarizer primero website:

http://iqragsoc.com/iqragsoc.com/iqra/

I have updated my GSoC schedule which can be found below:

https://drive.google.com/file/d/1QWkSLD6aE_BGMClt-HXAdrlw_Xn2qZp2/view?usp=sharing

Link for primero android Github Repo:

https://github.com/iqraceme/Primero-Android-

Link for Primero Web Version Github Repo:

https://github.com/iqraceme/Primero1

Plans for next week include:

Work on ideas  of changing colors in Memorize activity
Implement the changes in Memorize activity
Document the code written
Update Github Repo of Sugarizer Primero
test both web app and android app
Adding sounds to MathStix Activity
Implement the above changes in both web and android version

GSoC coding 10th Week

This week, I worked on the following points:

  1. Fixed some issues in homeview of application.
  2.  Bring back the loader into the application
  3.  fixing some issues in android like the XO color picker.

I will post screenshots and youtube videos in the next blog post.

problems:

i dont have a MAC for working on ios app so I have to take one on rent. this issue wasted some of the time within this week.

I will be working on the following things for the next week before evaluation:

1. Bring back candy cane icons on homeview and candy cane loader for android
2.Fix homeview of application(make is responsive to different screen sizes)
3. Fix the XO color picker screen
4. will upload android and ios apps links on my blog once the issues are fixed.
5. work on something halfway for homeview icons so that they dont seem cluttered.
Github Link:  https://github.com/iqraceme/Primero1

 

 

GSoC 9th Week

This week, I did the following tasks for sugarizer primero.

  1. I made the homeview of the app mobile responsive by using css media queries.
  2. I fixed few bugs in the homeview of the application.
  3. I made an effort to convert the existing web app into an android app by using Cordova.

Some of the android app screenshots can be seen below:

Capture1Capture2

Capture3

Problems that I am facing issues related to the conversion of web app to an ios app using cordova have been explained below.

Firstly I have a windows PC and not a MAC, due to which I wont be able to use XCode editor and fulfill other dependency requirements for generating an ios app with cordova.

Plans for next week:

  1. Fix the size of circles in MathStix Activity.
  2. Fix the stop button in MathStix Activity.
  3. Use cordova for producing an app for windows.
  4. Look over on how to convert primero app into an amazon app.

The github links and the android apk is available on the links below.

Run the android emulator in landscape mode for primero app.

Emulators for viewing the app:  https://appetize.io/app/8eta4uypvxeym4jz96nq9jm3tc

Github: https://github.com/iqraceme/Primero1

Link for downloading android apk:

https://drive.google.com/file/d/1cT4xAia1LYY-AmqEXlHKNQ7tHTj6CssI/view?usp=sharing

GSoC 8th Week

This week, I worked on including three new activities in sugarizer primero. In The activities suggested , we agreed to include memorize, clock, maze activities. Paint activity was already the part of the sugarizer primero. I also worked on hosting the website live on Github. The candy background of homeview was making the application loading time very slow due to the background’s high resolution so the background has been removed.

This week , I worked on the following tasks:

  1. I have added some colors in the background of the maze activity and changed the maze wall color.
  2.  I made some changes to the MathStiX activity like addition of dots and numbers.
  3.  I have also changed the background of the memorize activity.
  4. In addition to all this, I have removed the pink background of homeview as the background is affecting the performance of the website hosted.
  5. There are a couple of issues when I run the application on a smartphone. I am currently working on the making the app responsive for mobile and tablets.
  6. I have also added MathStix as an activity in the app
  7. Changed the color of the stop button

You can view the latest commits of my code on my github repository and there is a live demo of the app on the following link.

Live Demo Link: http://www.iqragsoc.com/iqragsoc.com/sugarizer

Github Repository:  https://github.com/iqraceme/Primero1

Google Drive Video Link: https://drive.google.com/file/d/1t3XaLjOBpR0d_vivRlPlDAyHap3xbLnr/view

Youtube Link: https://youtu.be/FEoXmSO4aK0

Tasks for next week include:

  1. In the case of passing first evaluation, I will further continue with GSoC project
  2. Making the whole application responsive for smartphones and tablets by using Cordova for Android.
  3. Design changes to the clock application and memorize activities depending upon the mentor feedback.

GSoC 7th week

This week, I worked on the addition of Cuisenaire rods activity.
I discussed the implementation details with my mentor Caryl. We worked on a couple of mockups for the activity.The addition of Cuisenaire rods has the following steps:

1.The user will press the Cuisenaire rods activity button on the main interface of sugarizer primero.

2. The user will be moved towards the main page of Cuisenaire rods activity.

3. A number from (1-9) will appear on screen for which the user will try to make addition combinations. The task here is to make addition combinations
for the number appearing on screen.
3. The user drags and drops the Cuisenaire rods onto the squared grid.
4. Each correct combination will lead to an increase in the score on scoreboard
5. The user can move to the next number in the game after making possible combinations he/she can think of for the present number.
6. After the user goes through all numbers from 1 to 9, he/she will see a final score on screen.

For the next week, I plan to work on subtraction of Cuisenaire rods. Some changes like adding dots to the rods were suggested for addition rods activity in yesterday’s meeting. I will make these changes soon. For this week, I have completed the working demo of the activity.

2.JPG

9

8

91

5

 

The links of the video and screenshots can be seen below.

Live Preview:  http://iqragsoc.com/iqragsoc.com/sugarizer/index2.html

Press the sticks icon and then you can play the MathStiX game.

Video Link: https://drive.google.com/file/d/1xYjDXOPR_9dJwQL1GW9yYMHwdVzxRqcu/view

Github Link: https://github.com/iqraceme/Primero1

GSoC 6th Week

This week, I had planned to start off with Cuisenaire rods activity for sugarizer primero. I completed a small drag and drop functionality of the activity  for the rods. The functionality was discussed with my mentors, and Caryl suggested to add in addition of Cuisenaire rods to the activity. The YouTube links and the website links showing the sugarizer primero have been shared below. I have used tween.js and ease.js libraries for implementing the drag and drop functionality in this activity.  For the next week, I will be doing the addition of Cuisenaire rods and will be making changes to the interface of this activity too

Sugarizer Primero Live Preview: https://iqraceme.github.io/

Github Repository: https://github.com/iqraceme/Primero1