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
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.
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"
- 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.
tip
You will need as many OAuth Client ID as you have Keystore files to sign your app (Debug, Production, etc.).
For iOS:
- 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.
1.2 Facebook
Creating Facebook Application
- Login to https://developers.facebook.com and create a new application.
- Go to settings section to add your android and ios platforms.
Android Setup
- Click on add platform and then select Android.
- Generate a hash for the keystore you will sign the apk with and add the generated hash to android platform config.
- Add your package name and full class name for your Activity.
iOS Setup
- Click on add platform then select iOS.
- Enter the bundle identifier for your iOS application on iOs platform config.
1.3 Mobile App configuration
Open GlobalSettings.cs file and find following code line:
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.
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:
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
- Login to https://console.firebase.google.com and create a new project
- After project is created you should see options to add Firebase to your iOS and Android apps
3.1 Android Firebase Setup
- Let's start adding firebase to our Android application. Package name must match your Android app package name.
- Download the file google-services.json
3.2 iOS Firebase Setup
- Add Firebase to iOS App. Bundle identifier must match your iOS app bundle identifier.
- Download GoogleService-Info.plist
Configure APNs with FCM: https://firebase.google.com/docs/cloud-messaging/ios/certs
Upload iOS TLS certificate/auth token on Settings -> Cloud Messaging section:
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 :
WooCommerce REST API:
Google Maps Key:
Horizontal List view items:
5. Next Step
Go to next Theme and UI to know more about how to customize the design/interface of your app.