The MJFIT Gym Trainer website consists of three main user roles: Admin, Member, and Trainer.
This user guide covers all the options that these features provide. Please read the documentation carefully, as it likely contains answers to most of the questions that may arise. If you feel some aspects are not covered or have any questions, please contact us via email at sales@mojoomla.com. We will do our best to respond as quickly as possible.
Click on "Add project" or select an existing project if you have one.
Enter a name for your project and optionally choose a country/region.
Click on "Create Project" to create the Firebase project.
Step 2: Connect your Web to Firebase
For Web:
In the Firebase Console, go to your project settings (the gear icon) and click on "Project settings."
Under the "Your apps" section, click on the Web icon to add an Web app.
Follow the instructions to register your web, providing the web app nickname.
Copy the Firebase SDK configuration that is generated for you. This will include your apiKey, authDomain, and other details that you will use to configure your Flutter web app later.
Step 3: Enable Sign-in-Method
Click on "Authentication" from the left sidebar.
Click on the "Sign-in method" tab.
In the "Sign-in method" tab, you'll find a list of sign-in providers. Enable the desired sign-in method(s) you want to use, such as Email/Password, Google, Facebook, etc.
Follow on the top step and enable bellow methods
Step 4: Change your Firease Database rules
Click on the "Firebase Database" tab in the left sidebar to navigate to the Firebase Database section.
In the Database section, you will see a "Rules" tab. Click on it to access the database rules editor.
The rules editor allows you to define the security rules for your database. You can write rules using the Firebase Database Security Rules language.
Copy the below Rules then paste this Rules
  rules_version = '2';
  service cloud.firestore {
  match /databases/{database}/documents {
  match /{document=**} {
  allow read, write: if request.auth != null;
  allow read: if request.auth == null;
      }
    }
  }
Once you have made the necessary changes to the rules, click on the "Publish" button to save and apply the new rules to your database.
Firebase will validate the new rules for any syntax errors or potential security issues. If there are any errors, Firebase will provide feedback on the errors and suggestions to fix them.
If the rules are successfully validated, Firebase will apply the new rules to your database.
Step 5: Change your storage rules
Click on the "Storage" tab in the left sidebar to navigate to the Firebase Database section.
In the Storage section, you will see a "Rules" tab. Click on it to access the Storage rules editor.
The rules editor allows you to define the security rules for your Storage. You can write rules using the Storage Rules language.
Copy the below Rules then paste this Rules
  rules_version = '2';
  service firebase.storage {
  match /b/{bucket}/o {
  match /{allPaths=**} {
  allow read, write: if request.auth != null;
  allow read, write: if request.auth == null;
      }
    }
  }
