This bot was created as a proof of concept to locate a public unonmous user in California using a live chat bot before transferring the conversation to a live agent.
You can try out the bot yourself at https://techlifornia.us.
It will:
- Greet you
- Make a call to ipify.org to get your ip address
- Make a call to the back-end application to figure out where your ip address is located
- If it is in California it will tell you where it found you to be (city and county) and ask if it is correct
- If it is not identified or not in California it will ask where you are in California (either city or county)
- Once you type in a city or county in California it will make a call to back-end application to search for the closest entry that exists in the list of cities and counties on the California Department of Tax website as of October 2021
- If it finds a match it will tell you where it found you to be (City and County) and ask if it is correct
- If it does not find a match it will ask you ask again where you are in California (either city or county)
- Once you confirm the county the bot found you to be type "yes" (without the quotes) and the bot will transfer the conversation to a surprise live agent
- The live agent is in fact a QnA Maker knowledgebase that is trained to answer specific questions about the surprise live agent
- The ip address is obtained from ipify.org.
- The ip address location is looked up from the MaxMind GeoLite2 database.
- The database is downloaded as a gzip tarball so SharpZipLib was used to decompress it.
- The manual entry of city/county is looked up in Azure Cognitive Search.
- The live agent "Question Answering" (previously QnA Maker) is done using Azure Cognitive Services for Language.
- The bot theme was taken from Nebular dark theme.
- The front-end client was written in Angular and Typescript in Visual Studio Code IDE.
- The back-end application was written in C# 10 using Dotnet 6 SDK in Visual Studio 2022 IDE.
- Hosting happens with Azure Static Web App where the api is on Azure Functions. .
You will need the following free cloud services established:
- Sign Up for GeoLite2 Free Geolocation Data
- Generate a License Key
- Write down your Account/User ID and the License Key
- You won't have another opportunity to see that key so keep it in a safe place
- If you don't already have a GitHub account, Sign Up for one
- There are a few otions to proceed:
- Click on the "Use this template" button to generate a new repository onto your own GitHub account
- Clone this repository on your development workstation and if you feel like contributing to it you can create a Pull Request
- Fork this repository to your own GitHub account by clicking on the "Fork" button on top right of the page to continue this work with your own requirements
- Create your own repository:
- Create new repository on your GitHub account
- Clone the new repository locally on your development workstation
- Clone this reporitory locally on your development workstation in a different directory
- Copy the contents that you like from this of this repository onto your own repository's directory
- Push your changes to the new repository
- If you created your own repository and intend on deploying it to your own hosting environment make sure to delete the file https://github.com/glensouza/ca-location-bot/tree/main/.github/workflows/azure-static-web-apps-wonderful-meadow-06f3bbc1e.yml as that is specific to my own Azure resource in step 5 of the Azure section, but before you do take a look at it and compare it to what yours look like - it might help you troubleshoot if something goes wrong.
-
If you don't already have an Azure account, Sign Up for a free account today
- Includes the services we need to run the bot for free (with limits of course)
- You will get $200 credit to try out other services that are not free for the first 30 days from your account creation
-
Create a Resource Group
-
Create an Application Insights
-
Create a Search Service
-
Create a Static Web App
-
Create a "Language Service"
- Ensure you click on "Custom question answering" option
-
Head over to the newly created Language Service
-
Head on over to the Cognitive Services Language Studio
- Scroll down to the "Answer Questions" section
- Click on "Custom question answering"
- Create new project and make sure you select the search service you created on step 4
- Under "Manage Sources" let's start with adding a "ChitChat" and select one you like, I picked "Witty"
- front-end client was written in Angular and Visual Studio Code IDE.
- You will need to have NodeJS installed
- By default it installs the npm client
- You will need to have Angular CLI installed by typing into your terminal:
npm install -g @angular/cli
- You will need to have NodeJS installed
- The back-end application was written in C# 10 using Dotnet 6 SDK and Visual Studio 2022 IDE.
- If you install Visual Studio 2022 you should already get C# and Dotnet installed
- You will need to have Static Web Apps CLI installed by typing into your terminal:
npm install -g @azure/static-web-apps-cli
- In the Api folder, copy
local.settings.example.json
tolocal.settings.json
- Open up the CALocationBot.sln file in Visual Studio
- In Visual Studio, open the local.settings.json file and add your keys and secrets from when you established the cloud services:
{ "GeoLiteAccountUserId": "000000", "GeoLiteLicenseKey": "xxxxxxxxxxxxxxxx", "SearchServiceName": "<your-search-service-name>", "SearchIndexName": "city-county", "SearchApiKey": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "QnAKnowledgebaseId": "<your-language-service-name>", "QnAEndpointKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "QnAEndpointHostName": "https://<your-hostname>.cognitiveservices.azure.com/" }
- Press F5 to launch the Functions API application. By default, it will be available in port 7071.
-
Open up a terminal and navigate to the "client" directory where you have cloned the repository.
-
Run the following commands in sequence:
npm install ng serve
-
This will install all packages and then compile the code.
-
It will keep watching for any code changes you make going forward, just leave that terminal window open.
-
By default it will serve the client on http://localhost:4200/
-
The app will automatically reload if you change any of the source files.
- In a new terminal navigate to the rood directory where you have cloned the repository.
- Run the following command to start the Static Web App
swa start http://localhost:4200 --api-location http://localhost:7071
Open a browser and navigate to the Static Web App address at http://localhost:4280. You'll be able to access both the client application and the Functions API app in this single address.
Enter Ctrl-C to stop the Static Web Apps CLI.
To deploy to Azure Static Web App just push the code to your repository, GitHub actions will handle the rest.