Moodle Mobile 2 (Ionic 1): Difference between revisions
Juan Leyva (talk | contribs) No edit summary |
Juan Leyva (talk | contribs) |
||
Line 20: | Line 20: | ||
== Features == | == Features == | ||
The features are going to be the same that the old [[Mobile]] | The features are going to be the same that the old [[Mobile app]] plus: | ||
* PUSH Notifications and: | |||
* Mobile and tablet version (Responsive design) | * Mobile and tablet version (Responsive design) | ||
* Support for plugins | * Support for plugins | ||
* Support for external settings: Extra CSS | * Support for external settings: Extra CSS | ||
* Support for external translation | * Support for external translation | ||
== Technologies used == | == Technologies used == |
Revision as of 11:51, 8 November 2012
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.
Features
The features are going to be the same that the old Mobile app plus:
- PUSH Notifications and:
- Mobile and tablet version (Responsive design)
- Support for plugins
- Support for external settings: Extra CSS
- Support for external translation
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