System Requirements 1.1

The required specifications for the Admin Panel.

PHP Version: 8.2.x

PHP Version 8.2.x must be installed on your system to proceed further.

MySQL Version: 8.x

MySQL Version 8.x must be installed on your system to proceed further.

Laravel Version: 10.x

Laravel Version 10.x must be installed on your system to proceed further.

Composer Version: 2.7.x

Composer Version 2.7.x must be installed on your system to proceed further.

The required specifications for the Flutter App.

Suggested Server 1.2

DigitalOcean

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

Hostinger

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

Namecheap

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

GoDaddy

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

Google Cloud

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

InMotion Hosting

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Read More

Flutter Project Run 2.1

3. Download and Extract the Project:

• Download the Package: Go to your Codecanyon account and download the Ready eCommerceFlutter app package.
• Extract the Files: Extract the downloaded ZIP file to a preferred location on your computer.

4. Set Up Your Development Environment:

• Install Flutter and Dart: Follow the instructions on the Flutter installation page to install Flutter and Dart.
• Configure Your IDE: Install and configure your preferred IDE (Android Studio, VS Code, or IntelliJ IDEA). Install the Flutter and Dart plugins.

5. Open the Project:

• Open Your IDE: Launch your IDE (Android Studio, VS Code, or IntelliJ IDEA).
• Open the Project Folder: Use the "Open" or "Import" option in your IDE to open the folder where you extracted the project.

6. Install Dependencies:

• Open Terminal/Command Prompt: Navigate to the project directory:
  bash Copy code

  cd path/to/your/project

• Install Dependencies: Run the following command to fetch and install the required dependencies:
  bash Copy code

  flutter pub get

7. Set Up Emulator or Device:

• Android Emulator: Open Android Studio and go to the AVD Manager. Create or start an Android Virtual Device (AVD).
• iOS Simulator (macOS only): Open Xcode and start the iOS Simulator.

8. Run the App:

• Run the App: Ensure your emulator/device is connected and running. In your IDE, run the following command or use the built-in run feature:
  bash Copy code

  flutter run

9. Build the App for Release:

• For Android: Run the following command to generate a release APK:
  bash Copy code

  flutter build apk --release

• For iOS: Run the following command to generate a release build for iOS:
  bash Copy code

  flutter build ios --release

10. Final Checks:

• Run Tests: Ensure that you have run all tests to verify the app functions as expected.
• Update App Version: Don’t forget to increment the app version in the pubspec.yaml file for the release.

Play store Publish 2.2

How to Publish Your Android App on the Play Store

Before publishing your app, consider the following:

• Prepare Your Assets: Have high-quality app screenshots, descriptions, and your APK ready for upload.
• App Signing: If using an Android App Bundle, enroll in Play App Signing for added security. This keeps your app signing key stored safely on Google's secure infrastructure.
• File Size Limit: Keep your app's size under 150 MB to avoid download issues. Remove any unused code or resources if necessary.

A Step-By-Step Guide

Step 1 – Google Play Console Developer Account.

Creating a Google Developer Account on the Google Play Console is one of the essential steps in publishing an Android app to the Play Store. The Google Play Console serves as the backend platform for managing and publishing apps on the Play Store. Developers must establish a developer account, which requires a one-time fee of $25, payable via credit card or online banking. After submission, please note that the account activation process may take up to 48 hours.

Sign in to the Google Play Console using your Gmail ID. After signing in, select whether the app account will be owned by an individual or an organization. Provide the required basic information, complete the payment process, and finalize your account creation.

Finally, ensure you fill out all the credentials asked while creating the account.

Step 2 – Set-up up a Google Merchant Account.

If your app includes in-app purchases, link your developer account to a Google Merchant Account. If you already have a merchant account, go to Download reports > Financial to access financial data. Don’t have one? Create a Google Merchant Account to enable this feature.

And to create one, click on setup up a merchant account.

After creating your merchant account, it will automatically link to your Google Play Console, allowing you to manage app sales, monitor performance, and generate reports.

Step 3 – Create Application

Once the merchant account is linked to your Google Play Console, the next step is to create an

