https://github.com/josuemodev/ionic-store

https://github.com/josuemodev/ionic-store

angular angular-si firebase-storage firestore-database ionic standalone-components

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/josuemodev/ionic-store
• Owner: JosueMoDev
• Created: 2024-08-06T05:36:08.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-10T19:04:55.000Z (6 months ago)
• Last Synced: 2024-09-26T09:02:21.779Z (4 months ago)
• Topics: angular, angular-si, firebase-storage, firestore-database, ionic, standalone-components
• Language: TypeScript
• Homepage:
• Size: 404 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# My Store

## Descripción

My Store es una aplicación web para gestionar ventas en un restaurante.

## Stack

- Angular

- Ionic

- Firebase

## Creación del Proyecto con Angular/Ionic

1. **Instalar Angular CLI**:

    ```sh

    npm install -g @angular/cli

    ```

2. **Instalar Ionic CLI**:

    ```sh

    npm install -g @ionic/cli

    ```

3. **Crear un nuevo proyecto Ionic**:

    ```sh

    ionic start quanto-store blank --type=angular

    ```

4. **Navegar al directorio del proyecto**:

    ```sh

    cd quanto-store

    ```

## Instalación de Dependencias

1. **Instalar dependencias del proyecto**:

    ```sh

    npm install

    ```

## Configuración de Firebase

1. **Crear un proyecto en Firebase**:

    - Ve a [Firebase Console](https://console.firebase.google.com/).

    - Haz clic en "Agregar proyecto" y sigue las instrucciones.

2. **Agregar Firebase a tu proyecto Ionic**:

    - En la consola de Firebase, selecciona tu proyecto.

    - Haz clic en el ícono de configuración junto a "Descripción general del proyecto" y selecciona "Configuración del proyecto".

    - En la pestaña "Tus apps", selecciona el ícono web (>) para configurar Firebase Hosting para tu app web.

    - Sigue las instrucciones para registrar tu app y obtén el código de configuración de Firebase.

3. **Instalar Firebase y AngularFire**:

    ```sh

    npm install firebase @angular/fire

    ```

4. **Agregar configuración de Firebase a tu proyecto**:

    - Crea un archivo `src/environments/environment.ts` y `src/environments/environment.prod.ts` con la configuración de Firebase obtenida:

    ```typescript

    // src/environments/environment.ts

    export const environment = {

      production: false,

      firebaseConfig: {

        apiKey: "YOUR_API_KEY",

        authDomain: "YOUR_AUTH_DOMAIN",

        projectId: "YOUR_PROJECT_ID",

        storageBucket: "YOUR_STORAGE_BUCKET",

        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

        appId: "YOUR_APP_ID"

      }

    };

    ```

    ```typescript

    // src/environments/environment.prod.ts

    export const environment = {

      production: true,

      firebaseConfig: {

        apiKey: "YOUR_API_KEY",

        authDomain: "YOUR_AUTH_DOMAIN",

        projectId: "YOUR_PROJECT_ID",

        storageBucket: "YOUR_STORAGE_BUCKET",

        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

        appId: "YOUR_APP_ID"

      }

    };

    ```

5. **Configurar AngularFire en tu aplicación con standalone components**:

    - Modifica el archivo `src/main.ts` para inicializar Firebase:

    ```typescript

    import { bootstrapApplication } from '@angular/platform-browser';

    import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';

    import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

    import { routes } from './app/app.routes';

    import { AppComponent } from './app/app.component';

    import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

    import { provideFirestore, getFirestore } from '@angular/fire/firestore';

    import { provideStorage, getStorage } from '@angular/fire/storage';

    import { environment } from './environments/environment';

    import { getAuth, provideAuth } from '@angular/fire/auth';

    import { provideHttpClient } from '@angular/common/http';

    bootstrapApplication(AppComponent, {

      providers: [

        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

        provideIonicAngular(),

        provideRouter(routes, withPreloading(PreloadAllModules)),

        provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),

        provideFirestore(() => getFirestore()),

        provideHttpClient(),

        provideAuth(() => getAuth()),

        provideStorage(() => getStorage()),

      ],

    }).catch((err) => console.error(err));

    ```

## Ejecutar la Aplicación

1. **Iniciar la aplicación Ionic**:

    ```sh

    ionic serve

    ```

    ```sh

    ng serve

    ```

## Ejecutar Pruebas

1. **Ejecutar pruebas unitarias**:

    ```sh

    ng test

    ```

2. **Ejecutar pruebas de extremo a extremo (E2E)**:

    ```sh

    ng e2e

    ```

## Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo `LICENSE` para obtener más detalles.