Moodle Mobile 2 (Ionic 1) Customization: Difference between revisions
Juan Leyva (talk | contribs) |
Juan Leyva (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
{{Moodle Mobile}} | {{Moodle Mobile}} | ||
{{Work in progress}} | |||
== Overview == | == Overview == | ||
Line 41: | Line 42: | ||
* Use your own notifications infrastructure | * Use your own notifications infrastructure | ||
Creating a custom application should be easy, you need to follow the basic setup instructions in [[Moodle Mobile | Creating a custom application should be easy, you need to follow the basic setup instructions in [[Setting up your development environment for Moodle Mobile 2]] and once you have a local installation running you just need to: | ||
Edit all the *.json and *.xml settings file in order to change the application name and application id to your custom one. | * Edit all the *.json and *.xml settings file in order to change the application name and application id to your custom one. | ||
Change all the icons and splash screens in the /resources directory | * Change all the icons and splash screens in the /resources directory | ||
Add your custom styles in scss/app.scss | * Replace the img/moodle.png with an image matching your logo | ||
* Add your custom styles in scss/app.scss | |||
=== Building === | === Building === | ||
Line 59: | Line 60: | ||
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 an special config.xml at the www/ folder, see [https://github.com/moodlehq/moodlemobile-phonegapbuild/blob/master/config.xml 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) | |||
'''Ionic CLI''' | '''Ionic CLI''' |
Revision as of 13:31, 29 June 2015
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.
Overview
Moodle Mobile can be customized in different ways:
- Changing the app appearance for your site.
- Creating a set of remote plugins 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.
The first two options does not require to compile or build your custom application, the third one requires 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 plugins
Remote plugins will be available in Moodle 3.0, Moodle Mobile 2 (MM2) is going to be able to pull app plugins (AngularJS modules) from the remote site and lazy load them into the app. This will happen every time a user login into a site (or the remote site information is refreshed).
Creating a custom application
You will need a custom app if you want:
- Custom corporate image (name, app icon, theme, store entry)
- Add additional features or static pages
- Remove or change existing features
- Custom translation of the app
- Use your own notifications infrastructure
Creating a custom application should be easy, you need to follow the basic setup instructions in Setting up your development environment for Moodle Mobile 2 and once you have a local installation running you just need to:
- Edit all the *.json and *.xml settings file in order to change the application name and application id to your custom one.
- Change all the icons and splash screens in the /resources directory
- Replace the img/moodle.png with an image matching your logo
- Add your custom styles in scss/app.scss
Building
There are two options for building the app, aka compile it to different devices:
Phonegap Build
Phonegap Build is an online service that let you to build the app automatically for different platforms. The main advantage is that simplify a lot the process of building.
You just put your www/ folder in a github account and Phonegaps automatically build 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 an special config.xml at 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)
Ionic CLI
You can build also using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html