Introduction

Motors – Car Dealership & Classified Listings Mobile App for Android & IOS Documentation

Motors mobile app is a new extension to Motors WordPress theme. It is the next step on vehicles classified advertisement. This application is built on React Native and that makes it so resilient and cross-platform. Motors app contains a vast amount of marvelous features to buy and sell cars.

Motors app contains a vast amount of marvelous features to buy and sell cars.

Add listings - no need to add a car from inside the web. Submit all the needed information and create vehicles ad page instantly.
Simple car search - keep a car search simple to make the process fast and smooth. In Motors App it’s easy to search for cars by make or model.
Simple Authentication - WP users can easily sign in to Motors App with WP credentials. And new users can register right in the app and later authorize on WP website.
Integration plugin - Motors app comes with a special WordPress plugin that you will have to install and activate in order to make changes to your application from one place inside WordPress
Your Personal Pocket Business - You can create an unlimited number of apps for a different type of clients

Getting Started

Motors Application Plugin

Motors Application Plugin

The Mobile App extension comes with the special Motors Application plugin. The plugin needs to customize the mobile app features such as color scheme, Google Services API keys, placeholder image, Inventory settings, and Add Car options.
To install the Motors Application plugin:
1. Click on the Dashboard > Plugins > Add New section of WordPress menu.
2. Click on the Upload Plugin button and upload the zipped plugin file you have received from ThemeForest.

Motors Application Plugin Settings

Motors Application Plugin Settings

After installation of the Motors Application plugin, the new Motors App Settings section appears in WordPress dashboard menu. The plugin allows to change color scheme of the mobile app, set up Google Services, inventory layout and much more.

Global Settings

Global Settings

Global settings allow you set up the general styling of the mobile application visually. Here you can customize the appearance of the mobile app with the following options:
Application Type: You can select the application type according to the active layout of the theme;
Main & Secondary Color: You can choose the main and secondary color of the application;
Google Services: You can put API keys of Google Services for Android & IOS;
Placeholder: You can upload a default placeholder image for listings without images.
Tip: For detailed overview of getting Google API key, see the Get an API Key for Android And IOS guides.

Main Page

Main Page

This section includes features for setting up a number of listings per page in Recommended Posts and Recently Added Posts modules. Also, you can select the view type of the Recently Added Posts module. Those modules appear on main page of your mobile app.

Add a Car Page

Add a Car Page

The Add a Car section allows to set up steps of the add listing process in mobile application. You can select the options which will be displayed in the certain steps of the Add a Car page.

Inventory

Inventory

The Inventory section contains global settings to set up the appearance of Inventory and single list. You can set up the layout of your inventory and single listing pages in the Motors App Settings -> Inventory section.

General

Select Inventory View: You can select a view type of the Inventory page;
Use for Inventory Filter: You can choose your taxonomies for displaying them as the filter parameters on Inventory.

Grid View

Select Grid View: You can select a default design of the grid view type of your Inventory;
Listing Categories: Set listing categories which will be displayed on the frontend.

List View

1. Set up listing categories which will be displayed on the frontend;
2. Define positions of listing categories – top, middle-left, middle-right, bottom-left, and bottom-right.

Single Listing Details

1. Define listing options which will display as Title, Subtitle, and in the Info section

Motors Application Build Parent Tab

Step 1 – Open the app folder

Step 1 – Open the app folder

Prerequisites and Environment

Once you have installed and set up the Motors Application plugin on your website, you can proceed to build your mobile application for Android and IOS. Before starting, you need to download and install some prerequisite development environments and packages which make app building process much easier.

You need to unzip the motors-app.zip file which comes in the Motors Application plugin package to your desktop or another location/folder. After, you need to run Terminal in macOS or CMD (Command Prompt) in Windows and go to motors-app/ folder.
Tip: All commands are identical in both Terminal and Command Prompt
To open the folder, go in to your Terminal/CMD and run this command:
cd Desktop/motors-app/
In case you unzipped the file to another place, run command like:
cd folder-name/motors-app/
Terminal/CMD outcome

