Kiwi – Ionic 4 eCommerce with Angular Firebase CMS

Introduction

Kiwi is an open-source, free, and highly customizable Ionic 4 eCommerce template that allows you to build a robust and scalable online store using Angular and Firebase as the backend. In this tutorial, we will cover the step-by-step process of setting up and configuring Kiwi with Firebase as the CMS (Content Management System). By the end of this tutorial, you will have a fully functional eCommerce store with a user-friendly interface, product management, and order tracking.

Prerequisites

Before starting this tutorial, make sure you have the following installed on your machine:

1. Node.js (https://nodejs.org/en/download/)
2. npm (comes bundled with Node.js)
3. Angular CLI (install using npm install -g @angular/cli)
4. Ionic CLI (install using npm install -g @ionic/cli)
5. Firebase CLI (install using npm install -g firebase-tools)
6. A code editor or IDE of your choice

Step 1: Set up Firebase

To set up Firebase, follow these steps:

1. Create a new Firebase project by going to the Firebase console (https://console.firebase.google.com/) and clicking on "Add project".
2. Fill in the required information, such as project name and country.
3. Click on "Create project" to create the project.
4. Once the project is created, click on "Add Firebase to your web app" and copy the Firebase configuration file (firebaseConfig.js) to a safe location.
5. Install the Firebase CLI using npm install -g firebase-tools.
6. Initialize Firebase in your project by running firebase init in your terminal and following the prompts.

Step 2: Set up Kiwi

To set up Kiwi, follow these steps:

1. Clone the Kiwi repository using git clone https://github.com/ionic-team/kiwi.git or download the zip file from the GitHub repository.
2. Install the required dependencies by running npm install in the Kiwi directory.
3. Install the Ionic CLI using npm install -g @ionic/cli.
4. Run ionic serve to start the Kiwi app in your browser.

Step 3: Configure Kiwi with Firebase

To configure Kiwi with Firebase, follow these steps:

1. Create a new file called firebase.config.js in the Kiwi root directory and add the following code:

   export default {
   apiKey: '<API_KEY>',
   authDomain: '<AUTH_DOMAIN>',
   databaseURL: '<DATABASE_URL>',
   projectId: '<PROJECT_ID>',
   storageBucket: '<STORAGE_BUCKET>',
   messagingSenderId: '<MESSAGING_SENDER_ID>'
   };

   Replace the <API_KEY>, <AUTH_DOMAIN>, etc. with the values from your Firebase configuration file.

2. Update the environments.ts file to include the Firebase configuration:

   export const environment = {
   production: false,
   firebase: {
   apiKey: '<API_KEY>',
   authDomain: '<AUTH_DOMAIN>',
   databaseURL: '<DATABASE_URL>',
   projectId: '<PROJECT_ID>',
   storageBucket: '<STORAGE_BUCKET>',
   messagingSenderId: '<MESSAGING_SENDER_ID>'
   }
   };

3. Update the app.module.ts file to include the Firebase authentication module:

   
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { FirebaseAuthModule } from 'firebase-auth';

@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, FirebaseAuthModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

4. Run `ionic serve` to start the Kiwi app in your browser and verify that the Firebase authentication is working correctly.

**Step 4: Configure Kiwi eCommerce**

To configure Kiwi eCommerce, follow these steps:

1. Update the `ecommerce.config.ts` file to include the necessary eCommerce settings:
```typescript
export const ecommerceConfig = {
  currency: 'USD',
  currencySymbol: '$',
  taxRate: 0.08,
  shippingOptions: [
    {
      id: 'standard',
      name: 'Standard Shipping',
      price: 5.99
    },
    {
      id: 'express',
      name: 'Express Shipping',
      price: 9.99
    }
  ]
};

1. Update the product.service.ts file to include the necessary product data:

   
   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { Product } from './product.model';

@Injectable({ providedIn: 'root' }) export class ProductService { private apiUrl = 'https://your-firebase-database-url.firebaseio.com/products.json';

constructor(private http: HttpClient) { }

getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.apiUrl); }

getProduct(id: string): Observable { return this.http.get(${this.apiUrl}/${id}.json); }

createProduct(product: Product): Observable { return this.http.post(this.apiUrl, product); }

updateProduct(id: string, product: Product): Observable { return this.http.put(${this.apiUrl}/${id}.json, product); }

deleteProduct(id: string): Observable { return this.http.delete(${this.apiUrl}/${id}.json); } }

3. Update the `product.model.ts` file to include the necessary product data:
```typescript
export interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  image: string;
  stock: number;
}

1. Update the cart.service.ts file to include the necessary cart data:

   
   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { CartItem } from './cart-item.model';

@Injectable({ providedIn: 'root' }) export class CartService { private apiUrl = 'https://your-firebase-database-url.firebaseio.com/cart.json';

constructor(private http: HttpClient) { }

getCartItems(): Observable<CartItem[]> { return this.http.get<CartItem[]>(this.apiUrl); }

addCartItem(item: CartItem): Observable { return this.http.post(this.apiUrl, item); }

updateCartItem(id: string, item: CartItem): Observable { return this.http.put(${this.apiUrl}/${id}.json, item); }

deleteCartItem(id: string): Observable { return this.http.delete(${this.apiUrl}/${id}.json); } }

5. Update the `cart-item.model.ts` file to include the necessary cart item data:
```typescript
export interface CartItem {
  id: string;
  productId: string;
  quantity: number;
}

Step 5: Run the Kiwi eCommerce App

To run the Kiwi eCommerce app, follow these steps:

1. Run ionic serve to start the Kiwi app in your browser.
2. Verify that the Kiwi app is working correctly by navigating to the http://localhost:4200 URL in your browser.
3. Create a new product by clicking on the "Add Product" button and filling in the necessary information.
4. Add the product to the cart by clicking on the "Add to Cart" button.
5. View the cart by clicking on the "Cart" button and verify that the product is added correctly.

Conclusion

In this tutorial, we have covered the step-by-step process of setting up and configuring Kiwi with Firebase as the CMS. We have also covered the configuration of Kiwi eCommerce and how to run the app. By following this tutorial, you should now have a fully functional eCommerce store with a user-friendly interface, product management, and order tracking.