Getting Started

Car Rental App

Search…

Introduction

Getting Started

Getting Started

System Requirements
NodeJS
Make sure you have a recent version (8.11 or later) of Node installed globally.
React Native Developer Tools
Ensure that react-native CLI 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. 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 : 
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, 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 →.
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:
1
$ git clone https://gitstrap.com/CarRental/RNCarRentalApp.git
2
$ cd RNCarRentalApp
3
$ yarn (preferred)
4
or
5
$ npm install
Copied!
Environment variables
Create a .env file on your workspace :
1
$ cp .env.example .env
Copied!
Update environment variables:
1
KEYCLOAK_DOMAIN = 'http://localhost:8080/auth/realms/expense_realm/protocol/openid-connect/auth'
2
KEYCLOAK_CLIENT_ID = 'expense-app-auth'
3
​
4
OKTA_DOMAIN = 'https://dev-xxxxx.oktapreview.com/oauth2/aush00epjjXP6xG7l0h2/v1/authorize'
5
OKTA_CLIENT_ID = '9oat23szjfDdfCObL0h9'
6
​
7
AUTH0_DOMAIN = 'https://afadil.eu.auth0.com/authorize'
8
AUTH0_CLIENT_ID = 'z9aRpbCcNpV8bS1wG1a7BERHJTK'
9
​
10
API_URL = 'http://localhost:3004'
11
API_REQUEST_TIMEOUT = 3000
Copied!
Launching the application
Launch on iOS
In your terminal, run the following command to launch the app in an IOS Emulator:
1
$ yarn ios
2
or
3
$ npm run ios
Copied!
OR:
Run the following command to launch the app and Scan the QR code in your Expo app:
1
$ yarn start
2
or
3
$ npm run start
Copied!
​
Launch on Android
 You must open the Android emulator manually or connect your device to USB debug mode.
In your terminal, run
1
$ yarn android
2
or
3
$ npm run android
Copied!
OR:
In your terminal, run the following and then Scan the QR code in your Expo app:
1
$ yarn start
2
or
3
$ npm run start
Copied!
​
Launch the Mock server of the fake backend API
The default config use 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:
1
// This sets the mock adapter on the default instance. comment this block if you are using a backend api (yarn server)
2
var mock = new MockAdapter(axios, { delayResponse: 10 });
3
mock.onGet('/auth').reply(200, authData);
4
mock.onPost('/auth').reply(200);
5
mock.onPost('/logout').reply(200);
6
mock.onGet('/password').reply(200);
7
mock.onGet('/cars').reply(200, carsData);
8
mock.onGet('/rides').reply(200, ridesData);
9
mock.onGet('/payments-methods').reply(200, paymentMethods);
10
mock.onDelete(/\/rides\/\d+/).reply(function(config) {
11
  console.log(config);
12
  return [200, {}];
13
});
14
mock.onDelete(/\/payments-methods\/\d+/).reply(function(config) {
15
  console.log(config);
16
  return [200, {}];
17
});
18
mock.onPost('/cars/booking').reply(function(config) {
19
  console.log(config);
20
  return [200, {}];
21
});
22
// end mock api call
Copied!
2. Launch the API server
1
$ yarn server
2
or
3
$ npm run server
Copied!
3. Launch the App