Using the Moodle App in a browser

2014-06-27T09:34:12Z

Palouxic: /* Advantages and disadvantages of using Chromium/Google Chrome */

Chromium or Google Chrome browser are the recommended tools for Moodle Mobile development. But remember that if you are going to use functions provided by Phonegap you should use the Android SDK or iOs developer tools.

== Differences between Chromium and Google Chrome ==

Google Chrome is the Chromium open source project built, packaged, and distributed by Google. We can say that Chromium is Google Chrome without the "Google" add-ons

See https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome for more information

We recommend to use Chromium instead Google Chrome

== Advantages and disadvantages of using Chromium/Google Chrome ==

Main advantages
* Quick development
* DOM inspector
* Network monitor
* Database (local storage) inspector
* Emulation options

Disadvantages
* You can't test/develop using Phonegap APIs and Plugins
* If you use custom Phonegap code (including plugins) you will need to edit the mm.cordova.js for "emulate" those APIs in a browser
* You will always need to test in a real device and emulator prior to a production release
* You will need to verify that your CSS/layout works the same in an Android/iOs device

== Installation ==

Install the “Chromium” browser just downloading it from https://download-chromium.appspot.com/

In order to be able to access any domain via AJAX from the local file:/// protocol, you must run Chromium or Google Chrome in Unsafe mode adding this param:

--allow-file-access-from-files --disable-web-security

IMPORTANT: I strongly recommend you create a new link or application launch called "Chrome Unsafe" and use it only for testing the app. Better if you only use this browser for development

How to open the browser:

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

or in Mac (you can use Automator for creating an app bundle)

open -a "Google Chrome" --args --allow-file-access-from-files --disable-web-security

or for Chromium

open -a /Applications/Chromium.app --args --allow-file-access-from-files --disable-web-security

In Mac you can use Automator for creating a launching app

== Browser Settings ==
[[{{ns:file}}:moodlemobile_developer.png|thumb|300px]]
You should develop always with the "Developer tools" panel open, you can open that panel with F12 (cmd + alt + i in Mac) or "Developer tools" in the Tools menu.

[[{{ns:file}}:moodlemobile_options.png|left]] Once opened, click on the wheel top-right corner to see the General options, you must Disable the cache there (this setting will work only if you have the Developer tools panel open)

You can dock or undock into a separate window the developer panel using the "Dock" option just at the right of the settings wheel, you can move the developer panel to your right and resize the main browser window to emulate a Mobile device

== Inspecting and changing the DOM ==

Using the "Elements" option you can manipulate the DOM:

* Add/modify style to elements
* Delete elements
* Move elements
* Inject HTML code

You have complete information here: https://developer.chrome.com/devtools/index

And also a free interactive course here: https://www.codeschool.com/courses/discover-devtools

== Monitor XHR (ajax) requests ==
[[{{ns:file}}:moodlemobile_network.png|thumb|300px]]

With the network panel you can check and filter all the HTTP request send from the app to your Moodle server.

You can preserve the log in the navigation, filter by type of requests and also see complete information of all the requests made to the server where is hosted your Moodle installation.

You can also identify with resources takes long to load

== Browsing the data base (local storage) ==
[[{{ns:file}}:moodlemobile_localstorage.png|thumb|300px]]

The Mobile app stores information in the local HTML5 storage system

The local storage system is based on key-value pairs, since we use a library called Backgone-localstorage, values are store following this format:

"Tables" are stored like an entry containing an array of keys pointing to records in a table

"Records" are store like entries linked from the entry representing a table

== Console, log and errors ==
[[{{ns:file}}:moodlemobile_log.png|thumb|300px]]

The console panel is used for displaying the app log and errors, you can also configure Chrome for displaying there XHR requests

In order to view the app log, you need first to enable Logging in the app (Options / Developers / Enable logging)

You can use the console also for executing javascript commands, the console has access to the complete MM global object so you can call from there to core APIs functions of the app

== Emulating devices ==
[[{{ns:file}}:moodlemobile_emulation.png|thumb|300px]]

You can emulate mobile devices changing orientation, resolution, geo-location, touch events... It's not recommended to use de "Emulation Device" option because it just changes the user-agent and you could get some fails because of the jQuery Swipe library.

The best option to test with the browser is just rescaling the window to get a new viewport size or use the screen settings in the "Emulation" screen.

== See also ==

[https://developer.chrome.com/devtools/index Chrome Developer Tools help]

[[Category: Mobile]]

MoodleDocs - User contributions [en]

Using the Moodle App in a browser