Logo

Trivia Quiz App

Link Icon Installation

Welcome to the Trivia Quiz App Installation Guide

Thank you for choosing the Trivia Quiz app from CodeCanyon! This guide will walk you through each step of the installation and configuration process to ensure everything goes smoothly. We will start by verifying the required system prerequisites, then, step by step, you will learn how to import the project, configure Firebase, and add functionality to your trivia quiz. Follow each step carefully to ensure the app runs perfectly on your device.

If you have any questions or encounter any issues during installation, feel free to contact our support team at support@rubrikpulsa.com or refer to the available FAQ section. We are here to help you successfully set up your app!

Table of Contents

  1. System Requirements
  2. Guide 1: Import the Trivia Quiz App Project
  3. Guide 2: Refactor Package Name
  4. Guide 3: Configure Firebase
  5. Guide 4: Set Up Firebase Authentication and Firestore Rules
  6. Guide 5: Enable Google Sheets API in Google Cloud Console
  7. Guide 6: Create Questions with Categories in Spreadsheet
  8. Guide 7: Creating an API for the Trivia Quiz
  9. Guide 8: Adding API Key & Base URL
  10. Guide 9: Integrate AdMob
  11. Guide 10: Reskin the App

System Requirements

  • Android Studio Koala: It is recommended to use the latest version to benefit from the newest features and bug fixes. Android Studio is the official IDE for Android app development.

  • Java Development Kit (JDK): Download version 17 or newer from the official Oracle page. JDK is required for code compilation and running Android applications.

  • Internet connection to download required dependencies and APIs
  • Google account to access Google Sheets API, Firebase, and Google Cloud Platform (GCP)
  • Computer with specifications that meet the supported operating system requirements:
    • Windows Logo Windows: Minimum Windows 10 or newer, with 8 GB or more RAM and a 64-bit processor.
    • macOS Logo macOS: Minimum macOS 10.14 (Mojave) or newer, with 8 GB or more RAM and an Intel or Apple Silicon processor.
    • Linux Logo Linux: Latest Linux distribution (Ubuntu or Fedora recommended), with 64-bit support, at least 8 GB RAM, and compatible graphics drivers.

Guide 1: Import the Trivia Quiz App Project

The first step is to download and import the Trivia Quiz App project into Android Studio:

  1. If you purchased the source code from CodeCanyon, download the ZIP file containing the entire app's source code.
  2. Extract the ZIP file to your preferred folder on your computer.
  3. Open Android Studio Koala and select Open an Existing Project.
  4. Navigate to the folder where you extracted the source code and select the Trivia Quiz App project folder.
  5. Android Studio will start loading the project. Ensure that the SDK and Android Studio configuration are set up correctly to support Kotlin.

Guide 2: Refactoring Package Name and Project Configuration

This step ensures that your app's package name aligns with the project requirements and the desired app name:

  1. Renaming Subfolder Package Name
    1. In Android Studio, open Project View by selecting the Android option.
    2. Navigate to the src/main/kotlin+java directory.
    3. Right-click on each subfolder under your package name (e.g., com.example.app) and select Refactor > Rename.
    4. Rename each subfolder sequentially to reflect the new package name structure. Example: com.example.app becomes com.mycompany.myapp.
    5. Confirm the changes by pressing the Refactor button.
  2. Updating applicationId in Gradle
    1. Open the build.gradle (Module: app) file.
    2. Locate the applicationId property and update its value to match your new package name. Example: 
      
android {
    ...
    defaultConfig {
        applicationId "com.mycompany.myapp" // Change according to the new package name
        ...
    }
}
    3. Save the changes and sync the project with Gradle by clicking the Sync Now button.
  3. Updating Namespace in Module Configuration
    1. In the build.gradle (Module: app) file, check the namespace property (if present) and update its value to match your new package name. Example: 
      
