Moodle in English: Adapt your plugins to Ionic 5

Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 6 April 2021, 7:20 PM

Hi developers!

These past few months we've been working on updating the Ionic framework in the mobile app to Ionic 5. As usual, we tried not to change our APIs and components to prevent breaking existing plugins. Unfortunately, Ionic 5 comes with a lot of breaking changes, especially related to templates. This means that your plugins will need to be adapted in order to look good in the version 3.9.5 of the app.

We're still in the process of migrating some features and fixing things, but we've reached a point where we have a stable app that you can use to test your plugins. For more info on this please check the following guide:

Adapt your Mobile plugins to Ionic 5

If you have any question please ask it here

Cheers,

Dani

(Edited by Juan Leyva - original submission Tuesday, 6 April 2021, 1:20 PM)

Average of ratings: Useful (4)

Re: Adapt your plugins to Ionic 5

by Ardian Deari - Saturday, 10 April 2021, 4:33 PM

Hi Dani, first of all thanks for sharing this info with us. I have two questions:
1. What about H5P, is it going to be supported?
2. Is it going to use the same notification API for airnotifier or is it going to be all a different thing?

All the best,
Ardi

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Monday, 12 April 2021, 2:04 PM

Hi Ardi,

1. The H5P code integrated in Moodle will work as it used to, no changes there. As for the hvp plugin, I think their templates are really simple and don't use Ionic components so I guess they'll still work without having to adapt them, but the hvp developers should check it anyway to make sure it works.

2.Yes, there's no change in push notifications, they'll still work as they used to and they use airnotifier. In general the app has barely changed in terms of UX for the user and the plugins used.

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Tuesday, 13 April 2021, 5:41 PM

Will the next version of the docker version app be updated to use ionic5?

Since I'm developing on Windows, from systems that are not web accessible the web version is not really an option for me.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 13 April 2021, 10:54 PM

Hi Neill,

we'll create a docker image with Ionic 5 but I don't know when it will be available.

Just for the record, the webapp can be used to access local networks like localhost because it runs in the client, I don't know if that's your case

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 14 April 2021, 3:27 PM

It seems I made some incorrect assumptions about the web app :D

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Pau Ferrer Ocaña - Wednesday, 14 April 2021, 4:47 PM

Hi Neil!

We've updated the next tag to the ionic version of the app, you will find it here:

docker run --rm -p 8100:8100 moodlehq/moodleapp:next

Cheers!

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 14 April 2021, 6:05 PM

Thanks, I'll be able to check our behat tests against it 🙂

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 14 April 2021, 9:06 PM

The next version does not seem to be working properly, i.e. trying to access it via http://localhost:8100 is failing.

I also tried starting it with -p 8100:4200 as an option, since the log showed that an angular server was starting on port 4200, but that did not work either.

I have had the latest image running fine.

I have attached the logs from one of my attempts at loading the next image

log.txt

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Pau Ferrer Ocaña - Wednesday, 14 April 2021, 10:07 PM

Oh wow, the image is running ok but the port is not on the 8100 and I don't know why.

I'll reach you when i found a solution (probably just changing the Dockerfile will be ok) however I'm facing some other problems with http-loader package that makes the container to fail.

If you can use the webapp on the meantime it would be great!

Thanks!

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Joseph Rézeau - Monday, 19 April 2021, 12:10 AM

I have 2 questions:

1.- How do I know if my plugin (REGEXP question type) uses IONIC?

2.- I test my plugin on my localhost Windows machine with Google Chrome Canary at https://integration.apps.moodledemo.net/

Is that the correct address to test if my plugin is Mobile compatible with IONIC 5 ?

In short, do I have to do anything?

Yours puzzled,

Joseph

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Monday, 19 April 2021, 2:10 PM

Hi Joseph,

1. Ionic components start with "ion-", e.g. ion-icon or ion-button. They also have some utility attributes like text-center, text-wrap, etc. If you use any of those in your templates for the app, then you're using Ionic. If that's the case, in the wiki page you'll find links to the Ionic documentation where it explains what do you need to use now for each case.

2. No, the "integration" app still uses Ionic 3. For ionic 5 you need to use: https://ionic5.apps.moodledemo.net/ (it's also in the wiki page).

In general, if you used some template of the app as an example when you adapted your plugin to Ionic 5 I recommend you to check that same template using the Ionic 5 branch to see if something has changed.

Cheers,

Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Joseph Rézeau - Saturday, 1 May 2021, 1:27 AM

Hi Dani,

1.- I have browsed my installed local Moodle 311 files for uses of <ion-item etc. and I'm surprised that very few activities seem to be using ION. Here's the complete short list:

