Introduction

Item Name : Customer Loyalty Stamps and Rewards System. (React Native)
Item Version : 1.0
Author : V1 Technologies
License : Single License

First of all, Thank you so much for purchasing this product and for chosing V1 Technologies. You are awesome!
Please note that we do our best to privide you advice and exceptional support from V1 Technologies, however you are downloading the Codes Only and Paid Support is not included in the price.

This document is based on the version mentioned. If you are running a different version, please use the appropriate commands. (Google is always helpful in finding the latest commands)

This documentation will help you at installation of the product easily and quickly . Please go through the documentation carefully to understand how to set up the code and get everything running smoothly. We have tried our best to document each and every steps for any beginners or with intermediate expertise to get the app up and running.

Requirements

You will need the following sofwares to customize this template.

Code Editing Software (eg: Visual Studio Code , Sublime Text or Notepad Plus)
Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
FTP Tool to upload files to Server (eg: FileZilla)
To deploy to iOS you need Mac Machine with X-Code installed.
To publish the app on Apple App Store you need an active Apple Developer Account.
To publish the app on Google Play Store you need an active Google Play Developer / Publisher Account.

Though we have made every attempt to document all steps to get you going, we assume you to have some basic knowlege of Mobile programing or Web to get this up and running. Please note that this app was built using React Native.

If you still need any support from us, we offer full installation services from as low as £299. Please email us on v1technologiesuk@gmail.com if you need paid support.

Demo Walkthrough

iOS App Demo

The iOS App can be downloaded from here: iOs App for Customer Loyalty and Rewards

Android App Demo

The Android App can be downloaded from here: Android App for Customer Loyalty and Rewards

Backend Admin Demo

The backend admin control panel can be viewed here https://loyalty.v1tl.com/admin/
Username: admin@demo.com
Password: Demo123@

App Login Details

For demo purposes you can use these accounts to login:
User Account:user@demo.com Password: Demo1234@

Getting Started

Pre-requesties for setting up backend server

How To Install Linux, Nginx, MongoDB, PHP (LEMP stack) on Ubuntu 18.04

Introduction

The LEMP software stack is a group of software that can be used to serve dynamic web pages and web applications. This is an acronym that describes a Linux operating system, with an Nginx (Pronounced like “Engine-X”) web server. The backend data is stored in the MongoDB database and the dynamic processing is handled by PHP.

This guide demonstrates how to install a LEMP stack on an Ubuntu 18.04 server. The Ubuntu operating system takes care of the first requirement. We will describe how to get the restof the components up and running.

Prerequisites

Before you complete this tutorial, you should have a regular, non-root user account on your server with sudo privileges. Set up this account by completing our initial server setup guide for Ubuntu 18.04.

Once you have your user available, you are ready to begin the steps outlined in this guide.

Step 1 - Installing the Nginx Web Server

In order to display web pages to our site visitors, we are going to employ Nginx, a modern, efficient web server.

All of the software used in this procedure will come from Ubuntus default package repositories. This means we can use the apt package management suite to complete the necessary installations.

Since this is our first time using apt for this session, start off by updating your servers package index. Following that, install the server:

                                                $ ssh root@ip
                                                $ sudo apt update
                                                $ sudo apt install nginx

On Ubuntu 18.04, Nginx is configured to start running upon installation.

If you have the ufw firewall running, as outlined in the initial setup guide, you will need to allow connections to Nginx. Nginx registers itself with ufw upon installation, so the procedure is rather straightforward.

It is recommended that you enable the most restrictive profile that will still allow the traffic you want. Since you havent configured SSL for your server in this guide, you will only need to allow traffic on port 80.

Enable this by typing:

                                $ sudo ufw enable
                                $ sudo ufw allow 'Nginx HTTP'
                                $ sudo ufw allow ssh
                                $ sudo ufw allow http
                                $ sudo ufw allow https

You can verify the change by running:

$ sudo ufw status

This commands output will show that HTTP traffic is allowed:

									Output
									status: active

										To                    Action            From
										--                    ------            ------
										openSSH               ALLOW             Anywhere
										Nginx HTTP            ALLOW             Anywhere
										OpenSSH (v6)          ALLOW             Anywhere (v6)
                                        Nginx HTTP (v6)       ALLOW             Anywhere (v6)

With the new firewall rule added, you can test if the server is up and running by accessing your servers domain name or public IP address in your web browser.

If you do not have a domain name pointed at your server and you do not know your servers public IP address, you can find it by running the following command:

$ ip addr show eth0 | grep inet | awk '{ print $2; }' | sed 's/\/.*$//'

