Add CORS configuration for your Firebase Storage

Firebase is using the same storage infrastructure as google cloud .

1. Go to https://console.cloud.google.com and select the dashboard of the project that contains the firebase storage.

2. On the top right, there will be a button named "Activate Cloud Shell", click on it, a terminal will open on the bottom of the page

Click on Open Editor

Click on File, and New file. 

3.Create new file with name cors.json, paste the following save.

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

4.On your Firebase Console and select "Storage" and  get your storage bucket URL (e.g gs://)

5.Then open the terminal again and paste following

       gsutil cors set cors.json gs://<your-cloud-storage-bucket>         

The CORS error should be gone for Storage for which we added the configuration. It wont be applied to other storage bucket

Read More

Firebase Firestore Database and Storage implementation for Flutter Project

1. From your Flutter project directory, run the following command to install the core plugin:
   
   flutter pub add firebase_core
   


2. Add following code to the root of your Flutter project,  
   import'package:firebase_core/firebase_core.dart'; import'firebase_options.dart'; Future main()async{ WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(  options:DefaultFirebaseOptions.currentPlatform); runApp(constMyApp()); }
   


3. Run the following command to install the core plugin:
   
   flutter pub add cloud_firestore
   flutter pub add firebase_storage



4. Once complete, rebuild your Flutter application:
   
   flutter run


5. Add the following code for Adding details in your Database(Image in Firebase Storage retrieve the URL to save it along with the details in Database )
   Code for Firestore database:
   
   import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_storage/firebase_storage.dart'; final incidentDetails =FirebaseFirestore.instance.collection('IncidentDetails'); // Call the incident's CollectionReference to add a new incident details incidentDetails.add({ 'incident_number': _formKey.currentState!.value['incidentnumber'], 'date_of_incident':formattedDateofIncident, 'incident_location':_formKey.currentState!.value['incidentlocation'], 'incident_priority': _formKey.currentState!.value['incidentpriority'], 'incident_type':_formKey.currentState!.value['incidenttype'], 'incident_description':_formKey.currentState!.value['incidentdescription'], 'incident_image':imageUrl, }).then((DocumentReference) { setState(() { submitMessage =true; ScaffoldMessenger.of(context).showSnackBar(const SnackBar( content:Text("Submitted Succesfully!"), backgroundColor:Colors.teal, behavior:SnackBarBehavior.floating, duration:Duration(seconds: 5), )); _formKey.currentState?.reset(); }); }).catchError((error) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content:Text('Error $error'), backgroundColor:Colors.teal, behavior:SnackBarBehavior.floating, duration:const Duration(seconds: 5), )); });
   
   
   
   Code for FilePicker for selecting Image from my local drive and adding it in Storage:
   
   
   
   //File object PlatformFile? pickedFile; //File from the local drive stored in a byte format Uint8List? file; //Variable for storing URL of image fetched from firebase storage String? imageUrl; // Variable for file List<File?> files = []; final result = await FilePicker.platform .pickFiles(allowMultiple: false, type: FileType.image); if(result==null) { return; } setState(() { pickedFile= result.files.first; file= result.files.single.bytes; }); final filename='files/${pickedFile!.name}'; //Create reference for Firebase Storage Reference ref=FirebaseStorage.instance.ref().child(filename); //Add file UploadTask uploadTask=ref.putData(file!); //Wait for the Complete Response final TaskSnapshot taskSnapshot = await uploadTask.whenComplete(() {}); //get the image url imageUrl = await taskSnapshot.ref.getDownloadURL(); //file.clear(); setState(() { });



6. Run your project and check for file creation in Firebase.(I encountered blocked by CORS error for Firebase Storage. So I had to Update my CORS policy for Storage of my project in Google Cloud Console ) . Here is link for it Click here
   

Read More

Build and Deploy your Flutter GitHub Code on Web using Firebase Hosting.

 You can automate Flutter Web Deployments to Firebase Hosting using GitHub. After the configuration and setup ,all you need to do is push your local code to GitHub and view your application on web using URL .

Step 1 : Install the Firebase CLI 

https://firebase.google.com/docs/hosting/quickstart#install-cli

 

Step 2 : Initialize your project 

firebase init hosting:github

 

Step 3 :  Follow the CLI prompts, and the command will automatically take care of setting up the GitHub Action

Once the configuration is complete, there will be two new files written:

• .firebaserc : Basic config for the project. It consist of your project name on firebase;
• firebase.json: Additional config. Tells Firebase about the public folder, which files/folders to ignore

 

Step 4 : To automate the deployment process, we will write YAML code to script our CI/CD workflow using GitHub Actions.

Step 5: In .github/workflows/firebase_hosting_merge.yml paste the following code

name: Deploy to Firebase Hosting on merge

'on':

  push:

    branches:

      - master

jobs:

  build_and_deploy:

    runs-on: ubuntu-latest

    steps:

      - name: 'Git Checkout'

        uses: actions/checkout@v3

      - name: 'Flutter setup'

        uses: subosito/flutter-action@v2

        with:

          channel: 'stable'

      - name: 'Run flutter pub get'

        run: flutter pub get

      - name: 'Build Web App'

        run: flutter build web --release

      - name: Deploy to Firebase

        uses: FirebaseExtended/action-hosting-deploy@v0

        with:

          repoToken: '${{ secrets.GITHUB_TOKEN }}'

          firebaseServiceAccount: '${{ secrets. Your secret key }}'

          channelId: live

          projectId: Your firebase project name

In .github/workflows/firebase_hosting_pull_request.yml paste the following code

name: Deploy to Firebase Hosting on PR

'on': pull_request

jobs:

  build_and_preview:

    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'

    runs-on: ubuntu-latest

    steps:

      - name: 'Git Checkout'

        uses: actions/checkout@v3

      - name: 'Flutter setup'

        uses: subosito/flutter-action@v2

        with:

          channel: 'stable'

      - name: 'Run flutter pub get'

        run: flutter pub get

      - name: 'Build Web App'

        run: flutter build web --release

      - name: Deploy to Firebase

        uses: FirebaseExtended/action-hosting-deploy@v0

        with:

          repoToken: '${{ secrets.GITHUB_TOKEN }}'

          firebaseServiceAccount: '${{ secrets.Your secret key }}'

          projectId: Your firebase project name

Step 6: You can customize the workflow according to your project’s needs. Finally, to see everything in action, all you need to do is commit and push your changes to the GitHub repository, and the workflow will automatically trigger and deploy the latest version of your app to Firebase Hosting. You can check the logs and details of the workflow run, even in real time, by clicking the Actions tab of your repository main page

Read More

Homepage/Dashboard Page for Incident Portal App using Flutters Dart Programming Language

 

  

Flutter widgets and React components go by different names but they are built and behave the same. I played around few widget initially and then started implementing the first page of application Homepage/Dashboard. 

There are many good flutter packages available for quick building of your App, which one can customize based on their applications requirements. Following are the packages that I used to implement the Homepage/Dashboard. 

1. Charts : syncfusion_flutter_charts.
   They have many options in the charts and the customization was quite easy.


2. Navigation and Routing: go_router
   
This package uses Router API to provide a convenient, url-based API for navigating between different screens.

For Navigation Bar you I implemented two different Navigation Bar based on screen sizes

1. BottomNavigationBar : A material widget that's displayed at the bottom of an app used for Mobile or tablet only.


2. NavigationRail : The navigation rail is meant for layouts with wide viewports, such as a desktop web or tablet landscape layout

Read More

Incident Portal Project Links

 

   

Responsive App link for Incident Portal 

Incident Portal App lets an user view and create an Incident. Front -End will be developed in Flutter using Dart Programming language and for I will be using Firebase.

Features:

1. View Dashboard with all the Incident charts in it.
2. View list of Incident.
3. Create an Incident
4. Authentication of Application

Check out the in Development App Incident Portal

Front End Development GitHub Link

Front End Development for Incident portal

Blog Links

• Initial Figma Prototype for Incident Portal
• Packages and Widgets used for creating Homepage/Dashboard
  
• Build and Deploy your Flutter GitHub Code on Web using Firebase Hosting
  
• Firebase Firestore Database and Storage implementation for Flutter Project
  
• Add CORS configuration for your Firebase Storage
  

Read More

Link to Portfolio Projects for UI/UX Designing

I started out my journey of becoming a Full Stack developer by learning UI/UX designing first.
While learning it, I created three case studies to include in my UX/UI Designing Portfolio.

You can checkout the work here:

UI/UX Portfolio

1.Tuscan Art Gallery

       

2.Astra website is a video posting and sharing website for DIYers

3.EmpowerMe

      

Read More

Portfolio Project 2 - Initial Figma Prototype for Incident Portal

Project Overview:

Incident Portal will be a generic user incident logging and viewing application. I am planning on learning and implementing  Flutter as a front end  and Firebase as back end for this project.

Checkout Incident Portal Prototype

Dashboard Screen

Incident Report

Read More