mod\questionnaire\mobile
question\type\mtf\mobile
question\type\regexp\mobile (that's my own contributed question type)

Why is that?

2.- I have tried to test my localhost with the Google Chrome Canary at https://ionic5.apps.moodledemo.net/ as instructed in your reply but ... nothing works.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Joseph Rézeau - Sunday, 2 May 2021, 9:51 PM

ionic5.apps.moodledemo.net does not allow me to log in as moodle site admin! I have to log in as student... OK.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Marcus Green - Monday, 3 May 2021, 1:05 AM

What benefit would you get if you could login as site admin?

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Joseph Rézeau - Monday, 3 May 2021, 1:20 AM

None, of course!

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Tuesday, 4 May 2021, 2:32 PM

Logging into the app as a site admin requires you to generate a web service token for the mobile web service manually (as Moodle will not generate a token for them via the web services). After you have manually generated the token a Site Admin can login fine using the app.

I believe this is a security feature, https://docs.moodle.org/310/en/Using_web_services#Create_a_token

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Monday, 3 May 2021, 2:09 PM

Hi Joseph,

1. Moodle activities are supported with code included in the app itself, they don't use the plugins system. That's why there's no <ion- code in Moodle core, it's only in plugins with mobile support. You can see the templates of activities in the app in here:

https://github.com/moodlehq/moodleapp/tree/ionic5/src/addons/mod

2. I can login fine as admin. Are you using the Moodle app additional features plugin? If so, please read this. Please notice this plugin is no longer needed in Moodle 3.5 and above.

Cheers,

Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Joseph Rézeau - Monday, 3 May 2021, 11:04 PM

Hi Dani,

1.- OK, I understand.

2.- For testing purposes I use these addresses in my Google Chrome browser:

"Moodle Desktop" for current App version: https://integration.apps.moodledemo.net/
"Moodle App" for ionic5: https://ionic5.apps.moodledemo.net/

All is fine with Moodle Desktop. But "Moodle App" (ionic 5) has a few hitches.

a.- If I try to log in as admin, I can see my courses names but cannot select any, they are "locked".

b.- If I click the "Change Site" link I get an error message: 404 Not Found nginx for this URL: https://ionic5.apps.moodledemo.net/main/more

c. The "Preferences" and "App Settings" links do not work.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 4 May 2021, 6:39 PM

Thanks Joseph,

a. So if I understand it correctly you can open the courses in "integration" but not in "ionic5"? If so, it could be related to point "c".
b. We just fixed this

c. We're investigating why this isn't working.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Wednesday, 5 May 2021, 2:32 PM

Hi Joseph,

points "a" and "c" should be fixed now in the webapp

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Monday, 26 April 2021, 6:44 PM

Did the web version of the Ionic5 app change at all on Friday?

Just want to check because since sometime on that day my plugins are just getting template errors whenever visiting the page, I was able to only get them to stop only if I emptied the template of all content. i.e.

The following has no error:

{{=<% %>=}}

But it fails if I use a template with any content like:

{{=<% %>=}}
<div></div>

This seems to be the case for plugins that I have not done anything to yet, which still display fine in the Ionic3 docker version.

I am running my tests against Moodle 3.10

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Monday, 26 April 2021, 10:52 PM

Hi Neill,

thank you for letting us know. It seems a change done last Friday broke the site plugins system, we're working on fixing that. We'll let you know as soon as we've got it working again.

Cheers,
Dani

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Jack Owen - Tuesday, 27 April 2021, 2:36 PM

any plans updating libraries to androidx?

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 27 April 2021, 5:01 PM

Hi!

We looked at AndroidX some time ago in this issue:

https://tracker.moodle.org/browse/MOBILE-3060

At that time we couldn't use it because we were using PhonegapBuild. Now we could use it, and I'd like to use it to fix issues like MOBILE-3060, but currently it isn't in the short term roadmap so I can't tell when will it happen.

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 27 April 2021, 4:59 PM

Hi,

we did a rollback of one of the changes and now site plugins should work again. We'll try to re-apply a similar patch during this week because it contains a required change, we'll try not to break site plugins but please let us know if you face the same issue again.

Cheers,
Dani

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Neill Magill - Tuesday, 27 April 2021, 8:51 PM

Thanks. I can get back to fixing our plugins.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Pau Ferrer Ocaña - Tuesday, 27 April 2021, 11:17 PM

Hi!!

It seems also docker containers back now, but we've temporary changed the used tags:

docker run --rm -p 8100:80 moodlehq/moodleapp:ionic5

and, for behat testing:

docker run --rm -p 8100:80 moodlehq/moodleapp:ionic5-testing

Not the port change, this is because now, the container is running an standard http server and not a node server anymore to increase startup speed.

Please feel free to test and report any problem you may have. Right now, this is an experimental feature.

Cheers!

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 28 April 2021, 3:45 PM

Thanks Pau,

I have them up and running now.

The only issue I had was that the tag for the behat image seems to be moodlehq/moodleapp:ionic5-test rather than moodlehq/moodleapp:ionic5-testing

It is nice how much smaller the new inoic5 images are. I also noticed the much faster startup speed for the app container.

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Pau Ferrer Ocaña - Wednesday, 28 April 2021, 4:16 PM

That's right! Thanks for noticing!

I've created a new page on the wiki so information keeps updated.

https://docs.moodle.org/dev/Moodle_App_Docker_images

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 28 April 2021, 5:15 PM

It might be worth getting the new Ionic5 images to output 'dev server running: ' when they have finished their startup script process so that they will work seamlessly with the existing moodle-docker waiting for the app to come up script

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Noel De Martin - Wednesday, 28 April 2021, 6:06 PM

Hey thanks for following up, I'm still working on all the moving pieces related to Docker/Behat/Moodle for the ionic5 version. I use moodle-docker for development, so I'm also making sure that it works, but I haven't published the changes yet.

If you're interested you can follow these issues: MOBILE-3738, MDL-71386, and MDL-68969.

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 28 April 2021, 6:11 PM

Thanks, they cover the issue I was having initialising the app with the Ionic5 version of the app.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Noel De Martin - Monday, 3 May 2021, 8:20 PM

Hey, we just merged a working version with Behat using Docker.

If you want to use Docker, this hasn't been merged yet and I don't think it'll happen until the release. In the meantime, you can use my fork if you want. Check out this PR: https://github.com/moodlehq/moodle-docker/pull/156

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 28 April 2021, 5:54 PM

I just tried to use the ionic5-test image and Moodle behat failed to initialise with it because it could not find config.json

How to reproduce:

In your Moodle's config.php ensure that the following line is present:

$CFG->behat_ionic_wwwroot = 'http://localhost:8100';

Start the moodlehq/moodleapp:ionic5-test image

From the root of Moodle run:

php admin/tool/behat/cli/init.php

You will eventually get an error similar to:

Creating Behat configuration ...++ cURL request for "http://localhost:8100/config.json" failed, HTTP response code: HTTP/1.1 404 Not Found
 ++
* line 1623 of \lib\filelib.php: call to debugging()
* line 736 of \lib\behat\classes\behat_config_util.php: call to download_file_content()
* line 654 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->get_mobile_version_tags()
* line 997 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->get_behat_profile()
* line 381 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->merge_behat_profiles()
* line 125 of \lib\behat\classes\behat_config_manager.php: call to behat_config_util->get_config_file_contents()
* line 295 of \lib\behat\classes\util.php: call to behat_config_manager::update_config_file()
* line 192 of \admin\tool\behat\cli\util_single_run.php: call to behat_util::start_test_mode()
!!! Coding error detected, it must be fixed by a programmer: Unable to load app version from http://localhost:8100/config.json !!!
!!
Error code: codingerror !!
!! Stack trace: * line 738 of \lib\behat\classes\behat_config_util.php: coding_exception thrown
* line 654 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->get_mobile_version_tags()
* line 997 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->get_behat_profile()
* line 381 of \lib\behat\classes\behat_config_util.php: call to behat_config_util->merge_behat_profiles()
* line 125 of \lib\behat\classes\behat_config_manager.php: call to behat_config_util->get_config_file_contents()
* line 295 of \lib\behat\classes\util.php: call to behat_config_manager::update_config_file()
* line 192 of \admin\tool\behat\cli\util_single_run.php: call to behat_util::start_test_mode()
 !!
Error enabling site

I wonder if that is perhaps Moodle making bad assumptions about the json file being present, rather than a problem with the app.

Edit: Looks like this is covered by: MDL-71386

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Noel De Martin - Wednesday, 28 April 2021, 6:08 PM

This has changed because /config.json does not exist in the ionic 5 version, given the new Angular router. This file is now at /assets/env.json, and it has been fixed in this issue: MDL-71386.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 28 April 2021, 6:14 PM

I'll try again after the next on on demand version of Moodle is rolled 🙂

Although I guess it would still break on Moodle 3.8 (which is what out live servers are still on so, so what we have our Jenkins builds running against as well)

I guess we should be able to stop errors there by pinning our builds to an specific version of the app (that is on Ionic3) though.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Friday, 30 April 2021, 9:37 PM

One of my plugins is passing text into core-format-text

<core-format-text text="<% content %>" component="mod_tabbedcontent" componentId="<% cmid %>"></core-format-text>

For plain text this works fine, but when an image is included in the Ionic5 version of the app it does not load properly. The image link appears to be missing the token and some of the other parameters that are present in the Ionic3 version of the app.

For example under Ionic3 I see: <server>/webservice/pluginfile.php/39/mod_tabbedcontent/tabcontent/1/moodle-docker-automatic-app-tests.png?token=94777a62d6e0fc3ccbc169170a792e6a&offline=1#moodlemobile-embedded

While under Ionic5 I see just: <server>/webservice/pluginfile.php/39/mod_tabbedcontent/tabcontent/1/moodle-docker-automatic-app-tests.png

I didn't see anything about core-format-text changing in the plugin adaptation notes, is there something I should be changing in my template code to fix this?

I was testing this on the docker versions of the apps.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Monday, 3 May 2021, 1:59 PM

Hi Neill,

that's weird, the format-text should add the token as it used to. Can you please share your plugin with me via private message so I can take a look?

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Tuesday, 4 May 2021, 2:47 PM

I have sent a couple of examples from our plugins.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 4 May 2021, 6:32 PM

Thanks!

I just tried the mod_tutorialbooking and it seems to work fine for me. I installed it in a local site and added it to a course (I put an image in the module description). I created a session and put an image in the session description.

I accessed the plugin using a development version of the app and I could see the images fine, and they use tokenpluginfile.php to connect (the app uses this endpoint if it can). Then I tried the same with the webapp and now the images aren't seen, I get an ERR_CONNECTION_REFUSED, but it seems to be a problem with https->http, the images still have the token.

Which Moodle version did you use to test it? Or does the problem happen only with tabbedcontent plugin?

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Tuesday, 4 May 2021, 8:32 PM

Hi Dani,

I'm using Moodle 3.10.3+ (Build: 20210420)

So here is the content in Moodle:

Image in Moodle

Here is it under the Web version of the Ionic5 app:

Broken image in Ionic5 app

And here is it working under Ionic3

Image working under Ionic3

I guess it is not the module description I am trying the images, but inside other parts (so maybe it is something I'm doing wrong/differently)

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Tuesday, 4 May 2021, 10:09 PM

Hi Neill,

I think this happens because you're using "localhost" to connect to the site. In Ionic 5 we need to use the ionic-webview Cordova plugin in Android (it wasn't required before), and this plugin makes the Android app be served under http://localhost. So now the app treats "http://localhost" URLs as downloaded files. If you use your local IP instead of localhost to connect to the site then the image should work fine.

Please notice that in a real device you won't use localhost to connect to a local site, so this issue only affects the webapp. I'll talk to the team to discuss if we add an exception for the webapp

Cheers,
Dani

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Wednesday, 5 May 2021, 2:31 PM

We've added an exception in the code, it's already live in the webapp. Can you please check if images are working now?

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Neill Magill - Wednesday, 5 May 2021, 4:26 PM

I have checked and they are now displaying.

Thanks.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Marcus Green - Friday, 18 June 2021, 5:47 AM

My Gapfill question type has a template that contains the following.

[text]="question.text" (afterRender)="questionRendered()">

I have just noticed that the text doesn't wrap as expected, and chops off at the right, does anyone know how to make it wrap instead.

The full text is here
https://github.com/marcusgreen/moodle-qtype_gapfill/blob/master/mobile/latest/addon-qtype-gapfill.html

I looked here for inspiration without luck...
https://github.com/moodlehq/moodleapp/blob/ionic5/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Marcus Green - Friday, 18 June 2021, 6:24 AM

I think I have found a fix.
I changed this line on line 2 (see ion-wrap to ion-text-wrap0

<ion-item class="addon-qtype-gapfill-container qtext ion-wrap " >

To this

<ion-item class="addon-qtype-wordselect-container qtext ion-text-wrap">

Seems to fix wrap for my gapfill question type as well.

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Friday, 18 June 2021, 2:36 PM

That's right Marcus, by default texts in items are chopped off, adding the "ion-text-wrap" class fixes it. In Ionic 3 this was done using the "text-wrap" attribute

Average of ratings: Useful (1)

Re: Adapt your plugins to Ionic 5

by Marcus Green - Friday, 18 June 2021, 3:51 PM

This issue goes to show the importance of testing, and having the time for testing. I was confident that both question types were working with ionic5 when I did the most recent release. Fortunately I had some questions with longer text and they illustrated the problem. Dani, when do you estimate the release of the final ionic5 supporting version of the App?

Average of ratings: -

Re: Adapt your plugins to Ionic 5

by Dani Palou - Friday, 18 June 2021, 4:46 PM

We're approaching the final stages of our QA testing, but we want to make sure everything works so we plan to release it in a couple of weeks. We might delay it a bit if we find any big issue or we're not confident enough of its stability.

Average of ratings: -