This will print out a few IP addresses. You can try each of them in turn in your web browser.

As an alternative, you can check which IP address is accessible, as viewed from other locations on the internet:

$ curl -4 icanhazip.com

Type the address that you receive in your web browser and it will take you to Nginxs default landing page:

http://server_domain_or_IP

If you see the above page, you have successfully installed Nginx.

Step 2 – Installing MongoDB to Manage Site Data

Now that you have a web server, you need to install MongoDB (a database management system) to store and manage the data for your site.

Install MongoDB running the following commands:

$ sudo rm /etc/apt/sources.list.d/mongodb-org-*.list

$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list

$ wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -

$ sudo apt update

$ sudo apt install -y mongodb-org

$ sudo systemctl start mongod

$ sudo systemctl enable mongod

Once you run the above commands, run the following command to check if MongoDB was installed.

$ mongod --version

At this point, your database system is now set up and you can move on to installing PHP.

Step 3 – Installing PHP and Configuring Nginx to Use the PHP Processor

You now have Nginx installed to serve your pages and MongoDB installed to store and manage your data. However, you still dont have anything that can generate dynamic content. This is where PHP comes into play.

Since Nginx does not contain native PHP processing like some other web servers, you will need to install php-fpm, which stands for “fastCGI process manager”. We will tell Nginx to pass PHP requests to this software for processing.

Note: Depending on your cloud provider, you may need to add Ubuntu universe repository, which includes free and open-source software maintained by the Ubuntu community, before installing the php-fpm package. You can do this by typing:

$ sudo add-apt-repository universe

Install the php-fpm module along with an additional helper package which will allow PHP to communicate with your database backend. The installation will pull in the necessary PHP core files. Do this by typing:

$ sudo apt install php-fpm

You now have all of the required LEMP stack components installed, but you still need to make a few configuration changes in order to tell Nginx to use the PHP processor for dynamic content.

This is done on the server block level (server blocks are similar to Apache virtual hosts). To do this, open a new server block configuration file within the /etc/nginx/sites-available/ directory. In this example, the new server block configuration file is named example.com, which you need to replace with your domain name of your choice.

$ sudo nano /etc/nginx/sites-available/example.com

By editing a new server block configuration file, rather than editing the default one, you will be able to easily restore the default configuration if you ever need to.

Add the following content, which was taken and slightly modified from the default server block configuration file, to your new server block configuration file:

							server {
									listen 80;
									root /var/www/html/public;
									index index.php index.html index.htm index.nginx-debian.html;
									server_name example.com www.example.com;
									location / {
										try_files $uri $uri/ /index.php?$query_string;
								}
								location ~ \.php$ {
											include snippets/fastcgi-php.conf;
											fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
								}
								location ~ /\.ht {
											deny all;
								}
                            }

Please use the correct PHP Version number above based on your operating system on teh server. For example for Ubuntu 20.04 PHP version should be 7.4 instead of 7.2 in the file above.

Here is what each of these directives and location blocks do:

listen — Defines what port Nginx will listen on. In this case, it will listen on port 80, the default port for HTTP.

root — Defines the document root where the files served by the website are stored.

index — Configures Nginx to prioritize serving files named index.php when an index file is requested, if they are available.

server_name — Defines which server block should be used for a given request to your server. Point this directive to your server domain name or public IP address.

location / — The first location block includes a try_files directive, which checks for the existence of files matching a URI request. If Nginx cannot find the appropriate file, it will return a 404 error.

location ~ \.php$ — This location block handles the actual PHP processing by pointing Nginx to the fastcgi-php.conf configuration file and the php7.2-fpm.sock file, which declares what socket is associated with php-fpm.

location ~ /\.ht— The last location block deals with .htaccess files, which Nginx does not process. By adding the deny all directive, if any .htaccess files happen to find their way into the document root they will not be served to visitors.

After adding this content, save and close the file. Enable your new server block by creating a symbolic link from your new server block configuration file (in the /etc/nginx/sites-available/ directory) to the /etc/nginx/sites-enabled/ directory:

$ sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

Then, unlink the default configuration file from the /sites-enabled/ directory:

$ sudo unlink /etc/nginx/sites-enabled/default

Note: If you ever need to restore the default configuration, you can do so by recreating the symbolic link, like this:

$ sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/

Test your new configuration file for syntax errors by typing:

$ sudo nginx -t

If any errors are reported, go back and recheck your file before continuing.

When you are ready, reload Nginx to make the necessary changes:

$ sudo systemctl reload nginx