Step 2 – Install Node.js and NPM

Step 2 – Install Node.js and NPM

You need to download the Node.js pre-built installer and install it to your computer. You can get the latest version of the Node.js here - https://nodejs.org/en/download/. NPM is distributed with Node.js - which means that when you download Node.js, you automatically get NPM installed on your computer.
To check if you have Node.js installed, run this command in your Terminal/CMD:
node -v
To confirm that you have npm installed you can run this command in your Terminal/CMD:
npm -v
Terminal/CMD outcome

Step 3 – Run npm install commands

Step 3 – Run npm install commands

After installing the Node.js package, you need to run the following command in Terminal/CMD:
npm install
Terminal/CMD outcome
When the installation process is done, you need to run this command in Terminal/CMD:
npm install -g react-native-cli
Terminal/CMD outcome
Note. If you get error such as “Error: EACCES: permission denied …”, you need to run this command: sudo npm install -g react-native-cli

Step 4 – Run react-native commands

Step 4 – Run react-native commands

Now you need link native dependencies with the following command:
react-native link
Terminal/CMD outcome
After, you need to run the following command in order to start the react package:
react-native start
Terminal/CMD outcome

Step 5 – Put your site link

Step 5 – Put your site link

You need to edit this “/motors-app/src/helpers/settings.json” file and put your site link. You can use any text editor which you familiar with and the file.

Step 6 – Upload your logo

Step 6 – Upload your logo

The last but not the least step is uploading your logo files. You need rename your logo files to logo-white.png and logo-dark.png. After, upload them to this “/motors-app/src/assets/img/” folder and confirm the replacement.
Finally, all the needed dependencies have been installed and set up. Now you can proceed directly to Android and IOS application building process.

Android Application Build Parent Tab

Android Application Build Parent Tab

Step 1 – Set up environment

Step 1 – Set up environment

You need to download and install Android Studio in order to build your android application. You can download it here - https://developer.android.com/studio
After, run the Android Studio and select the “Open an existing Android Studio project” option. In the popup window, you need to select the “motors-app/android/” folder.
Note. You should select the “android” folder in order to open the Android Studio project
After, you need to install Android SDK platform package to your Android Studio. To install Android SDK platform, click on the SDK Manager icon in the top-right toolbar
In the next window, enable Show Package Details option and select the packages under Android 9.0 (Pie), then click on Ok button.
After, click on the Ok button of the Confirm Change window in order to start the download process
After the installation is completed, you can proceed to the next step.
Note: If you did not install the SDK Packages on the SDK Tools tab, please download them, and then install them in order to work without error in the next steps.

Step 2 – Application Name

Step 2 – Application Name

You can set a name of your application by editing this “/app/res/values/strings.xml” file in Android Studio editor. Press cmd+S/ctrl+S buttons on a keyboard in order to save your changes.

Step 3 – Upload app icon

Step 3 – Upload app icon

To upload your application icon, click right mouse button on this folder “/app/res” > New > Image Asset.
When you click on the Image Asset, Asset Studio window appears where you can configure your application icon.
Tip: For detailed overview of the Asset Studio, have a look at the Asset Studio user guide.

Step 4 – Change package name

Step 4 – Change package name

You need to disable the “Compact Middle Packages” option in the Options Menu in order to display sub-folders of the project.
After, go to this “app/java/com/” folder and click right mouse button on folder “/com” > Refactor > Rename option.
Click on Rename current button in the Warning popup window.
Replace “com” with your website domain name and click on Refactor button
You need to do the same actions for “/stylemixthemes/” and “/motors/” folders and replace them with your domain name.
Tip: You need to enter a reverse-domain name. I.E., folders name “com > stylemixthemes > motors” can be renamed to “biz > stylemix > themes” or “com > yourcompanyname”.
Outcome:

