Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

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

From MoodleDocs
Moodle Mobile 2
(Ionic 1 - Obsolete)

For user documentation see Moodle Mobile
No edit summary
 
(35 intermediate revisions by 6 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:
* 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 this document are described the general steps for building your custom Mobile app.
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).


== Creating your custom application ==
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)


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.
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.


=== Basic custom settings ===
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.


In your Moodle installation you can specify a extra CSS file in the Mobile settings section
Notice also that styles comes from a site, there is no way for changing the initial Add site / Manage account pages styles.


You can edit the config.json file for:
See [[Moodle Mobile Themes]] for additional information.
- Adding a default language
== Remote add-ons  ==
- Add some presets in the login screen (url and username) pointing to your installation
Remote add-ons are available since Moodle 3.1 and Moodle Mobile 3.1.


=== Development environment ===
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.


See [[#Testing_and_developing]]
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.


It is recommended that you have a local web server (app and moodle installation under localhost or the same local domain).
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.
 
You will need:
 
* A Moodle installation with Web Services (REST) enabled - see [[Web services]] documentation
 
:* Administration -> Plugins -> Web Services -> External Services -> Enable mobile web service
 
:* Administration -> Plugins -> Web Services -> Protocols -> Enable REST
 
:* Administration -> Users -> Permission -> Define roles -> Edit the Authenticated user role -> Allow webservice/rest:use
 
* A local copy of the Mobile HTML5 App with the Debugging options Enabled (https://github.com/moodlehq/moodlemobile)
 
=== Web Services Development ===
 
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]]).
 
* 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..


See [[Moodle Mobile Remote add-ons]] for complete information.
== 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'''


[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.
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 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 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.


'''Platform SDK'''
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.


See [[Moodle_Mobile_Building_the_app_for_Android]] or  [[Moodle_Mobile_Building_the_app_for_iOS]]
'''Ionic CLI'''
 
 
'''Automatic build system'''
 
See https://docs.moodle.org/dev/Moodle_Mobile_Automatic_Building_System for some instructions for building an automatic building system initially for Android.
 
== Custom Phonegap plugins ==
 
Phonegap hast a set of limited features, sometimes it’s necessary implement features that are missing in Phonegap.
 
Push notifications is one of the most important features missing that can be solved by developing a plugin for Phonegap for every specific platform you want to handle this kind of notifications.
 
Developing a plugin for Phonegap means developing using the specific platform framework and language (Objective c for iOs).
 
One of the disadvantages of custom plugins is that you can still use the Phonegap online Build service for cross compiling but the feature will not be present because the online services does not allow you to add custom plugins.
 
The app can detect if the app has been compiled using the online service for disabling the plugins that uses custom Phonegap plugins automatically


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 ===
=== Google Chrome browser ===
See [[Moodle Mobile development using Chrome or Chromium]]
 
== Moodle Desktop ==
In order to be able to access any domain via AJAX from the local file:/// protocol, you must run Google Chrome in Unsafe mode adding this param:
Refer to [[Moodle Desktop]]
 
== See also ==
--allow-file-access-from-files
[https://moodle.com/mobileapp/ Branded Moodle Mobile app service by Moodle HQ]
 
If it not work, try to add also:
 
  --disable-web-security
 
 
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
 
 
With Google Chrome and the F12 or "Developer tools" you can emulate mobile devices changing user-agent, orientation, resolution, geo-location, touch events, etc..
 
Just open the Developers tools, click on the wheel bottom-right corner to see the Override options.
 
It's interesting also disabling the Cache (in general options)
 
=== 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/.
 
 
=== 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.

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

See also

Branded Moodle Mobile app service by Moodle HQ

Retrieved from "https://docs.moodle.org/dev/index.php?title=Moodle_Mobile_2_(Ionic_1)_Customization&oldid=62163"
Powered by MediaWiki