application. And for creating an application, there are a few essential steps that you need to follow:

• Click on – Menu > All applications
• Select the ‘Create Application’ option.

Next, the play console will ask you to enter some basic app details. For instance,

• App Name – You must enter a 30-character long name in this field which will be displayed on the Google Play Console. However, this app name can be changed afterward. 
  
• Default language – Another essential field is the setup of the app language. You can navigate to the drop-down menu and set a default language for your app.
  
• App or game – The next step is to define whether you upload an app or a game, but this can again be revised afterward from the store settings.
  
• Free or paid – Define whether your app will be available free of cost or will require the user to pay for it. The free or paid section can be updated from the Paid app page later, but only until you publish your app. Once the app is live, you cannot transform your app from free to paid.

Next, you need to set up the bundle identifier for your app.

Once all of the above information is filled and verified, the Google Play Console will enquire for affirmations from you. Ensure that your app matches the Google policies of the Developer Program and Accepts US export laws. As soon as you agree to the terms and conditions, click Create App.

Step 4. App Store Listing Details

Click ‘Create App’ on the Google Play Console to access the setup dashboard. Here, you’ll provide key details such as the app name, description, category, tags, and contact information to complete your app listing.

The Google Play Console will enquire about the following:

• App Name: Already provided in the previous step. If needed, you can revise it here.
• Short Description: Enter an 80-character summary that best captures your app’s purpose.
• Full Description: Elaborate on your app in up to 4,000 characters. Include targeted keywords to optimize discoverability for the right audience.

After entering the information in the Google Play Console, the next step is to upload app graphics, select the app category, and add the privacy policy. Ensure you use the high-quality images prepared earlier for this stage of the publishing process.

Once you are done uploading details, Hit the Save button.

Also, Read- Mobile App Security: A Comprehensive Guide to Secure Your Apps

The next critical step is completing the content rating questionnaire. Without this, Google will classify your app as 'Unrated' and may remove it from the Play Store. To avoid this, follow these steps to add a content rating.

To add the content rating, you’ll have to navigate to the main dashboard, set up your app, and select the Content rating option.

The Next dashboard will pop up, and you’ll be able to navigate the “Start Questionnaire” button; you have to click the tab and get started.

In the content rating section, you'll provide basic information about your app. This section includes three subsections: Categories, Questionnaire, and Summary.

In the Category section, provide a contact email for users and select the appropriate category for your app being published on the Play Store.

After filling in the above fields, click the 'Next' button to proceed to the questionnaire section. This section helps Google gather more information about your app to better understand your target audience.

Once all the details are filled in, you can look at the content rating summary and hit ‘Submit’ to apply the changes.

Step 6 – Create & Upload Android App to Google Play

Uploading the APK to the Google Play Console is the first step in the app publishing process, where your app is submitted for Google's review and approval before going live

Before uploading the app, it's important to decide on the release type: Internal Test (up to 100 selected testers), Closed Test (limited testers), Production Release (available to all Play Store users in selected countries), or Open Test (available to Google Playtesters, with users joining through your store listing).

Once you have decided on the testing, go to the dashboard and select “Create a new release.”

After selecting “Create a new release,” you will be redirected to a dashboard where you can upload the app bundles and enter the release details.

After entering all the details, double-check everything to ensure it's correct. Then, complete the final step by adding the app to the platform. Next, go to the ‘App Releases’ tab, select ‘Manage Production’, and click on ‘Edit Release’. Proceed by clicking ‘Review’, then select ‘Start rollout to production’.

Finally, click ‘Confirm’, and that's it! Your app has been successfully uploaded to your Google Play Store account for free.

App store Publish 2.3

Ready eCommerce: Publish Your App to the Apple App Store

Here’s a simple guide to help you publish your app to the Apple App Store:

• Apple Developer Account
  • Create an Apple account if you don’t already have one.
  • Join the Apple Developer Program and pay the $99/year membership fee.
• Create a Bundle Identifier

  This is a unique ID for your app within Apple’s system.

  • Open your project in Draftbit.
  • Go to Project Settings.
  • Select Apple App Store from the menu.
  • Enter your Bundle Identifier using the reverse DNS format (e.g., com.example.appname).
  • Click Save.

