Myclinic

Myclinic - Doctors Appointment Booking Patient And Admin App

created: 05/09/2021
latest update: 05/09/2021
by: Ashish Khare
email: appwebdevash@gmail.com

Myclinic is an awesome android app for medical, hospital business. This app has an awesome feature and the best UI/UX. By this, anyone can easily make appointments and use app features. You can increase your item in all the Screens and manage it with code. This document will help you to develop a full package by customizing both app (admin and patient) code easily. You can also use this doc to create any new page of your existing application. Myclinic app is a very good booking appointment solution for Doctors. App is useful for Dentists, Orthopedist, Gynecologist, and many doctors to book their online appointments.

Admin app has features to manage a patient app. you can manage all appointments, users, notifications, gallery and all other features through admin app. you will get here all steps to initialization and customization of admin and patient app

Step 1 - You have to unzip MyClinic file.
Myclinic Zip included with two folders Documentation and Sourcefile.
Documentation folder is all about the doc for installation and customization of both apps, and the Sourcefile folder included with Admin and Patient folder and two server file.
Now it's time to configure all the files. so let's start with Web API Configuration

Step 1 - You have to upload the MyClinic_api files which we have provided in your downloaded package from codecanyon.
Step 2 - Login in your hosting Cpanel Navigate to File Manager, navigate to public_html and make a new folder as myclinic then upload the Myclinic_api.zip , then extract it.
step 3 - You have to edit htaccess file which is located at "myclinic/api/.htaccess". you have to change php_value date.timezone according to your country
example: php_value date.timezone Asia/Kolkata

Step 4 - You have to edit add_blog_post.php, update_blog_post.php and upload_image.php file. Step 5 - Open api folder and find the above-mentioned three files and Replace "domain" text with your domain name as followed by the image
example "http://domaina.com/myclinic/blogPost/$fileName.text";

Step 1 - You have to create a new database
Step 2 - You have to import the myclinic_table.sql file which we have provided in your downloaded package from codecanyon
Step 3 - You have to edit config.php file which is located at "/myclinic/api/config.php. you have to set your database username, password, and dbname.

Step 1 - Log in to your Firebase account and create a new project.
Step 2 - You have to enable firebase phone and email authentication in "authentication/Sign-in-method" and follow their rules for enabling firebase authentication. also you have to enable Android Device Verification For your project
Step 3 - You have to add users in "authentication/users" for admin app login, in our case email is admin@gmail.com and password is 123456. you can also change it.

Step 4 - Now you have to create firestore database and edit the rules. you can also set the rules according to your requirement.
Step 5 - You have to Set initial database parameters, create a new collection name "profile" and document name "profile". here you have to add a new boolean field name isAnyNotification.
Step 6 - Create a new collection name "settings" and document name "settings". here you have to add a new filed stopBooking as boolean and technicalIssue as boolean, forceUpdate as boolean and currentVersion as string.
Don't care about usersList collation and timing, it will auto generate when new user submit registration form.

Step 8 - You have to add the patient and admin app into your project. open project setting and add your app and set package name ("com.myclinic.patient" for patient app and "com.myclinic.admin" for admin app) and SHAkey.
Step 9 - You can generate SHA Key from this method Open Android Studio Open Project Reveal android folder Right click gradlew file and select Open in Terminal - Go to the terminal view and paste gradlew signingReport (You can also skip this step for now)

Step 1 - Unzip the source fill, we have provided in your downloaded package from codecanyon.
Step 2 - You need to install Android Studio version 2021.1 and setup Flutter 2.10.1 and Tools • Dart 2.12.2
Step 3 - Now You have to open a patient folder in android studio.

Step 4 - Download google-services.json file from your firebase project setting and past it here "patient/android/app"
Step 5 - If you have skipped step 9 from firebase setup then please do it here add your SHA keys.
Step 6 - Open config.dart (form patient/lib/config.dart) and edit apiUrl and firebaseServerKey varibale. In apiUrl variable Replace the "domain" with your domain name where you have hosted your API. apiUrl = "http://yourdomainname.com/myclinic/api" Open your firebase project setting/Cloud Messaging, copy the server key, and set it to firebaseServerKey varaible. Don't worry about the paypal or razorpay integration we will setup later

Step 7 - Now patient app setup has been completed you can run it.

Note - if you are using the only Razorpay payment gateway then you don't need any setup for PayPal just comment the PayPal option in confirmation.dart and leave as blank string for both const value paypalClientId, paypalSecret
Step 1 -Logg in to Razorpay developer account
Step 2 - Set up the account for test mode or live more (Prefer to first go with test mode)
Step 3 - Genrate the key id and secret key then past the both key in config.dart file, if you are using only razorpay then you

Note - if you are using the only PayPal payment gateway then you don't need any setup for Razorpay just comment the Razorpay option in confirmation.dart and leave as blank string for both const value razorpayKeyId, razorpayKeySecret
Step 1 -Logg in to paypal developer account
Step 2 - Create a new sandbox account followed by the image
Step 3 -Create a new app follow by image.
Step 4 -Genrate the key id and secret key then past the both key in config.dart file
Step 5 Change your country currency in this file paypalWebView.dart as followed by image

Change app name and title

Step 1 - You have to open AndroidManifest.xml file from here Patient\android\app\src\main\AndroidManifest.xml
Step 2 - Replace the "Patient" with your app name. followed by image android:label="Patient"

Step 3 -Open login.dart file from here "Patient\lib\Screen\login.dart" and replace the My Clinic text with your app name or app title
Step 4 -Open home.dart file from here "Patient\lib\Screen\home.dart" and replace the MyClinic text with your app name or app title, followed by images.

Change app color

Step 1 - Open color.dart file from here "Patient\lib\utilities\color.dart"
Step 2 -You can change your app's colors from here to create a custom look. you have to only replace the color code.

Change app icon

You have to put a png file with your icon named 'ic_launcher.png' in the following folders:

res/drawable-mdpi - with a size of 48px x 48px
res/drawable-hdpi - with a size of 72px x 72px
res/drawable-xhdpi - with a size of 96px x 96px
res/drawable-xxhdpi - with a size of 144px x 144px

Also to put a png file with your icon named 'app_icon.png' in the following folders:

res/drawable - with a size of 192px x 192px
res/drawable-v21 - with a size of 192px x 192px

This URL will help you resize your images or event create new icon to your app Launcher Icon Generator

Change app title image

Step 1 - Past you title image at this folder "Patient\images"
Step 2 - Maintaion file location in pubspec.yamla file followed by image.
Step 3 - Open login.dart file from here "Patient\lib\Screen\login.dart" and replace the "assets/images/dr.png" path with your image title path

Change app font style

Step 1 - Open .dart file from here "Patient\lib\utilities\color.dart"
Step 2 - You can change the size and font style from here. The most commonly used text fonts and style has declared here. eg kAppbarTitleStyle, kPageTitleStyle etc
Step 3 - For changes in font family, you have to past new font family in the "Patient\assets\fonts" folder and mentioned in the pubspec.yaml file followed by the image.

Step 1 - Unzip the source fill, we have provided in your downloaded package from codecanyon.
Step 2 - You need to install Android Studio 4.1.2 and setup Flutter 2.0.3 and Tools • Dart 2.12.2
Step 3 - Now You have to open a admin folder in android studio.

Step 4 - Download google-services.json file from your firebase project setting and past it here "patient/android/app"
Step 5 - If you have skipped step 9 from firebase setup then please do it here add your SHA keys.
Step 6 - Open config.dart (form patient/lib/config.dart) and edit apiUrl and firebaseServerKey varibale. In apiUrl variable Replace the "domain" with your domain name where you have hosted your API. apiUrl = "http://yourdomainname.com/myclinic/api" Open your firebase project setting/Cloud Messaging, copy the server key, and set it to firebaseServerKey varaible.

Step 6 - Now patient app setup has been completed you can run it.

Step 7 -Enter id and password that we have set in firebase authentication.

Step 1 - We are using Emailjs service to send mail for forget password service
Step 2 - Signup and login in Emailjs
Step 3 - Add new email service as followed by image
Step 4 - Create new template
Step 5 - Set your templete followed by image then save the templete

Step 6 - Copy user Id from integration and pase in the user_id key as followed by image"
Step 7 - Open created template and move inside the setting section, then copy the template id and past in template_id key as followed by image
Step 8 - Open Email Service, copy service id and past in the service_id key as followed by image.

Step 6 - Now patient app setup has been completed you can run it.

Step 7 -Enter id and password that we have set in firebase authentication.