Eclassify

Documentation

By : WRTeam
Email : sagar.wrteam@gmail.com

Thank you for purchasing Eclassify. We appreciate your support. In this documentation, you will find instructions on how to set up the admin panel and mobile application for Eclassify. This document also provides features of Eclassify. If you have any questions, feel free to reach out. Thank you for choosing Eclassify!


Setup Admin Panel


Prerequisite

Eclassify Admin panel is built using Laravel Framework 10.0 so you need PHP version upto 8.1.0 or higher version installed on your server.

Upload Admin Panel code on server

1. Unzip the code you will see the Admin Panel inside the zip.

2. Upload this folder content on your server in subdomain folder.

3. After uploading visit your domain url. You will see the installation wizard.Follow the instructions.



Installation Steps


1. Installation Screen

Eclassify

2. Server Requirements & Extensions

If PHP version is lower than 8.1 or any extension is not installed then it will be highlighted using Red color. So you need to make sure that your server meets the all requirement.

* nd_pdo_mysql extension is also required
Eclassify

3. Permission Screen

Make sure this folder have read & write permissions. If not then assign this folders read & write permissions.

Eclassify

4. Purchase Code Validation

Here you'll have to insert the purchase code obtained from CodeCanyon to authenticate your purchase and authorize your server to access the services.

To find your Purchase code you can visit this link: Where is My Purchase code?

Eclassify

5. Database Configuration Screen

Eclassify

6. Database Connection Status

Eclassify

7. Final installation Screen

If everything is configured successfully then your Admin panel has been installed successfully.You can login as Super Admin using the credentials provided here.

Eclassify Eclassify

Additional Configurations (Admin Panel)


After Installation you need to setup some settings before using the system.

1. General Settings

This settings will be used by Admin Panel.You can set your current session year here.

Eclassify


7. Payment Gateway's Webhook Configuration

Eclassify

1. Webhook Configuration for Stripe

Eclassify Eclassify Eclassify

How to Setup latest Java jdk on windows


Setup JDK in your system

  1. If your System already have latest Java jdk installed then you can skip this step.
  2. Download latest Java jdk by clicking below link.
    (JAVA jdk)
  3. Download latest Java JDK for your version 32 bit or JDK download 64 bit.

  4. Please prefer video tutorials, we recommend this playlist for set environment variable for java in Windows 10 - https://www.youtube.com/watch?v=zzfHPGyjoWw


  5. Please prefer video tutorials, we recommend this playlist for set environment variable for java in Windows 11 - https://www.youtube.com/watch?v=zAyIqbBAUxQ

Setup flutter


Setup flutter in your system

    Visit flutter official website : https://docs.flutter.dev/get-started/install for full install guide.

    If you prefer video tutorials, we recommend this playlist for the full installation process
    https://www.youtube.com/playlist?list=PLSzsOkUDsvdtl3Pw48-R8lcK2oYkk40cm

How to change package name


  1. Unzip the downloaded code. After unzipping you will have Eclassify - Flutter Code zip folder. Unzip that folder and open it in Android Studio or Visual Studio Code.
  2. Open ide terminal go to your project path and execute command

    flutter pub get

  3. If you are running this app for ios then run these following commands in terminal.

    cd ios

    pod install

    cd ..

  4. Change package name of android app
    Execute this command in your terminal

    flutter pub run change_app_package_name:main your_new_package_name


    Eclassify

  5. Change package name of ios app
    Open ios folder of this project in xcode. Go Select Runner->Targets->General->Identity and enter new package name in Build Identifier.

    Eclassify