Once you have made the necessary changes to the rules, click on the "Publish" button to save and apply the new rules to your database.
Firebase will validate the new rules for any syntax errors or potential security issues. If there are any errors, Firebase will provide feedback on the errors and suggestions to fix them.
If the rules are successfully validated, Firebase will apply the new rules to your Storage.
Step 6: Add your app Indexes
Click on "Firestore Database" → then click on "Indexes tab" → and finally click on "Add Index" Thne Fill Detail Like This Image.
After configuring the index, click on the "Create Index" button to add it to your Firestore database.
Firestore will process the index creation request, which may take some time depending on the size of your database. You can check the status of the index creation on the "Indexes" page. Once the index status changes to "Enabled," the index is ready to use.
Add all the Indexes below by following the above steps
Go to android folder.("D:\user\gym_trainer_app\android\")
Then Run this command ./gradlew signingReport
Then Copy the SHA1 and SHA-256 key and paste it to the address below
Click on the gear icon in the upper-left corner to access project settings.
In the Project Settings page, scroll down to the section titled "MJFIT" and find the Android app for which you want to add the keys. If you haven't added an Android app yet, click on the "Add app" button and follow the instructions to register your app.
Once you have selected the Android app, you'll see the app's configuration details.
Look for the section titled "SHA certificate fingerprints" and click on the "Add fingerprint" button.
In the dialog that appears, enter the SHA-1 key in the provided field.
also add SHA-256 keys by clicking on the "Add another fingerprint" link and entering the respective keys in the provided fields.
Click on the "Save" button to add the keys to your Firebase project.
Step 8: Deploy firebase function
Following bellow steps to genrate google-service-key
Click on the project drop-down and select Project.
In the Google Cloud Console, click on the menu icon (☰) in the top-left corner.
Under the "IAM & Admin" section, select "Service accounts."
Click on the "+ CREATE SERVICE ACCOUNT" button.
Provide a name for the service account.
You can optionally provide a description for the service account.
Click on the "CREATE" button.
In the "Create a new service account" window, you can choose to assign roles to the service account. Roles determine what permissions the service account has.
Select the appropriate role(s) from the list, or you can assign roles later.
After creating the service account, you'll be prompted to create a key. Click on the "CREATE KEY" button.
Choose the key type. For service account keys, it's recommended to use JSON format.
Click on the "CREATE" button.
The service key will be generated, and a JSON file containing the key will be downloaded to your computer.
Store the downloaded JSON file containing the service key securely on your server or in your application's environment.
Set up Firebase Project
If you haven't already, create a Firebase project and set up Firebase in your project directory. You can do this using the Firebase CLI (Command Line Interface). Install the Firebase CLI if you haven't already by running:
npm install -g firebase-tools
Then, log in to your Google account with Firebase CLI:
firebase login
aftre, Put file on below path and rename this file name to google-service-key.json
Once you are ready to deploy your Firebase Functions to the cloud, use the following command from your project's root directory:
firebase deploy --only functions
This command will upload your functions to Firebase, and after a successful deployment, you'll receive URLs for any HTTP functions you've defined.
5) Set Up Email Notification
To set up Email Notification for a MJFIT app, follow these step-by-step instructions:
Step 1: Create a Sendinblue account
Go to the Sendinblue website using your preferred web browser.Go to the Sendinblue website using your preferred web browser. The website URL is (https://www.sendinblue.com/).
Click on "Sign Up" or "Get Started": On the homepage, you'll usually find a prominent "Sign Up" or "Get Started" button. Click on it to begin the account creation process.
Select your account type: Sendinblue offers different types of accounts based on your needs. Choose the appropriate account type based on the features and functionalities you require. The options usually include "Free," "Lite," "Premium," and "Enterprise."
Fill in the required information: You'll be presented with a form where you need to provide your details. Typically, the form includes fields such as your name, email address, and a password. Fill in the necessary information accurately.
Verify your email address: After completing the form, you'll receive an email from Sendinblue to verify your email address. Click on the verification link provided in the email to confirm your account.
Set up your account: Once your email address is verified, you'll be directed to the Sendinblue dashboard or a setup wizard. Follow the on-screen instructions to configure your account settings, including your organization's name, contact details, and any additional information required.
Explore Sendinblue features: Once your account setup is complete, you can start exploring the various features and functionalities offered by Sendinblue. These may include email marketing, SMS campaigns, automation workflows, contact management, and more.
Step 2: Connect your Website with SMTP & API
Go Sendinblue dashboard.
In the SMTP section, you'll find your SMTP credentials. Make a note of the SMTP server, port number, username, and password. You'll need these details to configure your email notifications.
Now, you'll need to integrate Sendinblue with your application or platform. Sendinblue provides various integration options, such as SMTP, API, plugins, and libraries. Choose the integration method that suits your needs.
Click Generate a new SMTP key. Add the name of your SMTP key and Generate then copy this smtp key.
Go to this path "Admin Setting -> Email Setting" then Changes the value of sendinblueEmailFrom, sendinblueEmailName, sendinblueSMTPServerPort, sendinblueSMTPPassword.
SendinblueSMTPPassword is your SMTP Master PassWord.
6) Change Website Name
Change the website name To change the name of a Flutter web, you need to modify the appropriate files and configurations. Here's a step-by-step guide to help you change the web name:
Open the Flutter project in your preferred integrated development environment (IDE) or code editor.
Now, you need to update the web name in the Android configuration.
Follow below steps and you can change your web name.
First you go your app in android folder in same path "android -> app -> src -> main -> AndroidManifest.xml"
After in "AndroidMani`fest.xml" you find "label" keyword and change your web name
If you need change your apk name ypu can follow this below steps
First you go your app in android folder in same path "android -> app -> src -> build.gradle"
After in "build.gradle" you find "setProperty" keyword and can change the app name
After in "build.gradle" you find "setProperty" keyword and can change the app name
Now, you need to update the app name in the iOS configuration.
Open the ios directory in your Flutter project.
Inside the ios directory, find the Runner directory and open it.
Locate the Info.plist file (usually located at ios/Runner/Info.plist).
Open the Info.plist file and find the CFBundleDisplayName section.
Change the value of the tag below CFBundleDisplayName to your desired app name. For example, MJFIT Web.
Save the Info.plist file.
Note :After following these steps, the name of your Flutter Web should be updated. Remember to clean and rebuild your project to ensure the changes take effect.
7) Change Website Logo
Change the launcher icon in Replace the default web icons: -> For Android, navigate to the android/app/src/main/res directory in your Flutter project. Replace the icons in the mipmap directories with your custom icons, following the size-specific folders (e.g., mipmap-mdpi, mipmap-hdpi, etc.). -> For iOS, navigate to the ios/Runner/Assets.xcassets/AppIcon appiconset directory in your Flutter project. Replace the default icons with your custom icons. Make sure to match the size and format requirements for each icon.
Note: You need the 512x512 px size for publishing to Google Play.
8) Change Package Name
To change the package name of a Flutter application, you need to update it in several places within your project. Follow these steps to change the package name:
Update the Android package name:
• Open the AndroidManifest.xml file located at android/app/src/main/AndroidManifest.xml.
• Change the package attribute of the tag to the new package name.
• Also you need change "applicationId" with your application package name
• Go to the following path (android/app/src /build.gradle )and change the "applicationId" and change
• After that update the "applicationId" with your application package name
Update the iOS bundle identifier:
• Open the Info.plist file located at ios/Runner/Info.plist.
• Change the value of the CFBundleIdentifier key to the new package name.Open the Info.plist file and find the CFBundleName section.
Change the value of the tag below CFBundleName to your desired app bundal name. For example, "crossfit.personaltrainer.gymtrainer.fitness".
Update import statements and references:
• In your Dart code files, update any import statements that reference the old package name to import the new package name.
• Replace any references to the old package name within your code with the new package name.
Clean and rebuild the project: Run the following command in the root directory of your project to clean and rebuild your Flutter project:
• flutter clean
• flutter pub get
• flutter run
After following these steps, your Flutter application should have the updated package name throughout the project. Make sure to update any dependencies or configurations that reference the old package name as well.
9) Build Your Release Web
To set up for a Release web app, follow these step-by-step instructions:
Step 1 Download and install FileZilla (if not installed)
Click on the Download FileZilla Client button on the homepage.
Once the download is complete, open the installer and follow the on-screen instructions to install FileZilla.
Step 2 Build Your Flutter Web
Click on "Build" → then click on "Flutter" → and finally click on "Build WEB". gym_trainer_app\build\web\This space will appear after the build is complete.
Step 3 Open FileZilla client
Connect to Your Server:
In the "Quickconnect" section, enter your server credentials.
Click the Quickconnect button.
Step 4 Navigate to the Target Directory on the Server
In the right pane (remote server), navigate to the directory where you want to upload your Flutter web app.
Step 5 Upload Flutter Web Build Files
Open Local Directory
• In the left pane (local file system), navigate to the build/web directory of your Flutter project.
Select Files
• Select all files and folders inside the build/web directory (including index.html, main.dart.js, and the assets folder).
Drag and Drop Files
Drag and drop the selected files from the left pane to the target directory in the right pane
10) MJFIT Web Overview
A) Login Screen:
You will see this login screen.You can now login as admin username and password.
All users can login from this login screen.
B) Admin
Login Admin ID And Password For Demo
Email :admin@gmail.com Password :admin@123
i) Change Admin Email And Password
Click on the "Profile" option from the menu to navigate to the profile screen.
On the top right side of the profile screen, click on the pencil icon.
A form will appear where you can enter the new email and password.
Input the desired new email and password in the respective fields.
After making the necessary changes, click on the "Save" button to save the updated information.
ii) Add Trainer in Admin
Click on the "Trainer" option in the menu to open the trainer screen.
On the top right side of the trainer screen, click on the add user icon to add trainer.
A form will appear where you can add the trainer.
Input the desired details in the respective fields.
After filling the information, click on the "Add Trainer" button to save the trainer.
iii) Add Trainer Package in Admin
Click on the "Trainer Package" option from the menu to open the Trainer Package screen.
On the top right side of the trainer package screen, click on the plus icon to add the trainer package.
A form will appear where you can add trainer package.
Input the desired details in the respective fields.
After filling the information, click on the "Add Packages" button to save the trainer package.
iv) Assign Trainer Package in Admin
Click on the "Trainer Package" option from the menu to open the Trainer Package screen.
Click on the option menu to assign trainer package as per the above image.
A form will appear where you can assign trainer package.
Select the trainer and click on the "ASSIGN TO TRAINER" button to assign the trainer package. .
v) Manual Invoice
Click on the "Manual Invoice" option in the menu to open the manual invoice screen.
Here Click on "+" to add your manual invoice like Protein powder sold
Here you can see your all manual invoice
C) Trainer
Login Trainer ID And Password For Demo
Email :trainer@gmail.com Password :trainer
i) Add Member in Trainer
Click on the "Member" option in the menu to open the Member screen.
On the top right side of the member screen, click on the add user icon to add the member.
A form will appear where you can add the member.
Input the desired details in the respective fields.
After filling the information, click on the "SAVE" button to save the member.
ii) Assign Membership in Trainer
Click on the "Membership Plan" option from the menu to open the Membership Plan screen.
Click on the option menu to assign trainer package as per the above image.
Select the member and click on the "ASSIGN TO MEMBER" button to assign the Membership.
iii) Add Membership Plan in Trainer
Click on the "Membership Plan" option from the menu to open the Membership Plan screen.
On the top right side of the Membership Plan screen, click on the plus icon to add Membership Plan.
A form will appear where you can add the membership.
Input the desired details in the respective fields.
After filling the information, click on the "ADD MEMBERSHIP" button to save the membership.
iv) Add Workout Category in Trainer
Click on the "Workout Category" option from the menu to open the Workout Category screen.
On the top right side of the Workout Category screen, click on the plus icon to add Workout Category.
A form will appear where you can add the Workout Category.
Input the desired details in the respective fields.
After filling the information, click on the "ADD CATEGORY" button to add the Workout Category.
v) Add Exercise in Trainer
Click on the "Exercise" option from the menu to open the Exercise screen.
On the top right side of the Exercise screen, click on the plus icon to add Exercise.
A form will appear where you can add the Exercise.
Input the desired details in the respective fields.
After filling the information, click on the "SAVE" button to add the Exercise.
vi) Add Nutrition in Trainer
Click on the "Nutrition Plan" option from the menu to open the Nutrition Plan screen.
On the top right side of the Nutrition screen, click on the plus icon to add Nutrition plan.
A form will appear where you can add the Nutrition Plan.
Input the desired details in the respective fields.
After filling the information, click on the "Add Nutrition" button to add the Nutrition.
vii) Add Workout in Trainer
Click on the "Workout" option from the menu to open the Workout screen.
On the top right side of the Membership Plan screen, click on the "CREATE WORKOUT" to add Workout.
A form will appear where you can add the Workout.
Input the desired details in the respective fields.
After filling the information, click on the "ADD WORKOUT" button to save the Workout.
viii) Add Class Schedule in Trainer
Click on the "Class Schedule" option from the menu to open the Class Schedule screen.
On the top right side of the Class Schedule screen, click on the plus icon to add Class Schedule.
A form will appear where you can add the Class Schedule.
Input the desired details in the respective fields.
After filling the information, click on the "CREATE CLASS" button to add the Class.
ix) Membership Package
Click on the "Membership Package" option from the menu to open the Membership Package screen.
Here you will see all the packages of your admin
Click on the "update" button and then Click "Yes" and you can buy packages
x) Manual Invoice
Click on the "Manual Invoice" option from the menu to open the Manual Invoice screen.
Here Click on "+" to add your manual invoice like Protein powder sold
Here you can see your all manual invoice
D) Member
Login Membre ID And Password For Demo
Email :member@gmail.com Password :member
i) Add Measurement of Member
Click on the "Measurement" option from the menu to open the Measurement screen.
Select the date, input the desired details in the respective fields.
After filling the information, click on the "SAVE" button to add the Measurement.
ii) Workout of Member
Click on the "My Workout" option from the menu to open the My Workout screen.
Select any workout.
Select the date, start any sub category of particular workout.
Change the set, reps, sec and rest accordingly and save it.
Click on the "START" button for video refrence of that particular workout type.
iii) View Nutrition in Member
Click on the "Nutrition Plan" option from the menu to open the Nutrition Plan screen.
Click on the "Nutriton" to see the details of it.
iv) Join Class in Member
Click on the "Class Schedule" option from the menu to open the Class Schedule screen.
Click on the "JOIN" button.
Click on the "JOIN VIRTUAL CLASS" button to attain the class.
In the case of 'in person meeting', there will be "View" button instead of "Join".
Click on the "View" button to see the details of it.
iv) Membership Package
Click on the "Membership Package" option from the menu to open the Membership Package screen.
Here you will see all the membership plans of your trainer
Click on the "update" button and then Click "Yes" and you can buy Membership
E) Guest
Login Screen:
Click on the "Book Demo Class" button and then you will be taken to the register screen where you can register as a guest by filling in all the details.
after register complete you can login again and with the same id and password
after login you can book your demo Class
i) Book Demo Class
Select the "Class Schedule" option from the menu to open the class schedule Screen.
Here you will see the guest classes of different trainers and you can book any one of them for a class demo
After booking the class you can join your booked class from here
ii) Membership Plan
Click on the "Membership Plan" option from the menu to open the Membership Plan screen.
Here you will see the guest membership plan of different trainers and You can go ahead with that trainer by purchasing a membership
After completing the membership you will be converted from a guest to a member and will be able to avail member benefits.
11) Stripe Payment GateWay Set up
If you don't already have a Stripe account, visit the Stripe website (https://stripe.com/) and you can sign up with Google or create a new account.
Just open Stripe Dashboard And
Click on keys to Copy and then Replace Your Keys in Mobile Screen
Replace your "Secret Key" and "Publishable key" with your actual Stripe API keys in admin setting -> Payment Setting Screen .
after completing the key replacement follow these steps and activate your account in live mode
1) Create a Stripe Account: Go to the Stripe website (stripe.com) and sign up for an account. Provide the necessary information, including your business details and banking information. 2) Verify Your Email: Once you sign up, Stripe will send you an email to verify your email address. Click on the verification link in the email to proceed. 3) Activate Your Account: Complete the account activation process by providing any additional information required by Stripe, such as your business address and identification details. This step may vary depending on your location and business type. 4) Set Up Payment Methods: In your Stripe dashboard, navigate to the "Payments" or "Payment Methods" section. Here, you can choose which payment methods you want to enable, such as credit cards, digital wallets (e.g., Apple Pay or Google Pay), or bank transfers. Follow the instructions provided by Stripe to configure the payment methods you desire. 5) Test Payments: Before going live, it's crucial to test your payment setup. Stripe offers a "test mode" that allows you to simulate transactions without charging real money. This step helps ensure that your integration is functioning correctly and that you can handle payments smoothly. 6) Enable Live Payments: Once you have tested your payment setup and are satisfied with the results, you can switch your Stripe account to live mode. In live mode, actual payments will be processed, and your customers will be charged. 7) Monitor and Manage Payments: Use the Stripe dashboard to monitor transactions, manage refunds, view reports, and perform other payment-related tasks. Stripe provides a comprehensive set of tools and features to help you manage your payments efficiently.
12) PayPal Payment GateWay Set up
If you don't already have a PayPal account, visit the PayPal website (https://www.paypal.com/) and you can sign up with Google or create a new account.
Just open PayPal Dashboard And
Click on "API credentials" then Copy Client Id and Secret key then Replace Your Keys in Screen
Replace your "Client Id" and "Secret key" with your actual Stripe API keys in admin setting -> Payment Setting Screen .
after completing the key replacement follow these steps and activate your account in live mode
1) Click on top-right side "Live". 2) Follow the instructions on the screen to provide your personal details, such as your name, address, phone number, and date of birth. Make sure to enter accurate information. 3) Review the terms and conditions: Read PayPal's terms and conditions and user agreement thoroughly. If you agree with the terms, check the box to indicate your acceptance. 4) Verify your email address: After completing the registration form, PayPal will send a confirmation email to the address you provided during the sign-up process. Open your email inbox, locate the email from PayPal, and click on the verification link within the email to confirm your email address. 5) Link your bank account or card: To activate your live PayPal account, you need to link it to a bank account or a credit/debit card. On the PayPal website, navigate to the "Wallet" or "Settings" section and choose the option to link a bank account or card. 6) Enter your financial information: Provide the required details of your bank account or card, such as the account number, routing number (for bank accounts), or the card number, expiration date, and CVV (for cards). PayPal will use this information for verification purposes. 7) Confirm your linked bank account or card: PayPal will initiate a verification process to ensure that the bank account or card you linked is valid. They may make small deposits to your bank account or charge a small amount to your card. Check your bank statement or card statement to find these transactions. 8) Verify your bank account or card: Once you see the deposits or charges in your bank statement or card statement, log in to your PayPal account and navigate to the "Wallet" or "Settings" section. Locate the option to confirm your bank account or card and enter the exact amounts charged or deposited by PayPal. 9) Provide additional verification (if requested): Depending on your country and specific circumstances, PayPal may require additional verification. This may include uploading documents such as a copy of your identification card, proof of address, or proof of business registration. If prompted, follow the instructions provided by PayPal to complete the verification process. 10) Review and adjust your account settings: Once your account is fully activated, take some time to review and adjust your account settings according to your preferences. You can manage privacy settings, notification preferences, security options, and more. 11) Start using your PayPal account: Congratulations! Your live PayPal account is now active and ready to use. You can start sending and receiving money, making online purchases, or receiving payments for your business.
13) In App Purchase
Go to Setting Screen And Click on Payment Setting screen and Choose In App Purchase option
1) If you don't have one already, sign up for a Google Play Developer account. You will need to pay a one-time registration fee.
2) Link your Google Play Developer account to a Google Wallet Merchant account. This is where you'll receive payments from users. Provide your banking and tax information.
3) Ensure your app is ready to support in-app purchases.
4) In the Google Play Developer Console, navigate to your app's page, go to "Monetize" > "In-app products," and click the "Create" button to add new in-app products. You can create either managed products (consumable or non-consumable) or subscriptions.For each product, provide details like the product ID, pricing, and localized descriptions.
5) For each in-app product, configure its details, including pricing, availability, and any promotional information. You can also create different price points for different regions.
6) Before releasing your app, it's crucial to test your in-app purchases. Use test accounts provided by Google Play to simulate purchases without actual charges. Ensure that your app handles purchases and consumption correctly.
7). Once you've thoroughly tested your in-app purchases and your app is ready for release, submit it to the Google Play Store. Ensure that your app's store listing provides clear and accurate information about in-app purchases.
8) After your app is live, promote your in-app purchases within your app and on the app's store listing to encourage users to make purchases.
9) Continuously monitor the performance of your in-app purchases, including conversion rates, revenue, and user feedback. Use this data to make improvements and optimize your in-app purchase strategy.
14) FAQ
1) How to Edit Email or Password for Admin ?
Ans. if you don't know how Edit Email or Password please follow this steps.(click here)
2) How to add trainer ?
Ans. if you don't know how to add trainer please follow this steps.(click here)
3) How to add trainer packages?
Ans. if you don't know how to add trainer pakages please follow this steps.(click here)
4) How to assign trainer packages?
Ans. if you don't know how to assign trainer packages please follow this steps.(click here)
5) How to add member ?
Ans. if you don't know how to add Member please follow this steps.(click here)
6) How to add membership ?
Ans. if you don't know how to add membership please follow this steps.(click here)
7) How to assign membership ?
Ans. if you don't know how to assign membership please follow this steps.(click here)
8) How to add workout ?
Ans. if you don't know how to add workout please follow this steps.(click here)
9) How to add workout category ?
Ans. if you don't know how to add workout category please follow this steps.(click here)
10) How to add exercise ?
Ans. if you don't know how to add exercise please follow this steps.(click here)
11) How to add class schedule ?
Ans. if you don't know how to add class schedule follow this steps.(click here)
12) How to add measurement ?
Ans. if you don't know how to add measurement please follow this steps.(click here)
13) How to start workout ?
Ans. if you don't know how to start workout please follow this steps.(click here)
14) How to join class ?
Ans. if you don't know how to join class please follow this steps.(click here)
15) How to add Nutrition plan ?
Ans. if you don't know how to add nutrition plan please follow this steps.(click here)
16) How to View Nutrition plan ?
Ans. if you don't know how to add nutrition plan please follow this steps.(click here)