Month: March 2018

ionShopping

ionShopping is a intuitive, clean and professional hybrid app, perfect for e-commerce, online shopping, etc. It is a completely functional template/starter for ionic developers to create a multi-platform shopping app with shopping cart, custom powerful push notifications, and a custom Admin panel to manage the orders, the list of products, the images, etc.

What am I getting?

When you download ionShopping you’ll obtain the source code of the ionic app and the angular dashboard admin panel, plus an awesome documentation that will walk you through the setup process, step by step, the firebase setup, the setup of the environment, etc. The process should be smooth, but if you encounter any issue with the setup of the project, it will be my pleasure to assist you via email, my email is on the documentation.

Features:

ionic app:
– Login (with email/pass and social login with facebook and google plus)
– Recover password
– Sign up
– Tabs system to provide a more clean experience to the user
– Product list (manageable from the admin panel)
– Items details section
– Awesome order system/Shopping cart + checkout with paypal integrated
– Call number native and send SMS from the landing page to contact the store
– Push notifications (with custom dashboard) for promotions with promo landing page
– Editable profile

Admin dashboard:
– Manage all the items, details, images, prices, etc from the amazing custom admin panel included
– Tracking Order (shopping cart), from the admin panel you’ll see and manage the status of the order (purchased, processing, delivered).
– Powerful and custom Push Notification system to send notifications to user with rich text and images, to inform or promote offers discounts, etc. You can run a promotion from an start date to an end date, you can also create and save notification to be sent in the future
– Technologies used on the dashboard: Angular 4, Cloud firestore

Ionic App screenshots










Admin dashboard demo

The admin dashboard source code is included with the ionic code

Try before you invest

Note:
The notification and the social login will only work on an emulator or a cellphone

Get it from here:
https://market.ionicframework.com/starters/ionshopping/

ionRestaurant

ionRestaurant is a intuitive, clean and professional hybrid app, perfect for Restaurant, Bar, Bakery, etc. It is a completely functional template/starter for ionic developers to create a multi-platform restaurant app with food ordering system (shopping cart), custom powerful push notifications, and a custom Admin panel to manage the orders, the menu, the images, etc.

What am I getting?

When you download ionRestaurant you’ll obtain the source code of the ionic app and the angular dashboard admin panel, plus an awesome documentation that will walk you through the all setup process, step by step, the firebase setup and the setup of the environment, etc. The process should be smooth, but if you encounter any issue with the setup of the project, it will be my pleasure to assist you, my email is on the documentation.

Features:

ionic app:
– Login (with email/pass and social login with facebook and google plus)
– Recover password
– Sign up
– Tabs system to provide a more clean experience to the user
– Restaurant Menu (manageable from the admin panel)
– Items details section
– Awesome order system/Shopping cart + checkout with paypal integrated
– About us + contact section (With maps, gps, call number native)
– Push notifications for promotions with promo landing page
– Profile editable

Admin dashboard:
– Manage all the menu, images, plates, prices, etc from the amazing custom admin panel included
– Tracking Order (shopping cart), from the admin panel you’ll see and manage the status of the order (purchased, processing, delivered).
– Powerful and custom Push Notification system to send notifications to user with rich text and images, to inform or promote offers discounts, etc. You can run a promotion from an start date to an end date, you can also create and save notification to be sent in the future
– Technologies used on the dashboard: Angular 4, Cloud firestore

Ionic App screenshots

Admin panel screenshots

Try before you invest

Note:
The notification and the social login will only work on an emulator or a cellphone

Get it from here:
https://market.ionicframework.com/starters/ionrestaurant

ionPushemPro

You can use this starter to create your application on top of it and send and receive notifications with your own admin dashboard backend.
If you are a freelance developer, you can offer the dashboard backend to your clients as a plus, when you develop applications like e-commerce, for restaurants, anything where you need to communicate to the users about new features, products, promotions, etc.

The admin backend source code is included with this starter

With this starter you will be able to:

  • Send notifications to individual users
  • Create user groups and send notifications to group of users
  • Create channels/topics for the ionic user to opt-in/out and receive notifications via channesl
  • There is an option for the ionic user to create local notification (this is a generic functionality you should adapt it to your own needs)
  • Firebase and social login (google and facebook) with the ability to update the user’s profile

Watch the following video for more info:

Live ionic demo

Note:
The notification and the social login will only work on an emulator or a cellphone

Get it from here:
https://market.ionicframework.com/starters/ionpushempro

Ionic CRUD Application with Cloud Firestore

ionic crud
In this tutorial we are going to create the most simplest ionic CRUD(Create, Read, Update and Delete) using Cloud firestore.

At the end of this tutorial you’ll be able to:
-Setup a firebase account.
-Configure firestore database permissions.
-Create an ionic app using ionic cli (command line tool).
-Create, Read, Update and Delete to a firestore database from an ionic app.

What is cloud firestore?

Lets set up a firebase account.

Go to https://console.firebase.google.com and login with your google account or create one.

Enter the name of the project and click on Add Firebase to your web app.

We are going to use this data later, this will allow us to connect to firebase.

Next step is to configure Cloud Firestore, follow the following steps in the image, and start in test mode for now, to keep it simple.

For more rules you can visit here: https://cloud.google.com/firestore/docs/security/rules-query

Before we get into the ionic part, lets see how a firestore database structure looks like:

