News360: Ionic 3 & Firebase Starter Template by Pereless360

Use this ionic theme template to develop your own news app in Ionic 3 and Firebase

  • Starter360 Features:
  • User Authentication
  • Latest News REST API Service
  • Save & Delete Articles
  • 5+ News Sources (Easily Customize)
  • Unique Usernames
  • Profile Pictures
  • "Time Ago" from Articles
  • Starter360 Pages:
  • Home
  • Articles
  • Profile
  • Login
  • Reset Password
  • Signup
  • Settings
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap

Getting Started

Step 1. Download the Starter Kit

Go to Ionc Marketplace to purchase the Template
BUY NOW

Step 2. Create a New App

In order to use the starter-kit, first start up a new app in the Ionic CLI (it doesn't matter which Ionic Template we use because we are replacing the SRC files):

		
			ionic start AppName --v2
		
	

Step 3. Replace SRC Folder

After you purchased the Template on Ionic Marketplace, take the downloaded SRC files and replace them with the files in your New App that you just created in Ionic CLI.

Step 4. Create Your NEWS API Account

Create a News Api Account to start streaming news to your app. Head over to the NEWS API Website and register for a FREE Api Key:

A. Activate NEWS Api Key:

With the code your api key from NewsApi, it's time to initialize it in your Ionic 3 App by going to src/providers/news-data.ts and Replace Api Key in the getNews() function:

		
		...
        //Replace with your News API Key 
        getNews(newsSource) {
            let url = 'https://newsapi.org/v1/articles?source=' + newsSource + '&sortBy=top&
            apiKey=55d2588e94cb44c6a98b2cb049d3b8e5';
            let response = this.http.get(url).map(res => res.json());
            return response;
        }
		...
		
	

Step 5. Connect Your Firebase Account

To start using Firebase head over to the Firebase Website and in your console Create a New Project:

A. Create a Firebase Project

Next you'll have to go to Firebase to set up the backend of your app. Just create a project by giving it a name:

B. Get Firebase Project Details

After you created your Project on Firebase it will open up it's Dashboard. Click on 'Add Firebase to your Web App' and Copy and paste the snippet below:

C. Import & Intialize Firebase to your Ionic App

Install AngularFire2 Package from command prompt:

		
			npm install angularfire2@2.0.0-beta.6 --save
		
	

Import & Intialize AngularFire2:

With the code you just copied from Firebase, it's time to initialize it in your Ionic 3 App by going to src/app/app.module.ts and importing it from Firebase:

		
		import { NgModule, ErrorHandler } from '@angular/core';
		import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
		import { MyApp } from './app.component';
		import { HomePage } from '../pages/home/home';
		
		// Import AngularFire2 Module
		import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
		
		// AngularFire2 Settings (REPLACE THESE SETTINGS from Firebase)
		export const firebaseConfig = {
			apiKey: "YOUR_FIREBASE_API_KEY",
			authDomain: "example.firebaseapp.com",
			databaseURL: "https://example.firebaseio.com",
			storageBucket: "",
			messagingSenderId: ""
		};

		const myFirebaseAuthConfig = {
			provider: AuthProviders.Password,
			method: AuthMethods.Password
		}

		...
		//Don't forget to Import AngularFire here
		imports: [
			IonicModule.forRoot(MyApp),
			AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
		],
		
	

Step 6. Install Plugins

Still on your command prompt in your App directory, install the cordova plugins needed for app:

		
			cordova plugin add cordova-plugin-camera
		
	

You're all Set! Now Run your App

		
			ionic serve
		
	

That's it, Congrats!

Subscribe to Newsletter for Upcoming Ionic 3 & Firebase App Posts.