Configuration

Global configuration

Open the environment.prod.ts file located insrc/environments and change the value of the following variables:

  • serverUrl - Your PUBLIC_SERVER_URL + PARSE_SERVER_MOUNT as defined in the Dockerfile.

  • appId - It must match with the value declared in the Dockerfile.

  • appUrl - The URL for the public PWA. Used for SEO and social sharing.

  • appImageUrl - Used for SEO and social sharing.

  • fbId - The Facebook App ID.

  • googleMapsApiKey - You can use the same key generated during the admin portal configuration or create a new one from here.

  • headerColor - Color for the status bar (Android only). Optional. Any hexadecimal value is valid.

  • defaultUnit - Default distance unit. Possible values: km, mi.

  • defaultLang -Default language Possible values: en,es, ar. If you want to add another language, create a new file in the src/assets/i18n folder. Then copy and paste the contents of the en.json file into the new file and edit the texts accordingly.

Update metadata

Before publishing it is necessary to update the config.xml. Change the package ID and name as shown below:

<widget id="com.yourdomain.appname" version="1.0.0">
    <name>Your app name</name>
</widget>

Setup push notifications

Open the config.xml file and update the value of ParseAppId and ParseServerUrl

Example:

<!-- It must match with the values declared in the Dockerfile -->
<preference name="ParseAppId" value="YOUR_APP_ID" />
<!-- ParseServerUrl = PUBLIC_SERVER_URL + PARSE_SERVER_MOUNT -->
<preference name="ParseServerUrl" value="https://nearme.yourdomain.com/api/" />

Note that ParseServerUrl has the / character at the end, otherwise notifications won’t work correctly.

In the configuration section of the admin portal we saw how to create the Firebase project. To complete the setup we’ll follow the instructions below to generate the configuration files of each platform:

Add the google-services.json file (Android) and the GoogleService-Info.plist file (iOS) in the root of the project (at the same level of config.xml, angular.json, etc.).

Our project is ready to receive push notifications.

Setup Native Facebook Login

In package.json update the Facebook App ID and App Name as shown below:

"cordova-plugin-facebook4": {
  "APP_ID": "YOUR_FB_APP_ID",
  "APP_NAME": "YOUR_FB_APP_NAME"
}

For more information on how to generate these values visit the Ionic Native documentation.

Change colors

Open the src/theme/variables.scss file and update the CSS4 variables. Read more about theming Ionic apps here.

  --ion-color-primary: #D4145A;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #bb124f;
  --ion-color-primary-tint: #d82c6b;

Setup PWA

Update index.html

Open the src/index.html file and update the meta tags accordingly.

Update manifest.json

Update the name, short_name, theme_color and background_color.

Remember to update the icons located in src/assets/icons. Use this tool to generate all the required sizes.

Update Icon and SplashScreen

Replace the files located in the /resources folder and in src/assets/img.

For more information about how to manage the resources please visit the Ionic Documentation.