Construct an AI-Powered Good Appointment Reserving App Utilizing WinUI Scheduler

A smarter scheduler powered by AI can remodel appointment scheduling by making it sooner, extra environment friendly, and extra user-friendly. By combining WinUI with cutting-edge Microsoft AI providers, builders can create feature-rich apps that meet and exceed person expectations.

Begin creating your sensible scheduler at this time with the Microsoft AI providers, Syncfusion WinUI Scheduler and AI AssistView controls to unlock the facility of clever time administration!

Let’s get began!

Integrating Azure OpenAI in a WinUI app

Getting began

1. Start by opening Visible Studio and making a WinUI 3 desktop app.
2. Guarantee you have got entry to Azure OpenAI service and have arrange a deployment within the Azure portal.
3. Subsequent, set up the Microsoft.Extensions.AI.OpenAI, Azure.AI.OpenAI, and Azure.Identification NuGet packages from the NuGet Gallery.

Step 1: Connect with Azure OpenAI

In your app, substitute the AZURE_OPENAI_ENDPOINT along with your Azure OpenAI endpoint and modelId along with your deployment identify. 

Then, check with the next code instance to attach Azure OpenAI utilizing AzureOpenAIClient.

inside class AzureOpenAIBaseService
{
  personal const string endpoint = "AZURE_OPENAI_ENDPOINT";
  personal const string deploymentName = "DEPLOYMENT_NAME";
  personal const string key = "API_KEY";
  personal IChatClient? shopper;
  personal bool isAlreadyValidated;

  inside AzureOpenAIBaseService()
  {
      ValidateCredential();
  }


  ///<abstract>
  /// Validate Azure Credentials
  ///</abstract
  personal async void ValidateCredential()
  {
      #area Azure OpenAI
      // Use the under technique for Azure Open AI
      this.GetAzureOpenAIKernal();
      #endregion

      #endregion

      if (isAlreadyValidated)
      {
          return;
      }

      strive
      {
          if (shopper != null)
          {
              await shopper!.CompleteAsync("Howdy, Take a look at Examine");
              chatHistory = string.Empty;
              IsCredentialValid = true;
              isAlreadyValidated = true;
          }
          else
          {
              ShowAlertAsync();
          }
      }
      catch (Exception)
      {
          return;
      }
  }

  personal void GetAzureOpenAIKernal()
  {
      strive
      {
          var shopper = new AzureOpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)).AsChatClient(modelId: deploymentName);
          this.shopper = shopper;
      }
      catch (Exception)
      {
      }
  }

}

Step 2: Get a response from Azure OpenAI

Now, ship a immediate to Azure OpenAI and retrieve the completion end result. Confer with the next code instance.

inside class AzureOpenAIBaseService
{
   personal string? chatHistory;

    inside async Process<string> GetAIResponse(string userPrompt)
    {
        if (IsCredentialValid && shopper != null)
        {
            chatHistory = string.Empty;
            // Add the system message and person message to the choices
            chatHistory = chatHistory + "You're a predictive analytics assistant.";
            chatHistory = chatHistory + userPrompt;
            strive
            {
                var response = await shopper.CompleteAsync(chatHistory);
                return response.ToString();
            }
            catch
            {
                return string.Empty;
            }
        }
        return string.Empty;
    }

}

Subsequent, declare the AzureOpenAIBaseService within the App.Xaml.cs file, which will be simply accessed within the app.

inside static AzureOpenAIBaseService? AzureBaseService { get; set; }

Then, validate the Azure OpenAI credential when the app masses, as proven within the following code instance.

MainWindow.xaml.cs

public MainWindow()
{
      this.InitializeComponent();
      if(this.Content material is Grid grid)
      {
          grid.Loaded += MainWindow_Loaded;
      }
}

personal void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
     App.AzureBaseService = new AzureOpenAIBaseService();
}

Confer with the next picture.

That’s it! The AzureOpenAIClient class now makes it simple to work together with OpenAI and retrieve the completion outcomes utilizing the immediate supplied by the SfAIAssistView management.

Designing the WinUI Scheduler for docs’ appointment administration

The WinUI Scheduler management is used to schedule and handle appointments by way of an intuitive person interface, much like the Home windows calendar. It helps eight totally different views: day, week, workweek, month, timeline day, timeline week, timeline workweek, and timeline month. The management’s wealthy function set contains:

• A built-in appointment editor to change appointments.
• On-demand appointment loading.
• Localization to fulfill the wants of various areas and extra.

It permits us to handle assets effectively. Right here, we’ll use it to simply add a number of docs and group appointments right into a single calendar, simplifying group. 

Step 1:  Create a scheduler useful resource mannequin

Create a useful resource mannequin for a physician, together with fields like Title, Id, Background, Foreground, and ImageName to characterize their info. Confer with the next code instance.

ResourceViewModel.cs

public class ResourceViewModel
{
    #area Properties

    ///<abstract>
    /// Will get or units the identify.
    ///</abstract>
    public string Title { get; set; }

    ///<abstract>
    /// Will get or units the id.
    ///</abstract> 
    public string? Id { get; set; }

    ///<abstract>
    ///  Will get or units the Background.
    ///</abstract> 
    public Brush Background { get; set; }

    ///<abstract>
    ///  Will get or units the Foreground.
    ///</abstract> 
    public Brush Foreground { get; set; }

    ///<abstract>
    ///  Will get or units the ImageName.
    ///</abstract> 
    public string ImageName { get; set; }

    #endregion
}

Step 2: Create assets for the WinUI Scheduler

Create assets (e.g., docs) and assign them to the WinUI Scheduler. These assets will show the accessible docs’ schedules on the calendar.

SchedulerViewModel.cs

public class SmartSchedulerViewModel 
{
    public ObservableCollection<object> Sources { get; set; }

    public SmartSchedulerViewModel()
    {
        this.InitializeResourcesView();
    }

   /// <abstract>
   /// Methodology to initialize the assets.
   /// </abstract>
   personal void InitializeResourcesView()
   {
       for (int i = 0; i < 2; i++)
       {
           ResourceViewModel resourceViewModel = new ResourceViewModel();

           if (i == 0)
           {
               resourceViewModel.Title = "Sophia";
               resourceViewModel.ImageName = "/Belongings/Scheduler/People_Circle" + i.ToString() + ".png";
               resourceViewModel.Id = "1000";
               resourceViewModel.Background = new SolidColorBrush(Coloration.FromArgb(0xFF, 0x36, 0xB3, 0x7B));
           }
           else
           {
               resourceViewModel.Title = "John";
               resourceViewModel.ImageName = "/Belongings/Scheduler/People_Circle" + i.ToString() + ".png";
               resourceViewModel.Id = "1001";
               resourceViewModel.Background = new SolidColorBrush(Coloration.FromArgb(255, 0x8B, 0x1F, 0xA9));
           }

           this.Sources?.Add(resourceViewModel);
       }
   }

 }

Step 3: Add assets to the WinUI Scheduler

Now, bind the Sources property from the SchedulerViewModel class to the WinUI Scheduler’s ResourceCollection property. Then, map the customized properties of the ResourceViewModel class to the suitable scheduler useful resource mapping properties of the ResourceMapping class. You too can customise the useful resource header template to enhance visualization.

MainWindow.xaml

xmlns:scheduler="utilizing:Syncfusion.UI.Xaml.Scheduler"
 
 <Grid.DataContext>
    <native:SmartSchedulerViewModel/>
 </Grid.DataContext>

 <scheduler:SfScheduler ViewType="Day"
                        ResourceCollection="{Binding Sources}"
                        ResourceGroupType="Useful resource">
      <scheduler:SfScheduler.ResourceHeaderTemplate>
          <DataTemplate>
              <Grid Background="Clear">
                  <StackPanel VerticalAlignment="Heart"
                              Orientation="Vertical">
                      <Border CornerRadius="36"
                              Peak="72"
                              Width="72"
                              BorderThickness="2"
                              BorderBrush="{Binding Knowledge.Background}">
                          <Border CornerRadius="36"
                                  Peak="64"
                                  Width="64"
                                  BorderThickness="2"
                                  BorderBrush="Clear">
                              <Picture HorizontalAlignment="Heart"
                                     VerticalAlignment="Heart"
                                     Width="55"
                                     Peak="55"
                                     Supply="{Binding Knowledge.ImageName}" />
                          </Border>
                      </Border>
                      <TextBlock HorizontalAlignment="Heart"
                                 VerticalAlignment="Heart"
                                 FontSize="15"
                                 Textual content="{Binding Knowledge.Title}" />
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </scheduler:SfScheduler.ResourceHeaderTemplate>
      <scheduler:SfScheduler.ResourceMapping>
          <scheduler:ResourceMapping Id="Id"
                                     Title="Title"
                                     Background="Background"
                                     Foreground="Foreground" />
      </scheduler:SfScheduler.ResourceMapping>
</scheduler:SfScheduler>

Confer with the next picture.

Designing the WinUI AI Assistant chatbot

Let’s create an AI assistant chatbot through which customers enter a immediate into the WinUI AI AssistView management to test docs’ availability and work together with the chatbot for scheduling.

Confer with the next code instance.

xmlns:assistView="utilizing:Syncfusion.UI.Xaml.Chat"

<Grid.DataContext>
    <native:SmartSchedulerViewModel/>
</Grid.DataContext>

<assistView:SfAIAssistView Peak="400"
                        Margin="0,0,5,0" 
                        VerticalAlignment="High"
                        Background="{StaticResource SolidBackgroundFillColorTertiary}"
                        Options="{Binding Options}"
                        SuggestionSelected="OnChatSuggestionSelected"
                        CurrentUser="{Binding CurrentUser}"
                        Messages="{Binding Chats}">
     <assistView:SfAIAssistView.BannerTemplate>
         <DataTemplate>
             <StackPanel Orientation="Vertical"
                     Spacing="12">
                 <TextBlock Textual content="How can I help along with your well being care wants?"
                        TextWrapping="Wrap"
                        Margin="20"
                        FontSize="20"
                        HorizontalAlignment="Heart" />

                 <ListView x:Title="OptionstListView"
                       ItemsSource="{Binding AIAssistResources}"
                       SelectionMode="None" 
                       Tapped="OnOptionstListViewTapped">

                     <ListView.ItemsPanel>
                         <ItemsPanelTemplate>
                             <StackPanel Orientation="Horizontal" />
                         </ItemsPanelTemplate>
                     </ListView.ItemsPanel>

                     <ListView.ItemTemplate>
                         <DataTemplate>
                             <Grid Peak="120" Width="120">
                                 <Border x:Title="ItemBorder"
                                     BorderBrush="Grey" 
                                     BorderThickness="1" 
                                     Padding="4" 
                                     CornerRadius="10">
                                     <Grid RowDefinitions="40,*">
                                         <Picture Grid.Row="0"
                                            Peak="30"
                                            Width="30"
                                            Margin="5"
                                            Supply="{Binding ImageName}"
                                            HorizontalAlignment="Left" />

                                         <Viewbox Peak="30"
                                              Grid.Row="0"
                                              HorizontalAlignment="Proper"
                                              Width="30">
                                             <Path Margin="4"
                                               Knowledge="M-1.97262e-07 4.51283L4.51283 9.02566L5.24581 8.29268L1.98425 5.03112L11.358 5.03112L11.358 3.99454L1.98425 3.99454L5.24581 0.732977L4.51283 1.97262e-07L-1.97262e-07 4.51283Z"
                                               Fill="{ThemeResource TextBoxForegroundHeaderThemeBrush}">
                                                 <Path.RenderTransform>
                                                     <RotateTransform Angle="135"
                                                                  CenterX="5"
                                                                  CenterY="3" />
                                                 </Path.RenderTransform>
                                             </Path>
                                         </Viewbox>

                                         <TextBlock Grid.Row="1"
                                                Textual content="{Binding Title}"
                                                TextWrapping="WrapWholeWords"
                                                VerticalAlignment="Heart"
                                                HorizontalAlignment="Heart" />
                                     </Grid>
                                 </Border>
                             </Grid>
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
             </StackPanel>
         </DataTemplate>
     </assistView:SfAIAssistView.BannerTemplate>
</assistView:SfAIAssistView>

Confer with the next picture.

Examine the physician’s availability utilizing AI service

When the person inputs texts into the SfAIAssistView chatbot, the immediate is distributed to the Azure OpenAI service, and the physician’s availability occasions are listed within the SfAIAssistView sensible element when the AI button is clicked.

Confer with the next code instance so as to add Chats and Options to the AI AssistView.

SchedulerViewModel.cs

personal ObservableCollection<object> chats;
personal ObservableCollection<string> strategies;


public ObservableCollection<string> Options
{
      get
      {
          return this.strategies;
      }
      set
      {
          this.strategies = worth;
          this.RaisePropertyChanged(nameof(Options));
      }
}
 
public ObservableCollection<object> Chats
{
      get
      {
          return this.chats;
      }
      set
      {
          this.chats = worth;
          this.RaisePropertyChanged(nameof(Chats));
      }
}

public SmartSchedulerViewModel()
{
       this.Chats = new ObservableCollection<object>();
       this.Options = new ObservableCollection<string>();

       this.Chats.CollectionChanged += this.OnChatsCollectionChanged;
}

personal void OnChatsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
       if (e.NewItems?[0] is ITextMessage merchandise)
       {
            string requestString = merchandise.Textual content;
            if (App.AzureBaseService != null && App.AzureBaseService.IsCredentialValid)
            {
                string sample = @"bd{1,2}:d{2} (AM|PM)b";
                bool isValidPattern = Regex.IsMatch(requestString.Trim(), sample, RegexOptions.IgnoreCase);

                string SuggestedTemplatedTime = @"bd{1,2}s?(AM|PM)b";
                bool isSuggestedTemplatedTimePattern = Regex.IsMatch(requestString, SuggestedTemplatedTime);

                if (requestString.Size == 8 && isValidPattern)
                {
                    this.OnAssistViewRequest(requestString);
                }
                else if (merchandise.Writer.Title == currentUser.Title)
                {
                    this.Options.Clear();
                    this.GetResponseFromGPT(requestString);
                }

            }
        }
}

Neatly schedule an appointment with a physician based mostly on their availability

When the person enters a reserving time, the AI service checks the physician’s availability, and the reserving particulars are robotically transformed into scheduler appointments with out requiring direct interplay with the WinUI Scheduler.

Confer with the next code instance to create appointments based mostly on docs’ availability.

SchedulerViewModel.cs

public ScheduleAppointmentCollection Appointments { get; set; } = new ScheduleAppointmentCollection();

personal async void OnAssistViewRequest(string enter)
{
     string requeststring = enter;
     DateTime sophiaStartTime;
     DateTime sophiaEndTime;
     string sophiaSubject = string.Empty;
     string sophiaLocation = string.Empty;
     string sophiaResourceID = string.Empty;
     DateTime johnStartTime;
     DateTime johnEndTime;
     string johnSubject = string.Empty;
     string johnLocation = string.Empty;
     string johnResourceID = string.Empty;

     if (string.IsNullOrEmpty(requeststring))
     {
         return;
     }

     bool timeMatched = false;
     for (int i = 0; i < this.SophiaAvailableTimeSlots?.Depend; i++)
     {
         if (requeststring == this.SophiaAvailableTimeSlots[i].ToString())
         {
             timeMatched = true;
             sophiaStartTime = this.SophiaStartTimeCollection![i];
             sophiaEndTime = this.SophiaEndTimeCollection![i];
             sophiaSubject = this.SophiaSubjectCollection![i];
             sophiaLocation = this.SophiaLocationCollection![i];
             sophiaResourceID = this.SophiaResourceIDCollection![i];
             this.BookOnlineAppointments(sophiaStartTime, sophiaEndTime, sophiaSubject, sophiaLocation, sophiaResourceID);
             await Process.Delay(1000);
             this.Chats.Add(new TextMessage
             {
                 Writer = new Writer { Title = "AI" },
                 DateTime = DateTime.Now,
                 Textual content = "Your appointment with Dr. Sophia has been booked. See you quickly!"
             });
         }
     }

     for (int j = 0; j < this.JohnAvailableTimeSlots?.Depend; j++)
     {
         if (requeststring == this.JohnAvailableTimeSlots[j].ToString())
         {
             timeMatched = true;
             johnStartTime = this.JohnStartTimeCollection![j];
             johnEndTime = this.JohnEndTimeCollection![j];
             johnSubject = this.JohnSubjectCollection![j];
             johnLocation = this.JohnLocationCollection![j];
             johnResourceID = this.JohnResourceIDCollection![j];
             this.BookOnlineAppointments(johnStartTime, johnEndTime, johnSubject, johnLocation, johnResourceID);
             await Process.Delay(1000);
             this.Chats.Add(new TextMessage
             {
                 Writer = new Writer { Title = "AI" },
                 DateTime = DateTime.Now,
                 Textual content = "Your appointment with Dr. John has been booked. See you quickly!"
             });
         }
     }

     if (!timeMatched)
     {
         await Process.Delay(1000);
         this.Chats.Add(new TextMessage
         {
             Writer = new Writer { Title = "AI" },
             DateTime = DateTime.Now,
             Textual content = "This time shouldn't be accessible. Please enter an accessible time slot."
         });
     }
}

personal void BookOnlineAppointments(DateTime startTime, DateTime endTime, string topic, string location, string resourceID)
{
     this.DisplayDate = startTime;
     this.Appointments.Add(new ScheduleAppointment()
     {
          StartTime = startTime,
          EndTime = endTime,
          Topic = topic,
          Location = location,
          ResourceIdCollection = new ObservableCollection<object>() { resourceID },
          Foreground = new SolidColorBrush(Colours.White),
     });
}

Confer with the next code instance to bind appointments to the WinUI Scheduler.

<Grid.DataContext>
   <native:SmartSchedulerViewModel/>
</Grid.DataContext>

<scheduler:SfScheduler ItemsSource="{Binding Appointments}"/>

Confer with the next picture.

GitHub reference

For extra particulars, check with the AI-powered sensible appointment reserving app utilizing the WinUI Scheduler GitHub demo.

Conclusion

Thanks for studying. On this weblog, we’ve seen the best way to simply guide appointments by integrating Microsoft Azure OpenAI-powered sensible options with Syncfusion WinUI Scheduler and AI AssitView controls. Check out the steps on this weblog and supply suggestions within the feedback part under.

Our clients can entry the newest model of Important Studio® for WinUI from the License and Downloads web page. If you’re not a Syncfusion buyer, you’ll be able to obtain our free analysis to discover all our controls.

For questions, you’ll be able to contact us by way of our assist discussion board, assist portal, or suggestions portal. We’re at all times blissful to help you!

Associated blogs