Vehicle Cleaning Detailing Servicing Repair App

(Ionic Version Setup Documentation)


Introduction

  • Item Name : Vehicle Cleaning Detailing Servicing Repair App and Admin Panel. (Ionic Version)
  • 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 above mentioned version. If you are running a different version, please use the appropriate 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.

  1. Code Editing Software (eg: Visual Studio Code , Sublime Text or Notepad Plus)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)
  4. To deploy to iOS you need Mac Machine with X-Code installed.
  5. To publish the app on Apple App Store you need an active Apple Developer Account.
  6. 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 ionic Capacitor.

If you need more detailed Step-By-Step guide, please click here Step-by-Step-Installation-Guide.pdf

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 Customers

Android App Demo

The Android App can be downloaded from here: Android App for Customers

Backend Admin Demo

The backend admin control panel can be viewed here https://garage.v1tl.com/login
Username: admin@demo.com
Password: demo123

App Login Details

For demo purposes you can create user accounts for testing

Getting Started

Pre-requesties for setting up backend server

How To Install Linux, Nginx, MySQL, 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 MySQL 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
    image

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

Step 2 – Installing MySQL to Manage Site Data

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

Install MySQL by typing:

$ sudo apt install mysql-server

The MySQL database software is now installed, but its configuration is not yet complete.

To secure the installation, MySQL comes with a script that will ask whether we want to modify some insecure defaults. Initiate the script by typing:

$ sudo mysql_secure_installation

This script will ask if you want to configure the VALIDATE PASSWORD PLUGIN.

Warning: Enabling this feature is something of a judgment call. If enabled, passwords which dont match the specified criteria will be rejected by MySQL with an error. This will cause issues if you use a weak password in conjunction with software which automatically configures MySQL user credentials, such as the Ubuntu packages for phpMyAdmin. It is safe to leave validation disabled, but you should always use strong, unique passwords for database credentials

Answer Y for yes, or anything else to continue without enabling.

							VALIDATE PASSWORD PLUGIN can be used to test passwords
							and improve security. It checks the strength of password
							and allows the users to set only those passwords which are
							secure enough. Would you like to setup VALIDATE PASSWORD plugin?
                            Press y|Y for Yes, any other key for No:

If you have enabled validation, the script will also ask you to select a level of password validation. Keep in mind that if you enter 2 – for the strongest level – you will receive errors when attempting to set any password which does not contain numbers, upper and lowercase letters, and special characters, or which is based on common dictionary words.

							There are three levels of password validation policy:
							LOW    Length >= 8
							MEDIUM Length >= 8, numeric, mixed case, and special characters
							STRONG Length >= 8, numeric, mixed case, special characters and dictionary
                            Please enter 0 = LOW, 1 = MEDIUM and 2 = STRONG: 1 

Next, you will be asked to submit and confirm a root password:

							Please set the password for root here.
							New password:
                            Re-enter new password: 

For the rest of the questions, you should press Y and hit the ENTER key at each prompt. This will remove some anonymous users and the test database, disable remote root logins, and load these new rules so that MySQL immediately respects the changes we have made.

Note that in Ubuntu systems running MySQL 5.7 (and later versions), the root MySQL user is set to authenticate using the auth_socket plugin by default rather than with a password. This allows for some greater security and usability in many cases, but it can also complicate things when you need to allow an external program (e.g., phpMyAdmin) to access the user.

If using the auth_socket plugin to access MySQL fits with your workflow, you can proceed to Step 3. If, however, you prefer to use a password when connecting to MySQL as root, you will need to switch its authentication method from auth_socket to mysql_native_password. To do this, open up the MySQL prompt from your terminal:

$ sudo mysql

Next, check which authentication method each of your MySQL user accounts use with the following command:

mysql> SELECT user,authentication_string,plugin,host FROM mysql.user;
							Output
							+------------------+-------------------------------------------+-----------------------+-----------+
							| user             | authentication_string                     | plugin                | host      |
							+------------------+-------------------------------------------+-----------------------+-----------+
							| root             |                                           | auth_socket           | localhost |
							| mysql.session    | *THISISNOTAVALIDPASSWORDTHATCANBEUSEDHERE | mysql_native_password | localhost |
							| mysql.sys        | *THISISNOTAVALIDPASSWORDTHATCANBEUSEDHERE | mysql_native_password | localhost |
							| debian-sys-maint | *CC744277A401A7D25BE1CA89AFF17BF607F876FF | mysql_native_password | localhost |
							+------------------+-------------------------------------------+-----------------------+-----------+
                            4 rows in set (0.00 sec)