Step 5 – Change “import” name

Step 5 – Change “import” name

Now you need to rename package name in the “app > java > com > yourdomain > MainApplication.java” file.
Press cmd+S/ctrl+S buttons on a keyboard in order to save your changes.

Step 6 – Edit build.gradle file

Step 6 – Edit build.gradle file

You need to add your package name in the “Android > Gradle Scripts > build.gradle (Module: app)” file, then press cmd+S/ctrl+S buttons on a keyboard in order to save your changes.

Step 7 – Edit AndroidManifest file

Step 7 – Edit AndroidManifest file

You need to edit this “App > manifests > AndroidManifest.xml” file and change the package name with yours. Then press cmd+S/ctrl+S buttons on a keyboard in order to save your changes. After, click on the Sync Now link at the top-right corner.
Finally, the android application building process is completed. Now you can start to test your app in Android Emulator and release your app.

Android App Release Parent Tab

Android App Release Parent Tab

Step 1 – Test your app

Step 1 – Test your app

You can test your app via running emulator in Android Studio. To run the emulator click on Run App icon in the tool bar.
Note. In order to use virtual device emulator you need to install the Java SDK 8u211 package.
Click on “Create New Virtual Device” button in the appeared popup window.
After selecting the needed device, click on Next button and select a Pie system image.
Click on Next button and verify your device configurations. After, click on Finish button to add your virtual device.
Select your virtual device and click on OK button to run the emulator
Android Virtual Device outcome:

Step 2 – Generate Android App Bundle

Step 2 – Generate Android App Bundle

After testing your app in emulator, you can generate signed APK file for uploading to Google Play. To generate APK, on the top menu click on Build > Generate Signed Bundle / APK option.
In the appeared window, select Android App Bundle option and click on Next button.
In the next window, you can either create a new Certificate in (*.jsk) format or use your existing certificate.
Click on Create new… button and put appropriate data to fields in the New Key Store window. You need to write name of your certificate with (.jks) format.
After, click on OK button and go to next step by clicking on Next button.
Select “Release” option in the next window and click on Finish button.
After Android Studio finishes the generating Android Signed Bundle, it displays the success message in Event Log section.
You can click on “locate” link in order to get your APK file. The file is located in “motors-app/android/app/release” folder.
Tip: The generated file format is (*.aab). An Android App Bundle is a new upload format that includes all your app’s compiled code and recourses, but defers APK generation and signing to Google Play. For a detailed overview, see the Android App Bundles user guide.

Generate APK

Generate APK

In case you need to generate a signed APK file in (*.apk) format to test your app in your android devices without uploading to Google Play, you need to click on Build > Generate Signed Bundle / APK option on the top menu
After, select APK option in the window and perform next step as described in the Step 2 – Generate Android App Bundle.

IOS APP Build Parent Tab

Step 1 – App Registration on App Store Connect

Step 1 – App Registration on App Store Connect

Prerequisites and environments

This manual provides a step-by-step demonstration of releasing a Motors app to the App Store and TestFlight .
You need to enroll in the Apple Developer Program in order to publish your app to the App Store. You can read more about developer program and its options here.

App Store Connect is a web-based tools kit for controlling apps sold on the App Store. As a member of the Apple Developer Program, you will set up your app name, description, screenshots, submit and manage apps, invite users to test with TestFlight, monitor sales reports, and more.
Tip: You can review the App Store Connect tutorial for more detailed overview.

Step 2 – Register a Bundle ID

Step 2 – Register a Bundle ID

Bundle ID is a required identifier for IOS apps registered with Apple. It consists of strings which supplied by you during development, usually in form of com.your-company-domain.app-name.
To register a Bundle ID open your developer account on Apple’s developer website . Click on Certificates, IDs & Profiles section.
From the left menu, select App IDs in Identifiers section.
Click on the “+” button in order to create a new Bundle ID
Enter all the required information - write an app name, select Explicit App ID in App ID Suffix, enter Bundle ID and click on Continue button.
Tip: Enter a reverse-domian name in Bundle ID field (i.e., com.your-company-domain-name.appname), as Apple suggests.
After, confirm your App settings and click on Submit button to complete the registration of your App ID.

