# Getting started with Ryden codebase ###### tags: `On Boarding` <br /> ## Linux Build Instructions ### 1. Install Nodejs: - Install: $ sudo apt install nodejs - Verify that the Node.js and npm were successfully installed by printing their versions: (node >=8 should be fine) $ node --version $ npm --version - Note: If you want a different version of Node, you can install `n` by the following command: $ npm install -g n and then use $ n <new-node-version> to switch to the version you want. ### 2. Install Inonic Globally: Install Ionic by running foloowing command: $ npm install -g @ionic/cli ### 3. Clone Repository: $ git clone https://github.com/ryden-team/ryden.git ### 4. Install App Dependencies Install dependencies by running following command in the Ryden root directory: $ npm install ### 5. Run App In Browser Start Ionic App: $ ionic serve By now, you should have a local interface pop up in your default browser. <br /> ## Testing on iOS and Android device ### 1. Capacitor Setup: Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova). If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports: $ ionic build Next, create both the iOS and Android projects: $ ionic cap add ios $ ionic cap add android Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.). Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `build`), you'll need to copy those changes into your native projects: $ ionic cap copy Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command: $ ionic cap sync ### 2. iOS: > **NOTE:** To build an iOS app, you’ll need a Mac computer. Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://guides.cocoapods.org/using/getting-started.html#installation). Before running this app on an iOS device, there's a couple of steps to complete. First, run the Capacitor `open` command, which opens the native iOS project in Xcode: $ ionic cap open ios Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. ![](https://i.imgur.com/vShTSG5.png) With Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (App -> Matthew’s iPhone for me) then click the "Build" button to build, install: ![](https://i.imgur.com/CI2wRg1.png) now the app will be launched on your device. ### 3. Android: Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete. #### Android Studio: Android Studio is the IDE for creating native Android apps. It includes the Android SDK, which will need to be configured for use in the command line. Android Studio is also used to create Android virtual devices, which are required for the Android emulator. Ionic apps can also be launched to a device. > **NOTE:** We don't recommend using Android Studio for developing Ionic apps. Instead, it should only really be used to build and run your apps for the native Android platform and to manage the Android SDK and virtual devices. <hr/> #### Installing Android Studio: Download [Android Studio](https://developer.android.com/studio/) from the Android website. More detailed installation instructions can be found in the [User Guide](https://developer.android.com/studio/install). <hr/> #### Installing the Android SDK: Once installed, open Android Studio. The IDE should detect that the Android SDK needs to be installed. In the **SDK Components Setup** screen, finish installing the SDK. Keep note of the **Android SDK Location**. ![](https://i.imgur.com/hRzHqeN.png) By default, the latest stable SDK Platform is installed, which includes a collection of packages required to target that version of Android. To install system images and other minor SDK platform packages, you may need to ensure **Show Package Details** is checked at the bottom of the SDK Manager. ![](https://i.imgur.com/ieSirMd.png) For future reference, the Android SDK can be managed with Android Studio in the **Configure » SDK Manager** menu of the Android Studio welcome screen or **Tools » SDK Manager** inside Android projects. <hr/> #### Configuring Command Line Tools: The Android SDK ships with useful command-line tools. Before they can be used, some environment variables must be set. The following instructions are for macOS and Linux. For Windows, check the documentation on setting and persisting environment variables in terminal sessions. In `~/.bashrc`, `~/.bash_profile`, or similar shell startup scripts, make the following modifications: 1. Set the ANDROID_SDK_ROOT environment variable. This path should be the Android SDK Location used in the previous section. ``` $ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk ``` 2. Add the Android SDK command-line directories to PATH. Each directory corresponds to the category of command-line tool. ``` # avdmanager, sdkmanager $ export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin # adb, logcat $ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools # emulator $ export PATH=$PATH:$ANDROID_SDK_ROOT/emulator ``` > **NOTE:** For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools` must also be added to `PATH`. <hr/> #### Creating an Android Virtual Device: Android Virtual Devices (AVDs) are blueprints that the Android emulator uses to run the Android OS. The following documentation is a quick way to get the Android emulator set up. For more detailed instructions and information, see the [Android documentation](https://developer.android.com/studio/run/managing-avds). AVDs are managed with the AVD Manager. In the Android Studio welcome screen, click **Configure » AVD Manager**. The AVD Manager can also be opened inside Android projects in the **Tools » AVD Manager** menu. ![](https://i.imgur.com/AD1QuPR.png) Click **Create Virtual Device** and select a suitable device definition. If unsure, choose **Pixel 2**. Then, select a suitable system image. If unsure, choose **Pie** (API 28) with Google Play services. See [Android version history](https://en.wikipedia.org/wiki/Android_version_history) for information on Android versions. Once the AVD is created, launch the AVD into the Android emulator. Keeping the emulator running is the best way to ensure detection while developing Ionic apps for Android. ![](https://i.imgur.com/Q5B1q54.png) <hr/> #### Set up an Android Device: Actual Android hardware can also be used for Ionic app development. But first, the device must be set up for development. The following documentation is a quick way to set up Android devices for development. For more detailed instructions and information, see the [Android documentation](https://developer.android.com/studio/run/device). 1. Enable USB debugging on the device. Open **Settings**, navigate to **Developer options**, and enable **USB debugging**. The **Developer options** menu may need to be enabled first. See [the Android documentation](https://developer.android.com/studio/debug/dev-options) for instructions. 2. Ensure the device has permission to connect to the computer. For macOS, no additional setup is required. For Windows, install the [OEM USB drivers](https://developer.android.com/studio/run/oem-usb). Verify the connection works by connecting the device to the computer with a USB cable and using the following command: ``` $ adb devices ``` The device should be listed. See the full adb [documentation](https://developer.android.com/studio/command-line/adb) for troubleshooting and detailed information. <hr/> #### Cordova Setup: Additional setup is required for Cordova to support programmatic builds. This section is not necessary for Capacitor. ##### Java Native Android apps are compiled with the [Java](https://java.com/en/) programming language. Download JDK8 from the [download page](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). > **NOTE:** Unfortunately, Cordova is not compatible with the latest version of Java. ##### Gradle [Gradle](https://gradle.org/) is the build tool used in Android apps and must be installed separately. See the [install page](https://gradle.org/install/) for details. <hr/> #### Finally: First, run the Capacitor `open` command, which opens the native Android project in Android Studio: $ ionic cap open android we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install: ![](https://i.imgur.com/cd2SZUv.png) now the app will be launched on your device.