This concludes the installation and configuration of your LEMP stack. However, it is prudent to confirm that all of the components can communicate with one another.

Step 4 – Creating a PHP File to Test Configuration

Your LEMP stack should now be completely set up. You can test it to validate that Nginx can correctly hand .php files off to the PHP processor.

To do this, use your text editor to create a test PHP file called info.php in your document root:

$ sudo nano /var/www/html/info.php

Enter the following lines into the new file. This is valid PHP code that will return information about your server:

                            ?php
                            phpinfo();

When you are finished, save and close the file.

Now, you can visit this page in your web browser by visiting your server domain name or public IP address followed by /info.php:

http://your_server_domain_or_IP/info.php

You should see a web page that has been generated by PHP with information about your server:

If you see a page that looks like this, you have set up PHP processing with Nginx successfully.

After verifying that Nginx renders the page correctly, it is best to remove the file you created as it can actually give unauthorized users some hints about your configuration that may help them try to break in. You can always regenerate this file if you need it later.

For now, remove the file by typing:

$ sudo rm /var/www/html/info.php

With that, you now have a fully-configured and functioning LEMP stack on your Ubuntu 18.04 server.

Conclusion

A LEMP stack is a powerful platform that will allow you to set up and serve nearly any website or application from your server.

There are a number of next steps you could take from here. For example, you should ensure that connections to your server are secured. To this end, you could secure your Nginx installation with Lets Encrypt. By following this guide, you will acquire a free TLS/SSL certificate for your server, allowing it to serve content over HTTPS.

Securing Server

Using Free Lets Encrypt SSL/TLS Certificates with NGINX

It is well known that SSL/TLS encryption of your website leads to higher search rankings and better security for your users. However, there are a number of barriers that have prevented website owners from adopting SSL.

Two of the biggest barriers have been the cost and the manual processes involved in getting a certificate. But now, with Lets Encrypt, they are no longer a concern. Lets Encrypt makes SSL/TLS encryption freely available to everyone.

Lets Encrypt is a free, automated, and open certificate authority (CA). Yes, thats right: SSL/TLS certificates for free. Certificates issued by Lets Encrypt are trusted by most browsers today, including older browsers such as Internet Explorer on Windows XP SP3. In addition, Lets Encrypt fully automates both issuing and renewing of certificates.

In this blog post, we cover how to use the Lets Encrypt client to generate certificates and how to automatically configure NGINX Open Source and NGINX Plus to use them.

How Lets Encrypt Works

Before issuing a certificate, Lets Encrypt validates ownership of your domain. The Lets Encrypt client, running on your host, creates a temporary file (a token) with the required information in it. The Lets Encrypt validation server then makes an HTTP request to retrieve the file and validates the token, which verifies that the DNS record for your domain resolves to the server running the Lets Encrypt client.

Prerequisites

Before starting with Lets Encrypt, you need to:

Have NGINX or NGINX Plus installed.

Own or control the registered domain name for the certificate. If you dont have a registered domain name, you can use a domain name registrar, such as GoDaddy or dnsexit.

reate a DNS record that associates your domain name and your server public IP address.

Now you can easily set up Lets Encrypt with NGINX Open Source or NGINX Plus (for ease of reading, from now on we will refer simply to NGINX).

Note: We tested the procedure outlined in this blog post on Ubuntu 16.04 (Xenial).

Step 1 - Download the Lets Encrypt Client

First, download the Lets Encrypt client, certbot:

                            $ apt-get update

                            //Command for Ubuntu 18.x
                            $ sudo apt-get install certbot
                            $ apt-get install python-certbot-nginx

                            //Command for Ubuntu 20.x
                            $ sudo apt install certbot python3-certbot-nginx

Step 2 - Set Up NGINX

certbot can automatically configure NGINX for SSL/TLS. It looks for and modifies the server block in your NGINX configuration that contains a server_name directive with the domain name you are requesting a certificate for. In our example, the domain is www.example.com.

/etc/nginx/conf.d

domain‑name.conf

www.example.com.conf).

server_name

                             server {
                                listen 80 default_server;
                                listen [::]:80 default_server;
                                root /var/www/html;
                                server_name example.com www.example.com;
                             }

3. Save the file, then run this command to verify the syntax of your configuration and restart NGINX:

$ nginx -t && nginx -s reload

Step 3 - Obtain the SSL/TLS Certificate

The NGINX plug‑in for certbot takes care of reconfiguring NGINX and reloading its configuration whenever necessary.

1. Run the following command to generate certificates with the NGINX plug‑in:

                            $ sudo certbot --nginx -d example.com -d www.example.com

