An open API service indexing awesome lists of open source software.

https://github.com/ccextractor/firebase_editor_gsoc


https://github.com/ccextractor/firebase_editor_gsoc

Last synced: 8 months ago
JSON representation

Awesome Lists containing this project

README

          

# Firebase Editor ✏

Firebase Editor is a mobile application built using Flutter and Firebase. It provides an intuitive interface for managing Firebase databases, collections, and documents. The app also includes advanced features like batch operations, real-time notifications, analytics, and a version control system, making it a powerful tool for developers working with Firebase.

---

## Features 📃

- **Comprehensive CRUD Operations**
- Easily create, read, update, and delete documents within your Firebase databases.
- Support for batch operations to perform CRUD actions on multiple records simultaneously.
- Inline editing capabilities for quick modifications.

- **Real-time Notifications**
- Receive instant notifications for any additions, updates, or deletions in your Firebase records.
- Customize notification preferences based on specific collections or documents.
- Leverages Firebase Cloud Messaging and Cloud Functions for efficient and reliable notification delivery.

- **Secure Authentication and Authorization**
- Utilizes Google OAuth 2.0 for secure user authentication.
- Short-lived access tokens ensure enhanced security during data interactions.

- **Search and Filter**
- Powerful search functionality to quickly locate records across projects, databases, and collections.

- **Data Export**
- Export data in popular formats such as JSON for external use and backups.
- Supports bulk data operations with error handling and validation.

- **Data Visualization and Analytics**
- Interactive dashboards providing visual insights into your database operations.
- Monitor key metrics such as user activity, and operation frequencies.

- **Audit Logging and History Tracking**
- Detailed logs of all operations performed within the app, including timestamps and user information.
- Enhances accountability and facilitates debugging by maintaining a comprehensive activity history.

- **Project and Database Management**
- View and manage all your Firebase projects in one centralized interface.
- Navigate through different databases, collections, and documents with ease.

- **User-friendly Interface**
- Clean and intuitive design ensuring a smooth user experience across all functionalities.
- Responsive layouts optimized for various mobile devices and screen sizes.
- In-app help and documentation to guide users through different features and operations.

---

## How the App Works 📲

### Authentication
The app uses Google OAuth 2.0 for user authentication, allowing access to your Firebase projects. A short-lived access token is obtained to interact with your Firebase data securely.

### Data Management
- **Device Tokens**: Temporarily stored to send real-time notifications regarding updates to Firebase projects.
- **Operations Data**: Tracks and stores information about the actions performed within the app, which is used for analytics and user history.

### Scopes Used
- **Google Cloud Platform**: Accesses and manages your Google Cloud data.
- **Cloud Datastore API**: Views and manages your Google Cloud Datastore data.

### User Rights
Users have the right to access, control, and request the deletion of their data. Access granted through Google OAuth 2.0 can be revoked at any time.

### Notifications
The app uses Cloud Functions to handle notifications, ensuring real-time updates on Firebase projects.

---

## How to Use ⚙

### For Detailed Guide, Click the Dropdown

🖥💻 Detailed Guide

