Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya...

26
Indian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development Principal Investigator: Prof. S. Sudarshan Project Mentor: Nagesh Karmali Prasanjit Rath Aditya Bandal Vaibhav Popat

Transcript of Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya...

Page 1: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

Indian Institute of Technology, Bombay

Eklavya Summer Internship 2019

Fundamental Research Group

IITBombayX Android AppDevelopment

Principal Investigator: Prof. S. SudarshanProject Mentor: Nagesh Karmali

Prasanjit RathAditya BandalVaibhav Popat

Page 2: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

Summer Internship 2019 ProjectApproval Certificate

Department of Computer Science and Engineering

Indian Institute of Technology, Bombay

Certificate

The project entitled IITBombayX Android App Development submit-ted by Mr. Aditya Bandal, Mr. Vaibhav Popat and Mr. Prasanjit Rathis approved for Eklavya Summer Internship 2019 from 20th May 2019 to9th July 2019, at Department of Computer Science and Engineering, IITBombay.

Prof. S. Sudarshan Mr. Nagesh Karmali(Principal Investigator) (Project Mentor)

Date: 9th July 2019

Page 3: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

Declaration

I declare that this written submission represents my ideas in my ownwords and where others ideas or words have been included, I have ad-equately cited and referenced the original sources. I also declare that Ihave adhered to all principles of academic honesty and integrity and havenot misrepresented or fabricated or falsified any idea/data/fact/source inmy submission. I undestand that any violation of the above will be causefor disciplinary action by the institute and can also evoke penal actionfrom the sources which have thus not been properly cited or from whomproper permission has not been taken when needed.

Vaibhav PopatVNIT, Nagpur

Aditya BandalVNIT, Nagpur

Prasanjit RathIIT, Bhubaneswar

Date:

Page 4: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

Acknowledgement

First and foremost,we would like to thank IIT Bombay,for providing usthe opportunity to work on this project.We express our profound gratitudetowards our mentor Nagesh Karmali sir, for his exemplary guidance andconstant encouragement. We would also like to extend our sincere thanksto Gaurav Patil sir, Gaurav Ojha sir and members of FRG for their con-stant support and help,throughout the project. We got a chance to addvarious tools to our skillset and expand our horizons by working on thisproject. We also thank all our colleagues working on different project forhelping us evolve in this process.

Page 5: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

Abstract

Education, in the 21st century has acquired a much wider dimensionthanks to rapid technological advancements happening day in and dayout.Still,it was never so easy and handy until mobile applications ensuredto provide a fast,secure and flexible platform.This project goes one step closer to IIT Bombays vision to make educationmore accessible by creating an Android App which is customized accord-ing to the requirements of IITBombayX - an online platform that offersMOOCs(Massive Open Online Courses) for individuals from varying back-grounds.Open edX offers a platform to create MOOCs and host them on a localinstance.This app is configured to work on any Open edX instance(here,IITBombayX).With wide ranging features from watching videos(in theapp) to participating in discussions, it strives to offer a very good userexperience to one and all.

Page 6: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

CONTENTS IITBombayX Android App Development

Contents

1 Introduction 1