certbot

                            Congratulations! You have successfully enabled https://example.com and https://www.example.com

                            -------------------------------------------------------------------------------------
                            IMPORTANT NOTES:

                            Congratulations! Your certificate and chain have been saved at:
                            /etc/letsencrypt/live/example.com/fullchain.pem
                            Your key file has been saved at:
                            /etc/letsencrypt/live/example.com//privkey.pem
                            Your cert will expire on 2017-12-12.

Note: Lets Encrypt certificates expire after 90 days (on 2017-12-12 in the example). For information about automatically renenwing certificates, see Automatic Renewal of Lets Encrypt Certificates below.

If you look at domain‑name.conf, you see that certbot has modified it:

                            server {
                                listen 80 default_server;
                                listen [::]:80 default_server;
                                root /var/www/html;
                                server_name  example.com www.example.com;

                                listen 443 ssl; # managed by Certbot

                                # RSA certificate
                                ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
                                ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot

                                include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

                                # Redirect non-https traffic to https
                                if ($scheme != "https") {
                                    return 301 https://$host$request_uri;
                                } # managed by Certbot
                            }

Step 4 - Automatically Renew Lets Encrypt Certificates

Lets Encrypt certificates expire after 90 days. We encourage you to renew your certificates automatically. Here we add a cron job to an existing crontab file to do this.

crontab

$ crontab -e

certbot

--quiet

certbot

0 12 * * * /usr/bin/certbot renew --quiet

3. Save and close the file. All installed certificates will be automatically renewed and reloaded.

Summary

We have installed the Lets Encrypt agent to generate SSL/TLS certificates for a registered domain name. We have configured NGINX to use the certificates and set up automatic certificate renewals. With Lets Encrypt certificates for NGINX and NGINX Plus, you can have a simple, secure website up and running within minutes.

Database Walkthrough

View Your Database

Once you setup the MongoDB in your server, you have to setup the database & it's collections. To do that, you have to install MongoDB Compass on your PC/Laptop.

Install MongoDB Compass for your computer from the following link: https://www.mongodb.com/try/download/compass

Once installed, open MongoDB Compass on your system and do the following:
Step-1: Click on "Add new connection". See the image below,

Step-2: A new window will pop up where you will give your connection a name so that you can quickly access your database from MongoDB Compass. Next click on "Advanced Connection Options".

Step-3: Under the "Advanced Connection Options", Select "Proxy/SSH" and then "SSH with Password". In that, enter your hostname (IP Address of your SSH cloud server), SSH Username of your server & Password of your SSH Server. Finally click on "Save & Connect".

Step-4: Create a new database & import the collections from the files that were provided to you. First hover mouse pointer on the saved connection in the left sidemenu in MongoDB Compass and click on connect.

Step-5: After connection is successful. Create a database by clicking on "+" icon at the righthand side of your connection name. While creating new database, you will have to enter database name and a collection name. Finally click on "Create Database". See the images below,

Step-6: Once your database has been created, move mouse cursor on your database name where you will find "+" icon to create a new collection. You have to create new collections where records will be saved.
Please note that, you will have to keep the new collection names same as the database files (in json format) provided to you. Typically the database files are named as the following format "YOUR_DATABASE_NAME.YOUR_COLLECTION_NAME.json" See the image below,

Step-7: Once collection is created, enter into your collection. There, click on "ADD DATA" and select "Import JSON or CSV file" and select the correct collection json file and import the data into your collection. Create all collections and import data into them from the given collection json file.

Step-8: If you have FTP Connection available, connect to FTP and go to the following path /var/www/html and left click on ".env" file and select "View/Edit" option. In ".env" update the following code,

                                DB_CONNECTION=mongodb
                                DB_HOST=127.0.0.1
                                DB_PORT=27017
                                DB_DATABASE=YOUR_DATABASE_NAME
                                DB_USERNAME=YOUR_SERVER_USER_NAME
                                DB_PASSWORD="YOUR_SERVER_PASSWORD"

Steps to Install Admin Panel

1. Login to your FTP using Filezilla or other FTP you have.

2. Based on the kind of hosting, you may need to use SFTP or normal FTP Connection. If you use a cloud server + Filezilla, select SFTP & enter the same SSH credentials which you use to login in the terminal.

3. The website code is built on Laravel which uses PHP as their base framework.

4. Now upload this folder in your ftp public folder. For Cloud hosting it is generally /var/www/html and for shared hosting or cpanel hosting it is public_html ( you can make folder with name like Admin and upload the content of the public-html and not the folder ).

