Ionic Application
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.
Getting started
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.
Dependencies
Create a Speech resource in Azure
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:
-
A name for the new resource. The name helps you distinguish among multiple subscriptions to the same service.
-
Choose the Azure subscription that the new resource is associated with to determine how the fees are billed.
-
Choose the region where the resource will be used.
-
Choose either a free or paid pricing tier.
-
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.
- Select Create.
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.
Install packages using NPM
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
Run the Application
Run on Browser
To run the application, in a terminal window, browse to the examples/ionic-angular folder and run the following:
ionic cordova run browser
Run in Android Emulator
Setting up Android environment
These steps are to set up your SDK environment to build, test, and deploy Android apps.
- Install Java Development Kit (JDK) 8 or later.
- Install Gradle. Go through each steps on the Gradle Installation page.
- Install Android Studio.
- After installing Android Studio, run the Android Studio Setup Wizard to download some standard components that are required for development.
Creating an emulator
-
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.
Run Android Application
To run the application, in a terminal window, browse to the speecthtoText folder and run the following:
ionic cordova run android
Run in iOS Emulator
Setting up iOS environment
These steps are to set up your SDK environment to build, test, and deploy iOS apps. This will only work on a Mac.
- Install XCode with Apple Developer account, or download from the App Store.
Run iOS Application
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