android {
    namespace "com.mycompany.myapp" // Change according to the new package name
}
    2. Save the changes and sync the project with Gradle.
  4. Updating the package Attribute in AndroidManifest.xml
    1. Open the AndroidManifest.xml file located in the src/main/ folder.
    2. Check the package attribute in the <manifest> element and update its value to match your new package name. Example: 
      
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mycompany.myapp">
    3. Save the changes.

    5. Once all the above steps are complete, you can proceed to the Firebase Configuration step to integrate your project with Firebase.

Guide 3: Configure Firebase

Follow these steps to integrate Firebase into your Android app up to moving the google-services.json file:

  1. Creating a Project in Firebase Console
    1. Visit Firebase Console.
    2. Click the Create Project button (or select an existing project).
    3. Enter the project name, enable Google Analytics if desired, and follow the prompted setup steps.
    4. Once done, click Create Project and wait for the creation process to complete.
  2. Adding an Android App to the Firebase Project
    1. In the Firebase Console, open the created project.
    2. Click the Android icon on the Project Overview page to add an Android app.
    3. Enter your app's Package Name, which can be found in your Android project's AndroidManifest.xml. Example: com.example.myapp.
    4. Add your app's name (optional) and SHA-1 (optional but required for features like Firebase Authentication or Dynamic Links).
    5. Click Register App to proceed.
  3. Downloading and Moving the google-services.json File
    1. After successfully registering your Android app, Firebase will provide the google-services.json file for download.
    2. Click the Download google-services.json button.
    3. The file will be downloaded to your computer's default folder (usually Downloads).
    4. Locate the downloaded file in your folder.
    5. Open your Android project in Android Studio.
    6. Follow these steps to move the file into the app/ folder:
      1. In Android Studio, open the Project tab on the left side of the screen.
      2. Locate the app folder in the project structure.
      3. Drag the google-services.json file from your download folder into the app folder in the Project tab.
      4. If a confirmation dialog appears, click OK or Refactor to move the file.
    7. Ensure the google-services.json file is located inside the app/ folder. You can verify this in Android Studio.

These steps complete the integration process up to moving the google-services.json file into your Android project. Next, you can proceed to Gradle configuration.


Guide 4: Firebase Authentication and Firestore Rules Setup

To secure user data and enable authentication in your app, follow the steps below:

Step 1: Firebase Authentication

  1. Go to the Authentication tab in the Firebase Console.
  2. Select an authentication method (email/password, Google Sign-In, phone verification, etc.) and enable it.
  3. To configure Google Sign-In, follow these steps:
    1. In the Firebase Console, navigate to Authentication > Sign-in method.
    2. Enable Google as a sign-in provider.
    3. Under Web client ID, click Edit and copy the Web Client ID provided.
  4. Replace the web_client_id placeholder in your app's res/values/strings.xml with the copied Web Client ID. For example:
    5. 38652167175-tic1rfspnp7hsqdlk2otfba8pc3pm.apps.googleusercontent.com

    Firebase Auth Setup
  5. In Android Studio, open the build.gradle file and add the Firebase Authentication dependency:
    6. implementation 'com.google.firebase:firebase-auth:21.3.0'
  6. Use FirebaseAuth to handle the login process in your app, including Google Sign-In and phone verification.

Step 2: Firestore Security Rules

Once user authentication is enabled, add security rules in Firestore to protect user data:

  1. Go to the Firestore Database tab in the Firebase Console.
  2. Click the Rules tab.
  3. Add the following rules in the Firestore editor to ensure that only authenticated users can write their own data:

    4. JavaScript Logo Cloud Firestore 
    service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if true;  // Allows all users to read user data
      allow write: if request.auth != null && request.auth.uid == userId;  // Restrict write access to the same user only

      match /scores/{scoreId} {
        allow read: if true;  // Allows all users to read score data
        allow write: if request.auth != null && request.auth.uid == userId;  // Restrict write access to the same user only
      }
    }
  }
}

    Firebase Auth Setup
  4. Click the Publish button to save and apply the rules.
  5. Test the rules by attempting to access data using both authenticated and unauthenticated accounts:
    • Authenticated users should be able to write their own data.
    • All users can read data.

