 Hello, everyone. Welcome to the Moodle Academy webinar on setting up a Moodle development environment. I'm Reshneel Tautaram, developer educator at Moodle Academy. And I'll be your host today and introducing our speakers today. And I'm joined by my colleague, Anakrasa, to support me during this webinar. Today, we are very happy to have four developers from Moodle HQ presenting today. First off, we've got Ruslan Kabalin, a senior developer with the Workplace Solutions team. We've got June Pataleta, an integration lead in the Moodle platform team. And we have Noel DeMartin, analyst developer with the Mobile Solutions team and Adrian Grieve, product delivery lead. The overview for today's session. So we are going to have a look at what you need to do in Moodle development. So there are many ways to install Moodle development. Our HQ developers will share two ways to set up your Moodle development environment. Noel, who works with the mobile apps team, will talk about Moodle app development. And finally, we will get to hear what's in plan for the dev gem that is going to happen in about two weeks' time. And in the end, hopefully, we'll have some time to take some questions. So that's the plan for today's session. Getting started with Moodle development. Now, there are many ways to set up your Moodle development environment. A lot of it depends on the operating system that you use and your personal preferences. But essentially, for a Moodle development environment, you will need to have PHP installed because Moodle is a web-based application written in PHP. You need to have a web server, such as Apache. Relational database, for example, MySQL. And obviously, you will need to have Moodle installed. And it's recommended to have Moodle debugging enabled in your development environment. And to write code, you will need an IDE. And it's recommended to have a Git also installed so that you can manage your code changes. Now, like I mentioned, there are many ways to set up your Moodle development environment. And now our PHP developers will share at least two ways to set up your environment. I will stop sharing my screen and hand over to Ruslan, who is going to present on Moodle Dev Compose. Yeah. So well, I'm going to talk about a sort of alternative approach for using for setting up development environment. It's using the tool called Moodle Dev Compose. And if you switch to the next slide, please, here. Yeah. So initially, when Docker was around and I was thinking, maybe I'll just need to start using a little bit different approach to setting up rather than installing all the services like MySQL, Postgres, Apache Web directly on this system. Is there a way to basically use Docker to make it a little bit easier for me? And the sort of things that I wanted to achieve with that is to have a clean system on the host, so avoid direct installation of service packages. It should be close to traditional approach of installation, the one that I used to be when I installed all the services directly, and have a flexibility to select particular services that I want to run and keep things consistent as well. So I could redeploy it when I need it without much effort. And among other things, we're keeping different instances of different versions of Moodle running at the same time. So I could switch, test different patches with different versions, and have a shared database instance. So I wouldn't need to run several different database instances for each web container and keep one for everything. And keep that solution operating system independent as well. So basically, the Docker was around, and I started looking at what I can, if I can achieve that with the Docker. And I came up with a, basically, part of a very simple approach using Docker Compose to deploy the set of services that I wanted to run at the same time. So Docker Compose is basically a tool that allows you to describe in YAML file which particular services you want to run on your system at the same time, and configure them specifically. If you could click on that Moodle LAMP Compose file, the URL, yeah, and scroll it down a little bit. So this is just basically a simple example of how you can create a very simple LAMP depth environment. It would require just two containers, which is Web and MariaDB in this case. You can use the standard Moodle image for the Web one. And mount the location of your Moodle code inside container. And pretty much that's it. Yeah, just configure some environment within MariaDB. So you would know which database name and database credentials you need. Can you switch back to slides? Yeah, and then you could just run Docker Compose up in Compose file directory, open browser, and it will be available to you straight away without any local installation of the system. Every service would live in an individual container. And if you run Docker Compose down, after that it will just basically destroy all containers, but the data remain in place because we used volumes for that. If you switch to the next slide, please. So Moodle depth Compose is basically evolution of that simple approach, which I put together as a separate repository published on GitHub. It has a comprehensive setup documentation explaining step by step what you need to do to start using it. Among kind of main advantages, it's using another container, which is called EngineX proxy, which allows you to set up several versions of Moodle using different web containers with different versions of PHP and use some environment variable to give each of those web content a different thing. And the proxy will just redirect your browser to the right container when you access it. It contains Mailpit as well, so you don't need to think how to test email, for example, if you want to, you know, if you want Moodle to send emails and see what actually works. And see what actually has been sent so that's a very useful service so you could just open the interface and see what emails are coming from Moodle. It's easy to extend. It's also explained in the documentation how to extend it with creating different Compose. YAML files that will be linked together to the original ones. And several examples how to add SSL at Mancache using some authentication. So basically, well, if you just click maybe on that link and scroll down a little bit, yeah, scroll down just to show what's there. So it's basically explaining what you need to do to start using it. And it's very clean. Also, basically it's just Compose files so you use all the Docker Toolkit. There are no additional scripts for that, for controlling those things. And I think it's kind of for the developer who want to start using Docker for running services. This is kind of fairly simple and gentle approaching to use Docker as a basically make Moodle Dev Environment Docker-based. Yeah, I think that's it for me. Thank you. The next tool that we will look at is Moodle Ubuntu. So I will hand over to Jun. So hi, I'm Jun. I'm an integrator from the Moodle LNS team. And yeah, I'd like to share to you this setup script called Moodle Ubuntu. It helps you set up a Moodle development or testing environment in Ubuntu if you're a Ubuntu user. It might be useful for you. So a bit of a background. Back in 2017, Moodle contracted the testers from an external company. So we had to provide a Linux VM for them to use for their testing. So I'm kind of the one maintaining that virtual machine. And then it was a bit difficult to maintain because I have to repackage the image whenever both the requirements change and also the VM has a relatively large file size. So last year, I started writing Moodle Ubuntu based on the provisioning script from another Moodle vagrant that I was developing too. If you're familiar with vagrant, vagrant is like a command line tool that helps set up virtual machines in an easy way. So if you would be asking, why not just maintain Moodle vagrant? It's because at that time, the testers machine lacked the requirements to support vagrant. They also lacked the requirement to install Docker. So we're kind of stuck in the VM approach. So that's the background for my script. So what can be done here is how do you set up an Ubuntu machine? It's basically like simple four steps in general. You just have to make a fresh installation of Ubuntu. You clone the Moodle Ubuntu repository and then run and set up the test page. And then it will do everything, set up everything for you. You may need to respond to some prompts during setup, but it should be pretty easy. And then after that, you can start testing and or developing in Moodle. So after setup, the machine will have an Apache web server. It will have different PHP versions. Currently it will install PHP 7.3 to PHP 8.2. You will also have different databases set up like PostgreSQL, MySQL, SQL Server, Oracle via Docker. And it will also install Moodle development kit or MDK. If you are new to developing in Moodle, Moodle development kit would be a very useful tool for you to help you work on Moodle, especially when contributing patches to Moodle. It will also install other things like behave-related stuff to allow you to run behave tests on the machine. So if you want for more information, you can just check out this repository. And before that, I'd like to demo a little bit of what about this setup script. So let me just move. I had to move to another machine. So I basically have this Moodle Ubuntu setup already. So at this stage, I just finished installing Cloning Moodle Ubuntu. I just finished setting up a plain version of Ubuntu so I can start cloning it, cloning the repository. It should be pretty quick. Then you just want to set up that message. Then there's the password. Sorry. There you go. And then, yeah, it will just do its own thing. And then, of course, I won't finish this. And I will just pop it. Just kill the machine. So that's it. And then after setup, I'll just store this one to show you what a finished setup script looks like. Let me just power up the VM. Cool. So this is the state of the machine after you have set it up. And now you will have finished. So you will see that here that on the finished, when the setup script finishes, you will have the term server setup. There's an initial Moodle instance installed here, too. And it's a bit so VM-snow. There. So you already have a Moodle instance installed. So you will also have MVK installed. And so I think it's enough to get you started developing in Moodle. So what's next for this script is in the future, I'd like to break it down into smaller setup scripts and improve the auto configuration, for example, to allow it to automatically set up your name or email for your GitHub config or your GitHub username, which is needed by MVK config, and probably make it smarter. Like in case of an error, it will allow you to resume from the last successful installation step. So something like that. But yeah, hopefully. That's it from me, I think. So thank you for listening. Thank you, June. Now it's time for Moodle app development with Noel. OK. So basically I want to talk about Moodle app development. How you would go about developing for the Moodle app. And there are two kinds of things you would want to do. The first is plugin development. When you have a Moodle plugin and you want to add functionality that works in the Moodle app. And something else you may want to do is app development. This is taking the Moodle app and modifying its core functionality. So these are the two things I will get into today. There are also some advanced topics you may want to look into like testing and native functionality. But I think those are something that you can get into later. If you have the first steps, it should be fine. So for the first one, for plugin development, basically you have to have a local model instance installed. You can use one of the methods that June on Ruslan mentions or anything else. You just need a local model instance. You also need a Chromium browser. And I say Chromium because we are using some APIs that are not available, for example, in Firefox. This is something only for development. The real application using native devices doesn't have this issue. But for development, you will need to use a Chromium browser. And also you will need to configure it to disable some security flags that are also necessary for development. And once you get all of this setup, you should be able to start developing your plugin. Some things to keep in mind is that you need to enable web services in your model instance. And the way I suggest that you test that your environment is working properly is you can install this local greetings plugin, which is a plugin from a model academy. And in particular, the Mobile Act 3 branch, which has the mobile functionality. And once you do that, you can use this browser, the Chromium browser setup for development, to visit this URL with a hosted version of the app. So you don't even need to install the app yourself. To show you some example of how to do that, first of all, you need to activate the mobile services, as I mentioned, here. And once you do that, you can open your browser. For example, call it Unsafe Chromium to this one with the special flags for development, so that I don't confuse it when I want to use my normal browser. So once you are here, then you can visit this URL. And this will open an instance of the mobile app. And you can use it to connect to your site. So once this is opened, for example, my site is localhost8000. And I will log in with the test accounts, which is the admin account. I am using model docker to host my local instance. And once you are inside the site and the app, you can visit this menu and you go to the greetings. And this is what the plugin is doing. So if you see this, everything should be working properly. And something else I want to mention is, if you want to make some changes, for example, imagine you change this string, if you go to the app and you reload, at first you will see it doesn't change. This is because sometimes part of the plugins are cached for performance. In this particular case, for example, you have to go to your model site and you have to push cache, all the cache. Once you do that and you reload, everything should work properly. So right now I will reload. And it should have taken all the changes. See? Open. Yeah, and you see now it has the changes. Something else to keep in mind, you saw that when I refreshed the first time, it wasn't working. This is because the application is thought for mobile devices, not for a browser. And when you reload from some URLs, sometimes it doesn't work as you would expect. So in case anything is not working properly, you just visit the root URL and use the application normally and everything should work. So that is something to keep in mind in case you see something misbehaving. And other than that, if the push cache's trick doesn't work, depending what you are doing with plugins, sometimes you may also need to resynchronize the site. So you would go here and you click this. And this would also refresh the plugin and all of that. I think with this tool, with the synchronization and the push cache, you should cover all the situations. So basically that's it for plugin development. The other use case I was mentioning was app development. So in the example I was showing you, we were using a hosted version of the model app that we have prepared for development. But if you want to modify any code of the app itself, not something in the model site, you have to run the app locally. And the only requirement that we have really is that you have Node.js and NPM installed. And in particular, we strongly recommend that you use something like NBM, Node Version Manager. This is because one of the most common source of problems for people having issues running the app locally is that they don't have the correct version of Node or NPM installed. And then when you compile the app, it doesn't work as expected. But if you're using NBM, then it should be fine and it should take the exact version we have been testing with. So you can clone this repository with the code of the app. If you have NBM, you can run NBM installed to make sure you are using the proper versions. And then you just install the dependencies and run NPM start. And then that should get your local instance working. In my case, I already ran it because it can take maybe one minute or so to work. I didn't want to keep you waiting. And once you see this compiled successfully, then it means that it's already working. Then in your browser, it should already have done this automatically. But in case it doesn't, you can visit the URL. And you should be able to see the application running locally. Yeah, you see that now it's working and it's running in localhost. So that's it. Now any change you make to the source of the app, it should be reflected here. And basically that's it for local development. Some extra things I wanted to mention in case you look into that for testing. I recommend installing VMC viewer or something similar. If you want to debug at some times tests, this is very useful because we had normally runs automatically and you don't see what is happening. But using something like this, you can actually see the screen of the app and you can even open the tools and see what's going on. For running unit tests, you just do NPM test and it will run all the just tests. And for running acceptance tests using VHAT, I have put the command here, but it's actually the same you would do for any normal VHAT tests that you're already doing in Moodle. In my case, since I am using Moodle Docker, I'm using the VMC viewer as I mentioned. And this is a screenshot of what you should see when you open the VMC viewer. You will see how the application is launched and it's automated by VHAT. And in case you want to run the tests of the core app, you will need to run these commands and this generates a local model plugin with all the VHAT features inside of the plugin so that they are executed when you are running the VHAT tests. And that should be for testing. For native functionality, you need to have the native SDK installed, so depending if you are doing Android or iOS. And the commands are just npm-run-prod-android or npm-run-prod-ios. And this should open an emulator in your computer running the native device and you should be able to test that the application works properly. So that's mostly it. Some things before I finish is that I suggest reading the docs because we have a lot of links and more details about everything I just mentioned. In particular, if something is not working, I suggest looking at the troubleshooting section in the documentation because we have the solution to many common issues that people find. And finally, when something is not working as you expect, it's important to understand if it's something on the Ionic side, on the native side or some model issue because when you are searching for help to improve your error, if you are using the proper context, it's a lot more likely that you find the solution because, for example, if it's something wrong with Ionic and you are searching model and the name of the error, it's very likely that this leaves the search engine and you cannot find the help you seek. We've got some other questions regarding the model development environment on setting up your model installation. So there was a question on what is MDK? MDK is something that is a pretty useful tool for model developers that helps them work on fixing, on developing a model. For example, it helps you create different model instances easily. And it can also help you work on issues on the tracker. So, for example, you can, for example, type in MDK fix then the issue number. Let me just type here. Then it will create, for example, I've typed MDK fix one, two, three, four, five, and then it will help you create a branch on your model instance for that particular issue. Maybe it's easier to demo. Let me just share my screen. So, for example, I'm working on this issue. So you provide unique titles. Imagine I don't have a patch for this yet. Let me go to my model instance. I will say MDK fix what issue number is that? 79048. So it will create a branch on my local repo story, and then when I'm done working on my fix and then, so, for example, this one already has a fix. I can just, oh, that's not a fix. I can easily push this to GitHub or something using a command like MDK push. It's like a bunch of different helper scripts that helps model developers fix their fix issues that they're working on. I can also help me create new model instances like, for example, MDK create nashign, nashname. For example, it will help me create model instance. So, like this. And then later on my this is done, so I should be able to... Okay, sorry. It's not working. Classic demo effect. But yeah, it's pretty handy for for developers working on model. Thank you, Jun. So if you have enjoyed this session, we'd love to we'd love you to consider getting involved further and help us grow by contributing to the development of model academy. You can do this by visiting our get-involved course which you'll find on the front page of the model academy site. You can suggest new ideas for new courses and webinars, and you can vote on ideas that have been already suggested by others. And we're always on the lookout for community members to help present webinars and co-create short online courses. And we'd love your help in making model academy more inclusive. So if you are able to please jump into our translate model academy course we're excited with helping us translate our courses and our webinars in other languages. And of course, please help spread the word about model academy by telling your colleagues and your... about our courses and the events that we run. When you complete a course, you will earn a badge. And thank you very much for joining us today. I hope you found today's session useful. Thank you to our presenters. On model academy course forums and in our upcoming webinars. We try to have a webinar every month. So please check out the model academy website. And if you have any further questions, you can write them on the discussion forum in the affiliated course for the model community members to answer.