Step 3 – Create an app

Step 3 – Create an app

Now you need to register your app on App Store Connect. Before you can upload a build of your app to App Store Connect, you must first create it in your App Store Connect account.
Tip: For detailed instructions of registering your app, have a look at the Add an app to your account tutorial.

Step 4 – Prepare for app distribution

Step 4 – Prepare for app distribution

To prepare your IOS app for distribution on the App Store, you’ll need to set app icons, update the build string, verify build settings etc. You can review the step by step guidelines here .

Step 5 – Setting up the project

Step 5 – Setting up the project

In order to set display name, Bundle identifier, version, build, etc. of your app, you need to install the Xcode tool. You can download the Xcode here .
After, run the Xcode and click on “Open another project…” option in the welcome window.
In the popup window, select and open the “motors-app/iOS” folder.
Next, you need to enter display name, bundle identifier, version, and build in the Identity section.
Display name: the name of your app which will be displayed on the home screen/elsewhere;
Bundle Identifier: the Bundle ID registered on App Store Connect (com.yourcompanydomain.appname);
Version: – the current version of your app;
Build: – the build version of your app.
In the Signing section, you need to select your team which connected to your Apple Developer account.
Note. Automatically manage signing option is active by default. This option allows Xcode automatically managing app signing and supplying.
Tip: : For detailed overview of app signing, have a look at the Create, export, and delete signing certificates.
The next section is the Deployment Info section where you need to set the minimum iOS version your app will support. Flutter supports iOS 8.0 and later.

Step 6 – Add an App Icon

Step 6 – Add an App Icon

You can add icons to your app in the App Icons and Launch Images section of the Xcode General panel. To add icons click on the arrow icon and open the asset catalog
Tip: Follow the Human Interface Guidelines when creating the app icon. You can use the App Icon Generator tool.
In the Finder, drag variations of your app icon to the wells in the detail area match their resolutions
Alternatively, select the asset catalog containing your app icon set in the Project navigator and drag variations to the wells.
Finally, review the icon set has been applied by running your app using Xcode device simulator
Tip: For detailed overview of using simulator, see the Run your app in Simulator from Xcode.

IOS App Release

IOS App Release

Step 1 – Create a build archive

Step 1 – Create a build archive

You need to create a build archive in order to upload your build to App Store Connect. The current build is a debug build for building, debugging, and testing. When you are ready to publish your app on the App Store or TestFlight.
In the Editor area, select the motorReactApp project.
Next, choose a project target from the Scheme toolbar menu.
Select the Generic iOS Device option from the list.
Finally, create a build archive by selecting Product > Archive from the Menu bar.
If the archive builds successfully, it appears in the Archives organizer.

Step 2 – Upload an app to App Store Connect

Step 2 – Upload an app to App Store Connect

In the Archives organizer, select the created archive and click Distribute App button.
In the next window, select App Store as the distribution method, then click Next button.
In the next sheet, select Upload and click Next button.
Alternatively, to export the app before uploading it, click Export, then click Next. Select a location for the files, then click Export. A folder containing the archive export files appears in Finder.
In the next sheet that appears, choose distribution options, then click Next
Tip: For detailed overview of the distribution options, see the Distribution options guide.
In the next sheet, choose a signing option, then click Next.
Tip: For detailed overview of the signing options, have a look at the Distribution signing options guide.
Tip: If you select “Manually manage signing” option, follow alternate steps of the Manually manage distribution signing tutorial.
Review your app content – signing certificates, provisioning profiles, and entitlements in the next sheet.
Click Upload to run uploading process of your app to the App Store