IonicBucket Social App Documentation
  • Complete Functional Social App Based on Firebase & Ionic framework
  • Prerequisite
  • Environment Setup
  • Run
  • Build For Android
  • Build For IOS
  • Testing App
  • Firebase Configuration
  • Admob Configuration
  • Facebook Plugin
  • QuickStart- Step By Step Guide
  • Features
  • Icons and Splash Screens
Powered by GitBook
On this page
  • Step One (Recommended)
  • Step Two (Download & Install Dependencies)
  • Step Three (Setup Firebase)
  • Step Four (Setup Admob)
  • Step Five (Firebase Authentication)
  • Step Six (Running)

QuickStart- Step By Step Guide

PreviousFacebook PluginNextFeatures

Last updated 6 years ago

Step One (Recommended)

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal.

npm install -g cordova ionic

Step Two (Download & Install Dependencies)

  • Unzip the downloaded Ionicbucket project and open a terminal window.

  • `cd` into the project root directory and install dependent packages by running `npm install`

npm install

Step Three (Setup Firebase)

  • Change the configuration of firebase with your firebase info in file `src/config/firebase.ts` (const firebaseConfig)

  • If you haven't created yet a project on firebase, then get started by filling the required fields and then choose the platform you want (android/ios/web)

  • Details of create firebase account

    • Goto firebase console -

    • Click on `Add new project`

    • It’s going to ask you create a new project

    • Click on ‘Create Project’ Button, It’s create a new project Click on this new project box it’s open details of this project with lots of options. Then choose ‘Add Firebase to your web app’ and click on it. Its provide you firebase configurations information, copy this configurations infos.

    • Open Ionicbucket project and go into project `src/config/firebase.ts` file and replace firebaseConfig with your configuration information.

  • Go to and change the rules code to:

{
  "rules": {
    ".read": true,
    ".write": "auth != null",
    "posts": {
      "$uid": {
        ".indexOn": ["createdDate"]
      }
    },
    "newsfeed": {
    	"$uid": {
        ".indexOn": ["uid"]
      }
    },
    "friend-request": {
      "send": {
        "$uid": {
          ".indexOn": [".value"]
        }
      },
      "received": {
        "$uid": {
          ".indexOn": [".value"]
        }
      }
    },
    "connections": {
      "followers": {
        "$uid": {
          ".indexOn": ["userId"]
        }
      }
    }
  }
}

Step Four (Setup Admob)

Step Five (Firebase Authentication)

For users to sign up with an email and password through your application, you first need to enable it in the Firebase.

  • Initialized your app into your Firebase Console

  • Go into inside the Authentication `SIGN-IN Method` tab

  • Enable the Email/Password and Facebook authentication method

  • For Facebook enable you must need to enter facebook APP ID and App Secret and OAuth redirect URI.

Step Six (Running)

Desktop Browser Testing

cd ionicbucket-socialapp
ionic serve

Simulator testing

ionic build ios
ionic emulate ios

Testing as a native app

ionic run android
ionic emulate ios

From - , follow the details instruction to setup Admob.

Get Facebook Credentials from

here
https://console.firebase.google.com/
https://console.firebase.google.com/project/{your_project_name}/database/rules
https://ionicbucket.gitbook.io/socialapp/admob-configuration
here