Moodle Mobile 2 (Ionic 1) Customization: Difference between revisions
- Moodle Mobile 2 (Ionic 1) Customization
- Setting up your development environment for Moodle Mobile 2 (Ionic 1)
- Moodle Mobile development using Chrome or Chromium
- Moodle Mobile 2 (Ionic 1) Plugins Development
- Moodle Mobile 2 (Ionic 1) Themes
- Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial
- Moodle Mobile 2 (Ionic 1) Developing a plugin tutorial part 2
- Moodle Mobile debugging WS requests
- Moodle Mobile 2 (Ionic 1) Remote add-ons
- Moodle Desktop
- Moodle Mobile FAQ
- Moodle Mobile End To End Testing
- See all Moodle App pages
- See pages for Moodle App Ionic 5 (current)
- See pages for Moodle App Ionic 3 (legacy)
- See pages Moodle App Ionic 1 (legacy)
- See pages for Moodle App Phonegap (legacy)
For user documentation see Moodle Mobile
Juan Leyva (talk | contribs) |
No edit summary |
||
(19 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{Moodle Mobile}} | {{Template:WillNotMigrate}} | ||
{{Moodle Mobile 2 (Ionic 1)}} | |||
IMPORTANT: This documentation will be obsolete in May 2018, please [https://moodle.org/mod/forum/discuss.php?d=360412 read this announcement]. | |||
== Overview == | == Overview == | ||
Moodle Mobile can be customized in different ways: | Moodle Mobile can be customized in different ways: | ||
* Changing the app appearance for your site. | * Changing the app appearance for your site. | ||
* Creating a set of remote | * Creating a set of remote add-ons in order to add additional functionalities to the app. | ||
* Creating a custom application (with your custom name and icon) based on the Moodle Mobile code. | * Creating a custom application (with your custom name and icon) based on the Moodle Mobile code. | ||
* Configuring how the app should work via Moodle site settings. | |||
With the first two options you are not required to compile or build your custom application, with the third one you are required to compile and publish your custom app in the stores. | |||
== Changing the app appearance for your site == | == Changing the app appearance for your site == | ||
The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles. | The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles. | ||
Line 25: | Line 23: | ||
See [[Moodle Mobile Themes]] for additional information. | See [[Moodle Mobile Themes]] for additional information. | ||
== Remote add-ons == | |||
Remote add-ons are available since Moodle 3.1 and Moodle Mobile 3.1. | |||
A Moodle Mobile remote add-on is the mobile app version of a Moodle plugin that will be loaded when a user accesses the site on the app. | |||
Moodle Mobile remote add-ons are stored within a Moodle plugin and are downloaded and lazy-loaded by the Mobile app in every site that uses them. | |||
Remote add-ons are the best choice if you just want to support a Moodle plugin in the Mobile app without having to create and maintain a custom version. | |||
See [[Moodle Mobile Remote add-ons]] for complete information. | |||
== Creating a custom application == | == Creating a custom application == | ||
See [[Moodle Mobile custom apps]] or [https://moodle.com/mobileapp/ The Branded Moodle Mobile App service] by Moodle HQ | |||
=== Building === | === Building === | ||
There are two options for building the app, aka compile it to different devices: | There are two options for building the app, aka compile it to different devices: | ||
'''Phonegap Build''' | '''Phonegap Build''' | ||
Phonegap Build is an online service that lets you build the app automatically for different platforms. The main advantage is that it simplifies a lot the process of building. | |||
You just put your www/ folder in a github account and Phonegaps automatically | You just put your www/ folder in a github account and Phonegaps automatically builds the app for different platforms pulling your github code. | ||
Notice that the free version is for open repositories, but you can use the non-free version for private repositories. | Notice that the free version is for open repositories, but you can use the non-free version for private repositories. | ||
In order to build your app using Phonegap Build you need to place a special config.xml file into the www/ folder, see the config.xml file for Moodle Mobile 2 (Please, note that this file is different from the one created by Ionic in the app root folder). Please follow the tutorial mentioned in [[Moodle Mobile custom apps]] to view all the steps required for building the app using Phonegap Build service. | |||
'''Ionic CLI''' | |||
You can build | You can also build the app using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html | ||
== Configuring how the app should work via Moodle site settings == | |||
The app can be configured via Moodle site settingss. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the [[https://docs.moodle.org/en/Moodle_Mobile_additional_features Moodle Mobile additional features plugin]]. | |||
Please refer to the Configuring the app from your site section in this page: https://docs.moodle.org/en/Moodle_Mobile_guide_for_admins | |||
== Testing and developing == | == Testing and developing == | ||
=== Chromium or Google Chrome browser === | === Chromium or Google Chrome browser === | ||
See [[Moodle Mobile development using Chrome or Chromium]] | See [[Moodle Mobile development using Chrome or Chromium]] | ||
== Moodle Desktop == | |||
Refer to [[Moodle Desktop]] | |||
== See also == | |||
[https://moodle.com/mobileapp/ Branded Moodle Mobile app service by Moodle HQ] |
Latest revision as of 07:14, 29 April 2022
Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable. |
Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable. |
IMPORTANT: This documentation will be obsolete in May 2018, please read this announcement.
Overview
Moodle Mobile can be customized in different ways:
- Changing the app appearance for your site.
- Creating a set of remote add-ons in order to add additional functionalities to the app.
- Creating a custom application (with your custom name and icon) based on the Moodle Mobile code.
- Configuring how the app should work via Moodle site settings.
With the first two options you are not required to compile or build your custom application, with the third one you are required to compile and publish your custom app in the stores.
Changing the app appearance for your site
The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles.
In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles (theme).
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)
Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app.
Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.
Notice also that styles comes from a site, there is no way for changing the initial Add site / Manage account pages styles.
See Moodle Mobile Themes for additional information.
Remote add-ons
Remote add-ons are available since Moodle 3.1 and Moodle Mobile 3.1.
A Moodle Mobile remote add-on is the mobile app version of a Moodle plugin that will be loaded when a user accesses the site on the app.
Moodle Mobile remote add-ons are stored within a Moodle plugin and are downloaded and lazy-loaded by the Mobile app in every site that uses them.
Remote add-ons are the best choice if you just want to support a Moodle plugin in the Mobile app without having to create and maintain a custom version.
See Moodle Mobile Remote add-ons for complete information.
Creating a custom application
See Moodle Mobile custom apps or The Branded Moodle Mobile App service by Moodle HQ
Building
There are two options for building the app, aka compile it to different devices:
Phonegap Build
Phonegap Build is an online service that lets you build the app automatically for different platforms. The main advantage is that it simplifies a lot the process of building.
You just put your www/ folder in a github account and Phonegaps automatically builds the app for different platforms pulling your github code.
Notice that the free version is for open repositories, but you can use the non-free version for private repositories.
In order to build your app using Phonegap Build you need to place a special config.xml file into the www/ folder, see the config.xml file for Moodle Mobile 2 (Please, note that this file is different from the one created by Ionic in the app root folder). Please follow the tutorial mentioned in Moodle Mobile custom apps to view all the steps required for building the app using Phonegap Build service.
Ionic CLI
You can also build the app using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html
Configuring how the app should work via Moodle site settings
The app can be configured via Moodle site settingss. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the [Moodle Mobile additional features plugin].
Please refer to the Configuring the app from your site section in this page: https://docs.moodle.org/en/Moodle_Mobile_guide_for_admins
Testing and developing
Chromium or Google Chrome browser
See Moodle Mobile development using Chrome or Chromium
Moodle Desktop
Refer to Moodle Desktop