# Getting Started

## System Requirements

**NodeJS**

* Make sure you have a recent version (8.11 or later) of [Node](https://nodejs.org/en/) installed globally.

**React Native Developer Tools**

* Ensure that [react-native CLI](https://facebook.github.io/react-native/docs/getting-started.html) development tools and their prerequisites are installed globally.

  The instructions are a bit different depending on your operating system (MacOS, Windows, Linux) and the target development environment (Android, OS).

  You must follow the guide in the tab labeled [Building Projects with Native Code](https://facebook.github.io/react-native/docs/getting-started.html). The basic tutorial explaining the main principles of React Native is also very useful for a first start of React Native.

**Expo**

* Globally installed [Expo](https://expo.io/) : 
  * Run `npm install -g expo` in your terminal to install expo
  * Run `npm install -g expo-cli` in your terminal to install expo CLI

     

#### Authentication provider setup 

If you are  planning to user OIDC authentication with providers like Google, [Keycloak](https://www.keycloak.org), Okta or OAuth0, You have to create an account and setup Authentication Realm/Client. For more details, you can read [**this instructions on the Guide Section →**](https://appcraftman.gitbook.io/myexpenseapp/guide).

You can also read the official documentation for each service here

* [KeyCloak](https://www.keycloak.org/docs/latest/getting_started/index.html#_install-boot)
* [Okta](https://developer.okta.com/authentication-guide/implementing-authentication/set-up-authz-server)
* [OAuth0](https://auth0.com/docs/applications)

## Checkout and Installation

Once the React Native prerequisites are installed on your environment, you can retrieve the application code from the Git repository and install the necessary dependencies.

In the command prompt, run the following commands:

```bash
$ git clone https://gitstrap.com/ExpenseApp/RNExpenseApp.git
$ cd RNExpenseApp
$ yarn (preferred)
or
$ npm install
```

#### Environment variables

Create a `.env` file on your workspace :

```bash
$ cp .env.example .env
```

Update environment variables:

```bash
KEYCLOAK_DOMAIN = 'http://localhosst:8080/auth/realms/expense_realm/protocol/openid-connect/auth'
KEYCLOAK_CLIENT_ID = 'expense-app-auth'

GOOGLE_DOMAIN = 'https://accounts.google.com/o/oauth2/v2/auth'
GOOGLE_CLIENT_ID = '119616851111-jkt51m57u5lc6gfnr2k32omt6pgu7nhi.apps.googleusercontent.com'

OKTA_DOMAIN = 'https://dev-xxxxx.oktapreview.com/oauth2/aush00epjjXP6xG7l0h2/v1/authorize'
OKTA_CLIENT_ID = '9oat23szjsqzefCObL0h9'

AUTH0_DOMAIN = 'https://myproject.eu.auth0.com/authorize'
AUTH0_CLIENT_ID = 'z9aRpbCDESssd1wG1a7BERHJTK'

API_URL = 'http://localhost:3004'
API_REQUEST_TIMEOUT = 3000

```

## Launching the application

### Launch on iOS

* In your terminal, run the following command to launch the app in an IOS Emulator:

```bash
$ yarn ios
or
$ npm run ios
```

OR:

* Run the following command to launch the app and Scan the QR code in your Expo app:

```bash
$ yarn start
or
$ npm run start
```

####

### Launch on Android

{% hint style="warning" %}
 You must open the Android emulator manually or connect your device to USB debug mode.
{% endhint %}

* In your terminal, run

```bash
$ yarn android
or
$ npm run android
```

OR:

* In your terminal, run the following and then Scan the QR code in your Expo app:

```bash
$ yarn start
or
$ npm run start
```

### Launch the Mock server of the fake backend API

The default config use [axios-mock-adapter](https://github.com/ctimmerm/axios-mock-adapter) to mock API call. To use the provided API example, follow this steps:

**1.Remove the mock code**

Open the this file `src/utils/api.js` and comment this Mock code block:

```javascript
// This sets the mock adapter on the default instance. comment this block if you are using a backend api (yarn server)
var mock = new MockAdapter(axios, { delayResponse: 10 });
mock.onGet('/auth').reply(200, authData);
mock.onPost('/auth').reply(200);
mock.onPost('/logout').reply(200);
mock.onGet('/password').reply(200);
mock.onGet('/expenses').reply(200, expensesData);
mock.onGet('/expenses?q=data&&_page=1&_limit=15').reply(200, expensesData);
mock.onGet('/expenses/export').reply(200, expensesData);
mock.onGet('/categories').reply(200, categoriesData);
mock.onPost('/expenses').reply(200);
mock.onPost('/categories').reply(function(config) {
  console.log(config);
  return [200, {}];
});
mock.onDelete(/\/expenses\/\d+/).reply(function(config) {
  console.log(config);
  return [200, {}];
});
// *** end mock api call ***
```

**2. Launch the API server**

```bash
$ yarn server
or
$ npm run server
```

**3. Launch the App**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://appcraftman.gitbook.io/myexpenseapp/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.