This example was taken from the ionAppFull4Pro ionic starter.
In this example you can see that the firestore data model is based on collections and documents, and you can nest collection within documents:

for more details you can visit here https://firebase.google.com/docs/firestore/data-model.

Lets create the ionic CRUD project.

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal. Follow the Android and iOS platform guides to install required tools for development. For more info go here: https://ionicframework.com/getting-started.

npm install -g cordova ionic

Now lets create the ionic app

ionic start crud blank

When the cli finish to create the files, do:

 > cd crud
 > ionic serve

To go to the new folder created, then run “ionic serve” to make sure that everything when correctly. This is how it should looks like:

Now, open the source code on your favorite editor, I prefer VS code. The source code should look like this:

Run the following command to install firebase dependency:

npm install firebase --save

We need to configure firebase on our app, for this we are going to need the config variable from previous step.

  var config = {
    apiKey: "<your key>",
    authDomain: "<your key>",
    databaseURL: "<your key>",
    projectId: "<your key>",
    storageBucket: "<your key>",
    messagingSenderId: "<your key>"
  };
firebase.initializeApp(config);

Insert the config variable on the app.module.ts for that lest add the firebase dependency.

...
import * as firebase from 'firebase';

const config = {
  apiKey: "<your key>",
  authDomain: "<your key>",
  databaseURL: "<your key>",
  projectId: "<your key>",
  storageBucket: "<your key>",
  messagingSenderId: "<your key>"
};
firebase.initializeApp(config);

...

Go to the home.html and insert this code.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Crud example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
    <ion-item>
        <ion-label floating>Message title :</ion-label>
        <ion-input type="text" value="" [(ngModel)]="model.title"></ion-input>
      </ion-item>            
      <ion-item>
        <ion-label floating>Message body :</ion-label>
        <ion-textarea   type="text" row="10" [(ngModel)]="model.text"></ion-textarea>
      </ion-item>
      <ion-item>
          <button type="button" (click)="addMessage()" ion-button full >Submit</button>
      </ion-item>
</ion-list>

  <ion-card>
    <ion-card-header>
      Swipe item to the left to delete or edit
    </ion-card-header>
  </ion-card>
  <ion-list>
    <ion-item-sliding *ngFor="let message of messages">
      <ion-item>
        <h3>title: {{message.title}}</h3>
        <p>body: {{message.text}}</p>
      </ion-item>
      <ion-item-options>
        <button ion-button color="danger" (click)="deleteMessage(message.$key)">
        <ion-icon name="ios-trash"></ion-icon>
        delete
      </button>
      <button ion-button color="success" (click)="updateMessage(message)">
          <ion-icon name="ios-create"></ion-icon>
          edit
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

</ion-content>

We are using an *ngFor to generate all the items on the list, we are creating sliding items so we can set a button to delete the item.

We need to add the methods for the ionic CRUD operation (got it from the ionAppFull4Pro project).

  getAllDocuments(collection: string): Promise<any> {
    return new Promise((resolve, reject) => {
        this.db.collection(collection)
            .get()
            .then((querySnapshot) => {
                let arr = [];
                querySnapshot.forEach(function (doc) {
                    var obj = JSON.parse(JSON.stringify(doc.data()));
                    obj.$key = doc.id
                    console.log(obj)
                    arr.push(obj);
                });

                if (arr.length > 0) {
                    console.log("Document data:", arr);
                    resolve(arr);
                } else {
                    console.log("No such document!");
                    resolve(null);
                }


            })
            .catch((error: any) => {
                reject(error);
            });
    });
}

deleteDocument(collectionName: string, docID: string): Promise<any> {
  return new Promise((resolve, reject) => {
      this.db
          .collection(collectionName)
          .doc(docID)
          .delete()
          .then((obj: any) => {
              resolve(obj);
          })
          .catch((error: any) => {
              reject(error);
          });
  });
}

addDocument(collectionName: string, dataObj: any): Promise<any> {
  return new Promise((resolve, reject) => {
      this.db.collection(collectionName).add(dataObj)
          .then((obj: any) => {
              resolve(obj);
          })
          .catch((error: any) => {
              reject(error);
          });
  });
}

updateDocument(collectionName: string, docID: string, dataObj: any): Promise<any> {
  return new Promise((resolve, reject) => {
      this.db
          .collection(collectionName)
          .doc(docID)
          .update(dataObj)
          .then((obj: any) => {
              resolve(obj);
          })
          .catch((error: any) => {
              reject(error);
          });
  });
}

Add the methods used by the view to add, edit,list and delete items:

  loadData(){
    this.getAllDocuments("messages").then((e)=>{
      this.messages = e;
  });
  }

addMessage(){
    if(!this.isEditing){
    this.addDocument("messages", this.model).then(()=>{
      this.loadData();//refresh view
    });
  }else{
    this.updateDocument("messages", this.model.$key, this.model).then(()=>{
      this.loadData();//refresh view
    });
  }
  this.isEditing = false;
  //clear form
  this.model.title = '';
  this.model.text = '';
}

updateMessage(obj){
  this.model = obj;
  this.isEditing = true;
}

deleteMessage(key){
  this.deleteDocument("messages", key).then(()=>{
    this.loadData();//refresh view
    this.isEditing = false;
  });
}

Now you can run:

ionic serve

The result should be something like this:

You can download the full source code from here:
https://github.com/jomendez/ionic-firestore-crud-example

Happy coding!!