5. Once uploading is finished below are the parameters to change,

1. Open .env

2. Change below items

                            # push notification
                            ONESIGNAL_APP_ID=**********
                            ONESIGNAL_REST_API_KEY='**************************************'

SMTP host address: smtp.yourdomain.com

Gmail SMTP port (TLS): 587

SMTP port (SSL): 465

SMTP username: Your Email address

SMTP password: Your Email password

                        # Email smtp setup
                        MAIL_DRIVER=smtp
                        MAIL_HOST=mail.yourdomain.com
                        MAIL_PORT=587
                        MAIL_USERNAME=noreply@yourdomain.com
                        MAIL_PASSWORD=******
                        MAIL_ENCRYPTION=tls
                        MAIL_FROM_ADDRESS=noreply@yourdomain.com
                        MAIL_FROM_NAME="${APP_NAME}"

                        DB_CONNECTION=mongodb
                        DB_HOST=127.0.0.1
                        DB_PORT=*****
                        DB_DATABASE=Your Database Name
                        DB_USERNAME=Your User Name
                        DB_PASSWORD="Your database Password""

Geocoding API

                        # Goolge Api Key for geocoding (must be billing enabled)
                        GOOGLE_API_KEY=**********

Mailchimp Unique Audience ID and Profile API Key

                        # mailchimp keys
                        MAILCHIMP_API_KEY = "Your-Mailchimp-Profile-API-Key"
                        MAILCHIMP_AUDIENCE_UNIQUE_ID = "Your-Mailchimp-Unique-Audience-Key"
                        MAILCHIMP_URL_PREFIX = "Your-Mailchimp-URL-Prefix-Example us14"

3. Change the database name in config > database.php file line: 41

Some important items before setting up

In case you face problem uploading images please give permission by typing below command

                        cd ~
                        web_folder='/var/www/html/'
                        chown www-data:www-data $web_folder -R; find $web_folder -type f -print0 |xargs -0 chmod 644;

                        find $web_folder -type d -print0 |xargs -0 chmod 755;

                        sudo chown -R root:root  /var/www/html
                        systemctl restart php7.3-fpm.service

                        Edit php.ini

                        sudo nano /etc/php/7.3/fpm/php.ini
                        Please change below items
                        memory_limit = 256M
                        Post_max_size = 200M
                        upload_max_filesize = 100M
                        max_execution_time = 3600

                        Edits in NGINX

                        sudo nano /etc/nginx/nginx.conf
                        (Copy the following line below http parenthesis)

                        client_max_body_size 100M;
                        Restart Nginx
                        sudo service nginx reload

We expect that the Buyer of our product has knowledge of development and frameworks the product is built on. If you do not have appropriate knowledge, you may need help. We offer installation and support for additional fee should you wish to take our help.

Emails:

There are emails that are sent to the users on various instances detailed below. These can be changed by editting the files located in resources/views/admin/mail

User Emails:
Verification Upon Registration
Forgot Password

iOS Development

This guide covers how to run and debug React Native apps on iOS simulators and devices using React Native. iOS apps can only be developed on macOS with Xcode installed.

There are two workflows for running React native apps on iOS:

Running with Xcode

Running with the React Native CLI

The Xcode approach is generally more stable, but the React Native CLI approach offers live-reload functionality.

Xcode Setup

Xcode is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can be downloaded for free with an Apple account or it can be installed through the App Store.

Once Xcode is installed, make sure the command-line tools are selected for use:

$ xcode-select --install

Setting up a Development Team

All iOS apps must be code signed, even for development. Luckily, Xcode makes this easy with automatic code signing. The only prerequisite is an Apple ID.

Open Xcode and navigate to Xcode » Preferences » Accounts. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.

Creating an iOS Simulator

The iOS simulator emulates iOS devices on Macs. The following documentation is a quick way to get the iOS simulator set up. For more information, see Apple's documentation.

Open Xcode and navigate to Window » Devices and Simulators. Create an iPhone 17 simulator if one does not already exist.

ios-sim & ios-deploy

The ios-sim and ios-deploy are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with npm.

                        $ npm install -g ios-sim
                        $ npm install -g ios-deploy

Set up an Physical iOS Device

Actual iOS hardware can also be used for React Native app development. But first, the device must be set up for development. The following documentation is a quick way to set up iOS devices for development. For more detailed instructions and information, see the iOS documentation.

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 iOS documentation for instructions.
Ensure the device has permission to connect to the computer. For macOS, no additional setup is required.

Verify the connection works by connecting the device to the computer with a USB cable and using the following command:

$ adb devices

Project Setup

Below are the edit's required in the project

Now open your User App Folder and search for the file in this location. Src ->environment > environment.js in Visual Code Editor environment.js has all necessary configuration.

Then lastly run your app :

Open a terminal in your root directory of your app.
Then run npm i or npm install
Then move to ios folder by using cd ios then run this command pod install

( **Note : If pod is not installed correctly then move to project's ios folder by cd ios then run the following command pod repo update and then again pod install)

Start Metro : npm start
Choose where to run, press a for Android and press i for iOS.

If everything is set up correctly, you should see your new app running in your iOS emulator or in your physical device ( if connected ) shortly.

Run project on Xcode

Double click on the AppName.xcworkspace inside the project folder -> iOS folder.

In Project navigator, select the project root to open the project editor. Under the Identity section, verify that the Package ID that was set matches the Bundle Identifier.

In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.

Personalised Text Changes:
Please do the name and text changes as required in the following files:
App-Codes-Files\src\pages\Account\ContactPreferences.jsx
App-Codes-Files\src\pages\Account\PersonalInformation.jsx
App-Codes-Files\src\pages\Home\Home.jsx
App-Codes-Files\src\pages\LoginOrRegistration\LoginOrRegistration.jsx
App-Codes-Files\src\pages\Register\Register.jsx
App-Codes-Files\android\app\src\main\assets\index.android
App-Codes-Files\android\app\src\main\assets\index.android.bundle
App-Codes-Files\android\src\components\RedeemConfirmModal.jsx

Android Development

Setting up the development environment

This guide will help you install and build your React Native app.

Development OS : Windows and Target OS : Android

Prerequisite, You will need :

Node

JDK

Android Studio, and

The React Native Command Line Interface (CLI).

Installing Node and JDK :

RN recommend installing Node via Chocolatey, a popular package manager for Windows.

Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command :

choco install -y nodejs-lts microsoft-openjdk11

**Note: If you don’t have already installed Chocolatey on your system you have to install it first. If you have already installed Node on your system, make sure it is Node 18 or newer. If you already have a JDK on your system, RN recommend JDK17. You may encounter problems using higher JDK versions.

Android development environment :

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. Install Android Studio

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked :

Android SDK
Android SDK Platform
Android Virtual Device
If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here for AMD or Hyper-V)

Then, click "Next" to install all of these components.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 13 (Tiramisu) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio. To do that, open Android Studio, click on More Actions button and select SDK Manager.

**Note : The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK.

Select the SDK Platforms tab from within the SDK Manager, then check the box next to Show Package Details in the bottom right corner. Look for and expand the Android 13 (Tiramisu) entry, then make sure the following items are checked:

Android SDK Platform 33
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the SDK Tools tab and check the box next to Show Package Details here as well. Look for and expand the Android SDK Build-Tools entry, then make sure that 33.0.0 is selected.

Finally, click Apply to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

Open the Windows Control Panel.
Click on User Accounts, then click User Accounts again,
Click on Change my environment variables,
Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk

You can find the actual location of the SDK in the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK.

Close the previous Command Prompt window (if open) and open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

Open powershell,
Copy and paste Get-ChildItem -Path Env:\ into powershell
Verify ANDROID_HOME has been added

4. Add platform-tools to Path

Open the Windows Control Panel.
Click on User Accounts, then click User Accounts again
Click on Change my environment variables
Select the Path variable.
Click Edit.
Click New and add the path to platform-tools to the list.

The default location for this folder is: %LOCALAPPDATA%\Android\Sdk\platform-tools

React Native Command Line Interface

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, RN recommend you access the current version at runtime using npx, which ships with Node.js. With npx react-native , the current stable version of the CLI will be downloaded and executed at the time the command is run.

**Note : If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

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.

AVDs are managed with the AVD Manager. The AVD Manager can be opened inside Android projects in the Tools » Device Manager.

Then click on the + icon to create Virtual device/s and then 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 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 React Native apps for Android.

Set up an Physical Android Device

Actual Android hardware can also be used for React Native 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.

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 for instructions.
Ensure the device has permission to connect to the computer. For macOS, no additional setup is required. For Windows, install the OEM USB drivers.

Verify the connection works by connecting the device to the computer with a USB cable and using the following command:

$ adb devices

Project Setup

To change the project name, run the following commands in the terminal:

1.npm install react-native-rename -g
2.npx react-native-rename "AppName" -b "com.example.appname”

Below are the edit's required in the project

Now open your User App Folder and search for the file in this location. Src ->environments > environment.js in Visual Code Editor environment.js has all necessary configuration.