With these steps, your app will be more secure, and user data will be well protected.


Guide 5: Enabling Google Sheets API from Google Cloud Console

In this step, you will enable the Google Sheets API to allow your app to interact with Google Sheets:

  1. Go to Google Cloud Console and create a new project or select an existing project.
  2. Enable the Google Sheets API and Google Apps Script for your app:
    • Go to the Library in Google Cloud Console.
    • In the search bar, type Google Sheets API, select the API, and click the Enable button to enable the API for your project.

    Logo
  3. Obtain the API credentials and add them to your app to connect the app with Google Sheets:
    • Go to the Credentials tab in Google Cloud Console.
    • Click Create Credentials and select API Key.
    • Copy the API Key that appears and store it securely.
  4. To use the API Key securely in your Android app:
    • Open the build.gradle (Module level) file in your project.
    • Replace REPLACE_WITH_YOUR_API_KEY with the API Key you copied from the Google Cloud Console.
    • Sync your project to apply the changes.

    Next, for a more detailed guide on configuring the API Key and Base URL, please continue to Step 7: Adding API Key & Base URL.


Guide 6: Creating Questions with Categories in Spreadsheet

Follow the steps below to create questions and add categories in the spreadsheet. Ensure that the categories you define in the spreadsheet are consistent with the categories used in your Android app.

Important Note: Google Account Consistency

When creating and integrating the spreadsheet with your app, make sure to use the same Google account for Firebase, Google Cloud, and Google Sheets. Using different accounts may result in incorrect JSON responses and errors during integration.

  1. Download the Spreadsheet Template:
    Download the template from the link below: Download Spreadsheet Template
  2. Open the Template File:
    Open the template file using a spreadsheet application like Google Sheets.
  3. Edit the Spreadsheet:
    Edit the columns as needed:
    • Question: Add the question you want to display in the app.
    • Options: Add answer options separated by commas.
    • Answer Index: Enter the index of the correct answer (starting from 0).
    • Category: Add a category for each question, such as "Science", "Mathematics", or others. Note: Ensure that the categories used here match those defined in the strings.xml file in your Android project.
  4. Save the Spreadsheet File:
    Save the spreadsheet file after editing.
  5. Upload the Spreadsheet:
    Upload the spreadsheet to Google Sheets or integrate it with your app using the Google Sheets API.

Important: Ensuring Category Consistency

To maintain consistency between your spreadsheet and your Android app, ensure that the categories in the spreadsheet exactly match those in your app’s strings.xml. Follow these steps:

  1. Check the Categories in strings.xml:
    Open res/values/strings.xml in your Android project and ensure that the categories are defined as follows: 
    
<resources>
    <string name="category_general_knowledge">General Knowledge</string>
    <string name="category_history">History</string>
    <string name="category_technology">Technology</string>
    <string name="category_science">Science</string>
    <string name="category_art_culture">Art and Culture</string>
    <string name="category_geography">Geography</string>
</resources>
  2. Match Categories in the Spreadsheet:
    Ensure that the Category column in the spreadsheet contains exactly the same values as those in the strings.xml file (e.g., General Knowledge, History, Science, etc.).
    • Example:
    Question Options Answer Index Category
    What is the capital of France? Paris, Berlin, Madrid, Rome 0 Geography
    Which planet is known as the Red Planet? Venus, Mars, Jupiter, Saturn 1 Science
  3. Verifying Data Consistency:
    After editing both the strings.xml and the spreadsheet, verify that no category name in the spreadsheet differs from the one in strings.xml. If the categories are inconsistent, the app will fail to display the correct category.

Adding New Categories