Next, log in to your Apple Developer account.

• Go to your Apple Developer account and select Identifiers from Certificates, IDs & Profiles section.

• Click on the Add New Identifier button.

• The Register a new identifier page will open. Select App IDs and then select Continue.

• Select App and then click Continue.

• Enter the Apple Bundle information
• Bundle ID: Copy the Bundle Identifier from your Draftbit settings into this field. Be sure it matches the Bundle Identifier you entered in Project Settings. If they are different, you will encounter errors.
• Description: Enter a short description for your Bundle
• Capabilities: Scroll down and select the capabilities that are required for your app.

• Check the boxes next to any other capabilities your app requires. For example, if your app requires Map capabilities make sure to check the box for that.

• When you are finished, select Register.

Add A New App To App Store Connect

Now, you need to add your app to App Store Connect which is where you will manage and submit your app to the App Store.

• Go to App Store Connect and then select Apps.
• Click on the Add button (+) and then select New App.

• Enter your app information in the modal that appears:
  • Platform: for mobile apps this will be iOS.
  • Name: Enter a Name for your app (this is the name that will show in the App Store).
  • Primary Language for your app.
  • Bundle ID: Select the Bundle ID you created in the previous step.
  • SKU: Enter a unique identifier. We recommend using your Bundle ID here, as long as it's unique.
  • User Access: You should leave this set to Full Access unless you intend to only use this app privately. If you select Limited Access, you'll need to add the users that you would like to grant access to this app. This will only appear if you have other users included in your App Store Connect account.
  

Generate Your App Store Connect API Key and add it to Draftbit

At this point, you need to generate an API Key and add it to your Apple App Store settings in Draftbit.

• On the screen that you were navigated to after creating the app, choose Users and Access.

• From the Users and Access page, select Integrations tab on the top.

• If you see the Request Access button, click on it.
• If you haven't added a key before, click on the Generate API Key. Otherwise, select the Add button (+).
• Enter your API Key Information in the modal that appears:
  • Name: Enter a name for the key. This is a reference and is not part of the key itself. We recommend naming it ‘Draftbit Publishing’ so it will be easier to identify in the future.
  • Access: Select App Manager as the access type. For additional information on Roles, see the docs here.
• When you are done, select Generate.

• Find the row for the API Key you just generated and select Download API Key. A modal will appear, select Download. Refresh the page if the link doesn’t appear immediately.

Return to Draftbit and then:

• Go to Project Settings -> Apple App Store.
• Scroll down to where it says Connect Private Key.
• Upload the API Key file that you downloaded in the previous step and hit to Save button.

Add Your Issuer ID To Draftbit

Next you’ll need to get your Issuer ID and add that to your Apple App Store settings in Draftbit.

• In App Store Connect, go to Users and Access page and select Integrations tab.
• Find the Issuer ID and select Copy.

Return to Draftbit and then:

• Go to Projects Settings -> Apple App Store.
• Scroll down to where it says Connect Issuer Key.
• Paste the Issuer ID you copied during the previous step.
• Click the Save button

Add Your Key ID To Draftbit

Now, you need to get the Key ID for the API Key you generated and add that to your Apple App Store settings in Draftbit. In Ap

• In App Store Connect, go to Users and Access page and select Integrations tab.
• Find the row for the API Key you generated and select Copy Key ID.

Return to Draftbit and then:

• Go to Projects Settings -> Apple App Store.
• Scroll down to Connect Key ID.
• Past the Key ID you copied during the previous step.
• Click the Save button.

Add Your App Store App ID to Draftbit

Finally, you need to get your App ID that was assigned to your new app and add that to your Apple App Store settings in Draftbit.

• Go to App Store Connect go to the Apps.
• Click on your app in the list.
• Click App Information under the General heading on the left
• Scroll down to the General Information section
• Copy your Apple ID

Return to Draftbit and then:

• Go to Projects Settings -> Apple App Store.
• Find the App Store App ID field.
• Paste the Apple ID you copied during the previous step.
• Click the Save button

FCM Configuration 2.4