2 Open EdX Architecture 22.1 Key Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.1.1 Learning Management System (LMS) . . . . . . . . . . . . . . . 22.1.2 Studio (CMS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.2 Mobile Centric Architecture . . . . . . . . . . . . . . . . . . . . . . . . . 2

3 Getting Started 33.1 Technical Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33.2 OpenEdX Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

4 Primary Tasks 54.1 Connecting the android application to the server . . . . . . . . . . . . . . 54.2 Making the discovery page work . . . . . . . . . . . . . . . . . . . . . . . 74.3 Resolve second sign-in problem of webview . . . . . . . . . . . . . . . . . 84.4 Making search work in the discovery page . . . . . . . . . . . . . . . . . 144.5 Making push notifications work . . . . . . . . . . . . . . . . . . . . . . . 174.6 Enabling in-app Youtube Player . . . . . . . . . . . . . . . . . . . . . . . 17

5 Third Party Services 18

6 Future tasks 186.1 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186.2 Additional Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

7 Appendix 19

8 References 19

July 4, 2019 i

Page 7: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

List of Figures

1 Open edX Overview[Courtesy:OpenedX] . . . . . . . . . . . . . . . . . . 12 Pictorial representation showing communication between server and client

from login to course enrollment . . . . . . . . . . . . . . . . . . . . . . . 53 Error while signing-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Error while registering . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 No discovery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Flags for discovery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Unnecesary content like headers, search bar, result text . . . . . . . . . . 98 Enroll button leads to second sign-in . . . . . . . . . . . . . . . . . . . . 99 Urls to be replicated . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1010 Replicated Urls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1011 Highlighted change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012 mainmobile file before . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1113 mainmobile file after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1114 Deeplink replaces default link for course card/tile . . . . . . . . . . . . . 1115 Directory mobilewebview before . . . . . . . . . . . . . . . . . . . . . . . 1216 Directory mobilewebview after . . . . . . . . . . . . . . . . . . . . . . . . 1217 On clicking a course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1218 Line 193, deeplink to enroll . . . . . . . . . . . . . . . . . . . . . . . . . 1319 Line 130, deeplink to view enrolled course . . . . . . . . . . . . . . . . . 1320 Line 88, 94, deeplink to bypass registration/authentication . . . . . . . . 1321 Course about page before . . . . . . . . . . . . . . . . . . . . . . . . . . 1422 Course about page after . . . . . . . . . . . . . . . . . . . . . . . . . . . 1423 Change to include course cardmobile.underscore file . . . . . . . . . . . . 1524 Changes at line 41, 43-53, 57-58 to hide search bar and buttons . . . . . 1525 Changes to hide duplicate courses(if appearing, lines 62-75 commented) . 1526 if condition set to false to remove ’refine search box’ . . . . . . . . . . . . 1527 Change in getInititalUrl method . . . . . . . . . . . . . . . . . . . . . . . 1628 Function to read JSON data from config.yaml . . . . . . . . . . . . . . . 1629 Additions in the config.yaml file . . . . . . . . . . . . . . . . . . . . . . . 17

List of Tables

1 Third party services and production grade . . . . . . . . . . . . . . . . . 18

July 4, 2019 ii

Page 8: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

1 Introduction

Fundamental Research Group wiki mentions- ”Open edX App is already available onAndroid and IOS devices. An Android App is required to be customized based on therequirements of IITBombayX, i.e. incorporation of EduMOOCs, SkillMOOCs, Teach-MOOCs, and LifeMOOCs”. As simple as it is, this particular project consists of con-figuring an Android application so that it is able to connect to a server and functionproperly. The server in this case is intended to be the IITBombayX instance of OpenedX. But for development and testing purposes, we have used a local instance of OpenedX to simulate the properties of a production server. Since, we are talking about OpenedX here, we shed some light on it as it is a beautiful project that people all over theworld are working on.So, in terms of a layman, Open edX is a set of tools with the help of which anyone canbuild a MOOC(Massive Open Online Courses) platform for his/her organization. Thisplatform is known as an instance of Open edX. This is very similar to the concept of”class and object” in OOPS, whereby Open edX relates to the former and instances ofit to the later. This particular toolbox that is Open edX is being constantly updatedwith new tools, some of which are build by the Open edX team and some of which arethird-party tools.The Open edX team has built an android app that can connect to a running instanceand work accordigly. For this app to connect and function properly, we have to set theconfiguration properly and exactly as we want.

The following figure shows the Open edX toolbox: 1

Figure 1: Open edX Overview[Courtesy:OpenedX]

July 4, 2019 1

Page 9: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

2 Open EdX Architecture

The Open edX is the software that powers IITBombayX.It is an platform to host anddeliver online courses.It is also developed to support mobile applications on IOS andAndroid.

2.1 Key Components

There are two main components of Open edX from mobile app point of view:

2.1.1 Learning Management System (LMS)

The LMS is the most visible part of the Open edX project.The front end of LMS iswritten in Django apps. User can take courses using the LMS.Courses are extracted fromMongoDB database and presented to the user.Features such as dashboard,profile,courseslist and discover courses is provided by LMS.

2.1.2 Studio (CMS)

Studio is the course authoring environment.It is used to create and update courses.Coursescreated with CMS are stored in MongoDB database.Course data does not change fre-quently, therefore MongoDB is better database to store it.

2.2 Mobile Centric Architecture

Open edX provides various services duch as LMS,CMS(Studio), Discussion forums,Insights etc.Mobile App uses following services.

• LMS : As stated above, LMS is the visible part of the project.User can registerand login himself through the app, this data is stored in MySQL database.User canbrowse,search and enroll himself in courses in mobile app.Courses are created inStudio or CMS and are stored in MongoDB database. LMS uses this database toshow courses to the user.

• Discussion Forum:This feature enables students and authors to have interactionamongst themselves.It can also be used to take feedback about course and updateit accordingly.Course dicussions is mainly used to ask questionsand share ideas.

July 4, 2019 2

Page 10: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

3 Getting Started

3.1 Technical Parameters

First we start off with some details of the background:

• Open edX instances get upgraded regularly, hence have different versions like thatof Android.

� These versions have been named alphabetically- Dogwood, Eucalyptus, Ficus,Ginkgo, Hawthorn.

• The latest version is Ironwood and our local instance is based on Ironwoodversion.

• The IIT BombayX instance is based on Ficus version.

• The android application is based to support Ironwood instance.

� Working repository: https://github.com/gauravpatil1/IITBX-app-android

� Working branch(s): rc/2.18.2 and YoutubeVideoSupport

� rc/2.18.2 is a release-candidate version unlike the master branch

� YoutubeVideoSupport inherits from rc/2.18.2.

3.2 OpenEdX Installation

This section will focus on the two approaches to intall a local instance of Open edX on avirtual machine or a local machine. In either method, the foundation remains the same-that is there are some edX services like mongoDB, mySQL, elasticsearch that edX uses torun a local instance. These services have to be installed successfully to run an instance.There are two ways to install and run a local instance:

1. Docker based(using Devstack)

• Devstack is simpler version of Openstack with smaller footprint.

• There are 15 services of Open edX that have been containerised and can bepulled by Docker and it is used to quickly setup a development environment.

• Installation steps :https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/

en/latest/installation/install_devstack.html

• Installation problems related to poor connectivity can be resolved by manu-ally pulling each image using docker pull .

• During installation, if problems like keyserver timeout are faced, run ”dockerexec -it edx.devstack.lms bash” to go inside the lms container.

• In app/edx ansible/edx ansible/playbooks/roles/common vars/defaults/main.ymlfile, change the link for keyword COMMON EDX PPA KEY from ”keyserver.ubuntu.com”to ”hkp://keyserver.ubuntu.com:80”.

• LMS will start at port 18000 of localhost by default.

• Android app can then be connected to the machine using the IP address ofthe machine.

July 4, 2019 3

Page 11: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

2. Native based

• Native installation will run MySQL, Mongo, nginx, and all of the Open edXservices (LMS, Studio, etc) on a single server. In production configurations itis recommend to run these services on different servers.

• Server requirements fine for supporting hundreds of registered students on asingle server.

– Ubuntu 16.04 amd64(Only 16.04 is known to work)

– Minimum 8GB of memory

– At least one 2.00GHz CPU

– Minimum 25GB of free disk( 50GB recommended for productionservers)

• Installation steps:

(a) Set the OPENEDX RELEASE variable before running commandsexport OPENEDX RELEASE=the-tag/open-release/ironwood.1

(b) Create a config.yml file in current directory. This file specifies the host-name of the LMS and Studio.EDXAPP LMS BASE: ”server IP address”EDXAPP CMS BASE: ”server IP address:18010”for example:EDXAPP LMS BASE: ”10.129.26.51”EDXAPP CMS BASE: ”10.129.26.51:18010”

(c) Bootstrap the Ansible installation:wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX RELEASE/util/install/generate-passwords.sh -O -| bashIf you get server timed out error then download the bootstrap-ansible.shfile and change keyserver.ubuntu.com to hkp://keyserver.ubuntu.com:80and run it.Make same changes in following files when you encounter the error again:

– /tmp/configuration/playbooks/roles/common var/defaults/main.yml

– /tmp/configuration/playbooks/roles/common var/defaults/main.yml

(d) Run /edx/app/edx ansible/venvs/edx ansible/bin/activateTo activate virtual environment

(e) Randomize passwords.wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX RELEASE/util/install/generate-passwords.sh -O -| bash

(f) Install Open edX.wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX RELEASE/util/install/native.sh -O - | bashFurther for error in[install node dependencies] change all occurences ofgit:// to git+https:// in /edx/app/edxapp/edx-platform/package.jsonand /edx/app/edxapp/edx-platform/package-lock.json

July 4, 2019 4

Page 12: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

4 Primary Tasks

Here are the tasks that have been researched and dealt with after getting started:

1. Connecting the android application to the server

2. Making the discovery page work

3. Resolving second sign-in problem in webview

4. Making search work in the discovery page

5. Making push notifications work

6. Enabling in-app Youtube Player

Figure 2: Pictorial representation showing communication between server and client fromlogin to course enrollment

4.1 Connecting the android application to the server

� Problem: After installing the app for the first time through android studio, regis-tration and login will not work

July 4, 2019 5

Page 13: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Figure 3: Error while signing-in Figure 4: Error while registering

� Cause: Android application is not connected to the server that is the local instance

� Solution: The config.yaml file present in the default config needs to be updatedwith the correct flagsServer side changes:

* Note down the IP address of the machine on which the local instance isrunning

* If the local instance has a domain name or hostname that can be resolvedto the IP address above, note it

* Go to admin webpage of the server and create a client ID at Django OAuthToolkit/Applciations

* Make sure, the flag ENABLE OAUTH2 PROVIDER is set to true in/edx/app/edxapp/lms.env.json for above functionality to work

* Since, tasks are limited to LMS at the present, the above flag is not set to truein cms.env.json, it can be done when when tasks are centered around CMS

Client side changes:

July 4, 2019 6

Page 14: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

* Put the IP address/domain name in the API HOST URL flag of config.yamlfile

* Put the client ID in the OAUTH CLIENT ID flag of config.yaml file

4.2 Making the discovery page work

� Problem: Only the courses page will appear or the application will crash due tono discovery, which the java code will try to access.

Figure 5: No discovery

� Cause: The discovery flags have not been set.

� Solution: The config.yaml file present in the default config needs to be updatedwith the correct flagsClient side changes:

* Use the DISCOVERY,COURSE,TYPE:’webview’ flag in the config.yamlfile

* Under the WEBVIEW flag, the most important flags are BASE URL andDETAIL TEMPLATE

* In the BASE URL flag, put ’http://<private address>/courses’

* In the DETAIL TEMPLATE, put ’http://<private address>/courses/path id/about’

July 4, 2019 7

Page 15: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Figure 6: Flags for discovery

4.3 Resolve second sign-in problem of webview

� Problem: Discovery opens in webview and this webview asks for a second sign-inupon enrolling in a course

� Cause: Webview does not share cookies with native, hence is not aware of loginstatus

� Approaches:

* Using custom webview template: The course(s).html template can bemodified to create a webview suited template that can have deeplinks to trans-fer control from webview to native upon enrolling

* Using URL Interceptor: Requests to server are sent with a header contain-ing the secret access token provided by server after login. A URL Interceptorcan be used to add header while enrolling

* Using Google Chrome custom tabs: Chrome custom tabs are an alter-native to webviews and have a shared cookie jar, hence no second sign-in isrequired

July 4, 2019 8

Page 16: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Figure 7: Unnecesary content like head-ers, search bar, result text

Figure 8: Enroll button leads to secondsign-in

� Solution: The first approach is best suited because in a custom webview tem-plate, deeplinks can be put that handover control from webview to native afterenroll, which is as required since, we are already logged in to native.The second approach(URL interceptor) is not good enough because it will en-roll a user in the webview, hence in the server. This means we will have to refreshthe app to let it know of the changes.The third approach(Custom tabs) was discarded because custom tabs sharescookies only with Chrome browser as of now. It cannot share cookies with thenative android activities.Server side changes:

* SSH into the machine where the local instance is installed. Change directoryto /edx/app/edxapp/edx-platform/lms

* There are two folders which need to be replicated- djangoapps/courseware/and templates/courseware/

* Replicate above folders to /djangoapps/mobilewebview and templates/mobilewebview

* In templates folder replicate main.html and course.html to mainmobile.htmland coursemobile.html

July 4, 2019 9

Page 17: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

* Go to /lms/urls.py and import views from mobilewebviews as - ’from mo-bilewebview.views import views as mobilewebview views’

* Aim is to introduce two new urls-’/mobilewebview’ and ’/mobilewebview/courses/path id/about’ that will be suited to android and handle deeplinks

Figure 9: Urls to be replicated

Figure 10: Replicated Urls

* The mobilewebview views.courses is a python function that throws or renderscourses.html of courseware folder under template.

* At djangoapps/mobilewebview/views in file views.py change ’courseware/courses.html’to ’mobilewebview/courses.html’ under courses function

Figure 11: Highlighted change

July 4, 2019 10

Page 18: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

* A similar change is done in the same file under course about function where’courseware/course about.html’ is replaced with ’mobilewebview/course about.html’

* To remove header and footer the code is removed from templates/mainmobile.htmlfile, it is not commented because introducing a comment leads to the creationof a ’−− >’ symbol in the template

Figure 12: mainmobile file before

Figure 13: mainmobile file after

* After this change, the templates/mobilewebview/courses.html and course about.htmlare made to inherit mainmobile.html instead of main.html, so that removal ofheaders and footers is now visible

* Now, a course about deeplink is inserted in template/coursemobile.html sothat on clicking on the course, it leads to the DETAIL TEMPLATE URL(inside the app) that we have provided in config.yaml at client side

Figure 14: Deeplink replaces default link for course card/tile

* The templates/mobilewebview/courses.html is now made to inherit coursemo-bile.html instead of course.html at line 79(may vary depending on numberingsystem)

* After these changes, we have a full fledged webpage for webview which hasdeeplinks, one can verify deeplinks by clicking on the course-the browser cannotrender it, as it can be rendered by edxapp only

July 4, 2019 11

Page 19: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Figure 15: Directory mobilewebview before

Figure 16: Directory mobilewebview after

Figure 17: On clicking a course

July 4, 2019 12

Page 20: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

* After this the templates/mobilewebview/course about.html has to be changedso that enroll and view course button work

* The course about.html file contains links for enroll button, view course but-ton(if enrolled) and links to register/login if page is not authenticated

* Therefore, enroll deeplink is put at those cases and enroll button while viewcourse deeplink is put in view course button

* As in Figure 19, at line 93,’403’ status means webview is not authenticatedand at line 87, ” directs the enroll link to dashboard which if not authenticatedis sent to sign-in/register again

Figure 18: Line 193, deeplink to enroll

Figure 19: Line 130, deeplink to view enrolled course

Figure 20: Line 88, 94, deeplink to bypass registration/authentication

* To solve padding issues, changes can be made at /edx/var/edxapp/staticfiles/css/lms-main-v1.css, the amount of padding required to suit webview in mobile can befound by inspecting (Ctrl+Shift+I) the webpage

* This solves our single sign-in problem

July 4, 2019 13

Page 21: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Figure 21: Course about page before

Figure 22: Course about page after

Client side changes:

* Put the new url ’http://<private address>/mobilewebview’ in the BASEURL flag under DISCOVERY flag of config.yaml file

* Put the new course about url ’http://<private address>/mobilewebview/courses/path id/about’ in the DETAIL TEMPLATE flag under DIS-COVERY flag of config.yaml file

4.4 Making search work in the discovery page

� Problem: On searching for a course in discovery, all the courses are returned, thatis the same webpage is returned

� Cause: Search is not enabled on server and android tries to access ’http://<privateaddress>/mobilewebview?search query=sometestcourse’

� Solution:Server side changes:

July 4, 2019 14

Page 22: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

* Set ENABLE COURSEWARE INDEX and ENABLE LIBRARY INDEX totrue in /edx/app/edxapp/cms.env.json and set ENABLE COURSE DISCOVERYto true in /edx/app/edxapp/lms.env.json

* This changed template has to be edited again to remove unnecessary compo-nents, so /templates/mobilewebview/courses.html is changed accordingly

* A file named course cardmobile.underscore is replicated from course card.underscorein /templates/discovery, in this new file, the link at href is replaced withdeeplink for course about

Figure 23: Change to include course cardmobile.underscore file

Figure 24: Changes at line 41, 43-53, 57-58 to hide search bar and buttons

Figure 25: Changes to hide duplicate courses(if appearing, lines 62-75 com-mented)

Figure 26: if condition set to false to remove ’refine search box’

July 4, 2019 15

Page 23: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

Client side changes:

* Search works only once in android as the search functionality concatenates thequery with the current webview url which already contains last query

* Code is changed where we concatenate the query to the original url, hence wefetch the original url from config.yaml and force the search functionality to useit

– Addtional code added in WebViewDiscoverFragment.java

Figure 27: Change in getInititalUrl method

Figure 28: Function to read JSON data from config.yaml

July 4, 2019 16

Page 24: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

4.5 Making push notifications work

Open edx initially used their own parse server(the open sourced code) for handlingpush notifications.But, around a year back, parse was deprecated and since then is nolonger supported.Hence, we shifted to FCM(Firebase Cloud Messaging), which is a cross-platform messaging solution that allows you to send messages.Not only this, it also allowsyou to integrate FCM with your backend, so that you can send messages directly fromthe server.Message types -

* Notification message(just title,message and icon).

* Data Message(Some additional data with notification is sent).

* Both notification and data messages.

Message targets -

* Single User:This can be done via specifying the FCM registration token in thefirebase console.

* Multiple Users:All the users who are studying a particular course, come under atopic. One can also specify the topic name, and within seconds the notification issent to all the corresponding users.

Integrating FCM -

* Look in the appendix for detailed steps regarding integrating FCM with your an-droid code.

4.6 Enabling in-app Youtube Player

Originally, the course videos could be viewed only on youtube,but not inside the appenvironment.For enabling this feature, some additional flags were added in the config.yamlfile as shown below.Additionally,the video playing order in CourseUnitPagerAdapterwasaltered, the detailed reference of which can be found in the references section.

Figure 29: Additions in the config.yaml file

July 4, 2019 17

Page 25: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

5 Third Party Services

No. Service ProductionGrade

Consumer Usage

1 Firebase Yes Android Notifications, Analytics2 Fabric Yes Android Crash reporting3 Facebook Yes Android 3rd party authentication4 Google Yes Android 3rd party authentication5 New Relic Yes Android Performance monitoring6 SEGMENT IO Yes Android Analytics tracking

Table 1: Third party services and production grade

6 Future tasks

6.1 Testing

Testing in android can be done through two ways:

1. Writing test cases in Java

2. Using Jenkins for Testing

6.2 Additional Ideas

The following are some ideas suggested by the team that will ease user experience:

1. Introduction of a functionality that makes back button go back from a webview tothe previous webview if there is one, instead of exiting the app diresctly

2. Introduction of an ”Unenroll” button in the app as it is present in the server

3. Introduction of ”Autocomplete” feature in search bar of discovery page in app

July 4, 2019 18

Page 26: Indian Institute of Technology, Bombaymodified).pdfIndian Institute of Technology, Bombay Eklavya Summer Internship 2019 Fundamental Research Group IITBombayX Android App Development

