Moodle Mobile development using Chrome or Chromium
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.
- Moodle Mobile Customization
- Setting up your development environment for Moodle Mobile 2
- Moodle Mobile development using Chrome or Chromium
- Moodle Mobile Plugins Development
- Moodle Mobile Themes
- Moodle Mobile Developing a plugin tutorial
- Moodle Mobile Developing a plugin tutorial part 2
- Moodle Mobile Remote add-ons
- Moodle Desktop
- Moodle Mobile FAQ
- Moodle Mobile End To End Testing
- 1 Differences between Chromium and Google Chrome
- 2 Advantages and disadvantages of using Chromium/Google Chrome
- 3 Installation
- 4 Sites for testing
- 5 Browser Settings
- 6 Inspecting and changing the DOM
- 7 Monitor XHR (ajax) requests
- 8 Console, log and errors
- 9 Browsing the data base
- 10 File system
- 11 Emulating devices
- 12 See also
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
- Quick development
- DOM inspector
- Network monitor
- Database (local storage) inspector
- Emulation options
- 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
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 --user-data-dir
NOTE: Since Moodle 3.0 an onwards this shouldn't be necessary since the Web Service layer supports CORS requests.
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 --user-data-dir
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 --user-data-dir
or for Chromium
open -a /Applications/Chromium.app --args --allow-file-access-from-files --disable-web-security --user-data-dir
In Mac you can use Automator for creating a launching app
Now, you can open the application running:
ionic serve --browser chromium
it should open a new tab in the current Chromium instance with the app, (remember that you have to open first the Chromium so it's started with all the additional arguments).
If the ionic serve command open a new browser window, you should copy the URL and then paste it in the Chromium instance you opened using the command shell.
Sites for testing
You can test the application using existing sites configured to have the Mobile services enabled.
Real test site: If you type "student" or "teacher" in the "Site URL" field and then tap on "Add site" the app will connect to http://school.demo.moodle.net. This site is reset every hour so you may find unexpected behaviors
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.
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
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
Console, log and errors
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)
Browsing the data base
The Mobile app stores information in the local HTML5 IndexedDB
You can inspect the local database in the Resources tab.
The first time you open the browser with the special flags you will see a couple of warnings, one asking you to accept to store information.
You have to "Accept" that warning because it means that you will be able to emulate the device file system using the browser.
For example, you will be able to download files to the browser storage (like the user profiles images, any resource in the course, etc..)
You can browse the files stored in the application going to Settings > About and clicking the Filesystem root link.
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.