In this example, you can see that the root user does in fact authenticate using the auth_socket plugin. To configure the root account to authenticate with a password, run the following ALTER USER command. Be sure to change password to a strong password of your choosing:

mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

Then, run FLUSH PRIVILEGES which tells the server to reload the grant tables and put your new changes into effect:

mysql> FLUSH PRIVILEGES;

Check the authentication methods employed by each of your users again to confirm that root no longer authenticates using the auth_socket plugin:

mysql> SELECT user,authentication_string,plugin,host FROM mysql.user;
							Output
							+------------------+-------------------------------------------+-----------------------+-----------+
							| user             | authentication_string                     | plugin                | host      |
							+------------------+-------------------------------------------+-----------------------+-----------+
							| root             | *3636DACC8616D997782ADD0839F92C1571D6D78F | mysql_native_password | localhost |
							| mysql.session    | *THISISNOTAVALIDPASSWORDTHATCANBEUSEDHERE | mysql_native_password | localhost |
							| mysql.sys        | *THISISNOTAVALIDPASSWORDTHATCANBEUSEDHERE | mysql_native_password | localhost |
							| debian-sys-maint | *CC744277A401A7D25BE1CA89AFF17BF607F876FF | mysql_native_password | localhost |
							+------------------+-------------------------------------------+-----------------------+-----------+
                            4 rows in set (0.00 sec)

You can see in this example output that the root MySQL user now authenticates using a password. Once you confirm this on your own server, you can exit the MySQL shell:

