Banking Light – Crypto – Expenses | Mobile App Template | Ionic 7 | Capacitor 5

Here's a complete tutorial on using the Banking Light - Crypto - Expenses | Mobile App Template | Ionic 7 | Capacitor 5:

Introduction

This tutorial will guide you on how to use the Banking Light - Crypto - Expenses | Mobile App Template built with Ionic 7 and Capacitor 5 to create a mobile app that allows users to manage their banking, crypto, and expenses. This template includes functionalities such as login and signup, wallet management, cryptos management, expense categorization, and transaction records.

Getting Started with the Template

To begin, you'll need to download the Banking Light - Crypto - Expenses | Mobile App Template from the repository. Once you've done that, extract the file into a new directory on your computer.

Next, follow these steps to set up the project:

1. Open the terminal and navigate to the directory where you extracted the template.
2. Run the command npx cap init to initialize the Capacitor environment.
3. Run the command npx ion init to initialize the Ionic project.
4. Run the command ng build to build the iOS and Android apps.
5. Run the command npx cap open browser to open the template in the browser.

Once you've set up the project, you can view the template in the browser by opening http://localhost:4200.

Setting Up the Templates

The Banking Light - Crypto - Expenses | Mobile App Template comes with five templates:

1. Wallet Detail: This template displays details about a specific wallet, including its balance and the cryptos it holds.
2. Crypto Detail: This template displays details about a specific crypto, including its name, symbol, and current price.
3. Expense Category: This template displays a list of expense categories, along with the total amount spent under each category.
4. Transaction Record: This template displays a list of past transactions, including the type of transaction (e.g. deposit, withdrawal) and the date of transaction.
5. Home Dashboard: This template displays information about the user's recent transactions, balance, and cryptos held.

In this tutorial, we will show you how to use and customize these templates to match your needs.

Authenticating Users

One of the most important tasks in any banking app is user authentication. The template comes with a simple sign-up and login system based on Ionic's built-in authentication features. Here are the steps to authenticate your users:

1. Edit the src/app/environment.ts file and make sure the firebase config is set up:

   export { environment } from './env/environment';

   Add the following code to replace the existing config:

   
   import { TestBed } from '@angular/core/testing';
   import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamics-testing';
   import { FireBaseConfig } from '../app/environment';
   import 'firebase/auth';

TestBed.configureTestingModule({ imports: [BrowserDynamicTestingModule.forRoot()], providers: [], });

const firebaseConfig: FireBaseConfig = { apiKey: ' YOUR_API_KEY', authDomain: 'YOUR_AUTH_DOMAIN', databaseURL: 'YOUR_DATABASE_URL', projectId: ' YOUR_PROJECT_ID', storageBucket: 'YOUR_STORAGE_BUCKET', messagingSenderId: 'YOUR_MESSAGING_SENDER_ID' };

firebase.initializeApp(firebaseConfig);

Here, replace the `apikey`, `authDomain`, `databaseURL`, etc. with your own FireBase configuration.

2. Create a new component file `src/app/auth.components.ts`:
```typescript
import { Component, OnInit } from '@angular/core';
import { User } from 'firebase';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.css'],
})
export class AuthPage implements OnInit {
  isAuthenticated = false;

  login() {
    this firebase.auth().signInWithEmailAndPassword()
     .then(() => {
        this.isAuthenticated = true;
      })
     .catch(error => alert(error.message));
  }
}

Here's a simple login function which checks if the user already authorized. If they are we set isAuthenticated to true else we stay on the same page:

1. Now we integrate this login page with others. For that we include this page into the Main page:

   <div>
   <app-tabs>
   <ion-nav [root]="root"><ion-nav-bar><app-auth></app-auth>
   
   </ion-nav-button>
   </div>

   Creating Wallet, Crypto, Expense Category

Here's a simple walk-through on how to store and retrieve your wallet, crypto and expense category.

1. To store crypto and expense category,use the ngOnInit(); lifecycle event. By default, all the stored data is deleted after reload, if you want persisted data you have to work with the browser storage but this template will guide using Firebase.

Conclusion:

This is the entire beginner's guide for Banking light - Crypto - Expenses Application. We learned how set up the environment, then we explored user authentication & then how to store wallet, crypto,expense category.

The power of the template is with you, customize and mold it as you want make it more advance with integrating other libraries.