To add a new category:

  1. Update strings.xml:
    Add a new string entry in res/values/strings.xml with the desired category name, e.g.: 
    
<string name="category_new_category">New Category</string>
  2. Update the Spreadsheet:
    Add the new category name to the Category column in the spreadsheet, ensuring it matches the value defined in strings.xml.
  3. Verify Consistency:
    Double-check that the new category name in both the spreadsheet and strings.xml are identical.

Getting the Spreadsheet ID:

To integrate the spreadsheet with your app, you need the Spreadsheet ID. Here’s how you get it:

  1. Open the Spreadsheet:
    Open your Google Sheets file in a browser.
  2. Find the Spreadsheet ID:
    The URL will look like this: 
    
        https://docs.google.com/spreadsheets/d/SPREADSHEETS_ID/edit#gid=0
    Copy the part of the URL after /d/ and before /edit. That is your SPREADSHEETS_ID.

By following these steps and ensuring the category names in the spreadsheet match the ones in your Android app’s strings.xml, you’ll maintain consistency across the app and spreadsheet, which is crucial for smooth app functionality.

If you encounter any issues, feel free to consult the documentation or reach out for further assistance.


Guide 7: Creating an API for the Trivia Quiz

In this step, we will use Google Apps Script to create a simple API that serves trivia quiz questions. Make sure to use the same Google account throughout this guide.

  1. Open Google Apps Script:

    Open Google Apps Script in your browser. Click New Project to create a new project.

  2. Write the API Code:

    Copy and paste the following code into the Apps Script editor:

    JavaScript Logo JavaScript 
     
          
          function doGet(e) {
            const sheet = SpreadsheetApp.openById("SPREADSHEETS_ID").getSheetByName("Sheet1");
            const rows = sheet.getDataRange().getValues();
          
            const json = rows.slice(1).map(row => ({
              question: row[0],
              options: row[1].split(",").map(option => option.trim()),
              answerIndex: parseInt(row[2]),
              category: row[3]
            }));
          
            return ContentService.createTextOutput(JSON.stringify(json))
                                 .setMimeType(ContentService.MimeType.JSON);
          }
  3. Deploy the Script as a Web App:

    1. After writing the code, click Deploy > New Deployment at the top right of the Apps Script editor.

    2. Choose Web app as the deployment type.

    3. Fill in the deployment description, e.g., "API for Trivia Quiz".

    4. Set the access permissions with the following settings:

    • Execute as: Me
    • Who has access: Anyone

    5. Click Deploy and grant permissions if prompted.

  4. Copy the Web App URL:

    1. After deployment is complete, you will be given a Web App URL. Copy this URL to use as your API endpoint.

            
          https://script.google.com/macros/s/AKfycbxyz12345/example-url/exec

    This is the URL that your Android Trivia Quiz app can use to fetch quiz question data.

  5. Test the API Using a Browser:

    To quickly test the API, paste the Web App URL into your browser's address bar and press Enter. If the script is working correctly, it will return a JSON response containing quiz question data.

  6. Test the API Using Postman:

    1. Open the Postman app or open its web version.

    2. Click the New Request button and choose GET as the HTTP method.

    3. Enter the Web App URL you copied earlier into the URL field in Postman.

    4. Click the Send button to send a GET request to the API.

    5. If your API is working correctly, you will receive a JSON formatted response containing quiz question data. Example response:

    
      [
        {
          "question": "What is the capital of France?",
          "options": ["Paris", "London", "Berlin", "Rome"],
          "answerIndex": 0,
          "category": "Geography"
        },
        {
          "question": "What is 2 + 2?",
          "options": ["3", "4", "5", "6"],
          "answerIndex": 1,
          "category": "Mathematics"
        }
      ]

Guide 8: Adding API Key & Base URL

