Google Summer of Code 2018 Project: Primero1° Documentation

Table of Contents

1. Basic Information

2. About the Website/Project

3. Steps on how to use the Primero1 app

4. Description of Files and Folders

5. Design Layout of Website/Project

6. Addendum for iOS App

7. Credits

Basic Information

• Project Name - Primero1° (Sugarizer Primero1°).

• Organisation - Sugar Labs.

• Developer - Iqra Muhammad.

• Project Mentors - Samson Goddy, Caryl Begenho, Perrie Fidelis.

• As part of - Google Summer Of Code(GSOC) 2018

About the Project

Introduction

This repository contains the code for the Primero1° version of Sugarizer (https://github.com/iqraceme/Primero1). This repository code base was used for the development of the GSoC 2018 project, Primero1°, under the organization Sugar Labs. The changes made during the GSoC period can be viewed at [https://github.com/iqraceme/Primero1]. The repository for the original sugarizer website is located at [https://github.com/sugarlabs/sugarizer]. The work during GSoC was done in the repository [https://github.com/iqraceme/Primero1]. A live preview of the website is hosted and can be viewed at [http://iqragsoc.com/iqragsoc.com/primero1/].

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

The Primero1° Android beta testing version is available at:

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

A link for the Primero1° Amazon Kindle testing version can be emailed upon request.

Repositories:

1. The main repository where I worked on 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.

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

3. I have also added primero as a branch to sugar labs repo: https://github.com/sugarlabs/sugarizer/tree/iqraceme/primero

4. 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. You can check the timestamps to see the commits related to any particular day.

Blog Posts:

I have written weekly blog reports in which I mentioned the progress I did in that particular week. All the blog posts can be accessed at: iqragsoc.wordpress.com

Do check out the code!

Major Services

We have the following major features in Primero1°:

1. Primero1° Animated Loader
2. Animated background in homeview
3. Colored icons of all activities
4. Colors added to specific activities
5. Yellow and Green dropdowns for each Activity
6. New Audio based MathStix Activity added to Primero1° web version
7. Primero1° Android app
8. Primero1° Amazon Kindle app
9. Primero1° web app
10. All the web, Android and Amazon apps made mobile responsive for all screen sizes.
11. Certain features of some activities removed and adjusted for small children

Languages and Technologies

HTML

CSS

Javascript

Loader

The loader screen is enabled for:

1. Safari

2. Chrome

3. Opera

4. Firefox

5. Edge

6. Internet Explorer

7. Small devices browsers like on Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile

Steps on how to use the Primero1° app

The following video link below explains the steps for non-technical individuals using the Primero1° App.

https://youtu.be/bW51n7ifaXs

The steps below explain how to use the Primero1° application.

1. Log onto the iqragsoc.com/iqragsoc.com/primero1/ or open the android/kindle app

2. You will see a blue Primero1° loader.

3. The loader will disappear after a few seconds and it will be redirected to the main page of Primero1° app.

4. You will see icons on the homepage of Primero1°. Each of these icons leads to an Activity.

5. You can hover your mouse on any of these icons. On hovering, you will see a green button. The green button will start a new Activity.

6. The first Activity in the grid is the Maze Activity. The Maze Activity, featured in Primero1°, lets users navigate the smiley face to the end of the maze. The levels become more difficult as game proceeds. If you wish to exit an existing Activity, such as this one, simply click on the red button on the upper right hand side of the screen – you will be immediately taken to the home screen of the application.

7. The Activity next to the Maze icon is the Paint Activity. The Paint Activity in Primero1° can be used to create artistic pieces using the draw, fill, and color features. If you wish to resume your last session of the Activity, click on the red button to return to the home screen. When you wish to resume your session, hover your cursor over the desired logo and click on the yellow circle. This will allow you to resume your Activity where you left off.

8. Move your cursor to the third Activity icon.The third Activity featured in Primero1° is the TamTam MicroActivity. It can be used to learn about different sound-picture associations. To select a sound category, click on the pink button of your choice. To listen to a sound clip, simply click on the desired purple button.

9. Let us now look at the Reflection Activity. You can find it by moving your cursor to the fourth Activity icon. The end goal is to edit the colors of all circles on both sides of the game until they are completely symmetrical. Select the reflection Activity from the black bar found on the top of the application page. To change the color of any circle, simply click until your desired color.

10. The next Activity icon is made up of purple colored blocks. This is Memorize Activity. The Memorize Activity allows users to find matching tiles from the selection provided. The tiles include things like simple math problems and their answers and capital and lower case letters. To look at a tile, click on it. You can only look at 1 tile from Group 1 or 2 at the same time.

11. The last Activity featured on is the Clock Activity. Users can choose between the simple clock and the nice clock. Users can also choose to display the time and date in digital form if needed.

Description of Files and Folders

Activities Folder:

This folder contains all the Primero1° Activities..

API Folder:

This folder contains all the API’s used with Primero app.

CSS Folder

This folder contains all the css files

Icons Folder:

This folder contains all the icons.

Images Folder:

This folder contains all the images.

JS Folder:

This folder contains all the JS files.

Lib Folder

This folder contains all the libraries used

Root Folder:

This will contain:

1. All html pages

2. .htaccess file

3. README.md file

4. Other folders

Design Layout of Website/Project

Few Screenshots:

Screenshot 1: Opening Screen

Screenshot 2: Main Screen with Activity Icons

Screenshot 3: TamTamMini Shown on an Android smartphone screen

Screenshot 4: The Paint Activity

Code and Contribution

The code has been restructured, unnecessary code has been removed, comments were added wherever required, proper indentation was provided, and simple names were used which makes it a contributor-friendly codebase. So, hop on and contribute now!

How to run the code

Getting the code

Clone the repository

Installation

To run Application from the Web Browser (GNU Linux/Mac OS/Windows), you should launch it with a special option to enable access to local files.

For Chrome, close ALL running instances of Chrome and re-launch it using the command line: chrome --allow-file-access-from-files index.html

On Mac OS, you should launch: open -n /Applications/Google\ Chrome.app --args --allow-file-access-from-files

For Firefox, type in the address bar: about:config

Addendum for iOS App

Please follow the following steps for the development of an ios app.

1.Installing the Requirements

Xcode

There are two ways to download Xcode:

• from the App Store, available by searching for "Xcode" in the App Store application.

• from Apple Developer Downloads, which requires registration as an Apple Developer.

Once Xcode is installed, several command-line tools need to be enabled for Cordova to run. From the command line, run:

$ xcode-select --install

2. Installing Cordova

Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova.

$ npm install -g cordova

npm install -g cordova

3. Create a project

Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type cordova create .

For a complete set of options, type cordova help create.

$ cordova create MyApp

cordova create MyApp

3. Add a Platform

After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.

1. To add a platform, type cordova platform add .

2. For a complete list of platforms you can add, run cordova platform.

$ cd MyApp

$ cordova platform add ios

cd MyApp cordova platform add ios

5. Run your app

From the command line, run cordova run .

$ cordova run ios

Credits

The credits goes to all my mentors who guided at every step of the project.