Merge pull request #1511 from dpalou/MDL-72048

[docs] Document file locations for Moodle app code in plugins

Author: crazyserver

general/app/development/plugins-development-guide/examples/course-formats.md

@@ -32,7 +32,7 @@ class mobile {
 
         $course = get_course($args['courseid']);
         require_login($course);
-        $html = $OUTPUT->render_from_template('format_myformat/mobile_course', []);
+        $html = $OUTPUT->render_from_template('format_myformat/mobileapp/mobile_course', []);
 
         return [
             'templates' => [
@@ -50,7 +50,7 @@ class mobile {
 }
 ```
 
-```html handlebars title="templates/mobile_course.mustache"
+```html handlebars title="templates/mobileapp/mobile_course.mustache"
 {{=<% %>=}}
 <core-dynamic-component [component]="coreCourseFormatComponent.allSectionsComponent" [data]="data" class="format-myformat">
     @for (section of sections; track section.id) {

general/app/development/plugins-development-guide/examples/course-modules.md

@@ -111,7 +111,7 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('mod_certificate/mobile_view_page', $data),
+                    'html' => $OUTPUT->render_from_template('mod_certificate/mobileapp/mobile_view_page', $data),
                 ],
             ],
             'files' => $issues,
@@ -125,7 +125,7 @@ In the first part of the function, we check permissions and capabilities (like a
 
 We also return a list of files to prefetch for offline use.
 
-Finally, let's implement the mustache template in `templates/mobile_view_page.mustache`:
+Finally, let's implement the mustache template in `templates/mobileapp/mobile_view_page.mustache`:
 
 ```html handlebars
 {{=<% %>=}}
@@ -228,14 +228,14 @@ public static function mobile_issues_view($args) {
         'templates' => [
             [
                 'id' => 'main',
-                'html' => $OUTPUT->render_from_template('mod_certificate/mobile_view_issues', $data),
+                'html' => $OUTPUT->render_from_template('mod_certificate/mobileapp/mobile_view_issues', $data),
             ],
         ],
     ];
 }
 ```
 
-```html handlebars title="templates/mobile_view_issues.mustache"
+```html handlebars title="templates/mobileapp/mobile_view_issues.mustache"
 {{=<% %>=}}
 <div>
     <ion-list>

general/app/development/plugins-development-guide/examples/forms.md

@@ -18,7 +18,7 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('local_hello/form', []),
+                    'html' => $OUTPUT->render_from_template('local_hello/mobileapp/form', []),
                 ],
             ],
             'otherdata' => [

general/app/development/plugins-development-guide/examples/groups-selector.md

@@ -39,7 +39,7 @@ return [
     'templates' => [
         [
             'id' => 'main',
-            'html' => $OUTPUT->render_from_template('local_sample/groups', []),
+            'html' => $OUTPUT->render_from_template('local_sample/mobileapp/groups', []),
         ],
     ],
     'otherdata' => [
@@ -83,7 +83,7 @@ return [
     'templates' => [
         [
             'id' => 'main',
-            'html' => $OUTPUT->render_from_template('local_sample/groups', [
+            'html' => $OUTPUT->render_from_template('local_sample/mobileapp/groups', [
                 'groups' => $groups,
                 'selectedgroup' => $groups[$selectedgroup],
             ]),

general/app/development/plugins-development-guide/examples/question-types.md

@@ -40,7 +40,7 @@ class mobile {
     public static function mobile_get_YOURQTYPENAME() {
         global $OUTPUT, $CFG;
 
-        $html = $OUTPUT->render_from_template('qtype_YOURQTYPENAME/mobile', []);
+        $html = $OUTPUT->render_from_template('qtype_YOURQTYPENAME/mobileapp/mobile', []);
 
         return [
             'templates' => [
@@ -49,14 +49,14 @@ class mobile {
                     'html' => $html,
                 ],
             ],
-            'javascript' => file_get_contents($CFG->dirroot . '/question/type/YOURQTYPENAME/mobile/mobile.js'),
+            'javascript' => file_get_contents($CFG->dirroot . '/question/type/YOURQTYPENAME/js/mobileapp/mobile.js'),
         ];
     }
 
 }
 ```
 
-```html handlebars title="templates/mobile.mustache"
+```html handlebars title="templates/mobileapp/mobile.mustache"
 <section class="list qtype-YOURQTYPENAME-container qtype-YOURQTYPENAME" ion-list *ngIf="question.text || question.text === ''">
     <ion-item class="addon-qtype-YOURQTYPENAME-container qtext">
         <ion-label>
@@ -71,7 +71,7 @@ class mobile {
 </section>
 ```
 
-```js title="mobile/mobile.js"
+```js title="js/mobileapp/mobile.js"
 const that = this;
 const result = {
     componentInit() {

general/app/development/plugins-development-guide/index.md

@@ -111,6 +111,21 @@ As we have seen in the first example, the extension mechanism used in the app is
 
 Now you should have a basic idea of how Site Plugins work in the app. If you want to continue learning, you can keep reading this guide. When you are ready, you can check out the [Examples](./examples/index.md) page for some step-by-step guides of common scenarios; or you can directly check out the [API Reference](./api-reference.md) for a comprehensive list of all the APIs and options available in Site Plugins.
 
+## Files location
+
+To ensure your plugin code is organized and passes the specific linting required for the Moodle App, you should place your files in the following directories within your plugin:
+
+| File / Folder               | Purpose                                                                                |
+|-----------------------------|----------------------------------------------------------------------------------------|
+| `db/mobile.php`             | Configuration file to register the mobile support and define the app areas to extend.  |
+| `classes/output/mobile.php` | The main PHP class containing the logic for the mobile implementation.                 |
+| `js/mobileapp/`             | This folder should contain all the JavaScript files intended for the mobile app.       |
+| `templates/mobileapp/`      | This folder should contain all the Mustache templates intended for the mobile app.     |
+
+:::note Notice
+Currently, the linting for mobile app templates is disabled to avoid throwing warnings with Angular, Ionic or Moodle app custom directives. This will be improved in the future.
+:::
+
 ## Rendering UI
 
 Most handlers will render some custom UI using the `method` property in their configuration. They will return some templates in the [content response](./api-reference.md#content-responses), and the templates will be treated differently depending on the handler.
@@ -125,7 +140,7 @@ public static function mobile_course_view($args) {
         'templates' => [
             [
                 'id' => 'main',
-                'html' => $OUTPUT->render_from_template('local_hello/greeting', ['name' => 'John']),
+                'html' => $OUTPUT->render_from_template('local_hello/mobileapp/greeting', ['name' => 'John']),
             ],
         ],
         'otherdata' => [
@@ -135,7 +150,7 @@ public static function mobile_course_view($args) {
 }
 ```
 
-```html handlebars title="template in templates/greeting.mustache"
+```html handlebars title="template in templates/mobileapp/greeting.mustache"
 {{=<% %>=}}
 <!-- This will render "Hello, John Doe" in the app -->
 <h1 class="text-center">Hello, <% name %> {{ CONTENT_OTHERDATA.surname }}</h1>