Day 10: Deploying the App and Tracking Analytics with Firebase

Today, you’ll deploy your React Native e-commerce app to production and integrate Firebase Analytics to track user interactions. Deployment allows users to access the app on their devices, while analytics provides insights into user behavior, helping you improve the app.

What You Will Do Today:

1. Deploy the app for Android and iOS.
2. Integrate Firebase Analytics to track user interactions.
3. Test the deployment and analytics setup.

Step 1: Deploying for Android

1. Generate a Release APK:

• Open android/app/build.gradle and set signingConfigs for release builds.
• Create a file keystore.properties in the root directory with the following content: storeFile=your-key-store.jks storePassword=your-key-password keyAlias=your-key-alias keyPassword=your-key-password
• Replace your-key-store.jks, your-key-password, and your-key-alias with your actual key details.

1. Build the APK:
   Run the following commands to generate the APK:

   cd android
   ./gradlew assembleRelease

• The APK will be available at android/app/build/outputs/apk/release/app-release.apk.

1. Distribute the APK:

• Upload the APK to the Google Play Console for distribution.

Step 2: Deploying for iOS

1. Set Up App Signing:

• Open the project in Xcode (ios/YourProject.xcworkspace).
• Set up a development team and configure signing certificates under the Signing & Capabilities tab.

1. Generate an Archive:

• In Xcode, select Product > Archive.
• Once the archive is complete, distribute the app via the App Store or TestFlight.

1. Distribute the App:

• Use App Store Connect to publish the app to the App Store.

Step 3: Integrating Firebase Analytics

1. Install Firebase Analytics:

   npm install @react-native-firebase/analytics

2. Add Analytics to App.js:

   // App.js
   import React, { useEffect } from 'react';
   import analytics from '@react-native-firebase/analytics';

   export default function App() {
     useEffect(() => {
       // Log app open event
       analytics().logAppOpen();
     }, []);

     return <YourNavigationStack />;
   }

3. Track Events:
   Add custom events in various parts of your app. For example, log a product view in ProductDetail.js:

   useEffect(() => {
     analytics().logEvent('product_view', {
       product_id: productId,
       product_name: product?.name,
     });
   }, [productId]);

4. View Analytics in Firebase Console:

• Go to Firebase Console > Analytics > Dashboard.
• Check events like product_view, add_to_cart, and checkout.

Step 4: Testing Deployment and Analytics

1. Test the App:

• Install the app on your device (via APK or TestFlight).
• Ensure all features, such as login, product browsing, cart, checkout, and reviews, work as expected.

1. Verify Analytics:

• Perform actions in the app (e.g., view a product, add to cart).
• Check the Firebase Analytics Dashboard to ensure events are logged correctly.

Summary

Today, you deployed your e-commerce app for Android and iOS and integrated Firebase Analytics to track user behavior. Congratulations on completing your 10-day journey to build a fully functional React Native e-commerce app!

Your app is now live and ready to provide a seamless shopping experience while collecting valuable data for future improvements.