Skip to content

fuzonmedia/firebase-backed-react-native-mobile-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

Here we have two directories:

- /faraday_infra : Contains the React Native code
- /function: Contains the Firebase cloud Functions code

To run the project:

- Run the command `npm install` in faraday_infra
- Run the command `npx react-native run-android` in faraday_infra

To deploy functions:

- Go into function directory
- Run the command `npm install -g firebase-tools`
- Run the command `firebase login`
- Run the command `firebase init`
- Run the command `firebase deploy --only functions`

To make any changes to the cloud functions:

- go to function directory and then again go into the functions directory
- make the changes in the `index.js` file

Functions Use Explained :

app.post("/create-user", async (req, res)) => {}
  • This function is used to create a user in the database and sends an email to the user with a temporary password.
  • after generating the password, it is stored in the database and the user is sent an email with the password.
  • The user can now login with the email and temporary password.
  • The user can then change the password by going to the profile page and clicking on the "Reset Password" button.
  • You can change the temporary password length by changing the value of the variable passwordLength in the index.js file. the default value is 10.

Further Uses of the cloud function:

  • Once the the app moves forward, use this cloud function to send push-notifications to the user.
  • create multiple endpoints for the same, and trigger them based on the user's actions.
  • I will provide with the snippets now

For sending notifications to multiple devices

app.post('/new-booking', async (req, res) => {
  try {
    // Get the user tokens from Firestore
    const message = {
      notification: {
        title: 'Title of the notification',
        body: 'Body of the notification',
      },
      tokens: req.body.tokens,( FCM tokens sent from the client)
    };

    const response = await admin.messaging().sendMulticast(message);
    console.log('Successfully sent message to user:', response);

    res.status(200).send('Notification sent to users');
  } catch (error) {
    console.error('Error sending notification to user:', error);
    res.status(500).send('Send fail');
  }
});

The multicast needs "tokens"

For sending notifications to single device

app.post('/end-point2', async (req, res) => {
  try {
    const message = {
      notification: {
        title: 'Title of the notification',
        body: 'Body of the notification',
      },
      token: req.body.token,( FCM token sent from the client)
    };

    const response = await admin.messaging().send(message);
    console.log('Successfully sent message to user:', response);

    res.status(200).send('Notification sent to user');
  } catch (error) {
    console.error('Error sending user notification:', error);
    res.status(500).send('Send fail');
  }
});
The single device needs "token"

Import and export scripts are in firebase function directory

cd function

Export FireStore Data to JSON

  • I have provided with the code to export the data from the FireStore database to a JSON file.
  • The code is in the export-data.js file.

To run the code:

  • Run the command node export-data.js

Import JSON Data to FireStore

  • I have provided with the code to import the data from a JSON file to the FireStore database.
  • The code is in the import-data.js file.

To run the code:

  • Run the command node import-data.js

Build The React Native Application to APK

How to generate one in 4 steps? Step 1: Check if the file your_project\android\app\src\main\assets\index.android.bundle exists, if not create it.

Step 2: Go to the root of the project in the terminal and run the below command: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Step 3: Go to android directory:

cd android

Step 4: Now in this android folder, run this command

./gradlew assembleDebug

  • There! you’ll find the apk file in the following path: yourProject/android/app/build/outputs/apk/debug/app-debug.apk

About

A React Native mobile app with a Firebase backend, enabling role-based field operations, task assignment, work order updates, surveys, progress tracking, and billing with real-time sync and scalable architecture

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages