IonicPlus – Configurations

App Configurations

app/init/config/developement.config.js – All the base configurations for the app needs to be updated in this file. There are various placeholders to update App Name, Firebase Ref, Parse Configuration, Ionic.io Configurations, Facebook APP Id, etc.

 

 

Facebook Native Login

Install the cordova plugin for facebook from https://github.com/jeduan/cordova-plugin-facebook4

ionic plugin add cordova-plugin-facebook4 –save –variable APP_ID=“<app_id> –variable APP_NAME=“<app-name>”

 OneSignal

Create App on OneSignal Console 

OneSignalIonicPlus
  • Go to App Settings -> Keys & IDs. Grab OneSignal App ID and update OneSignal Config in app/init/config/development.config.js
  • For Android Push Notifications, follow the details mentioned here . Grab the Sender Id/Project Number and update OneSignal FCMConfig in app/config.ts
  • For IOS Push Notifications, follow the details mentioned here
  • Install cordova plugin for OneSignal by executing the command  ionic plugin add onesignal-cordova-plugin

 

 

Firebase

Create App on Firebase Console 

  • Grab the URL (e.g https://ionicplus.firebaseio.com) and update the firebase configuration in app/init/config.js

 

firebase3-console

Update Authorized Domains
  • For example, add ionicplus.firebaseapp.com and localhost

firebase3-authorized-domains

Enable Email & Password Authentication
  • Enable Email and Password Authentication

 

firebase3-project-console
Enable Facebook Authentication 
  • Enable Facebook Authentication
  • Add Facebook Id and App Secret

 

firebase3-facebook
Enable Twitter Authentication 
  • Enable Twitter Authentication
  • Add Twitter API Key and API Secret

firebase3-twitter

 

Enable Google Authentication 
  • Enable Google Authentication
  • Add Google Client Id and Client Secret

 

firebase3-google

Facebook

Create an App On Facebook

  • Grab the APP_ID and update the facebook configuration in app/init/config.js

facebook_create

Add Platform on Facebook

  • Add Site URL
    • Update as http://localhost:9000/
  • Add Platform
    • Create IOS and Android platforms
  • IOS Platform
    • Update Bundle Id with APP Name (e.g com.ionictest.app)
    • Enable Single Sign On
  • Android Platform
    • Update Google Play Package Name (e.g com.ionictest.app)
    • Update Class Name (e.g com.ionictest.app.MainActivity)
    • Update Key HashesTo generate key hash, execute the following in your development environment
    • keytool -genkey -v -keystore ionictest-debug.keystore -alias ionictest-debug -keyalg RSA -keysize 2048 -validity 10000keytool -exportcert -alias ionictest-debug -keystore ionictest-debug.keystore | openssl sha1 -binary | openssl base64
    • Enable Single Sign On and Deep Linking

facebook_dashboardfacebook_dashboard1

Update Facebook Settings

  • Go to Settings->Advanced
  • Enable Embedded Browser Oauth Login
  • Update Valid OAuth redirect URIs
    • For Firebase Auth, add https://ionicplus.firebaseapp.com/_/auth/handler and http://localhost/callback
    • For Localhost Auth, add http://localhost:9000/

 

firebase3-facebook-config

Update Facebook Status and Review

  • Go to Status & Review
  • Make sure default login permissions (email, public_profile, user_friends) are selected
  • Start a Submission

facebook_status_review

Twitter

Create App on Twitter

  • Update App Name and Description
  • Update Website URL (e.g http://www.example.com)
  • Update Callback URL
    • For Firebase Auth, add https://ionicplus.firebaseapp.com/__/auth/handler

 

firebase3-twitter-config

Google

Create App on Google

  • Go to Credentials -> Add to Credentials -> Oauth 2.0 client ID.
  • Select Web Application
    • Update Name
    • Authorized JavaScript origins
      • For Firebase Auth, add http://ionicsquare.firebaseapp.com
      • For Localhost Auth, add http://localhost:9000
    • Authorized redirect URIs
      • For Firebase Auth, add  https://ionicsquare.firebaseapp.com/__/auth/handler and http://localhost/callback

firebase3-google-config

Enable GCM on Google

  • Go to APIs and Enable Cloud Messaging for Android
  • Go to Credentials -> Add to Credentials -> API Key -> Server Key
  • Use the Project Key as GCM_ID and Server API Key as  GCM_KEY for the ionic configurations at app/init/config.js

google_gcm0google_gcm1google_gcm2

Ionic

Create App on Ionic.io

  • Add App Name and Create the App
  • Go to Settings -> Keys
    • Grab the APP ID, API KEY and SECRET and update the ionic configurations in  app/init/config.js

ionic_create

ionic_keys

 

 

 

The following section highlighted in grey is valid only for IonicPlus 1.3.0 and below

Parse
 Create App on Parse

parse_create

Enable Facebook Authentication
  • Enable Facebook Authentication
  • Add Facebook Id and App Secret
  • Go to Keys and grab the APP_ID, CLIENT_KEY, JAVASCRIPT_KEY and update the parse configurations in app/init/config.js

parse_facebook

Enable Push Notification
  • Enable Client Push
  • Go to Keys and grab the APP_ID, CLIENT_KEY, JAVASCRIPT_KEY and update the parse configurations in app/init/config.js

parse_push

Plugin Configurations for AdMobPro, Facebook, Parse and IonicPush

If all three plugins are added to the project, please execute the following commands in sequence in your app root folder. It is advisable to either install PushNotification (IonicPush) or parse-push-plugin (ParsePush) and not mix both of them in the setup as it may give undesired results

  1. cordova plugin add https://github.com/Telerik-Verified-Plugins/PushNotification
  2. cordova plugin add https://github.com/Telerik-Verified-Plugins/Facebook --variable APP_ID=<APP_ID> --variable APP_NAME=<APP_NAME>
  3. cordova plugin add https://github.com/yupswing/ParsePlugin --variable APP_ID=PARSE_APP_ID --variable CLIENT_KEY=PARSE_CLIENT_KEY
  4. cordova plugin add https://github.com/taivo/parse-push-plugin

Notes:-

  1. For parse plugin, either yupswing or taivo can be used based on the support required.
  2. Remove bolts and android support jars from platforms/android/libs folder
  3. If AdMob Plugin and PushNotification Plugin are installed, then follow the steps below
    1. Edit plugins/com.phonegap.plugins.PushPlugin/plugin.xml.
    2. Remove the line <dependency id="com.google.playservices" url="ttps://github.com/MobileChromeApps/google-play-services.git"/>
    3. Add the line  <framework src="com.google.android.gms:play-services-gcm:+" />
    4. cordova plugin rm com.google.playservices
    5. rm -rf platforms
    6. ionic state restore
  4. If AdMob Plugin and Facebook Connect Plugin are installed, then follow the steps below
    1. create a file build-extras.gradle under platforms/android.
    2. Edit build-extras.gradle with configurations {
      all*.exclude group:'com.android.support',
      module:'support-v4'
      }
Cordova Install Configurations

If Cordova launch is successful and apk is not installed on the target, then do the following

  1. Edit platforms/android/cordova/lib/device.js and platforms/android/cordova/lib/emulator.js
  2. Find the line with  var cmd = 'adb -s ' + resolvedTarget.target + ' install -r  -d"' + apk_path + '"';
  3. Replace the line with  var cmd = 'adb -s ' + resolvedTarget.target + ' install -r  "' + apk_path + '"';
Parse Push Configuration (For https://github.com/yupswing/ParsePlugin)
Create MainApplication.java

Go to platforms/android/src/com/ionicplus/app and create a file called MainApplication.java with the below code

package com.ionicplus.app;

import android.app.Application;
import com.akifox.parseplugin.ParsePlugin;

public class MainApplication extends Application {

@Override
public void onCreate() {
super.onCreate();
ParsePlugin.initializeParseWithApplication(this);
}

}

Update AndroidManifest.xml

Go to platforms/android/AndroidManifest.xml

Update <application> tag, by adding  the attribute
android:name="com.ionicplus.app.MainApplication"

Parse Push Configuration (For https://github.com/taivo/parse-push-plugin)
Create MainApplication.java

Go to platforms/android/src/com/ionicplus/app and create a file called MainApplication.java with the below code

package com.ionicplus.app;

import android.app.Application;
import com.parse.Parse;
import com.parse.ParseInstallation;

public class MainApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Parse.initialize(this, <APP_ID>, <CLIENT_KEY>);
ParseInstallation.getCurrentInstallation().saveInBackground();
}
}

Update AndroidManifest.xml

Go to platforms/android/AndroidManifest.xml

Update <application> tag, by adding  the attribute
android:name="MainApplication"

Add the following snippet under <application> tag
<receiver android:name="com.parse.ParseBroadcastReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.intent.action.USER_PRESENT" />
</intent-filter>
</receiver>

Add the following snippet as sibling to  <application> tag
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

Deep Linking Push Notifications

Go to platforms/andoird/src/com/ionicplus/app/MainActivity.java and replace with the following code snippet

package com.ionicplus.app;

import android.os.Bundle;
import android.content.Intent;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set by <content src=”index.html” /> in config.xml
Intent intent = getIntent();
String urlHash = intent.hasExtra(“urlHash”) ? intent.getStringExtra(“urlHash”) : “”;
loadUrl(launchUrl + urlHash);
}
}

15 thoughts on “IonicPlus – Configurations

  1. I am going to ask for a refund and will explain here why this package is nothing like what I was expecting and is of no use to me. I cannot use it. Maybe others can, but I cannot.

    1. This is not so much a template as an apk generation stack. Apart from the mountain of other installations that are required, which I will go into, the end result is not code that we can use as a template in other projects but an apk which is both minimized (and possibly vendor encrypted too. Surely this is not a case of selling your code as a template and encrypting it too? If it is not encrypted what is the vendor file running at a whopping 45k for and the app.js renamed to app-eb04202f.js ?). There is no clear way to separate the code that I need, such as the facebook registration code, from the rest of the code and the configurations are spread across many different files.
    2. This is not a template that simply works. It requires a lot of extra work (and I do not mean the configurations which of course is mandatory under any scenario) I mean the installation of bower, gulp and all the plugins .
    3 Even after spending hours following the installation guide the instructions are incomplete and out out of date. For instance
    a) as mentioned above the the ionic state reset does not work.
    b) There is a missing step which I believe is bower install ionic without which the gulp build fails.
    c) Even after all these things the app fails on the facebook login for a reason, that since the code is so convoluted and obscured and the opposite of “open” is impossible to guess where it came from.

    I buy templates to save time. This has cost me 4 hours already and it is time to give up, and design my own registration forms, or find a template that has code that can be used straight away.

    Fore those expecting a clear app.js and maybe controllers.js and functions you can copy and paste and a single easy to understand config file, forget it. There is one minified file that is compiled by gulp that is designed to be virtually impossible to reverse engineer into a new app – the opposite definition of a template in my opinion. Unless you want your app to be exactly what the vendor coded, this is not for you – and it is not for me for sure.

    Please, I cannot use this, I paid with paypal using the email supplied here.Please refund me.

    1. I believe there is a misunderstanding on how you have analysed the code.
      Please note that the code is highly modularized with separate controllers, templates. These are neatly organized under the app folder.

      In README.md, we have mentioned about gulp build. This task will build the app folder and copy it to www folder.

      What you are looking is at the end result in www folder which is a generated file based on the gulp tasks defined in gulpfile.js These gulp tasks are used to minimise and well as version the source code so as to reduce the size of the apk which is very much essential to the releasing an app.
      Also, note that you may be using latest version of ionic CLI (i.e 3.0). Since, this template is based on Ionic 1.x, it is recommended to use the legacy version of ionic CLI.

      Since, this template supports lots of features, you might be seeing the plugins to be installed are more. As cordova ecosystem is a complex which is beyond our control, still we have provided enough information in our documentation to overcome issues faced.

  2. BTW, you may wish to say that this is not a template under the Ionic marketplace definition, it is a starter, but but by my definition it is supposed to be code we can use to create a new app and as such please do not be inclined to say this is a starter not a template as it makes little difference to me what it is called. Thanks for your understanding.

  3. I wrote this before I saw the reply. I cannot use this, it is not what I thought. Are you going to charge me for something I cannot use? What I need is code I can adapt, and a minified version is not of any use, it requires way to much knowledge of how the code was put together which only you have. This is tons of features all lumped together and because I want just the facebook and firebase logins, and seperating it out will take longer than starting from scratch, it is of no use to me. Please refund me.

    1. I guess you have not really understood our previous message. The entire code base is highly modularized and neatly organized into multi folders. Please have a look at app/modules folder. Under these folders, you will find multiple subfolders like config, controllers, css, img, services, views, etc. Each of these subfolder has multiple css, controllers, services, views. It is much more modularized than the Ionic 1 framework offers. Your working folder should be app folder and not www folder.

      For your specific scenario, you can look at the code available under app/modules/users/services/firebase.app.auth.service.js

  4. For others who may be reading this, the end result of following the instructions is a single js file of 48,000 characters, minified (possibly encrypted) , containing all the important code from module code to controllers to plugins to configurations etc all strung together . You do not get a readable set of organised files from which you can extract and tailor the code you need and there is no clear way to remove features and pages you do not want.

    1. I guess you have not really understood our previous message. The entire code base is highly modularized and neatly organized into multi folders. Please have a look at app/modules folder. Under these folders, you will find multiple subfolders like config, controllers, css, img, services, views, etc. Each of these subfolder has multiple css, controllers, services, views. It is much more modularized than the Ionic 1 framework offers. Your working folder should be app folder and not www folder. The files in the www are auto generated by the gulp build system. If you want to change the gulp tasks, you can easily do that in gulpfile.js. Since, by default the gulp tasks minify and rev the generated file, you can always comment the lines which do the same. This is also highlighted as ‘//comment this line if debugging is required’
      Your posting just highlights that you are not aware of framework work or a build system works.

  5. OK. So I have found signin.modal.app.view.html and it requires this function:-

    Hunting it down I find it at login.app.controller.js. This in itself relies on a bunch of functions such as $cordovaSplashscreen and more importantly “Auth”.

    Auth can be found under auth.app.service.js but refers to “FireAuth”.

    FireAuth is managed by firebase.app.auth.services.js. It requires a new set of functions such as $cordovaFacebook (the plugin). OK, so we need to go through each of these and be sure they are present. But where are the credentials? My credentials, the one that holds my Firebase account and my facebook account?

    At a guess here
    firebase.initializeApp(AppConfig.firebaseConfig);
    var _fAuth = $firebaseAuth();

    var _providerObjs = {};
    _providerObjs.twitter = firebase.auth.TwitterAuthProvider;
    _providerObjs.facebook = firebase.auth.FacebookAuthProvider;
    _providerObjs.google = firebase.auth.GoogleAuthProvider;

    So where are they picked up from? After 40 minutes of trying to work this out, I still do not know. Of course they are there, but I am not sure this is want your customers want is it? To have to decipher your code.

    What I want is an HTML page, and index.html. an app.js, a controller.js and an xml file to show me the required plugins.

    At a guess I would say I needed to include firebaseAuth in the index.html like this:-

    and then to include a file with the firebase credentials in another js file. Like this:-

    But that is because I know about firebase. When it comes to facebook I am relying on you. So what do I need to do to get your facebook code (in particular) working, in terms of an index.html, controller.js, services.js, config.xml and html page? I believe to add these instructions to your current ones will change this $30 purchase from being obtuse and in my case unusable to being invaluable, so in the end it is up to you whether you unveil the power of your code to us by providing these instructions.

    1. I guess you do not want to read through the complete documentation that is available in the README.md along with the links that it points to. For your convinience, I am pasting it here again
      http://blog.codekart.com/ionicplus-configurations/
      http://blog.codekart.com/ionicplus-development-guidelines/

      If you go through them, you will get an overview about the entire project structure, various configurations, the plugins that needs to be installed.

      We think there is sufficient documentation available for this starter app which has tons of feature available. The same has been been used by hundreds of our customer successfully.
      I am surprised to see that you find it insufficient for your usage. Maybe you are looking for a comment per line of the code which is not possible by any means nor we had any such experience with thousands of developers whom we have interacted with.

  6. OK, to cut the question down, where do I find the credentials that is picked up by the facebook and firebase functions? My credentials. I need to separate these out from your code so I can start my own. If this is in your instructions then please lead me to that part of them because I do not see them as yet.

Leave a Reply

Your email address will not be published. Required fields are marked *