chsakell / Ionic2 Angular2 Firebase

Building hybrid mobile applications using Ionic 2 and Firebase

Blog post: Building hybrid mobile apps using Ionic 2 and Firebase

Frameworks - Tools - Libraries

• Ionic 2
• Angular 2
• Firebase
• TypeScript

Forum app's features

• Image capture / upload from Camera and Photo album
• Network detection
• Open in app browser
• SQLite support and offline operation
• Lot's of Ionic's 2 components (cards, lists, action sheets, modals, toast, etc..)

Installation instructions - Part 1 (Firebase)

1. Login in Firebase with your Google account.

2. Click the Go to console button and press CREATE NEW PROJECT.

3. Name the project ForumApp and choose your country.

4. While in the ForumApp console, click the Auth button and select the SIGN-IN METHOD tab. Enable the Email/Password provider and click SAVE.

5. Click Database from the left menu and select the RULES tab. Set the JSON object as follow:

{ "rules": { ".read": "auth != null", ".write": "auth != null", "statistics" : { "threads": { // /statistics/threads is readable by the world ".read": true, // /statistics/threads is writable by the world ".write": true } }, "threads" : { // /threads is readable by the world ".read": true, // /threads is writable by the world ".write": true }
} } ```

6. Click Storage from the left menu and select the RULES tab. Set the JSON object as follow:

function() { service firebase.storage { match /b/forumapp-your_id.appspot.com/o { match /{allPaths=**} { allow read; allow write: if request.auth != null; } } } ``` Make sure to replace the your_id with your's.

Installation instructions - Part 2 (Ionic 2 Forum app)

1. Clone or download the source code of this repository. 2. Open the forum app in your IDE of your preference. 3. Run the following commands in the exact order.

```

npm install -g ionic npm install -g cordova npm install ionic plugin add com-sarriaroman-photoviewer ionic plugin add cordova-plugin-camera ionic plugin add cordova-plugin-inappbrowser ionic plugin add cordova-sqlite-storage ionic plugin add cordova-plugin-network-information ionic plugin add cordova-plugin-splashscreen ```

Running the app

• In Firebase ForumApp project console, click the Add Firebase to your web app button.
• Copy the contents and paste them in the src/index.html file (you will find a Paste your settings here section)
• If you want to run the app in browser simply run the following command.
  • ionic serve --lab
• If you want to build and run the app on your device, first you need to add the respective platform.
  1. ionic platform add android
  2. ionic platform add ios
• Next you need to install some prerequisites depending on the type of your device.
  1. Android Platform Guide
  2. iOS Platform Guide
  3. Windows Platform Guide
• Set your device properly, for example here's what you need to do first for running the app in an Android device
• Connect your device to your computer
• Run the following command depending on your device type.
  • ionic run android
  • ionic run ios

Forum app preview

Donations

For being part of open source projects and documenting my work here and on chsakell's blog I really do not charge anything. I try to avoid any type of ads also.

If you think that any information you obtained here is worth of some money and are willing to pay for it, feel free to send any amount through paypal.

Paypal

Follow chsakell's Blog

Facebook	Twitter
Microsoft Web Application Development

License

Code released under the MIT license.