Mobile App Doc (Android)



ATTENTION!

Before proceeding make a full backup. We recommend using it on a sandbox to test.


REPORT A BUG

If you found a bug please  report here . Make sure to select Android App.


FOR TECHNICAL SUPPORT

Please open a support ticket via  helpdesk .


GET PROFESSIONAL HELP

To hire a professional to handle this, please  go here to order  the installation service and select Android App.


Android for ListingPro if setup correctly syncs with your directory website created using  ListingPro WordPress Theme . There are certain features that are only for desktop and are not available fore mobile version.

The downloaded zip file ( listingprowp-android-package.zip ) contains the following:

 android-code.zip 
 listingprowp-app-plugin.zip 
readme.txt

In addition there is a demo app folder that contains .apk file which can be downloaded on your Android phone for testing purpose only (not supported on iOS devices). The demo app is already linked to our test site.

You must follow the instructions below to generate a similar .apk file for your environment.



1. Install ListingPro App Plugin

After purchasing the  Android App , go to  My Account  to download.
Download and unzip the app package.
Go to WordPress admin > Plugins
Upload ListingProWP Android Plugin
Install and Activate ListingProWP Android Plugin

Once installed a new tab is added under Theme Options > ListingPro App





2. Setup Environment

The below instructions will help setup an environment to generate the APK file that can be uploaded to Google Play Store.


Step 2: Install Node.js

1. Go to  https://nodejs.org/en/download 
2. Download and install Node.js.

For more info go to  https://ionicframework.com/docs/intro/environment 


Step 3: Install Ionic

To install the Ionic CLI with npm run the following command:

 npm install -g @ionic/cli 

For more info go to  https://ionicframework.com/docs/intro/cli 


Step 4: Install Android Studio

To build an Android app you need to install Android Studio on your machine.
Download Windows or Mac version:  https://developer.android.com/studio 





3. Customizing App Files



Step 1: Change Website URL


Go to ListingPro App > resources > src > environments
Edit environment.prod.ts file
Change the URL (must be https) to your ListingProWP directory website URL and make sure the URL ends with "/" (Example:  https://your-website.com/ )


Step 3: Change Package Name

Unzip  android-code.zip  file
Edit config.xml
In line 2 change id in <widget> tag  com.cridio.listingpro  to  com.cridio.your_url 
Go to  resources/android/xml 
Edit network_security_config.xml
change label  <domain includeSubdomains="true">   your_url.com   </domain>  located in


Step 2: Change App Name

Continue editing config.xml file
In line 3 change the app name by editing the text inside the  <name>  tags and replace ListingPro with your App name.


Step 3: Change App Icon

Go to ListingPro App > resources
Replace icon.png image file with your new icon.

Recommended image size is 1024 x 1024 px

Try  https://appicon.co/#app-icon 


Step 4: Change App Splash Screen


Go to ListingPro App > resources
Replace splash.png image file with your new splash screen.

Recommended image size is 2732 x 2732 px

Try using the following  Splash Screen template  to generate the correct file size.

To learn why a square image is required  read more .




Step 5: Run Command

Open your project in Terminal (MAC) or CMD (Windows)
Change directory to the root of the project folder.
Run this command:  ionic cordova resources 


Step 6: App Testing On Browser

Open root of project folder in Terminal (Mac) or CMD (Win)
Run command  ionic serve 

Now your default browser will be auto launched to test the app.





4. Install and Configure Android Studio

Install  Android Studio  on your machine.
Set Android SDK Path in Windows or Mac ( Click Here to Learn )
Set JAVA_HOME variable on Windows and Mac ( Click Here to Learn )




Attention! Before proceeding to build an Android apk please make sure you have installed Node.js and ionic cli correctly on your machine.

5. Build Android APK


Open Project Folder in code editor and run command (cmd)  ng build .
Then run command  ionic cordova platform add android 
Once it generates files for android, run cmd  ionic cordova build android .
It will successfully generates your APK file in Your Project Folder > platforms\android\app\build\outputs\apk\debug
To generate production android build run cmd  ionic cordova build android –prod 






6. Integrations



1. Google Map Integration

Add your Google map API key in Theme Options to work in app.

Learn  how to get a new Google Map API key .


2. Enable Facebook Login

Create your app on Facebook developer account. It will create new APP id for your app. After getting App id,

For step-by-step instructions on creating Facebook API key refer to the following  article .






7. Android Play Store Deployment


Now the final step is to upload your app on Google Play Store for your users to download and use your app. To learn more please refer to the following  document .