The Ionic application was build with the Ionic framework, an open-source front-end development kit for building cross-platform mobile apps with HTML5 and Javascript.
First, install Node.js. The cognitive services plugin supports Node version 10.9 or greater.
Next, install Ionic using the following command:
npm install -g ionic
Note: Visual Studio Code was used for development and ionic was installed through VS Code.
To add a Speech Services resource to your Azure account:
Sign in to the Azure portal using your Microsoft account.
Select Create a resource at the top left of the portal.
In the New window, search for speech.
In the search results, select Speech.
Under Speech, select the Create button.
Under Create, enter:
Create a new resource group for this Speech subscription or assign the subscription to an existing resource group. Resource groups help you keep your various Azure subscriptions organized.
It takes a moment to create and deploy your new Speech resource. Select Quickstart to see information about your new resource.
Under Quickstart, select the Keys link under step 1 to display your subscription keys. Each subscription has two keys; you can use either key in your application. Select the button next to each key to copy it to the clipboard for pasting into the Environment.ts file.
Copy the name of the Speech Service and the region of the service into the Environments.ts file.
In the folder of the Ionic Application (ie examples/ionic-angular), run the following steps.
Run the following command to install all packages within the app. In a terminal window, browse to the examples/ionic-angular folder and run the following:
npm install
Install Native-Run so that the application can run the cordova native platforms (android, ios, or browser)
npm i -g native-run
Install Cordova
npm i -g cordova
To include the wrapper for the Cognitive Services plugin as an observable, run the following command:
cp -r ../../cognitiveservices node_modules/@ionic-native/
While this should install all components, there have been a few changes to
cordova recently and errors were being generated while devloping on the Mac.
If you get errors, specifically using toLowerCase, the run the following commands:
npm uninstall cordova
npm install cordova@latest
cordova platform remove ios
cordova platform add ios
To run the application, in a terminal window, browse to the examples/ionic-angular folder and run the following:
ionic cordova run browser
These steps are to set up your SDK environment to build, test, and deploy Android apps.
In Android Studio, click the AVD Manager in the Toolbar.
In the Select Deployment Target window, click Create New Virtual Device.
Select a device configuration of your choice and press Next.
Download and select a system image. Press next.
Verify configuration and press finish.
In the Virtual Device Manager, select the run button to start the emulator.
To run the application, in a terminal window, browse to the speecthtoText folder and run the following:
ionic cordova run android
These steps are to set up your SDK environment to build, test, and deploy iOS apps. This will only work on a Mac.
To run the application, in a terminal window, browse to the speecthtoText folder and run the following:
ionic cordova run ios
By participating in this project, you agree to abide by the Microsoft Open Source Code of Conduct