Moodle Mobile 2 (Ionic 1) Customization: Difference between revisions

Revision as of 14:21, 15 June 2015

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 Moodle Mobile plugins development 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 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.

“Ionic CLI

You can build also using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html

Testing and developing

Chromium or Google Chrome browser

See Moodle Mobile development using Chrome or Chromium

@@ Line 1: / Line 1: @@
 {{Moodle Mobile}}
-{{obsolete}}
 == Overview ==
-In this document are described the general steps for building your custom Mobile app.
+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.
-You can find a step by step guide of how to create a custom version of the app here: http://es.slideshare.net/juanleyva/creating-a-custom-moodle-mobile-app-moodle-moot-spain-2014
+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.
-== Creating your custom application ==
+== Changing the app appearance for your site ==
-Remember that if you only want to change the global styles of the app, you can use an extra CSS file in your Moodle installation without needing to recompile the app.
+The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles.
-=== Basic custom settings ===
+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).
-In your Moodle installation you can specify a extra CSS file in the Mobile settings section
+The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)
-You can edit the config.json file for:
+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.
-- Adding a default language
-- Add some presets in the login screen (url and username) pointing to your installation
-=== Development environment ===
+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.
-See [[#Testing_and_developing]]
+Notice also that styles comes from a site, there is no way for changing the initial Add site / Manage account pages styles.
-It is recommended that you have a local web server (app and moodle installation under localhost or the same local domain).
+See [[Moodle Mobile Themes]] for additional information.
-You will need:
-* A Moodle installation with Web Services (REST) enabled - see [[Web services]] documentation
+== Remote plugins ==
-:* Administration -> Plugins -> Web Services -> External Services -> Enable mobile web service
+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).
-:* Administration -> Plugins -> Web Services -> Protocols -> Enable REST
-:* Administration -> Users -> Permission -> Define roles -> Edit the Authenticated user role -> Allow webservice/rest:use
+== Creating a custom application ==
-* A local copy of the Mobile HTML5 App with the Debugging options Enabled (https://github.com/moodlehq/moodlemobile)
+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
-=== Web Services Development ===
+Creating a custom application should be easy, you need to follow the basic setup instructions in [[Moodle Mobile plugins development]] 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.
-In most cases your plugin/s will need Web Services to get data from your Moodle installation. It is recommended that you first develop the Web Services that you will need (see [[Web Services]]).
+Change all the icons and splash screens in the /resources directory
+Add your custom styles in scss/app.scss
-* Create a local plugin in Moodle for adding the extra Web Services you need and also your plugin's lang files (Local WS plugin template: https://moodle.org/plugins/view.php?plugin=local_wstemplate)
-* Create a new External Service in your Moodle installation, adding a services.php file in your new local plugin or creating manually the service in your Moodle installation.(Plugins -> Web Services) See [[External services description]] for more info. Remember the key name of the service, because you will need it later.
-=== Moodle Mobile Plugin Development ===
-See [[Moodle Mobile Plugins Development]] and [[Moodle Mobile Developing a plugin tutorial]]
-For developing the plugin you need:
-* Edit the /config.json file to:
-:* Add the extra plugins you implement
-:* Indicate the WS service name you are going to use in your Moodle installation (Remember, that you need to create a WS Service indicating the functions available for your custom app)
-:* Add your custom default lang file (es, ca, fr ...) (the language file must exists in the app's lang/ folder)
-:* Change the app login form presets
-* Add your own css files, custom images, etc..
 === Building ===
-There are three 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'''
@@ Line 67: / Line 54: @@
 [http://build.phonegap.com 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 customizations in a github account and Phonegaps automatically build the app for different platforms pulling your github code.
+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.
-'''Phonegap CLI'''
+“Ionic CLI'''
-You can build also using the Phonegap CLI interface, it requires to install the different Platform SDK / tools but the build process is simpler. See http://docs.phonegap.com/ for more information
+You can build also using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html
-Once installed the environment, you need to deploy in your project/www folder the app code
-'''Platform SDK'''
-See [[Moodle Mobile Building the app for Android]] or  [[Moodle Mobile Building the app for iOS]] (These articles may be obsolete)
-'''Automatic build system'''
-See [[Moodle Mobile Automatic Building System]] for some instructions for building an automatic building system initially for Android.
 == Testing and developing ==
@@ Line 91: / Line 67: @@
 See [[Moodle Mobile development using Chrome or Chromium]]
-=== Ripple ===
-Requirements: Google Chrome browser + Ripple mobile environment emulator plugin (http://ripple.tinyhippos.com/)
-You must run Google Chrome in Unsafe mode adding this param:
- --allow-file-access-from-files
-IMPORTANT: I strongly recommend you 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
-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 functionalities (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/.
-=== Debugging styles or running a remote Console ===
-You can use Safari or Google Chrome developer tools for debugging (console) and changing the CSS styles in live:
-https://developer.chrome.com/devtools/docs/remote-debugging
-http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html
-=== Local web server ===
-If you deploy  the html files in a server under the same domain that the Moodle you are going to connect to you can test the application without emulator or changing the Security settings of your browser.
-In other words
-Your Moodle at http://myhost.com/moodle24
-Your app at http://myhost.com/moodlemobile/
-or
-Your Moodle at http://localhost/moodle24
-Your app at http://localhost/moodlemobile/
-Note that the mobile - related modules will not work.
-== See also ==
-[http://es.slideshare.net/juanleyva/creating-a-custom-moodle-mobile-app-moodle-moot-spain-2014 Creating a custom Moodle Mobile app - MoodleMoot Spain 2014]

Documentation