- Apply for free student credits https://azure.microsoft.com/en-us/free/students/. You should be able to login with your GU account.
- Make sure that you are logged into the Azure portal (https://portal.azure.com/).
- Create a Resource group (you can use search field):
- Subscription: Azure for students
- Resource group: any name
- Region: (Europe) North Europe
- Create a Speech service:
- Name: any name
- Subscription: Azure for students
- Location: (Europe) North Europe
- Pricing tier: Free (F0)
- Resource group: group name from the previous step
- Within your Speech Service go to: Resourse management → Keys and Endpoint and save your KEY 1.
- Download and install NodeJS (LTS version).
- Fork and clone the example project (this project): https://github.com/GU-CLASP/speechstate-lt2216. Keep an eye on the changes in the repo, it is still work in progress!
- Install yarn dependency manager and all the dependencies:
npm install --global yarn yarn
- Configure your environment. Modify the
.env
file in the root folder, subsitute<AZURE KEY1>
with your Azure KEY 1. Note: you can use other language, e.g.sv-SE
if it is supported by your application. - Run the project:
yarn start
- Your browser will open the page http://localhost/speechstate-lt2216.
- Unblock the pop-up window to see the state.
- Open
package.json
and change the value ofhomepage
tohttps://localhost/<your_github_repository>
- Build and deploy the app:
yarn run deploy
- The app will be available at https://<your_github_username>.github.io/<your_github_repository>
Note: Don’t hesitate to contact me if you have any issues with preflight steps.
- Task 1 (“appointment”)
- Implementation of the finite state machine.
- Task 2 (“intents”)
- Implement an intent-based menu.
- VG part
- Improve your app.
In this task you will need to implement the flowchart above.
I have created a starting point for you, so you basically can use the project that you forked before:
- In
./src/index.tsx
change thedmMachine
import to:import { dmMachine } from "./dmAppointment";
- You will need to edit the state chart in
./src/dmAppointment.ts
- To extend your context, make appropriate changes in
./src/react-app-env.d.ts
- You will need to extend the grammar (
const grammar
) to understand more titles, times and dates. - You will also need to create a similar grammar to understand “yes” and “no”, but also “of course”, “no way” etc.
In this task you will need to interact with DuckDuckGo Instant Answer API to get information about famous people that you (probably) would like to meet.
- Use the invocation in order to get the result from the API: https://xstate.js.org/docs/guides/communication.html#invoking-promises
- The interface with the API is already implemented in the bottom of
dmAppointment.ts
. - You will need to implement appropriate actions and transitions for
both
onDone
andonError
events.
- You would need to have a “main menu” prompting a for an action that user would like to do. There are two alternatives: “create a meeting” and “who is X”.
- In the latter case the input should be parsed and X should be extracted and sent to the API.
- Based on the responce from the API, tell the user about the person, and ask if they would like to meet them. You might need to create additional contextual attributes to store your data.
- If they would like to meet them, set the title of the meeting to “meeting with X” and proceed with asking about the day of the meeting (see the flowchart above).
- Write a report which will describe errors and limitation of your app.
- Try to fix some of them and briefly describe your solution in the report.
- G part
- submit two links:
- link to your forked repo
- URL of the deployed app
- VG part
- include the report in your repository. Please name it
lab2VG.pdf
(can be also Markdown or Org-mode file, but not Word).