Common Features Customization

1. Social Login

This section shows the way to configure all Sign In features: Google, Facebook.

1.1 Google

Create Project:

Go to https://console.developers.google.com > Create new project

alt text

Once project created, go to “OAuth consent screen”. You will need to set at least the “Product name shown to users”, otherwise Google won’t let you create keys for Android and iOS.

alt text

Now create two OAuth client ID, one for each platform. The information needed differs from Android and iOS.

For Android:

Click on Credentials on the left menu, then click "+ CREATE CREDENTIALS"

alt text

alt text

  • Name: It can be anything you want
  • Signing-certificate fingerprint: the SHA-1 fingerprint of your keystore certificate that will sign your APK
  • Package name: the package name of your app

You can find the signing-certificate fingerprint using the command shown.

alt text

You will need as many OAuth Client ID as you have Keystore files to sign your app (Debug, Production, etc.).

For iOS:

alt text

  • Name: It can be anything you want
  • Bundle ID: the package name of your app
  • App Store ID: the id of your app on the App Store
  • Team ID: the id of your team on developer.apple.com

The last two fields are optional and allow you to retrict the usage of the OAuth Client ID to only your app.

Upon creation, Google will give you the client IDs that we need.

alt text

1.2 Facebook

Creating Facebook Application

  1. Login to https://developers.facebook.com and create a new application.

alt text

alt text

alt text

  1. Go to settings section to add your android and ios platforms.

alt text

Android Setup

  1. Click on add platform and then select Android.

alt text

alt text

  1. Generate a hash for the keystore you will sign the apk with and add the generated hash to android platform config.
Mac: keytool -exportcert -alias <KEY_STORE_ALIAS> -keystore <KEY_STORE_PATH> | openssl sha1 -binary | openssl base64
Windows: keytool -exportcert -alias <KEY_STORE_ALIAS> -keystore <KEY_STORE_PATH> | openssl sha1 -binary | openssl base64
  1. Add your package name and full class name for your Activity.

alt text

iOS Setup

  1. Click on add platform then select iOS.

alt text

  1. Enter the bundle identifier for your iOS application on iOs platform config.

alt text

1.3 Mobile App configuration

Open GlobalSettings.cs file and find following code line:

public const string AndroidClientId = "877130854950-fjai37crgsccjmbp8nbhlh49e4tuhsc5.apps.googleusercontent.com";
public const string AndroidUrlSchema = "com.googleusercontent.apps.877130854950-fjai37crgsccjmbp8nbhlh49e4tuhsc5";
public const string iOSClientId = "877130854950-j9ettaot9go1jfmk0ut6o1ef1os0s9jb.apps.googleusercontent.com";
public const string iOSUrlSchema = "com.googleusercontent.apps.877130854950-j9ettaot9go1jfmk0ut6o1ef1os0s9jb";

Replace the ClientId value for Android and iOS with the ClientId you got at Step 1.1 Google

For Facebook, replace the FbClientId and FbClientSecret with the value you got at Step 1.2 Facebook

2. Multi-Languages

2.1 Mobile Side

XStore is multilingual supported, you can add any languages to the app. Language selection option is available under Application Settings screen. This app comes with 3 pre-made languages: English, French and Spanish with English by default. You can config the default language for first time launching the app.

How to change word or label in the app?

To change word or label, open the Languages > Texts > AppResources.code.resx file, find the word or label and make the change in Value column.

alt text

How to add new language to the app?

In order to add new language, simply add new resources file, with file name following format: AppResources.language-code.resx

For language code you can refer to this link http://www.lingoes.net/en/translator/langcode.htm

tip

You can copy the existing English resx file and named the file to above format then change the translation mentioned in step a above.

Go to AppSettings > Settings:

public static List<LanguageSelectItem> Languages = new List<LanguageSelectItem>
{
new LanguageSelectItem { Code ="en", Name ="English"},
new LanguageSelectItem { Code ="es", Name ="Spanish"},
new LanguageSelectItem { Code ="fr", Name ="French"}
};
public static string DefaultLanguage = "en";

Insert new LanguageSelectItem row with Code and Name. This code add languages to selection list in Settings Screen.

To change app default language, simply replace the "en" code by the language code you wanted.

2.2 Wordpress side

Wordpress Plugins required On WooCommerce, to support for translating the product content (title, description..), it is required to install the following plugin:

  • WPML 3.4 or above
  • WPML String Translation 2.0 or above
  • WPML Translation Management 2.2 or above
  • WooCommerce Multilingual
  • WPML to WP API : this API will support to change the product/title/category base on the select language from WPML plugin.
note

To learn more about WPML for WooCommerce, you can refer at https://wpml.org/documentation/related-projects/woocommerce-multilingual/

3. Push Notification

This section shows the way to configure the Push Notifications feature.

Push Notification for Android and iOS is performed and managed via Firebase Console.

Firebase Setup

  1. Login to https://console.firebase.google.com and create a new project

Creating Project

  1. After project is created you should see options to add Firebase to your iOS and Android apps

Firebase Overview

3.1 Android Firebase Setup

  1. Let's start adding firebase to our Android application. Package name must match your Android app package name.

Add Firebase to Android

  1. Download the file google-services.json

GooglePlayJson

3.2 iOS Firebase Setup

  1. Add Firebase to iOS App. Bundle identifier must match your iOS app bundle identifier.

Add Firebase to iOS

Add Firebase to iOS

  1. Download GoogleService-Info.plist

Plist iOS

Apps added

  1. Configure APNs with FCM: https://firebase.google.com/docs/cloud-messaging/ios/certs

  2. Upload iOS TLS certificate/auth token on Settings -> Cloud Messaging section:

Certificate

Certificate

4. Global Settings Configuration

This section explains all global constants and variables in the GlobalSettings.cs . This is application main config file. Simply change the default values to your new config value.

Wordpress site URL :

defaultServerEndpoint = "https://coffeestore.tlssoftwarevn.com";

WooCommerce REST API:

public static string WooCommerceConsumerKey = "ck_4f9cdee80a13ed2ba72a71b15ff8a41ee8545cb3";
public static string WooCommerceConsumerSecret = "cs_c22810541374dd69b482648b064f626e0b705ca5";

Google Maps Key:

public const string GoogleMapsApiKey = "AIzaSyCoJLnIioJVjrjIBY4G5QP8cMu2C6tdV-A";

Horizontal List view items:

public static string WhatsNews = "whatsnews";
public static string News = "news";
public static string CoffeeLover = "coffeelover";

5. Next Step

Go to next Theme and UI to know more about how to customize the design/interface of your app.