FCM Configuration for Flutter Mobile App

This document provides a comprehensive guide to configuring Firebase Cloud Messaging (FCM) for your Flutter mobile app on both Android and iOS platforms.

1. Set Up Firebase Project

• Go to the Firebase Console.
• Create a new project or select an existing one.
• Register your app (both Android and iOS) within the Firebase project.

2. Configure Android for Firebase

2.1 Add Firebase SDK to Your Android Project

• Download the google-services.json file from the Firebase Console.
• Place the google-services.json file in the android/app directory of your Flutter project.

2.2 Update `android/build.gradle`

buildscript {
    dependencies {
        // Add this classpath
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

2.3 Update `android/app/build.gradle`

• Add the following line at the bottom of the file:

apply plugin: 'com.google.gms.google-services'

• Add the Firebase messaging dependency in the dependencies section:

implementation 'com.google.firebase:firebase-messaging:24.2.0'

2.4 Update `AndroidManifest.xml`

• Add the necessary permissions and service declarations inside the <application> tag:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>

<application ...>
    <service
        android:name=".MyFirebaseMessagingService"
        android:exported="true"
        android:permission="android.permission.BIND_JOB_SERVICE">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
    </service>
</application>

3. Configure iOS for Firebase

3.1 Add Firebase SDK to Your iOS Project

• Download the GoogleService-Info.plist file from the Firebase Console.
• Place the GoogleService-Info.plist file in the ios/Runner directory of your Flutter project.

3.2 Install CocoaPods Dependencies

cd ios
pod install

3.3 Update `Podfile`

platform :ios, '10.0'
use_frameworks!

3.4 Update `AppDelegate.swift`

• Import the required modules and configure Firebase:

import UIKit
import Flutter
import FirebaseCore
import FirebaseMessaging

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        FirebaseApp.configure()
        Messaging.messaging().delegate = self
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func application(
        _ application: UIApplication,
        didReceiveRemoteNotification userInfo: [String: Any],
        fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void
    ) {
        Messaging.messaging().appDidReceiveMessage(userInfo)
        super.application(application, didReceiveRemoteNotification: userInfo, fetchCompletionHandler: completionHandler)
    }
}

3.5 Request Notification Permissions

import UserNotifications

func application(_ application: UIApplication,
                 didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken
}

func application(_ application: UIApplication,
                 didFailToRegisterForRemoteNotificationsWithError error: Error) {
    print("Failed to register: \(error)")
}

func application(_ application: UIApplication,
                 didReceive notification: UILocalNotification) {
    print("Notification received: \(notification)")
}

4. Configure Flutter App

4.1 Add FlutterFire Plugins

dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^2.10.0
      firebase_messaging: ^14.0.0

4.2 Initialize Firebase in Your Flutter App

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  void initState() {
    super.initState();
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Message received: ${message.messageId}');
      // Handle foreground messages here
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FCM Demo'),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

5. Testing Your Configuration

• Android: Use the Firebase Console to send test messages or use the firebase_messaging package to test messages locally.
• iOS: Ensure you have a real device or use the simulator to test push notifications, as push notifications don't work on iOS simulators.

Following these steps will help you successfully configure Firebase Cloud Messaging (FCM) for your Flutter mobile app on both Android and iOS platforms.

Firebase CLI Quick Setup 2.5

Firebase CLI Quick Setup instruction

Step 1: Create a Firebase Project

• Open Firebase Console: Create a new project by visiting the following link: Firebase Console.
• Access Your Project: After creating the Firebase project, open it and click on the Flutter logo. Follow the provided setup steps.
  
  Important Note: Before configuring Firebase, ensure you change the package name for Android and the bundle identifier for iOS in your app.

Installation

• Install Firebase CLI (requires Node.js):

  npm install -g firebase-tools

• Install FlutterFire CLI:

  dart pub global activate flutterfire_cli

Usage

Initialize Firebase

• Run the Configuration Command: In the root of your Flutter application, execute:

  flutterfire configure

• Follow the Prompts:
  • Choose your Firebase project.
  • Select the platforms (Android, iOS, web, etc.).
  • The CLI generates a firebase_options.dart file in your project.

Import and Initialize in Your App

In your lib/main.dart, add:

import 'firebase_options.dart';

// Initialize Firebase
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);

Note

If you add new platforms or Firebase services, rerun:

flutterfire configure

Website & Admin Panel 3.1

Running Laravel Admin Panel for Ready eCommerce

This documentation provides a step-by-step guide to running a Laravel-based admin panel for a Ready eCommerce. Follow these instructions to set up your development environment and run the admin panel locally.

1. Prerequisites

• PHP installed (version 8.1 or higher).
• Composer package manager installed.
• Laravel installed globally (optional but recommended).
• A MySQL or PostgreSQL database server running.
• Node.js and npm installed (for managing frontend dependencies and assets).

How to Install Ready eCommerce on cPanel Hosting

A step-by-step guide on setting up your Ready eCommerce project in cPanel hosting.

Follow This Instructions

1. Zip your project folder.
2. Login to your cPanel.
3. Go to the File Manager option and select it.
4. Ensure you're in the root folder, then click "Upload".
5. Select your zip folder and wait for the upload to complete. If the upload area is green, then go back to home.
6. Unzip the uploaded folder.
7. Selectall files and directory move to the root folder.
8. Go back to Cpanel and navigate to Database.
9. Created a database and add (create if non exist) a DB user.

Example


10. You can then run your domain in any browser after that
11. Press the Start Installation Process button that appears on the screen
12. Then go to the root folder to check permission and give permission to the mentioned folders
13. After that, if the permissions of the files are all right, then press the Next button
14. After that, if the server request extensions are enabled, then click on the next button. If any extension is shown as disabled, then go to select PHP version from the C panel and enable all the extensions that are shown as disabled, then refresh the browser and then click on the next button.
15. Then fill up the written forms and press the next button

Example


16. Connect to the database you created and press the next button

Example


17. Then fill out the form using your Email Account, Domain, Codecanyon Username, and your Purchase Code, and click the Verify Purchases button.

Example


18. Click on the Final Submission button and complete the installation process by clicking on the Click to Redirect button.

Full Installation Journey Example

2. Clone the Repository

Start by cloning the repository from your version control system:

git clone https://github.com/your-username/your-music-admin-panel.git

Navigate into the project directory:

cd your-music-admin-panel

3. Install Dependencies

Once inside the project directory, install the necessary PHP and frontend dependencies:

• Install PHP dependencies using Composer:

composer install

• Install frontend dependencies using npm:

npm install

4. Configure Environment Variables

Copy the example environment file to create your local environment configuration:

cp .env.example .env

Edit the .env file to set up your database connection and other environment-specific settings:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database
DB_USERNAME=your_username
DB_PASSWORD=your_password

5. Generate Application Key

Generate a new application key for Laravel:

php artisan key:generate

6. Run Database Migrations

Run database migrations to set up your database schema:

php artisan migrate

7. Seed the Database (Optional)

If you have seed data, you can populate your database with initial data:

php artisan db:seed

8. Run the Development Server

Start the Laravel development server:

php artisan serve

The admin panel will be available at http://localhost:8000. Open this URL in your browser to view the admin panel.

9. Compile Frontend Assets

Compile your frontend assets for development:

npm run dev

For production builds, use:

npm run build

10. Troubleshooting

If you encounter issues while running the admin panel, consider the following troubleshooting steps:

• Check PHP Version: Ensure you are using a compatible version of PHP. Check your PHP version with php -v.
• Check Dependencies: Ensure that all PHP and frontend dependencies are installed correctly. Use composer install and npm install to reinstall.
• Verify Database Configuration: Ensure that your .env file has the correct database credentials and that the database server is running.
• Clear Caches: Sometimes clearing application caches can resolve issues:

php artisan cache:clear
php artisan config:clear
php artisan view:clear

• Check Logs: Review the error messages in your terminal or log files (storage/logs/) for more information on what might be going wrong.

11. Conclusion

By following these steps, you should be able to run the Laravel-based admin panel for your Ready eCommerce locally. If you encounter issues, refer to the troubleshooting section or consult the Laravel documentation for additional guidance.