14. Appendices

14.1. Installation of Node.js

[Node.js] is downloaded onto nodejs.org: select version LTS (long-term support), version 24 at the time of writing. The [Windows] installer also installs [npm]. [Node.js] is required for both the [Ionic] projects ([Angular CLI] 22 requires version 22.22 or later) and the JSON server. Verify the installation in a console:

node --version
npm --version

If another project requires an older version of [Node.js], a version manager allows you to install multiple versions and switch between them: [nvm-windows] under [Windows], [nvm] under [Linux] and [macOS] ([nvm install 24], then [nvm use 24]).

Under [Windows], [PowerShell] may refuse to run the commands [npm] and [npx] (“script execution is disabled on this system”): The [Set-ExecutionPolicy -Scope CurrentUser RemoteSigned] command enables it for the current user.

14.2. Installing Android Studio and an emulator

[Android Studio] can be downloaded from developer.android.com/studio. It is not used to write code, but to install SDK and [Android], provide a JDK, and create an emulator (details are in the chapter “Setting Up the Development Environment”):

• Upon first launch, the wizard installs SDK and [Android];
• "More Actions" menu / "SDK Manager," "SDK Tools" tab: check "Android SDK Platform-Tools" ([adb]), "Android Emulator," and "Android SDK Command-line Tools";
• create the environment variables [ANDROID_HOME] (the SDK folder) and [JAVA_HOME] (the [jbr] subfolder of [Android Studio]), which [Capacitor] needs to build the application;
• "More Actions" menu / "Virtual Device Manager": Create a virtual phone (for example, a "Pixel") using a recent system image. Click the ▶ button to launch it; [adb devices] will then detect it under the name [emulator-5554]. You can also launch it without opening [Android Studio]: [npx cap run android] lists the emulators you’ve created—even if they’re stopped—and starts the one you select; or, from the command line, the program [emulator] from SDK: [emulator -list-avds] lists the names of the emulators, and [emulator -avd <name>] launches one (under [Windows]: [%ANDROID_HOME%\emulator\emulator.exe]).

For a real phone: In Settings / About Phone, tapping “Build Number” seven times brings up “Developer Options,” where you can enable “USB Debugging.” When connected to the computer, the phone asks you to authorize the computer; [adb devices] then detects it.

The [Android] project created by [Capacitor] (the [android/] folder) opens in [Android Studio] via [npx cap open android]. Among other things, it contains the [Logcat] window (application and system messages, including those from the [Capacitor] plug-ins), and the [Run] button, which does the same thing as [npx cap run android].

14.3. Installing Visual Studio Code

[Visual Studio Code] downloads from code.visualstudio.com. Support for [TypeScript] and [JavaScript] is built into it. In the Extensions panel (Ctrl+Shift+X), install:

• the [Angular Language Service] extension (from the [Angular] team): autocompletion and validation in templates ([HTML]—class properties and methods, component inputs, and component attributes from [Ionic]), navigation from a template to its class code (F12), and the display of template compilation errors as you type;
• the [Ionic] extension (from the [Ionic] team): a panel that launches the application in the browser or on a [Android] device, manages the plugins for [Capacitor], and notifies users of updates to the [Ionic] and [Capacitor] packages;
• optionally, the [Prettier] extension, which formats the code upon saving according to the rules specified in the [.prettierrc] file for the projects.

Open a project via the File / Open Folder menu (the [examples_ionic] folder, for example), and open a console via the Terminal / New Terminal menu; that’s where you type [npm install], [npm start], [npx ng build], [npx cap run android]... The [.vscode/launch.json] file in the projects also allows you to launch the application via F5: [VS Code] then executes [npm start], opens [Chrome] in the application, and you can set breakpoints directly in the [TypeScript] code within the editor.

14.4. Chrome Development Tools

The developer tools for [Chrome] are to a [Ionic] application what [Flutter DevTools] is to a [Flutter] application. You can open them using F12 (or Ctrl+Shift+I). Their most useful tabs are:

• the device emulation bar (Ctrl-Shift-M): the application scaled to the size of a phone (a model from the list, or specified dimensions), with touch events. This is how you develop the application before switching to [Android];
• “Elements”: the page’s element tree, and, for each element, its styles (which can be edited in real time). The arrow icon in the top-left corner lets you click on a page element to locate it in the tree. There you can see the tags [<ion-...>] and, inside each one, its “shadow DOM”: the elements HTML that make it up. This tool answers the question, “Why isn’t this element in its proper place?”;
• “Console”: the application’s messages ([console.log()]) and errors, along with the file and line ([TypeScript]) where they originated;
• “Sources”: the application code ([TypeScript]) (using the “source maps” from the configuration [development]), where breakpoints are set;
• “Network”: the application’s requests (HTTP), along with their headers and bodies: here you can see the token cookie being sent and received (in the browser);
• “Application”: the page’s storage ([localStorage], where the [@capacitor/preferences] extension stores its values in a browser) and its cookies.

The [Angular DevTools] extension (to be installed from [Chrome Web Store]) adds an “Angular” tab: the [Angular] component tree for the screen, and, for each component, its inputs, signals, and properties, which can be modified in real time; its “Profiler” tab shows what [Angular] updated—and how long it took—after each event.

The same tools can debug the application installed on the emulator or on the phone. In the [Chrome] on the computer, open the address [chrome://inspect]: the page lists the devices connected via [adb], and, for each one, the WebView of the currently running applications that are allowed to be debugged (this applies to [Capacitor] applications built in “debug” mode, such as [npx cap run android]). The “Inspect” link opens a development tools window, linked to the application’s WebView, with the phone’s screen displayed on the left: here you’ll find the “Elements,” “Console,” “Sources,” “Network,” and other tabs... Since the requests made by [CapacitorHttp] go through the native code of [Android], not all of them appear in the “Network” tab: the [Logcat] window of [Android Studio] displays them.

14.5. Installing MySQL with Laragon

The JSON server requires [MySQL] (or [MariaDB]). [Laragon] (laragon.org) installs one under [Windows], ready to use, with the [HeidiSQL] administration tool. After installation:

• the “Start All” button launches the [MySQL] server on port 3306;
• the user [root] has no password: these are the default values from the server’s [.env.example] file;
• In [HeidiSQL] (the "Database" button), the File / Run SQL menu item runs the [database/dbrdvmedecins2.sql] script.

In [Linux] or [macOS], install [MySQL] or [MariaDB] using the system’s package manager, and run the script using the command-line client: [mysql -u root -p < database/dbrdvmedecins2.sql].

14.6. Installing curl

[curl] is included with [Windows] versions 10 and 11, [macOS], and most distributions of [Linux]. Check its version:

curl --version

The option [--json], used in this document, has been available since version 7.82 (2022). If you are using an older version, replace [--json @file] with [-H "Content-Type: application/json" -d @file], or install a recent version starting with curl.se.

In [PowerShell], you must enter [curl.exe], not [curl]: In [PowerShell], [curl] is an alias for another command ([Invoke-WebRequest]), which does not include the options from [curl]. The command prompt ([cmd]) does not have this issue.