mysql> exit
							Note: After configuring your root MySQL user to authenticate with a password, you will no longer be able to access MySQL with the sudo mysql command used previously. Instead, you must run the following:
							$ mysql -u root -p
                            After entering the password you just set, you will see the MySQL prompt.

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 MySQL 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, php-mysql, 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 php-mysql

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:

    image

    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.

      1. Assuming you are starting with a fresh NGINX install, use a text editor to create a file in the /etc/nginx/conf.d directory named domain‑name.conf (so in our example, www.example.com.conf).
      2. Specify your domain name (and variants, if any) with the server_name directive:
                                   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
      2. Respond to prompts from certbot to configure your HTTPS settings, which involves entering your email address and agreeing to the Lets Encrypt terms of service.
      When certificate generation completes, NGINX reloads with the new settings. certbot generates a message indicating that certificate generation was successful and specifying the location of the certificate on your server.
                                  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.

      1. Open the crontab file. Use the nano editor if prompted. Generally its option 1
      $ crontab -e 
      2. Add the certbot command to run daily. In this example, we run the command every day at noon. The command checks to see if the certificate on the server will expire within the next 30 days, and renews it if so. The --quiet directive tells certbot not to generate output.
      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

    Installing PHP MYADMIN

    sudo apt update // to update your packages
    sudo apt install phpmyadmin // to install phpmyadmin
    apache2 // (direct press enter)
    sudo ln -s /usr/share/phpmyadmin /var/www/html // to create shortcut key for phpmyadmin at /var/www/html/
    Now open phpmyadmin in the browser // You can login by username and password, which you set before.

    Next step is to create a database and name it as you like. Then select the database and import the data .sql file using the file included in your folder.You can import the empty database if you want everything blank or you can import the database with sample data if you want to have some dummy entries.

    If you get a MYSQL Version error for JSON syntax when importing the databse, edit the .SQL file provided and search to replace "json" with "text"

    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 ).

    If you are using Shared Hosting, you may find these steps useful:
    i - Create a folder called v1garage under your "public_html"
    ii - Upload all files from the "Admin_Laravel" folder in this "v1garage" folder on your server
    iii - Copy all the contents in the "public" folder (all the contenst inside this folder, not the folder itself) and move them from v1garage to "public_html" folder
    iv - Edit index.php file in the "public_html" folder. Edit the code below at line 19 and rename the ".." to your folder name in this case v1garage
    Replace this:
    if (file_exists(__DIR__.'/../storage/framework/maintenance.php')) {
    require __DIR__.'/../storage/framework/maintenance.php';

    With this:
    if (file_exists(__DIR__.'/v1garage/storage/framework/maintenance.php')) {
    require __DIR__.'/v1garage/storage/framework/maintenance.php';

    v - Do the same with line 34 and 47
    require __DIR__.'/v1garage/vendor/autoload.php';
    $app = require_once __DIR__.'/v1garage/bootstrap/app.php';

    vi - Create a simlink now for the images to show by editing the web.pho file in v1garage/routes/web.php.
    Paste this link in the top of the file (line 3) use Illuminate\Support\Facades\Artisan;
    At the end of the file, past this code:
    Route::get('/foo', function () {
    Artisan::call('storage:link');
    });


    vii - Now go to the v1garage folder and edit the .env file as described below in Next Step

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

      1. Open Admin Root Folder. find and edit the .env file. In some cases, the env file is hidden by the operating system. Please enable hidden files from your computer or mac.
      This is the file where you need to change the details.
      2. Change the database credentials and the STRIPE Payment Gateway keys as shown below:
      System is integrated with STRIPE, please login to stripe.com and create your account if you dont have one, and look for developers API section to get your publishable key and secret key.
                                  APP_NAME="Your-App-Name"
      
                                  STRIPE_KEY=Your-Stripe-Live-Key
                                  STRIPE_SECRET=Your-Stripe-Secret
      
                                  DB_HOST=Your-Database-Host-Address
                                  DB_DATABASE=Your-Database-Name
                                  DB_USERNAME=Your-Database-Username
                                  DB_PASSWORD=Your-Database-Password
                                  
                                  
                                  MAIL_MAILER=smtp
                                  MAIL_HOST=Your-SMTP-Host
                                  MAIL_PORT=Your-SMTP-Port
                                  MAIL_USERNAME=Your-SMTP-Email-Username
                                  MAIL_PASSWORD=Your-SMTP-Email-Password
                                  MAIL_ENCRYPTION=ssl
                                  MAIL_FROM_ADDRESS=Your-SMTP-Email-ID
                                  MAIL_FROM_NAME="${APP_NAME}"
      
                                  

    6. Access this URL to generate the storage folder yourdomain/foo.

    7. In case you find some elements(like pagination in admin) are not working as it should, it is most commonly the livewire not finding its correct path. If that is the case, please change the file config > livewire.php 'asset_url' => null, and replace the null with your exact folder name (example yourdomain.com/v1garage)

    Some important items before setting up
    In case you are cloning from VCS and installing Laravel, then you need to do the following steps:

      Compose Dependency
                                  cd my-project
                                  composer install
                                  php artisan key:generate
      Storage Link
                                  php artisan storage:link
      Database Migration
                                  php artisan migrate:fresh --seed
      Running the project locally
                                  cd my-project // To go to the project directory
                                  php artisan serve  // To start the server
                                  
      Deployment
                                  cd my-project
                                  php artisan cache:clear
                                  php artisan view:clear
                                  php artisan route:clear
                                  php artisan clear-compiled
    We expect that the Buyer of our product has knowledge of development and frameworks the product is built on. If you do not have knowledge the framework, you may need help. We offer installation and support for additional fee should you wish to take our help.

    We assume you to have some basic knowlege of Mobile programing or Web to get this up and running. How ever we made every attempt to document all steps to get you going. Please note that this app was built using Ionic and requires additional knowledge of using the Ionic Dev environment.

    If you need more detailed Step-By-Step guide, please click here Ionic Setup



    If you need more detailed Step-By-Step guide, please click here Step-by-Step-Installation-Guide.pdf

    iOS Development

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

    There are two workflows for running Ionic apps on iOS:

  • Running with Xcode
  • Running with the Ionic CLI
  • The Xcode approach is generally more stable, but the Ionic 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.

      image

    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 11 simulator if one does not already exist.

      image

    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

    Project Setup

    Before apps can be deployed to iOS simulators and devices, the native project must be configured.

      1. Set the Package ID & name.
        - open the capacitor.config.ts file and modify the appId & appName property.
      2. Build the project.
        $ ionic build
      3. Generate the native project, if it does not already exist.
                             $ ionic cap add ios
                             $ ionic cap sync
                             $ ionic cap build ios
    4. 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.
      image
    5. 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.
      image

    Running with Xcode

    In this workflow, Xcode can automatically fix common compilation and signing issues that can occur.

      1. Develop the Ionic app and sync it to the native project.
        With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. The web assets then must be copied into the native project. Luckily, this process is made easy with a single Ionic CLI command.
        Run the following:
        $ ionic cap sync
      2. In Xcode, select a target simulator or device and click the play button.
        image

      Running with the Ionic CLI

      The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in ionic serve, to provide live-reload functionality.

      With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.

      Warning: For iOS devices, the device and the computer need to be on the same Wi-Fi network. An external URL for the dev server is also required so the device can connect to it. Use --external (or --host=0.0.0.0) to bind to external addresses.

      Live-reload with Capacitor

      Capacitor does not yet have a way to build native projects. It relies on Xcode to build and deploy app binaries. However, the Ionic CLI can boot up a live-reload server and configure Capacitor to use it with a single command.

      Run the following, then select a target simulator or device and click the play button in Xcode:

      $ ionic cap run ios -l --external

      Debugging iOS Apps

      Once an app is running on an iOS device or simulator, it can be debugged in Safari.

      Using Safari Web Inspector

      Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

      If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

      If the app isn't listed, the Web Inspector may need to be enabled on the device in Settings » Safari » Advanced » Web Inspector.
        image

      Viewing Native Logs

      If running with Xcode, native logs can be found in in the Xcode Console.

      If the Console is hidden, enable it in View » Debug Area » Activate Console.
        image

    Android Development

    This guide covers how to run and debug Ionic apps on Android emulators and devices using Capacitor. Android apps can be developed on Windows, macOS, and Linux.

    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.

    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.

    Installing Android Studio

    Download Android Studio from the Android website. More detailed installation instructions can be found in the User Guide.

    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.

      image

    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.

      image

    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.

    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
      For apksigner and zipalign, $ANDROID_SDK_ROOT/build-tools must also be added to PATH.

    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. 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.

      image

    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 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.

      image

    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.

      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 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.

    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 for troubleshooting and detailed information.

    Project Setup

    Before apps can be deployed to Android simulators and devices, the native project must be configured.

      1. Set the Package Id & Name.
        open the capacitor.config.ts file and modify the appId & appName property.
      2. Generate the build.
        Run the following:
        $ ionic build
      3. Generate the native project, if it does not already exist.
        Run the following:
                                $ ionic cap add android
                                $ ionic cap sync
                                $ ionic cap build android

    Setting up Mobile App

    Prerequisites

  • Windows or Mac OS (for iOs App)
  • Visual Studio Code or any other IDE
  • Open terminal and lets begin with installation of Ionic framework, by typing
      npm install -g @ionic/cli

      Below are the edit's required in the project.

      1. a. Now open your User App Folder and search for the file in this location. Src ->environments > environment.ts in Visual Code Editor environment.ts has all necessary configuration.
      1. 
        
          appName: 'App Name',
          adminBaseUrl: 'https://yourdomain.com', // without trailing slashes
          onesignalAppId: '****************************',
          firebaseSenderId: '**************',
          googlePlayPackageName: 'com.appname',
          iosAppStoreId: '**************',
        
                             
        c. Now let's run the command to install all dependencies. You will need to have the current working forlder active on your terminal to be able to run the command successfully. This is generally done by dragging the folder directly on the Termincal icon.
        3. npm install
        5. Running App in Mobile
          - The Xcode approach is generally more stable, but the Ionic CLI approach offers live-reload functionality.

    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

    Mobile App Folder

    These is the primary Flutter project source code for the mobile app.
    1. lib > commons > constants.dart file has all the settings that you need to change
    2. pubspec.yml file in the root has the settings that you need to change.

    Admin Folder

    Theis the the folde which has all teh admin backen codes and the APIs.
    The .env file is where you need to change all your settings

    Database Folder
    • Empty Database - This is emepty database, you can use this for production.
    • Database with Sample Data Entry - We have added sample data for you for demo purposes. This database has teh sample data.
    Documentation Folder

    Full OFFLINE documentation is also included.

    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 version of flutter, 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

    platform > ios > ProjectName > Resources


    Inner Pages on Website or Admin Not Working

    The above documentation is based on nginx, and as you may be aware, ".htaccess" does not work very well with nginx.

    You may need to tweak the location / { parameter in your block configuration file as appropriate based on your server settings.
    Dont forget to reload the nginx after making the changes.

    On shared hosting (cpanel hosting): If you are able to open the home page but not able to open the inner pages, this is most commonly an issue with your .htaccess file in your root folder. Please try the RewriteBase / in your .htaccess file located in the main root folder. See example below:
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]


    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.


    Loader takes time to hide (Please wait loader). Can I hide the "Please wait" loader on the home screen?

    The app is designed to load settings and products data in real-time from the server. This real time data loading can be disabled

    You may wish to Disable Real Time Data Load from your apps home screen.

    This will make the "Please Wait Loader" disappear and will not appear everytime.


    Data takes time to load

    That is a good news actually :)

    Data load times depend on how many users are using the app at the same time and what kind of server your app is hosted on.
    Our app is hosted on a demo server and there are many users testing the demo app at any given time, hence the slight delay.

    Please note Shared Server Hosting is generally slower than dedicated servers.


    How to add a sub-category?

    To add a subcategory, please add a category first, then click on the category and you will see an option of adding a sub-category on the top green button


    Version History (Changelog)

    You can find the version history (changelog.txt) file in the main 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 1.0 - 14 Oct 2021
                                    -----------------------------------------------------------------------------------------
    
                                    - Stripe Payment Capability Added
                                    - Sub-Category System Added. Now you can add subcategories too.
                                    - Added CMS Option
                                    - Backend API Performance tweaks
    
                                          

    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.