To integrate the app with an external API, you need to add and configure the API Key in your project. Here are the steps:

  1. Update the build.gradle (Module: app) file

    Make sure the build.gradle configuration includes buildConfigField to add BASE_URL and API_KEY. Add the following code:

    Gradle Logo Gradle 
              android {
              buildFeatures {
                  buildConfig = true  // Enable buildConfig
              }
              buildConfigField("String", "BASE_URL", "\"https://script.google.com/macros/s/REPLACE_WITH_YOUR_URL/\"")
              buildConfigField("String", "API_KEY", "\"REPLACE_WITH_YOUR_API_KEY\"")
          }
  2. Replace API Key and Base URL

    Make the following replacements:

    • REPLACE_WITH_YOUR_URL: Replace with the base URL from your Google Apps Script Web App without including exec suffix. Example:
      •           https://script.google.com/macros/s/AKfycbwRGNtk1bgIS9ho_6dJLewNHh4s7aulJfBZlBOtM9FBblcNHfnE8YyHMjRmV2gJ6nxL/
    • REPLACE_WITH_YOUR_API_KEY: Replace with the API Key obtained from Google Cloud Console.
  3. Referencing in Code

    Use the BuildConfig class to access the BASE_URL and API_KEY values. Example:

    Kotlin Kotlin 
              val baseUrl = BuildConfig.BASE_URL
          val apiKey = BuildConfig.API_KEY

    These values can now be securely accessed via BuildConfig and used throughout your app.

Note:
  • Ensure that the google-services.json file has been added correctly if using Firebase.
  • Verify that the API Key and Base URL are active and accessible.
  • Test the configuration thoroughly to ensure proper API integration.

Guide 9: Integrate AdMob

To integrate AdMob into your trivia quiz app, follow these steps:

Step 1: Update Application ID

Open the AndroidManifest.xml file in your project and update the Application ID:

<application>
  ...
  <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="YOUR_APPLICATION_ID" />
</application>

Note: Replace YOUR_APPLICATION_ID with the actual Application ID from your AdMob account. You can find this in the AdMob Console.

Step 2: Update Ad Unit IDs

Open the res/values/strings.xml file and update the Ad Unit IDs for the banners, interstitial, and rewarded ads:

<resources>
  ...
  <string name="ad_unit_banner">YOUR_BANNER_UNIT_ID</string>
  <string name="ad_unit_interstitial">YOUR_INTERSTITIAL_UNIT_ID</string>
  <string name="ad_unit_rewarded">YOUR_REWARDED_UNIT_ID</string>
</resources>

Note: Replace the placeholder values (e.g., YOUR_BANNER_UNIT_ID) with the actual Ad Unit IDs from your AdMob account.

Step 3: Testing with Sample Ads

If you haven't set up your AdMob account yet, you can test the integration using AdMob's sample IDs:

  • Banner Ad Unit ID: ca-app-pub-3940256099942544/6300978111
  • Interstitial Ad Unit ID: ca-app-pub-3940256099942544/1033173712
  • Rewarded Ad Unit ID: ca-app-pub-3940256099942544/5224354917

Remember to replace these with your own Ad Unit IDs before publishing your app.

Guide 10: Update Privacy Policy and Terms of Service URLs

To update the URLs for Privacy Policy and Terms of Service, follow these steps:

  1. Open the res/values/strings.xml file in your project.
  2. Find the following lines: 
    https://your.privacy.policy.url
https://your.terms.of.service.url
  3. Replace the URLs with your own:
    • Example Privacy Policy URL: https://example.com/privacy
    • Example Terms of Service URL: https://example.com/terms
  4. Save the file and test the app to ensure the links work correctly.

Guide 9: Reskin App

You can customize the app's design by changing the following visual elements:

  1. Replace the app logo and icon in the res/drawable file.
  2. Update the theme colors in the res/values/colors.xml file.
  3. Replace the splash screen by adding an image in the res/drawable folder and updating the configuration in the AndroidManifest.xml file.
  4. Customize the text and other UI elements to match your app's identity.
keyboard_arrow_up