Then You add the Google Api key in AndroidManifest.xml

1.Open your User App Folder.
2. Open the file in Visual Studio Code.
3.Navigate to the file located at android/app/src/main/AndroidManifest.xml File
4. Ensure it has all the necessary configurations.
5. Place your Google API key in the following two places within the file.

Do the same for the Google Api key in iOS AppDelegate.mm File

1.Open your User App Folder.
2. Open the file in Visual Studio Code.
3. Navigate to the file located at App-Codes-Files\ios\RewardApp\AppDelegate.mm
4. Ensure it has all the necessary configurations.
5. Place your Google API key in the following two places within the file.

Change the App Name in android->app->src->main->res->values->strings.xml.

Then lastly run your app :

Open a terminal in your root directory of your app.
Then run npm i or npm install
After successfully installing all the dependencies,
If you want to rename the project name and bundle-id follow these steps
Start Metro : npm start
Choose where to run, press a for Android and press i for iOS.

If everything is set up correctly, you should see your new app running in your Android emulator or in your physical device ( if connected ) shortly.

Change the package name ( or bundle id ) and app Name

Install a npm package called react-native-rename by using : npm install react-native-rename -g
Then go to the project root directory then paste this command : npx react-native-rename "AppName" -b "com.example.appname” . don’t forget to change the app name and package name from the above command.
All set , it automatically update all the necessary files.

**Note : If still not work or facing any issue, continue to Step 4..

First of all , make sure that your NewAppName and NewPackageName is updated everywhere. To verify this search your OldAppName and OldPackageName in your project, if found please update it manually.
Lastly check name attribute inside the app.json and make sure this name is as same as the project folder name

If you follow this steps correctly , it should work.

Generate APK

Generate debug apk

Create a folder called assets inside the android/app/src/main or you can write this command in your root directory mkdir android/app/src/main/assets ( Only for the first time )
Create a blank file called index.andriod inside the android/app/src/main/assets ( Only for the first time )

Then run this command

npx react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android --assets-dest ./android/app/src/main/res/

Then go to android folder by cd android
Now in this android folder, run this command ./gradlew assembleDebug
Done! , you’ll find the apk file in the following path: yourProject/android/app/build/outputs/apk/debug/app-debug.apk

Generate release apk

Generate a keyStore - You will need a Java generated signing key which is a keystore file used to generate a React Native executable binary for Android. You can create one using the keytool in the terminal with the following command.
```
keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000
```
Once you run the keytool utility, you’ll be prompted to type in a password and so many info about the keyStore.

** Make sure you remember the password.

You can change your_key_name with any name you want, as well as your_key_alias. This key uses key-size 2048, instead of default 1024 for security reason.
Adding keystore in the project - copy the keystore and paste inside the android/app folder or run mv my-release-key.keystore /android/app to move the keystore file.
Open android\app\build.gradle file add the keystore configuration.

Run this Release Bundle Configuration Command :

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android--assets-dest android/app/src/main/res/

For release APK generation : Place your terminal directory to android using:
```
cd android
```
Then run :
```
./gradlew assembleRelease
```

Support Desk

Please remember you have purchased a very affordable Mobile App with backend and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our profile page or ask question @v1technologies

Support for my items includes:

* Responding to questions or problems regarding the item and its features
* Fixing bugs and reported issues
* Providing updates to ensure compatibility with new software versions

Item support does not include:

* Customization and installation services
* Support for third party software and plug-ins

Before seeking support, please...

* Make sure your question is a valid Apps Issue and not a customization request.
* Make sure you have read through the documentation and any related guides before asking support on how to accomplish a task.
* Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
* If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
* Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
* Make sure to state the name of the App you are having issues with when requesting support via codecanyon.

Files & Sources

Loyalty Rewards Mobile App for Users

These is the primary project source code

1. src folder - Source code, themes & Controller with all business logic
2. resources folder - static assets, Kindly replace this for your branding.
3. package.json - All modueles required to set up this project are included here.

Included in Admin Folder

This is the primary Backend Laravel PHP Project.

1. app -> Http -> controllers has list of all Controllers.
2. resources -> views has GUI for Admin panel.
3. .env has required configuration's options.

Included in the Database Folder & Database with Sample Data Entry

There are 2 Databases included

Empty Database - This is empty database, you can use this for production.
Database with Sample Data Entry - We have shipped sample items and their images for you to demo your investors or client's.

Troubleshooting & FAQs

Overview

As with any other development project, it is likely that you may find errors or compatibility issues based on various factors like react versions update, version of xcode, third party plugin updates, version of android studio, other compatibility issues.