How to change app version


  1. Go to pubspec.yaml
  2. EX. Update version:A.B.C+X in pubspec.yaml.
  3. For Android:
  4. A.B.C represents the versionName such as 1.0.0. X (the number after the +) represents the versionCode such as 1, 2, 3, etc.
  5. Do not forget to execute flutter packages get, flutter build or flutter run after this step
  6. Eclassify
  7. For iOS
  8. A.B.C represents the CFBundleShortVersionString such as 1.0.0. X (the number after the +) represents the CFBundleVersion such as 1, 2, 3, etc.
  9. Do not forget to execute flutter packages get, flutter build or flutter run after this step
  10. Eclassify

Integrate with firebase


  1. Create firebase project in your account:


    Eclassify

    Eclassify

    Eclassify

    Eclassify

  2. Add android application to your firebase project



    Eclassify

    Download the google-service.json file and add in this folder android/app/



    Eclassify

    Eclassify

    Eclassify

  3. Add ios application to your firebase project



    Eclassify

    Eclassify

  4. Download GoogleService-Info.plist and add in this folder ios/Runner/



    Eclassify

  5. Please configre this settings in-order to send ios notifications.

    https://firebase.flutter.dev/docs/messaging/apple-integration

  6. You have configured firebase in your project successfully.


Note:


You can configure firebase with flutter project through these steps:   https://firebase.google.com/docs/flutter/setup

