Ionic 4 doctor appointment booking app template (Android , IOS HTML/CSS)

Here is an example of settings configuration for the Ionic 4 doctor appointment booking app template:

Environment Configuration

In the config.xml file, update the following settings:

• ionic-feedback-url : Set to your Firebase or other analytics service for tracking user feedback.
• ionic-cordova-screens : Set the desired screen sizes for Android and iOS devices.
• ionic-cordova-capacitor : Set to true if you want to use Capacitor instead of Cordova.

Example:

<platform name="android">
    <setting name="ionic-feedback-url" value="https://example.com/feedback" />
    <setting name="ionic-cordova-screens" value="1080x1920" />
</platform>

<platform name="ios">
    <setting name="ionic-feedback-url" value="https://example.com/feedback" />
    <setting name="ionic-cordova-screens" value="414x896" />
</platform>

Firebase Configuration

In the google-services.json file for Android and GoogleService-Info.plist for iOS, update the Firebase project configuration:

• PROJECT_ID : Replace with your Firebase project ID.
• API_KEY : Replace with your Firebase API key.
• AUTH_DOMAIN : Replace with your Firebase auth domain.
• STORAGE_BUCKET : Replace with your Firebase storage bucket.
• MESSAGING_SENDER_ID : Replace with your Firebase messaging sender ID.

Example:

{
  "firebase": {
    "projects": {
      "my-doctor-booking-app": {
        "oauthClient": [],
        "apiKeys": [
          {
            "current_key": "AIzaSyBd..."
          }
        ],
        "appId": "1:XXXXXXXXXXXXXXXXXXXX",
        "projectId": "my-doctor-booking-app"
      }
    }
  }
}

App Configuration

In the app.module.ts file, update the app configuration:

• Providers : Add any third-party services or libraries needed for your app.
• Imports : Import any necessary modules or libraries.
• Declarations : Add any app components or directives.

Example:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [MyApp, AboutPage, ContactPage, HomePage, TabsPage],
  imports: [
    IonicModule.forRoot(MyApp),
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    // Add any third-party services or libraries here
  ],
  bootstrap: [IonicApp]
})
export class AppModule {}

Database Configuration

In the database.json file, update the database configuration:

• name : Set the name of your database.
• version : Set the version of your database.
• description : Set a brief description of your database.
• tables : Define the tables and fields in your database.

Example:

{
  "name": "doctor_booking_app",
  "version": "1",
  "description": "Doctor Booking App Database",
  "tables": [
    {
      "name": "doctors",
      "fields": {
        "id": {
          "type": "integer",
          "primaryKey": true
        },
        "name": {
          "type": "text"
        },
        "specialty": {
          "type": "text"
        }
      }
    },
    {
      "name": "appointments",
      "fields": {
        "id": {
          "type": "integer",
          "primaryKey": true
        },
        "doctor_id": {
          "type": "integer",
          "references": {
            "table": "doctors",
            "field": "id"
          }
        },
        "patient_name": {
          "type": "text"
        },
        "date": {
          "type": "date"
        }
      }
    }
  ]
}

capacitor.config.ts

In the capacitor.config.ts file, update the Capacitor configuration:

• appId : Set the app ID.
• appName : Set the app name.
• version : Set the app version.

Example:

export default {
  appId: 'com.example.doctorbookingapp',
  appName: 'Doctor Booking App',
  version: '1.0.0',
  plugins: []
};

platforms/android/app/src/main/AndroidManifest.xml

In the AndroidManifest.xml file, update the app configuration:

• android:icon : Set the app icon.
• android:label : Set the app label.
• android:supportsRtl : Set the app's RTL support.
• android:theme : Set the app theme.

Example:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.doctorbookingapp"
  android:versionCode="1"
  android:versionName="1.0.0">
  <application
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity
      android:name=".MainActivity"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
      android:label="@string/app_name"
      android:launchMode="singleTask"
      android:theme="@style/AppTheme">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>
</manifest>

Here are the features of the Ionic 4 doctor appointment booking app template:

1. Login, signup, and forgot password UI
2. Home screen with category
3. Find and search doctor and clinic
4. View doctor profile and other information
5. Book appointment
6. Appointment list
7. Favorite Clinic or doctor
8. Content page (like about us, contact us)

These features are available for both Android and iOS platforms, and the template is built using HTML/CSS.