Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle Mobile 2 (Ionic 1): Difference between revisions

From MoodleDocs
(Created page with "== 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 u...")
 
Line 23: Line 23:
jQuery
jQuery
http://jquery.com/
http://jquery.com/
MM core
An HTML5 app works like a HTML site: a set of html pages linked. Since MM uses Phonegap and JQuery Mobile there are also these considerations:
Navigation model
Mobile version:
jQuery Mobile uses a navigation model different that the usual, check this link: http://jquerymobile.com/demos/1.1.0/docs/pages/page-navmodel.html
Basically, what jQuery Mobile does is a full load of the first page (index) and an AJAX load and DOM insert of the rest of the pages. This means that the CSS or Javascript in the head attributes of the rest of the pages are not interpreted.
Tablet version:




Line 44: Line 31:




Structure of the app (only main directories)
== Structure of the app (only main directories) ==


admin/ - App settings page
admin/ - App settings page
Line 64: Line 51:
Under the auth, mod and theme directories are the plugins that implements the functionallities of the app.
Under the auth, mod and theme directories are the plugins that implements the functionallities of the app.


jQuery Mobile
jQuery Mobile is a framework that using specific attributes in tags can transform standard HTML to Mobile-design-oriented HTML.
So this, for example:
    <div data-role="header">
        <a href="mysite.html" id="bback" data-icon="arrow-l"><span data-lang="back">Back</span></a>
        <h1><span data-lang="mycourses">My courses</span></h1>
    </div><!-- /header →
Will create a standard mobile app header with a left back button, see:


Javascript
== Getting and sending information to Moodle ==
 
There is a main library located at lib/mm.js where the core functions are present.
All the functions, variables, etc... are encapsulated in a global Namespace called MM
 
The following is due the modular architecture of the app :
 
The javascript of every single plugin (auth, modules, etc..) is executed in a self-invoking function that protects the scope of the app.
 
Theme CSS and also configuration files are loaded using AJAX and injected in the document (in case of the CSS) or interpreted as JSON objects (config. files).
 
Modules are loaded using the jQuery getScript function that eval dinamically the Javascript
 
Getting and sending information to Moodle


MM uses standard Moodle WebServices for getting and sending information to Moodle.
MM uses standard Moodle WebServices for getting and sending information to Moodle.
Line 112: Line 74:
Thanks to this unique code the strings can be translated manipulating the DOM on every page request
Thanks to this unique code the strings can be translated manipulating the DOM on every page request


Storage
== Storage ==


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


course/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>umm: Unofficial Moodle Mobile App</title>
    <script type="text/javascript" charset="utf-8" src="../lib/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" id="debugscript" data-wwwpath=".." src="../lib/debug.js"></script>
</head>
<body>
<div data-role="page" id="page-mycourses">
    <div data-role="header">
        <a href="mysite.html" id="bback" data-icon="arrow-l"><span data-lang="back">Back</span></a>
        <h1><span data-lang="mycourses">My courses</span></h1>
    </div><!-- /header -->
    <div data-role="content">
        <ul data-role="listview" id="lmycourses">
        </ul>
    </div><!-- /content -->
    <script type="text/javascript" src="index.js"></script>
</div><!-- /page -->
</body>
</html>
This page includes a header and an empty list that will be populated for all the courses where the current user is enrolled.
As mentioned before, the code between the head tags will not be executed, so why it’s some javascript code referenced there? For debugging purposes some time is better to call directly a page in the browser, the debug.js automatically loads all the missing dependencies because we didn’t visit the index page where all the libraries are loaded.
The index.js is included at the bottom of the main div because the same reason mentioned above, it can’t be placed in the head tags because are not executed.
All the data-roles attributes are jQuery Mobile specific ones for transforming the markup to something mobile suitable
course/index.js
(function() {
    $("#page-mycourses").live('pageshow',function() {
        MM.setupPage();
        MM.logInfo("Page show fired");
        function listCourses(courses){
            $('#lmycourses li').remove();
            $.each(courses, function(index,course){
                $("#lmycourses").append('<li><a id="course'+course.id+'" data-courseid="'+course.id+'">'+course.fullname+'<p>'+course.shortname+'</p></a></li>');
                $("#course"+course.id).click(function(){
                    var courseId = $(this).attr('data-courseid');
                    // Where to redirect.
                    var destination = UMM.requiredParam("firstdestination");
                    var secondDestination = UMM.requiredParam("seconddestination");
                    UMM.setParams({
                                    courseid: courseId,
                                    firstdestination: secondDestination
                    });
                    $.mobile.changePage(destination);
                });
            });
            $('#lmycourses').listview('refresh');
        }
        var data = {
            userid: UMM.cfg.current_userid
        };
        UMM.moodleWSCall('moodle_enrol_get_users_courses', data, listCourses);
    });
})();
All the code is enclosed in a self-invoking javascript function creating a private scope.
The code is executed when the jQuery Mobile pageshow event is displayed
MM.setupPage and MM.logInfo are common functions for setup the enviroment
moodleWSCall, this function call a Moodle WebService with the parameters specified and data and returns the result of the call to the function listCourses that receives a JSON object
This function load all the courses, and add an onclick event in the course names for redirecting the user.
MM Plugins
MM Plugins


Overview
Overview


Plugins allow developers to extend the app functionalities.
Plugins allow developers to extend the app functionalities.
Line 219: Line 86:


Plugins must declare if they uses specific Phonegap plugins
Plugins must declare if they uses specific Phonegap plugins
Auth plugins


The auth plugin is responsible of authenticated the user against your Moodle/s installation/s.
There are 3 types of plugins:
The first time the user open the application is redirected to the auth plugin defined as default in the config.json or config.custom.json file of the app.
The auth plugin is responsible of getting a valid user token for accessing Moodle WebServices
Once the auth plugin get and sets the valid token it redirect the users to the main.html app page.
Modules
 
There are 3 types of modules:
App modules: Interactions over the global app. Like the Upload, Help and Web
App modules: Interactions over the global app. Like the Upload, Help and Web
Course modules: Interactions over a course. Like course contents or participants
Course modules: Interactions over a course. Like course contents or participants
Line 233: Line 93:
Themes
Themes


Themes are responsible of define the style of the app. Themes uses 2 different CSS files.
One for the jQuery Mobile widget styles
One for the app styles
Themes can be designed to work in both Mobile and tablets but also the app has a global variable that indicates if the user is using a Mobile or Tablet, there are settings for displaying a specific theme if the user is using a table or a mobile phone.
Customizing
For customizing the app:
Create your custom plugins (custom auth, additional buttons)
Create a config.custom.json file with your presets (default theme, lang, list of the modules to be displayed, etc...)


Testing and developing
Testing and developing

Revision as of 11:41, 8 November 2012

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

Retrieved from "https://docs.moodle.org/dev/index.php?title=Moodle_Mobile_2_(Ionic_1)&oldid=36127"
Powered by MediaWiki