How to enable Firebase Phone Authentication(OTP).


  1. Open your firebase console.
  2. Go to Authentication and open Sign-in method.
  3. Enable Phone Sign-in method and save.

  4. Eclassify


  • Now, we have to add sha1 and sha256 key in firebase, for that perform below given step.

    • How to get Debug SHA Keys?


    • Open terminal and copy these both commands run below command one by one for getting debug sha keys
    • cd android
    • ./gradlew signingReport
    • Eclassify
  • After ran those command you can get debug sha keys in terminal as below image.

  • Eclassify

  • Now copy debug SHA-1 and SHA-256 both and add it in firebase console as below image.

  • Eclassify


    How to get Release SHA Keys?


    Remember:


  • When we are releasing apk then we need to add release sha in firebase panel otherwise otp will not work.
  • after release you can get sha from play console here

  • Eclassify

  • or another way you can also get release sha from below given command in terminal
  • If you have already created keystore file then do below steps otherwise first create keystore file through these steps ::   Create KeyStore File
  • Then here edit this command and replace your keystore path and alias in this command keytool -list -v -keystore "D:\keystore\eclassify.jks" -alias eclassify
  • Then it will ask for password. Enter password and then it will show your release SHA-1 and SHA-256 keys..
  • Copy these both keys and add on firebase app.
  • Eclassify

    For iOS:


    Add custom URL schemes to your Xcode project:

    • Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.
    • Click the + button, and add a URL scheme for your reversed client ID. To find this value, open the GoogleService-Info.plist configuration file, and look for the REVERSED_CLIENT_ID key. Copy the value of that key, and paste it into the URL Schemes box on the configuration page. Leave the other fields blank.
    • When completed, your config should look something similar to the following (but with your application-specific values):
    • Eclassify


    Authenticate with Firebase Using Google Sign-In



    1. Open your firebase console.
    2. Go to Sign-in method in Authentication.
    3. Go to the Google.. Enable the Save it.

    4. Eclassify


    Authenticate with Firebase Using Apple Sign-In


    1. Open your firebase console.
    2. Go to Sign-in method in Authentication.
    3. Go to the Apple and enable apple sign in.

    4. Eclassify
    5. In Xcode, select the Signing & Capabilities tab, and add "Sign In With Apple" as a new Capability then select a team on the Code Signing section.

    6. Eclassify
    7. This will generate and configure an App ID in the "Certificates, Identifiers & Profiles" section of the Apple Developer portal.

    How to set Notification


    1. Go to your firebase project in project settings -> general. Copy your project id from there as below image.



    2. Go to project settings -> service accounts. For download service json file click on Generate new private key button as below image.



    3. Now add your project id and downloaded service json file in admin panel system settings and save it.


      For ios your need to perform below given step.


    1. In Xcode, open the project.
    2. In the Project Navigator (the left-hand menu), select the project icon that represents your app.
    3. In the top-left corner of the right-hand pane in Xcode, select your app's target.
    4. Navigate to the Capabilities tab.
    5. Enable Push Notifications.
    6. Check Remote Notifications and Background Fetch from Enabling Background Modes.



    7. APNs (Apple's Push Notification service) currently supports two types of connections: token-based (.p8) and certificate-based (.p12).you can follow either one of them

    8. For Token-based (.p8).


    9. Log in to the Apple Developer Portal.
    10. Navigate to Certificates, IDs & Profiles > Identifiers > App IDs and click the App ID associated with your app.
    11. On the screen for your App ID, check Capabilities > Push Notifications.





    12. Select App ID in next page & click continue.
    13. And then create Development SSL Certificate & Production SSL Certificate by adding CSR certificate. follow Apple's Create a certificate signing request instructions.
    14. Navigate to Certificates, IDs & Profiles > Keys Section and add a Universal key for Notifications,which you can use for more than one apps as well.



    15. Just save and Download & keep it safe, as it will be downloaded only once.



    16. Then go to Firebase and add this .p8 file along with Your Key ID and Team ID.



    17. FOR certificate-based (.p12) :


    18. Log in to the Apple Developer Portal.
    19. Navigate to Certificates, IDs & Profiles > Identifiers > App IDs and click the App ID associated with your app.
    20. On the screen for your App ID, check Capabilities > Push Notifications.
    21. Click Save and respond to the Modify App Capabilities dialog box that appears.
    22. To create the certificate, we will use to communicate with Apple when sending push notifications:
      • In a new browser tab, follow Apple's Create a certificate signing request instructions.
      • In the Apple Developer Portal, navigate back to your App ID.
      • Click Capabilities > Push Notifications > Configure.
      • Click one of the following buttons:
        • Development SSL Certificate > Create Certificate (for testing push notifications while developing an iOS app)
        • Production SSL Certificate > Create Certificate (for sending push notifications in production)
      • Click Choose File and select the certificate signing request you created above.
      • Click Continue.
      • Click Download to download the certificate.
      • Use this file to export a .p12 file in the next step.
    23. Navigate in the Apple Developer Portal to Certificates, IDs & Profiles > Provisioning Profiles.
    24. Click the provisioning profile you'd like to edit.
    25. Edit the provisioning profile as necessary, and click Save.
    26. Click Download, and double-click the downloaded provisioning profile to install it.
    27. Make sure your Xcode project is configured to use the provisioning profile as necessary.Next, export the downloaded certificate (.cer file) as a .p12 file that can be uploaded to firebase:
      • On your Mac, double-click the .cer file to open it in Keychain Access.
      • In Keychain Access, in the lower-left corner, select Category > Certificates.
      • Select the certificate to export.
      • Choose File > Export Items.
      • Enter a name in the Save As field.
      • Accept the default .p12 file format and click Save. Respond to the prompts, and enter a password for the file if necessary.
      • Keep track of this file, since you'll upload it to firebase in a later step.






    How to Add Map API key for Address


    1. Go to Google Cloud Platform. Click here
    2. Click on console. Eclassify

    3. Select your Firebase Project Eclassify

    4. Search for APIs, which are shown in below image. Eclassify

    5. Click on Enable to, enable that APIs Eclassify

    6. Do above steps for below listed API. (enable all below APIs one by one by searching) Eclassify

    7. Go to Credential Tab. you will find your Androiod and iOS API keys. Eclassify

    8. You have to setup those above API keys for both Platform.
      1. Android Setup
        • Next, open android ‣ app ‣ src ‣ main ‣ AndroidManifest.xml and paste the Google Maps meta data tag into your application tag before the activity tag, placing the API key you copied before to replace {{YOUR_API_KEY_HERE}}.
        • <meta-data android:name="com.google.android.geo.API_KEY" android:value="{{YOUR_API_KEY_HERE}}" />
      2. Note: For the value field, please paste in your API Key from the Google Maps API registration process.

        Eclassify

      3. iOS Setup
        • Next, open the ios ‣ Runner ‣ AppDelegate.swift file and paste the following code at shown in image.

          GMSServices.provideAPIKey("YOUR KEY HERE")
      4. Note: Again, for the value field please paste in your API Key from the registration process.

        Eclassify

    Integrate with admin panel


    Go to lib/settings.dart and replace the hostUrl with your admin panel url.



    Eclassify

    Change app name


    For Android, go to android/app/src/main/AndroidManifest.xml and change the app name as shown in image. Replace the selected Eclassify text with your school name



    Eclassify

    For IOS open this project in xcode and enter your app name in display name field as shown in image.

    Eclassify

    Change app name in lib -> settings.dart file as shown in image.



    Eclassify

    How to Change Splash Screen Image in app


  • Go to assets folder -> svg -> Logo folder. You can change your image to exist image with same name.
  • Eclassify

    How to Change Images in app


  • Go to assets folder. You can change your image to exist image with same name.
  • Eclassify

    How to Change Default Country Code in app


  • Go to lib -> settings.dart file.. Here you can add your default country code.
  • Eclassify

    Run this app


    Open your terminal, navigate to your project path and execute the following command to run this app.


    flutter run


    Go to README.md file to check all the commonly used commands to fix issues that you may encounter while running the app. You'll also be able to run the shell script directly if you're using Android Studio.


    Eclassify

    Change app theme


    Go to lib/Ui/Theme/theme.dart and set your theme colors.

    Eclassify

    Change font in app


    1. Go to assets/fonts/ and add .tff files of fonts.

      Eclassify
    2. Go to pubspecs.yaml and add your font as shown in image.

      Eclassify

    How to enable/disable and admob settings


    1. If you want to disable google admob then you can disable from admin panel -> settings -> admob settings

    2. Create android and iOS app in google admob account. You can create google admob account from here. https://admob.google.com/home/

    3. Create banner and interstitial ads and copy those ads id.

    4. Paste those ads id in admin panel -> settings -> admob settings..



    5. Eclassify

    Generate release version


    Create and add Keystore file for Android:



    1. To generate a keystore file, run the following command:


      keytool -genkey -v -keystore your-keystore-file.jks -keyalg RSA -keysize 2048 -validity 10000 -alias your-alias

      You can replace your-keystore-file.jks with your preferred filename, but ensure you keep the ".jks" extension. Similarly, you can change your-alias as needed, but make sure to remember it. During this process, you will be prompted to set a password; please note that the password characters won't be visible on the screen.

      Additional information may be requested, but you can simply press Enter to skip those as they are optional fields.



    2. Go to android -> key.properties file and add the following details, which correspond to the information you used in the previous step:



      storePassword= [your-password-from-previous-step]
      keyPassword= [your-password-from-previous-step]
      keyAlias= [your-alias-from-previous-step]
      storeFile= [your-keystore-file-location]


      Replace the placeholders ("[]" brackets) with the actual details you used. Once these two steps are completed, you can generate either an APK file using the following command:


      flutter build apk

      Or an app bundle file for the Play Store upload with:


      flutter build appbundle
    Eclassify

    Follow these links for more information on generating the release version:



    1. To generate release android app-bundle and publish to Playstore follow https://flutter.dev/docs/deployment/android



    2. To generate release ios apk and publish to appstore follow https://flutter.dev/docs/deployment/ios

      eClassify Web App

      eClassify Web Version is built with Next JS v14.0.3 so you need to setup your Local Computer First.



      MANDATORY

    1. Your Admin panel must be on sub-domain like (example:- admin.yourdomain.com)

    2. Your Web must be on main-domain like (example:- yourdomain.com)

    3. The Web domain must be SSL for security reasons


    4. How to setup Web Version

      1. Install Node JS :

        Visit Node JS Official website : https://nodejs.dev/en/learn/how-to-install-nodejs/ for full installation guide.


    5. Where to set API URL (Admin)

      1. API Url is your admin panel url which is used to fetch the data from admin panel

        Open .env file and change the following details

        Eclassify

    6. How to Connect Firebase with your Web eClassify.

      1. Create firebase project in your account


        Eclassify

        Eclassify

        Eclassify

        Eclassify


      2. Add web application to your firebase project


        Eclassify

      3. Enter the App Name and Click on Register App


        Eclassify

      4. Now Copy this Firebase Credentials.


        Eclassify

      5. How to configure domain in firebase console


        Eclassify

      6. And paste this your Credentials in .env and public/firebase-messaging-sw.js File.


        Eclassify
        Eclassify

      7. open firebase account go to project settings -> cloud messaging -> Web configuration and select key and paste in .env file


        Eclassify
        Eclassify

      8. Congratulations. You have successfully connected your Web application to your firebase project. Now you are good to go ahead.


    7. How to change Web Application name


      1. Change application name for your Web application. Go to .env file


        Eclassify


    8. How to Change Fonts

      1. Open google font and select the font


        Eclassify
      2. Open public/css/style.css file


        Eclassify


    9. How to get map Place api key

      1. Open cloud console and select your project


        Eclassify
      2. You have to enable this all API and Services Geocoding API, Places API, Geolocation APIs, Maps JavaScript API from 'Enable API and Services'.


        Eclassify

      3. you have get place api key copy and paste to your system settings in admin panel check here


        MANDATORY
        Make sure you have you have enabled billing account otherwise location search will not work in web.

    10. How to Set Logo, Theme Color, Web Name, Footer Logo, Footer Description, Google Place api key etc

      1. go to admin panel -> settings


        Eclassify


    11. How to Setup Sitemap

      1. add web domain or subdomain url in .env File Eclassify
      2. generate sitemap use command :- npm run dev
      3. if you want to customize the sitemap then go to public->sitemap.xml file Eclassify

    12. How to Add Google AdSense

      1. Go to Google AdSense and sigin your account and Add site as per Image


      2. Eclassify
      3. click on Let's Go button


      4. Eclassify
      5. Copy this script code and paste to your admin panel -> system settings -> web settings


      6. Eclassify
        Eclassify
      7. after script add you need to run command for build folder npm run export and upload to your server. and after click on verify button in google adsense


        Eclassify

      8. If it says “Getting ready…,” your account is still under review and your site will not display ads until it has been approved.


        Eclassify


    13. How to run this project

      1. Unzip the downloaded code. After unzipping you will have eClassify - Web Code Folder.
        Open it in Visual Studio Code.


      2. Open VS Code teminal by typing CTRL+J in Windows/Linux, and for MacOS CMD+J and execute the command --> npm install
        This will take some time to download a few Packages so wait for a few minutes.


      3. After npm install finishes run this command --> npm run dev.
        This Command will Start the development mode.Check If everything is working fine then your are good to go ahead.


    14. Deploy to the Server

      1. WARNING
        1. Deployment of the Next JS needs a bit of knowledge about node js npm pm2 technologies. We have assumed that you are using a debian based OS, apt is your package manager. If you are using any other linux distro then apt will be replaced with the respective package manager of the OS

        2. We do not recommend deploying on shared hosting as it may not support all Node.js features. If you do not have a VPS server, you can proceed with this method, but we cannot provide support for any issues that arise.

        Before starting the project deployment, you must upload your project to the server. Project can be upload to the server using FileZila or in other ways.


        Installing NodeJS

        NodeJS can be installed using NVM by which multi Node version can be controlled easily.

        sudo apt install curl curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash> sudo apt install curl nvm install node 20.* Check if node js is installed correctly using this command node -v
        INFO
        For more information, use official documentation

        Installing PM2 Server

        By running the following command, PM2 server can be installed globally

        npm install pm2 -g

        Set port

        Before set port check available ports with this command

        sudo lsof -i -P -n | grep 8003
        eClassify

        if you get response like this it means this port is occupy with other project so try other port like (8000, 8001, 8002, 8003, 8004 etc)


        eClassify

        if you get response like this it means this port is available you can use this port


        Now add available port to your package.json and .htaccess file


        eClassify
        eClassify



        Setup the Project


        MANDATORY
        Make sure you have node_modules installed in your directory.

        For installing package run the following command
        npm install
        The above command will install all the node modules in your directory.
        After that, project must be built. For that, run the following command, which will build the production application in the .next folder.
        npm run build

        Run the PM2 server

        Go to the project root and run the following command
        pm2 start "npm start" -n "YOUR_PROJECT_NAME"
        Check if pm2 process is Running OK
        pm2 ls
        When you run pm2 ls you will see , 2 types of output
        1. Error :
        eClassify 2. Success :
        eClassify

        If you are getting errors in the pm2 process , then run pm2 logs and send us the Screenshot of the error, so that we can guide you to resolve your issues.

        If you want to restart your pm2 process then run pm2 restart id // Replace id with your process id

        For example here id is 0 in the above screenshot --> pm2 restart 0

        For deleting the previous project running in the PM2 server, use the following command
        pm2 delete "YOUR_PROJECT_NAME"
        INFO
        For more information, use official documentation

        INFO
        Upload your web code to your server, open the terminal, navigate to your web code directory, and run the ./install.sh command.

    Support


    Its our pleasure to serve and support our customers. Please contact our support team if you encounter any issues or have any questions related to Eclassify.


    Customer Support Head for Eclassify : Nikita Bhanderi


    To help our customers, we constantly be in touch with every customer if they need any assistance regarding our product.
    We offer our customers a support from Mon – Fri 9.00am to 6.00pm IST (GMT +5.30) – We are a Team located in India – Asia. Typically we reply our customers for all the questions and queries within 24 hours of time via comments, support forum or emails.

    FAQs


    1. Why I'm getting unknown host issue while configuring the Database ?


    Possible reason may be nd_pdo_mysql extension is not installed. Install that and try again. If you are still having the same issue Contact Us.


    2. Do I have to install admin from scratch to get the Latest features ?


    No, Fresh installation is required only for the first time.You need use System Update menu to update your system.


    3. Then How to do I update my Admin Panel to get the benefits of the latest featured ?


    When we release new updates, We provide zip files of the Updates under the Admin Panel Code. Follow this steps to update your system :

    1. Open you Admin Panel
    2. Now go to System Update menu , which you can see as the last Option in Sidebar.
    3. In the System Update form you need to fill your Purchase code with the update version zip file.
    4. Hit Submit. Voila ! your System is updated now.

    4. Images are not loading in App / Web / Admin Panel ?


    This issue will be fixed from the Admin Panel code. So Open the Admin Panel in Server file manager. Then Perform this below steps :

    1. Open your public folder rename storage folder to storage-old (Skip this step if storage folder does not exists.)
    2. Open your_domain.com/storage-link -> you will see the blank page
    3. After this check the images are loading or not.


    Rating


    Your Feedback


    Dear valuable customer, Thank you very much for choosing our product. It's our pleasure to serve top-notch service to you. Please give us your honest feedback that will help us to make a more strong and reliable product by click here Rate Us. Thank you very much.

    Contact Us


    WRTeam has creative and dedicated group of developers who are mastered in Apps Developments and Web Application Development with a niche in delivering quality solutions to customers across the globe. Contact us today to find out how we can help you or for freelance work.

    Visit Us : https://wrteam.in

    Mail Us : support@wrteam.in


    Thank you very much.