#### If you don't have any project in the Firebase or you want to add a new project in Firebase:
1. Go to [Firebase](https://firebase.google.com/)
2. Follow From Step 1 to Step 12

#### If you already have a project in Firebase you want to use, you can skip Step 1 to Step 12.

Step 1 | Step 2
:-------------------------:|:-------------------------:
![step 1](https://drive.google.com/uc?export=view&id=1utx8qu9HsLy09y69QtLVUgAi0BaiK1Xq)|![step 2](https://drive.google.com/uc?export=view&id=1eFJJsgZdvWxDaDUgGWOWPgvPO50Ymxg_)|

Step 3 | Step 4
:-------------------------:|:-------------------------:
![step 3](https://drive.google.com/uc?export=view&id=1GX4QJMlUyZwviyF2R-oC3o5YgHWyqg69)|![step 4](https://drive.google.com/uc?export=view&id=1oWbDd1DK68KtwilsuKl3lmkKK5CRMRsy)|

Step 5 | Step 6
:-------------------------:|:-------------------------:
![step 5](https://drive.google.com/uc?export=view&id=13rStFsHhzn36FBHlfzkiYf3Rz79fIiRY)|![step 6](https://drive.google.com/uc?export=view&id=1-7ftRhbKbPLZSTGkeoNcOXCyfl1YY6uX)|

Step 7 | Step 8
:-------------------------:|:-------------------------:
![step 7](https://drive.google.com/uc?export=view&id=11_sgfeO1zThVLuApMy3ZwgaoApuDGdiZ)|![step 8](https://drive.google.com/uc?export=view&id=1uQVbT5gM9Sw819m2a792of7pjAyNx9-E)|

Step 9 | Step 10
:-------------------------:|:-------------------------:
![step 9](https://drive.google.com/uc?export=view&id=1ImCKaOzpu6Fqv8ymdsFUIHynlOxjIyDd)|![step 10](https://drive.google.com/uc?export=view&id=1elzHQk0iDGIRo85a_rcNo9ZUsX7iLBFm)|

Step 11 | Step 12
|:-------------------------:|:-------------------------:
![step 11](https://drive.google.com/uc?export=view&id=1VWVtc3MsqgjD0o3GnTg9v9YxCIWf_pr6)|![step 12](https://drive.google.com/uc?export=view&id=1OFysCSvCulQ9YBDTx1hw1qjuu8-awora)|

#### Steps for how to use App Interface

App Guide 1
:-------------------------:
![App Guide 1](https://drive.google.com/uc?export=view&id=1pE5u3ClRfrkwZhFv2fByMzra7n1D1kil)|

App Guide 2
:-------------------------:
![App Guide 2](https://drive.google.com/uc?export=view&id=1cQxurTKFdlePekfk1hWEkDqekxEfIYtb)|

App Guide 3
:-------------------------:
![App Guide 4](https://drive.google.com/uc?export=view&id=1htqYdnqIUxn0nL5xBuXdPAZdUxhitr8p)|

App Guide 4
:-------------------------:
![App Guide 4](https://drive.google.com/uc?export=view&id=1arx_E1CPxu1VUTdpye7NZZI62QngFEN3)|

App Guide 5
:-------------------------:
![App Guide 5](https://drive.google.com/uc?export=view&id=1fS3K7VUxxxZLGreSXNTbPd3P50pdFoa0)|

App Guide 6
:-------------------------:
![App Guide 6](https://drive.google.com/uc?export=view&id=1xIvSDKPDt8tuqK3aaT1kQvWRwG1lrpQQ)|

App Guide 7
:-------------------------:
![App Guide 7](https://drive.google.com/uc?export=view&id=1gXd6qcDR-404cpD7PD0qtNsDre1yMDFn)|

App Guide 8
:-------------------------:
![App Guide 8](https://drive.google.com/uc?export=view&id=1eMHVdkl_drW6mG8pmKaheIl9bwzS5e1p)|

App Guide 9
:-------------------------:
![App Guide 9](https://drive.google.com/uc?export=view&id=168nMMrZRHi6YOg4GQYEuGUifiWmOmO-N)|

📷 Screenshots of APP UI

Onboarding Screen 1 | Onboarding Screen 2 | Onboarding Screen 3 | Login Screen
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![splash_screen1](https://drive.google.com/uc?export=view&id=1kdflpZXEZ59Bpc06JiB06nYej5n5jfzM)|![splash_screen2](https://drive.google.com/uc?export=view&id=1n2BAS8UFomljXutzBqXJXE5GcK28wQRH)|![splash_screen3](https://drive.google.com/uc?export=view&id=1B1rxPxmVXLOpFKMXhwtGZPSBXszRLpuT)|![login_screen](https://drive.google.com/uc?export=view&id=1_Tjm9E8mdr6qUx8kDEdf2Xa6A7A3e46d)|

Welcome Screen | Home Screen 1 | Home Screen 2 | Drawer Screen
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![welcome_screen](https://drive.google.com/uc?export=view&id=1cNx8fiF8q-3pkh8FvANJnTKMOb5VwKXQ)|![home_screen1](https://drive.google.com/uc?export=view&id=1WmIMNJ3m_8FhRPsAkKXTdJ6OaGBQjKQ4)|![home_screen2](https://drive.google.com/uc?export=view&id=1tqvh58mmjCFhdNMJN2Ddr2qQ7Iz_CMVy)|![drawer_screen](https://drive.google.com/uc?export=view&id=1bskO3Ih6PdzC9pXYBGplwPZCQc2tPRyt)|

Projects Screen | Databases Screen | Collections Screen | Documents Screen
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![projects_view](https://drive.google.com/uc?export=view&id=1DhSkyip6XkhoGM8I0ViDc8jSwYsS7HgH)|![database_view](https://drive.google.com/uc?export=view&id=1zQHn-wSNmqqD05BW-ClC6iA-5-BWIBDN)|![collection_view](https://drive.google.com/uc?export=view&id=1ju-Z42sYAIjHBcPW31ZqPvFHZf7OKFvM)|![document_view](https://drive.google.com/uc?export=view&id=1Q2exy6sJYFwppV_oxXJ-s56XS3h7TI7f)|

Batch Operations Screen | User Profile Screen | Help Screen | Enable Notification Screen
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![batch_operations_screen](https://drive.google.com/uc?export=view&id=1M8RDcvSuJCuWTJl-ve5PvTqyiYnomkjV)|![user_profile_screen](https://drive.google.com/uc?export=view&id=1V8tLEFhQjVswWi-6WVTySo-Xjf_lg0s2)|![help_screen](https://drive.google.com/uc?export=view&id=1gALxQE-vVwRkFvMDLXAKFT_VvGcNAVd4)|![enable_notifications_screen](https://drive.google.com/uc?export=view&id=1rUD4pqwGnyVc6HrxUJcJJ0H3Tdq92JQQ)|

Edit Field Data Type Screen | Edit Field Value Screen | Add Field Screen | History Screen
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![edit_field_type](https://drive.google.com/uc?export=view&id=1ylkfJdy6mhwFd-njxECJN0j15lzXauRr)|![edit_field_value](https://drive.google.com/uc?export=view&id=1zPhG_hEvddfezZwX2fC9o5Cr77ZbYGK8)|![add_field_view](https://drive.google.com/uc?export=view&id=1nYy6qt-N_VXIOV_dzdewFhc3FJ2j5BjQ)|![history_screen](https://drive.google.com/uc?export=view&id=1QjjoGB85o8SWrvvgu_7Mt1nu8Ohv_zfJ)|

### Description of App's Features Functionality
### Your Projects
This section lists all the projects associated with the account you are currently signed in to. You can navigate to project details, which lists the databases of that particular project.

### Adding Collections
After selecting a database, you can add collections. The collection name should exactly match the collection name in your Firebase project (case sensitive). In the collections, you can view the documents, create new documents, delete existing documents, and perform batch operations.

### Batch Operations (Exclusive Feature)
Batch operations allow you to add or delete fields from multiple documents at once. You can even download the document data (single or multiple) in JSON format and use it in your other applications.

### Version Control System (Exclusive Feature)
This app has a version control system that keeps track of updates in the database, listing details such as project ID, database ID, collection ID, document ID, the field that is updated, operation type (update, add, delete), time and date of the update, and the user who updated it. This ensures transparency, a feature that is not present in the Firebase console.

### Real-time Notifications (Exclusive Feature)
Real-time notifications are sent to all users when a record is updated, a feature that is not available in the Firebase console.

### Document Operations
You can go to each document to update field values and types, add or delete fields, and more.

### Analytics (Exclusive Feature)
View simple analytics of operations performed in the last 30 days. This feature provides insight into your database activity.

---

## Getting Started 📍

### Step 1: Fork the Repository
Start by forking the repository to your own GitHub account. This will allow you to make changes and deploy the app from your own copy of the code.

### Step 2: Set Up a Firebase Project
- Use the Firebase CLI to set up a new Firebase project.
- Follow the instructions to connect the Firebase Editor app to your Firebase project.

### Step 3: Configure Google Cloud Console
- Go to the Google Cloud Console and navigate to the Firebase project you set up.
- Enable OAuth and set up OAuth credentials.
- Make sure to include the following OAuth scopes:
- `https://www.googleapis.com/auth/datastore`
- `https://www.googleapis.com/auth/cloud-platform`
- `https://www.googleapis.com/auth/firebase.messaging`

### Step 4: Set Up Notifications
- For real-time notifications, you need to set up your own server to manage OAuth 2.0 credentials.
- In this project, we have used Google Cloud Functions, which is the recommended approach.
- Set up Cloud Functions in your Firebase project to handle notifications and other server-side operations.

# References:
- Firebase Database API [Firebase Database API](https://firebase.google.com/docs/firestore/reference/rest)
- Google Oauth 2.0 [Google Oauth 2.0](https://developers.google.com/identity/protocols/oauth2)
- Firebase Cloud Messaging API [FCM API](https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages)