Moodle Mobile 2 (Ionic 1)

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

Moodle Mobile
Project state	Implementation
Tracker issue	MOBILE-153
Discussion	https://moodle.org/mod/forum/discuss.php?d=206736
Assignee	Juan Leyva

General Overview

MM (Moodle Mobile) is the official mobile app for Moodle. MM is an HTML5 app that uses common web technologies.

Basically, is a WebServices client that using REST as protocol obtain and send information to your/s Moodle installation/s.

The layout is created using HTML5, CSS3, interaction with the Phone and packaging is done using Phonegap. For calling the WebServices, manipulating the DOM and interact with Phonegap we use jQuery as our Javascript framework.

Technologies used

HTML5 http://www.w3.org/TR/2011/WD-html5-20110525/

CSS3 http://www.w3.org/Style/CSS/ Media queries for screen width and height http://www.w3.org/TR/css3-mediaqueries/

Phonegap http://wiki.phonegap.com/w/page/16494772/FrontPage

jQuery http://jquery.com/

Phonegap

MM uses Phonegap for using the Moodle hardware/software feautres like Camera, Audio/video recorder, access to the filesystem, etc.. Phonegap is loaded in the index page of the app (jQuery, the main lib of the app are also loaded in the index page)

Structure of the app (only main directories)

admin/ - App settings page auth/ - Auth plugins course/ - Standard course selection page lang/ - Language files lib/ - Main libraries mod/ - Modules (buttons) theme/ - Themes available user/ - Standard user selection page config.json - Main app configuration file (presets) config.custom.json - Custom app configurations config.xml - Phonegap config file index.html - Index page of the app that redirects to the auth method or the main page index.js - Auxiliary javascript for the index.html page main.html - Main page of the app where the buttons are displayed main.js - Auxiliary javascript for the main.html page

Under the auth, mod and theme directories are the plugins that implements the functionallities of the app.

Getting and sending information to Moodle

MM uses standard Moodle WebServices for getting and sending information to Moodle. AJAX (jQuery) and REST + JSON are the technologies used.

Notice that mobile HTML5 apps doesn’t have crossdomain restrictions so you can make AJAX calls to any domain. Internationalization

Strings translated are stored in JSON format in the lang/ directory. The short country code (same that Moodle) is used as the name of the file:

en.json es.json fr.json ….

The language file is loaded when the application starts, all the text in the HTML pages are originally written in english but inside a SPAN tag with a data-lang attribute where the “unique code” of the string is stored.

My courses

Thanks to this unique code the strings can be translated manipulating the DOM on every page request

Storage

We use HTML5 localStorage that is cross browser implemented and there is libraries that can work of top of it like Backbone

MM Plugins

Overview

Plugins allow developers to extend the app functionalities. A plugin it’s a subdirectory that implements a set of required functionalities.

Plugins must declare if they uses specific Phonegap plugins

There are 3 types of plugins: App modules: Interactions over the global app. Like the Upload, Help and Web Course modules: Interactions over a course. Like course contents or participants User modules: Interactions over an user. Like send a message, add as a contact, write a private note Themes

Testing and developing

Ripple

Requeriments: Google Chrome browser + Ripple mobile enviroment emulator plugin (http://ripple.tinyhippos.com/)

You must run Google Chrome in Unsafe mode adding this params: --allow-file-access-from-files --disable-web-security

IMPORTANT: I strong recommend you to create a new link or application launch called "Google Unsafe" and use it only for testing the app

"Path to chrome\chrome.exe" --allow-file-access-from-files --disable-web-security

Open the index.html file in the Google Chrome unsafe and click on the Ripple icon to activate the emulator

Once opened in the Ripple settings block change Cross Domain Proxy to Disabled

Please note that some functionallities (camera, audio recording, contact) will not work in the emulator

Platform SDK

Install the Android or iPhone SDK and follow instructions in http://phonegap.com/start/

Local web server

If you deploy the html files in a server under the same domain that the Moodle your are goign to connect to you can test the application without emulator or changin the Security settings of your browser.

I.e: Your Moodle at: http://myhost.com/moodle Your app at: http://myhost.com/umm/

Notice that the mobile - related modules will not work. Custom Phonegap plugins

Phonegap hast a set of limited features, sometimes it’s necessary implement features that are missing in Phonegap.

Push notifications is one of the most important features missing that can be solved developing a plugin for Phonegap for every specific platform you want handle this kind of notifications.

Developing a Plugin for phonegap means develop using the specific platform framework and language (Objetive c for iOs).

One of the disadvantages of custom plugins is that you can still use the Phonegap online Build service for cross compiling but the feature will not be present because the online services does not allow to add custom plugins.

The app can detect if the app have been compiled using the online service for disabling the plugins that uses custom Phonegap plugins automatically Build process

For building the app to any platform you have several options:

Use the Phonegap Build online free service. Notice that this service does not admit custom Phonegap plugins.

Build the app using the specific platform development environment (For iPhone it requires a Mac computer). If you want to use the custom Phonegap plugins is mandatory

Hack the builds distributed by Moodle for adding your customizations. I.e for Android you can unzip the apk file, replace the assets (html, css, javascript) or add your custom files, change the manifest file of the APP and finally zip again. This can let you avoid build the app keeping the Phonegap plugins without instaling the development environment. Limitations and disadvantages of HTML5 apps

Less speed and smoothness

Limited to the Mobile functionalities provided from Phonegap FAQ

Is the app a replacement of the MyMobile theme? No, see http://moodle.org/mod/forum/discuss.php?d=206736#p901751

Whats the difference between a native app and a Mobile specific theme or responsive theme? See http://moodle.org/mod/forum/discuss.php?d=206736#p901475 Also http://moodle.org/mod/forum/discuss.php?d=206736#p901751