Most of these issues can be resolved by simple google search because the components we have used are very generic. We have listed below some issues that have been reported and resolved

Can this be installed on a Shared Hosting with and without Cpanel access?

Yes, the product is designed to work with Shared Hosting too.

The way to do this is to copy the source codes to the public_html folder. Then create a database and import the database and connect it to the files using the steps above.
Follow the steps above to make any changes and edits in the environments file. Thats you done!

Black Screen when running the iOs App

We have been informed that this is usually because the "GoogleService-Info.plist" is required in some instances to run the ios app.

This can be resolved by creating the ios app and then importing this file from Google Firebase into the following path

ios > ProjectName > Resources

Changes not visible even after uploading the files.

if you are using any DNS management service like "Cloudflare", you may not see the changes because of the cache issues.

You may need to Purge Cache from your Cloudflare dashboard for your domain.

Remember to purge everything before you refresh the page to see the changes.

Version History (Changelog)

You can find the version history (changelog.txt) file inside the Main Zip File when you extract the folder or you can check changelog on theme sale page.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Changelog


                                -----------------------------------------------------------------------------------------
                                Version 5.0 - 24 Jul 2024
                                -----------------------------------------------------------------------------------------                      
                                - Improvement Changes
                                - Bug Fixes
                                - Added Admin Commission Feature
                                - Added Auto update feature from backend which keep prompting users to update app.
                                - Added Legal Wordings /  Content Update Option

Copyright and license

Code released under the Single License use. Violation or Infringement of the licence and copyright may lead to disputes. For multiple uses, please buy additional copies of the software.

For more information about copyright and license check V1 Technologies.

Loyalty Rewards App App Setup Documentation (React Native Setup)

Introduction

Requirements

Demo Walkthrough

iOS App Demo

Android App Demo

Backend Admin Demo

App Login Details

Getting Started

Pre-requesties for setting up backend server

How To Install Linux, Nginx, MongoDB, PHP (LEMP stack) on Ubuntu 18.04

Introduction

Prerequisites

Step 1 - Installing the Nginx Web Server

Step 2 – Installing MongoDB to Manage Site Data

Step 3 – Installing PHP and Configuring Nginx to Use the PHP Processor

Step 4 – Creating a PHP File to Test Configuration

Conclusion

Securing Server

Using Free Lets Encrypt SSL/TLS Certificates with NGINX

How Lets Encrypt Works

Prerequisites

Step 1 - Download the Lets Encrypt Client

Step 2 - Set Up NGINX

Step 3 - Obtain the SSL/TLS Certificate

Step 4 - Automatically Renew Lets Encrypt Certificates

Summary

Database Walkthrough

View Your Database

Steps to Install Admin Panel

1. Login to your FTP using Filezilla or other FTP you have.

2. Based on the kind of hosting, you may need to use SFTP or normal FTP Connection. If you use a cloud server + Filezilla, select SFTP & enter the same SSH credentials which you use to login in the terminal.

3. The website code is built on Laravel which uses PHP as their base framework.

4. Now upload this folder in your ftp public folder. For Cloud hosting it is generally /var/www/html and for shared hosting or cpanel hosting it is public_html ( you can make folder with name like Admin and upload the content of the public-html and not the folder ).

5. Once uploading is finished below are the parameters to change,

Emails:

iOS Development

Xcode Setup

Setting up a Development Team

Creating an iOS Simulator

ios-sim & ios-deploy

Set up an Physical iOS Device

Project Setup

Run project on Xcode

Android Development

Setting up the development environment

Development OS : Windows and Target OS : Android

Prerequisite, You will need :

Installing Node and JDK :

Android development environment :

1. Install Android Studio

2. Install the Android SDK

3. Configure the ANDROID_HOME environment variable

4. Add platform-tools to Path

React Native Command Line Interface

Creating an Android Virtual Device

Set up an Physical Android Device

Project Setup

To change the project name, run the following commands in the terminal:

Then You add the Google Api key in AndroidManifest.xml

Do the same for the Google Api key in iOS AppDelegate.mm File

Change the package name ( or bundle id ) and app Name

Generate APK

Generate debug apk

Generate release apk

Support Desk

Files & Sources

Troubleshooting & FAQs

Overview

Can this be installed on a Shared Hosting with and without Cpanel access?

Black Screen when running the iOs App

Changes not visible even after uploading the files.

Version History (Changelog)

Changelog

Copyright and license

Loyalty Rewards App App Setup Documentation
(React Native Setup)