 So good afternoon, everyone, myself Prashanjit, this is Vaibhav and Aditya, we are here for presenting IIT BombEx Android app development that is in FHG. So we'll be covering topics like introduction to what features we have added. So basically Open edX app is already available for Android devices and IIT BombEx is just an instance of Open edX. So we have used that to customize it according to the requirements of IIT BombEx. Now what are the requirements? These are the requirements incorporation of the four types of MOOCs that we have on IIT BombEx. So to do that, but to incorporate that, we have to do some very basic changes like someone has to enroll successfully, someone can comment successfully, all these features need to be functional. So these changes that we have made are very first step towards a fully functional app. Now the motivation is obviously an app, in an app delivery of content is easy and we also have to incorporate course discovery. Course discovery is just a page which shows the list of courses available and features associated with course discovery like searching, then course enrollment features associated with course components like being able to view a course, like a video. So then we also have to do some server side configurations for app to incorporate the needed changes. These changes can be translated to IIT BombEx server because we have done these changes in Open edX like a local instance. Now the technology is obviously used at Django and on client-side it is Android because Open edX is based on Django. So IIT BombEx is running on Fikers version as mentioned before and our local instance is based on Ironwood. Now we worked on an app that targets Ironwood because we didn't target Fikers version because everyone is shifting to Ironwood. So IIT BombEx also has to shift sometime otherwise it will be left behind. So we directly went with an app for Ironwood and even if we try to use it with Fikers we can't use it because it doesn't have backward compatibility because of API versioning. Fikers uses some version 0.5 while Ironwood uses version 1 of APIs. We'll look into that. Now our minimum API level of Android should be KitKat and maximum should be Oreo. Like it has been tested till Oreo. It hasn't been tested on P but we have tried it and it worked. So moving on, this is the mobile-centric architecture from the app point of view. It is connected to the LMS and discussion forum. Now LMS takes the courses from MongoDB and in CMS you can create courses which are stored in MongoDB and if there is a user who logs in in LMS his data is stored in MySQL even the comments and posts are stored in MongoDB. So we put this here because this is where most of our work is centered around. So and there are two files named CMS.env.json and LMS.env.json. These control how LMS and CMS behave. These are two server-side files. They contain environment variables which can be said to true or false and the behavior of LMS and CMS will be decided. So first we have needed a local instance obviously. It can be done in at least following two ways, DevStack or DevStack-based or native-based. DevStack-based services are containerized in 15 containers because we found there were 15 services. It is faster to set up the native for development purposes but we didn't use it because it uses Django run server as mentioned by Sir which does not have keep alive header. So we face an error while running the app. So we went for native-based where services are installed on native OS which uses InginX which supports keep alive header. So we connected the app to native-based local instance. Now there are two components which app uses from edX that is OAuth2 and edX REST API service. Now we are aware of what OAuth2 is. It basically authenticates a client to be able to use this REST API service. Now this edX has already provided us with a list of APIs like to access discussions, to make, to comment what are the course enrollments for a particular user. The behavior of these two files as specified before is also controlled by two flags named enable OAuth2 provider in LMS.inv.json and for REST API enable REST API provider in LMS.inv.json. Because the app has a web view which shows the courses from LMS, we have only shown the flags for LMS. We haven't gone to CMS as of now. Now Adita will mention this. So after setting up the server the main task was to connect app with the server. This can be done by logging into the open edX server through admin and creating a client. So client can be created by giving parameters such as app name and redirect URL which is provided by open edX. While creating the client ID and a client secret is generated. So client secret is written within the server. There is a file called config.yml on the android side that is the client side which contains environment variables for the client. So we have to add this client ID into the android code into the config.yml file. So this flow shows the communication between app and server for a specific user. This contains a chain of requests and responses. User credentials are taken to the over to server. Over to server verifies if the user is authenticated or not and it provides with a bearer token that is access token. For any further request this access token is attached to the header of the request so that server does not need to verify the user again and again. So this access token get request is done to the domain slash api slash mobile slash v0.5 with this access token and it responds with user details such as user name and all details of the user. Using this user name a get request is done to api slash mobile and it responds with all the list of courses which the user has enrolled in. By getting all these details a discovery page is showed to the user. Discovery page is list of courses which user can enroll in. These are the main features that we have worked upon. First is customization of templates, then achieving single sign in integration of search functionality and enabling in-app u2 player. So customization of template. As we all know the templates are already present on the server side and we can access through a web browser. So what android does it? It does not have a separate code to show the list of courses directly on the android code. What is does it? It takes the web page and shows, displays it in the android native view. It is called a web view. So as you can see it contains unnecessary features like header, footer and search bar that we do not need in the android app. The android app contains search feature on it's own so we don't want this website search bar. So we have to customize the template. What we did was we did not change directly the main files. We replicated that file and added the changes we made to that file. The main templates that we worked upon were course discovery and course about. So what's course discovery? Course discovery is a page that shows list of all courses and course about is a page that shows details about a specific course. So with the changes we made was removing header, footer and search bar and reducing the padding. So when these changes were made the link to URL pattern was added in urls.py file on the server side. As you can see the changes made before and after. Before making the changes app shows the header, footer and search bar and after we removed this the app looks like that. Okay so coming to the another important functionality that we have worked upon it is a single silent feature. So the problem was now we had to enroll in the app and the discovery page in which we enroll actually it was in the web view. But the courses page which displays all the courses that any user has been enrolled that is in native. So the thing is if a user has already logged in in native then it should not be that the same user has to log in again while enrolling. So what we had to do was just skip the single sign in page which appears in web view. So we found that there are two to three ways for doing so but we have proceeded through deep links. I will tell in short that we have not used URL interceptor because like it intercepts the request in the header but the actual problem is after that procedure if we do anything like for discussions or notifications everything will be in web view which we definitely do not want. Next is Chrome custom tabs this is a feature for cookie and session management but it is only limited to Google Chrome and not for other web browsers. So that's the limitation. Next deep links which we have worked upon these are actually the links that can substitute the hyperlinks like for example the discovery pages there where there are different course styles. So when I click upon it the course info page will be generated and there the enrol button is present which actually contains the deep link for example for edx app the syntax will be like edx app colon slash slash enrol question mark course id and some course which will be different for every course. By this we can immediately skip the sign in page which appears while enrolling and this is just a pictorial representation like I have just explained from domain slash mobile web view. This is the course info deep link which is present in the course style and after that when we click on the enrol button the dashboard native page will be generated. So coming to another important function which is search so we all know that if there are many many courses then it becomes very necessary for enabling this feature. It can be done easily by setting these two flags which are enable courseware index and enable course discovery in cms.earby.json and lms.earby.json files but the actual problem we faced here was that the search function works easily for whenever we search for one time. So see like here the domain slash only domain slash mobile web view page when we search for a particular course the base URL is changed to domain slash mobile web view and the search query equal to test course is added but next time we search for any other course the initially the code was taking this complete existing URL as the base URL but what we needed was only domain slash mobile web view as the base URL so this was added in the code. Then finally for embedding a youtube support in our app we actually added this flag that is in-app youtube player inside the config.viable file. In this case the ordering of video fragments is very important. For example there is a class which is course.earby.json adapter. It actually takes for example if any video whether it is downloaded in the app or not. If it is downloaded then it will ask whether if it is not downloaded then simply it will ask that do you want to play it on youtube or web browser but if it is downloaded and then it will check whether the flag is enabled and if it retrieves the youtube player only then that video can be viewed inside the app. Next coming to future scope of this project so there are some functionalities which can be definitely added like unenrolled button for unenrolling through the app and then autocomplete feature while searching. Similarly for discussion and notifications it like actually currently we were facing some problems on server side while posting in discussion forums that is we could post but the response or comment feature was it could not be done as of now but this can be definitely done in the coming future and for push notifications the thing is there was a parse server which was used by edX few years back but it is deprecated now so we are in search of some open source feature like we have looked up on cloud messaging but in case if we get some open source alternative then nothing better than that finally some documentation references that's all thank you. In the presentation you have mentioned that you are using native app and web view why? An app that uses both native pages and web view it combination so that it can load courses from already existing server using the APIs and we can enroll and go to the native page because native page offers more functionalities like viewing the videos. So this is what I wanted to see I have seen that application but never tried because they are using web views so I wanted those all web views to be replaced by native application. That's why the use of web views in this case is only limited to two things that is viewing the details of that course and viewing the list of that course that is but that is the most important thing for a student like if you do it in native you are doing nothing new you are just again showing the list of courses in web view we are showing the list of courses if you do that in it do you have any screenshot yeah can you please show the screenshot offer a course unit page you showed that was not from so you also mentioned that somebody is downloading youtube videos the videos correct so how they are downloading downloading in youtube app or downloading as a mp4 file in your mobile or how you tell me just tell me I just want to know so somebody is downloading youtube videos which are there in the course correct so they are downloading how the youtube download feature offline safe feature is there like in the app there is a feature like we can download any video in which app you know so when you somebody clicks on download what happens the mp4 file saved or youtube offline no sir the files get downloaded file downloaded here but we are embedding only youtube's link there in the courses then how mp4 is downloading no sir but actually the thing is like we have tried the playing video in the apps so right so initially it was coming that this video can be played only in youtube correct because because of web view you know so this is why I am saying why using web view use native no net yes no sir once you enroll in a course control shifts back to native and anything that is viewing the course videos commenting those are all in native okay so the problem was if you were trying to view a video it was redirecting to youtube app so we didn't want that we wanted the video to show inside the yes yes so that's why there was only a we only found a flag we had to set that flag and that that's okay so now video is playing in native mode via youtube correct but when somebody clicks on download you are saying that you are saving dot mp4 file in users mobile that those videos are have already been uploaded in cms by like when while creating a course inside a course component no no we don't we don't upload mp4 files we upload only if you are uploading anything in cms then that can be shown in app if you if there's a youtube link then that will play inside the native app so we just wanted the video to play in app the link will be embedded but if somebody is clicking on download what happens the offline download feature of youtube no no in your application there is a possibility to download the video you said no okay so somebody clicks on that what happens sir actually we have not tested that you that feature was initially present for downloading okay you did not develop it it was there okay we didn't hide it okay and how are you managing youtube sorry account the session management how you are doing it once you're logging in through the native pages so it's automatically app is storing it it's like caching okay and it is basically this is the problem however we can't make web application separately no no right now what is happening in the mobile application somebody is logging in yeah so then token is there in the mobile devices but what I want I wanted to make a web application which is which need not to be on the super domain of open edx getting me right now it's does that that link is mandatory so I wanted yeah separate is required okay thank you