|
| 1 | +## Step 1) 🖥️ How to setup Project locally |
| 2 | + |
| 3 | +Clone the project |
| 4 | + |
| 5 | +``` |
| 6 | + git clone https://github.com/AOSSIE-Org/Monumento.git |
| 7 | +``` |
| 8 | + |
| 9 | +Go to the project directory |
| 10 | + |
| 11 | +``` |
| 12 | + cd Monumento |
| 13 | +``` |
| 14 | + |
| 15 | +Install dependencies |
| 16 | + |
| 17 | +``` |
| 18 | + flutter pub get |
| 19 | +``` |
| 20 | + |
| 21 | +Create `.env` using template `.env.template` and add API keys |
| 22 | + |
| 23 | +``` |
| 24 | +cat .env.template > .env |
| 25 | +``` |
| 26 | + |
| 27 | +Add the following API keys to the `.env` file |
| 28 | + |
| 29 | +- `SERVER_CLIENT_ID`: Obtain this from the Google Cloud Console for Android configuration. |
| 30 | +- `GOOGLE_SIGNIN_APPLE_CLIENT_ID`: Obtain this from the Google Cloud Console for iOS configuration. |
| 31 | +- `GOOGLE_SIGNIN_WEB_CLIENT_ID`: Obtain this from the Google Cloud Console for web configuration. |
| 32 | +- `GEOAPIFY_API_KEY`: Obtain this from the [Geoapify](https://www.geoapify.com/) website for fetching location. |
| 33 | + |
| 34 | +Refer to the updated guide below for obtaining these API keys: |
| 35 | + |
| 36 | +- [Google Cloud Console Guide](https://developers.google.com/identity) for Google Sign-In or you can reffer to this [youtube video](https://www.youtube.com/watch?v=HtJKUQXmtok) where OAuth setup is done for a react app. |
| 37 | +- [Geoapify API Setup](https://www.geoapify.com/get-started-with-maps-api/) |
| 38 | + |
| 39 | +## Step 2) Configure Firebase |
| 40 | + |
| 41 | +Follow the official [Firebase guide](https://firebase.google.com/docs/flutter/setup?platform=android) to set it up for this project. This will: |
| 42 | + |
| 43 | +- Add the `google-services.json` file for Android. |
| 44 | +- Add the `GoogleService-Info.plist` file for iOS and MacOS. |
| 45 | +- Create the `firebase_options.dart` file in the lib folder. |
| 46 | + |
| 47 | +## Step 3)📜 Populating Monument Data |
| 48 | + |
| 49 | +This script allows you to populate your Firestore database with predefined monument data. It’s a standalone tool that you can run once to seed your database—no need to run or modify any Flutter app. |
| 50 | + |
| 51 | +### Prerequisites |
| 52 | + |
| 53 | +1. **Node.js**: |
| 54 | + Install Node.js from [https://nodejs.org](https://nodejs.org). |
| 55 | + Verify installation: node -v |
| 56 | + You should see a version number like i.e: |
| 57 | + |
| 58 | +2. **Firebase Project with Firestore Enabled**: |
| 59 | + |
| 60 | +- Go to [Firebase Console](https://console.firebase.google.com). |
| 61 | +- Create or select a project. |
| 62 | +- Enable Firestore. |
| 63 | + |
| 64 | +3. **Service Account Key**: |
| 65 | + |
| 66 | +- In the Firebase console, go to "Project Settings" → "Service accounts". |
| 67 | +- Click "Generate new private key" to download `serviceAccountKey.json`. |
| 68 | +- Save `serviceAccountKey.json` in app root directory inside scripts folder. |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | +## **Step 4) Configure Google Sign-In (Web-Based Flutter App)** |
| 73 | + |
| 74 | +To enable Google Sign-In, follow these steps: |
| 75 | + |
| 76 | +1. **Enable Google People API**: |
| 77 | + - Go to the [Google Cloud Console](https://console.cloud.google.com/). |
| 78 | + - Enable the **Google People API** under the APIs & Services section. |
| 79 | + - Ensure you’ve signed up for the necessary services under your project. |
| 80 | + |
| 81 | +2. **Set CORS Rules for Firebase Storage**: |
| 82 | + - If you encounter a `403 Forbidden` error when attempting to load images from Firebase Storage, configure your Firebase Storage bucket to allow CORS. Refer to this guide for more details: [Handling Firebase Storage 403 Error](https://stackoverflow.com/questions/41943860/getting-403-forbidden-error-when-trying-to-load-image-from-firebase-storage). |
| 83 | + |
| 84 | +3. **Allow Access-Control-Allow-Origin**: |
| 85 | + - For viewing images on the web, ensure that the Firebase Storage bucket has the appropriate `Access-Control-Allow-Origin` settings. You can follow the steps here: [Configuring Access-Control-Allow-Origin](https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin). |
| 86 | + |
| 87 | +--- |
| 88 | + |
| 89 | +4. **Install Dependencies**: |
| 90 | + |
| 91 | +- Install the Firebase Admin SDK: |
| 92 | + |
| 93 | +``` |
| 94 | +npm install firebase-admin |
| 95 | +``` |
| 96 | + |
| 97 | +inside scripts folder, execute the script using the following command: |
| 98 | + |
| 99 | +``` |
| 100 | +node populate_monuments.js |
| 101 | +``` |
| 102 | + |
| 103 | +If everything goes well, you should see: |
| 104 | + |
| 105 | +``` |
| 106 | +Starting to populate the monuments collection... |
| 107 | +Monuments collection populated successfully. |
| 108 | +``` |
| 109 | + |
| 110 | +4. **Verify in firestore**:: Check the Firebase console → Firestore Database → monuments collection. Your data should appear there. |
| 111 | + |
| 112 | +Notes: |
| 113 | + |
| 114 | +- You can rerun this script whenever you need to seed the data. |
| 115 | +- To add more monuments, modify the monumentsData array before running the script again. |
0 commit comments