diff --git a/ASP.NET Core/Readme.md b/ASP.NET Core/Readme.md index 72bc6a7..81fe20e 100644 --- a/ASP.NET Core/Readme.md +++ b/ASP.NET Core/Readme.md @@ -1,6 +1,6 @@ # ASP.NET Core DevExtreme Example -For more information about this example check the [Readme](../README.md). +Instructions below are specific to the ASP.NET Core example. Before you follow these instructions, start with the common steps described in this example's [README](../README.md). ## Build and Run @@ -27,4 +27,4 @@ Client-side API basics: * Call methods: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods * Get instance: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance -To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create). +For technical support, submit a ticket to the [DevExpress Support Center](https://supportcenter.devexpress.com/ticket/create). diff --git a/README.md b/README.md index 2d01084..c1993f0 100644 --- a/README.md +++ b/README.md @@ -1,52 +1,61 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1057257433/25.1.2%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1307369) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# DevExtreme Examples Template +# DevExtreme Chat - Integration with Google Dialogflow -This is the repository template for creating new examples. +This repository contains code referenced in the following DevExtreme help topic: [Integrate with AI Service - Google Dialogflow](https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Google_Dialogflow). -![Example image](images/image-template.png) +This example integrates [Google Dialogflow](https://cloud.google.com/dialogflow/docs) into DevExtreme Chat. -Use **DevExtreme _Product_ - _Task_** template for a title. +
-Describe the solved task in this section. +## How to Run the Example -Put a screenshot/gif that illustrates the result here. +Follow these instructions to run **client** applications available in this repository (jQuery, Angular, Vue, or React). To run the ASP.NET Core example, follow steps 1-3, and then refer to [ASP.NET Core Readme.md](ASP.NET%20Core/Readme.md). -Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. +1. Clone the repository and navigate to the example folder. +2. Replace the placeholder in the `key.json` file with your Dialogflow API key. +3. Navigate to the `server` folder, install dependencies, and start the server: + ```bash + cd server + npm install + npm run start:server + ``` +4. Navigate to the client folder of your preferred framework, install dependencies, and start the client application **while the server is running**: + ```bash + cd + npm install + npm run start + ``` ## Files to Review +- **jQuery** + - [index.js](jQuery/src/index.js) + - [helper.js](jQuery/src/helper.js) - **Angular** - [app.component.html](Angular/src/app/app.component.html) - [app.component.ts](Angular/src/app/app.component.ts) -- **React** - - [App.tsx](React/src/App.tsx) + - [app.service.ts](Angular/src/app/app.service.ts) - **Vue** - - [App.vue](Vue/src/App.vue) - - [Home.vue](Vue/src/components/HomeContent.vue) -- **jQuery** - - [index.html](jQuery/src/index.html) - - [index.js](jQuery/src/index.js) -- **ASP.NET Core** + - [ChatInterface.vue](Vue/src/components/ChatInterface.vue) + - [chat.helpers.ts](Vue/src/chat.helpers.ts) +- **React** + - [ChatApp.tsx](React/src/components/ChatApp.tsx) + - [ChatService.tsx](React/src/ChatService.tsx) +- **NetCore** - [Index.cshtml](ASP.NET%20Core/Views/Home/Index.cshtml) ## Documentation -- link -- link -- ... - -## More Examples +- [Chat - Getting Started](https://js.devexpress.com/React/Documentation/Guide/UI_Components/Chat/Getting_Started_with_Chat/) +- [Integrate with AI Service - Google Dialogflow](https://js.devexpress.com/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service/#Google_Dialogflow) +- [Chat - API](https://js.devexpress.com/React/Documentation/ApiReference/UI_Components/dxChat/) -- link -- link -- ... -## Does this example address your development requirements/objectives? +## Does This Example Address Your Development Requirements/Objectives? [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-chat-google-dialogflow&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=devextreme-chat-google-dialogflow&~~~was_helpful=no) diff --git a/Vue/src/App.vue b/Vue/src/App.vue index b15eeb4..7eb9968 100644 --- a/Vue/src/App.vue +++ b/Vue/src/App.vue @@ -1,5 +1,5 @@ diff --git a/Vue/src/components/ChartInterface.vue b/Vue/src/components/ChatInterface.vue similarity index 100% rename from Vue/src/components/ChartInterface.vue rename to Vue/src/components/ChatInterface.vue diff --git a/images/chat-dialogflow.png b/images/chat-dialogflow.png new file mode 100644 index 0000000..3c8c4ae Binary files /dev/null and b/images/chat-dialogflow.png differ diff --git a/images/image-template.png b/images/image-template.png deleted file mode 100644 index 3462d01..0000000 Binary files a/images/image-template.png and /dev/null differ