LIST OF TABLES IITBombayX Android App Development

7 Appendix

• Open edX Devstack Installation: https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/install_devstack.html

• FCM Integration: https://www.androidhive.info/2016/10/android-push-notifications-using-firebase-cloud-messaging-fcm-php/8/

8 References

1. Open edX Architectire Information - https://edx.readthedocs.io/projects/

edx-developer-guide/en/latest/architecture.html

2. Open edX Native Installation - https://openedx.atlassian.net/wiki/spaces/OpenOPS/pages/146440579/Native+Open+edX+Ubuntu+16.04+64+bit+Installation

3. Android Code for IITBombayX - https://github.com/gauravpatil1/IITBX-app-android

4. General Queries regarding various Configurations - https://openedx.slack.com/

messages/C70EXHW01/ https://openedx.slack.com/messages/C02SNA1U4/

5. Server Side Instance of Open edX - https://github.com/gauravpatil1/edx-platform

6. Confluence(Atlassian)

7. FRG Wiki: The Home Page of Fundamental Research Group https://www.it.

iitb.ac.in/frg/wiki/index.php/Summer_Internship_2019

8. Enabling in-app Youtube Player - https://github.com/edx/edx-app-android/pull/1119

9. Genral Queries on Stack Overflow

July 4, 2019 19