Getting Started

Wilcity App is compatible with SDK 45 now, please read our instruction to learn how to rebuild app with this version.

You can also hire us on Wilcity Service, We will care everything for you.

With the Silver / Gold bundle, You can also unlock all premium plugins.

1. Install Expo XDE

Wilcity is based on Expo, so this step is required. To install Expo, please refer to this link Expo Installation.

2. Install Wilcity Mobile App plugin

Wilcity Mobile App allows you to design your App Home Page, Tab Bottom Navigation, and Secondary Navigator. To install this plugin, please click on Appearance -> Install Plugins -> Install Wilcity Mobile App Plugins

3. Install WP REST API Controller plugin

From the admin sidebar, click on Plugins -> Add New -> Install WP REST API Controller

4. Install Node JS

  1. Go to https://nodejs.org/en/download/ and Install Node JS on your computer
  2. Install NPM module by using npm i command line.  Warning: Since Wilcity App 1.7.10 I recommend using yarn instead npm. To install yarn, please click on me

5. App General Configuration

From the admin sidebar, click on Appearance -> Theme Options -> Mobile App General Settings -> Completing all Settings there.

The SECURE AUTH KEY you provided must contain some special characters (*&!@%^#$) and 12 characters at least. You can generate a token by clicking on WordPress API.

6. Change App baseURL

Go to configureApp.json, then change the baseURL value to your main site url ( included https part )

eg: your main site url is “https://demo.com”

Please use this value to replace the baseURL value at configureApp.json inside Mobile App builder folder.

then, we will have:

“baseURL”:”https://demo.com”

This setting indicate to the app builder where can get the data.

You need to make sure the mobile app plugins is activated and working before config this setting.

7. Firebase Configuration

Please refer to https://documentation.wilcity.com/knowledgebase/firebase-configuration/

  1. Image Size: 1024 x 1024 px
  2. Format: PNG
  3. Image Name: icon.png

Put this file to wilcity-app -> assets folder

9. Splash Screen

  1. Image Size: 1242 x 2436 px
  2. Format: PNG
  3. Image Name: splash.png

Put this file to wilcity-app -> assets folder

10. App Notification Icon

  1. Image Size: 96 x 96 px
  2. Format: PNG
  3. Image Name: notification.png

Put this file to wilcity-app -> assets folder

11. App Logo (This feature is available since version 1.1.7.4)

  1. Image Size: 258 x 296 px
  2. Format: PNG
  3. Image Name: logo.png

12. Login Cover (This feature is available since version 1.1.7.4)

  1. Image Size: 1242 x 2436 px
  2. Format: PNG
  3. Image Name: loginCover.png

The Logo and Login Cover will be used on Register and Login screen.

13. Configuring Mobile Map

Please follow this article:

https://docs.expo.io/versions/latest/sdk/map-view/#configuration

To get the API key and enable Google Map Android SDK.

After having the key, please paste the key into our configuration file app.json like this:

To know how to get the API key and enable Google Map SDK for Android, please watch this recorded video:

P/s: Google Map on the mobile app is free to use.

https://cloud.google.com/maps-platform/pricing/sheet/

Note: If you restrict the key to use only with Android App, please use the SHA-1 key from Upload key certificate section at Setup-> App Integrity, and the android app package name to config.

14. App Color:

You can configure App Color by following these steps:

  1. Opening appConfigure.json => Change App Color there
  2. This app color must the same color that you setup under Appearance -> Theme Options -> Advanced Settings -> Main Color

Tagged:

Leave A Comment?