Is it possible to implement "OK Google" like functionality using Ionic - ionic-framework

I am trying to build an app like Alex or Google Home, suppose a user says "Hey MyApp", mic should be opened or a function associated with the button should be invoked automatically
I have tried API.ai and Ionic TTS plugins, but not able to find anything to enable native features using voice commands in Ionic.

yes you can do it using Ionic Speech recognition this
ionic cordova plugin add cordova-plugin-speechrecognition
npm install #ionic-native/speech-recognition
add it module
then run
import { SpeechRecognition } from '#ionic-native/speech-recognition/ngx';
constructor(private speechRecognition: SpeechRecognition) { }
...
// Check feature available
this.speechRecognition.isRecognitionAvailable()
.then((available: boolean) => console.log(available))
// Start the recognition process
this.speechRecognition.startListening(options)
.subscribe(
(matches: string[]) => console.log(matches),
(onerror) => console.log('error:', onerror)
)
// Stop the recognition process (iOS only)
this.speechRecognition.stopListening()
// Get the list of supported languages
this.speechRecognition.getSupportedLanguages()
.then(
(languages: string[]) => console.log(languages),
(error) => console.log(error)
)
// Check permission
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => console.log(hasPermission))
// Request permissions
this.speechRecognition.requestPermission()
.then(
() => console.log('Granted'),
() => console.log('Denied')
)

Call voice recognition function inside constructor & build the app and install.
And then say ok Google open ( your app name)
Google assistant open your app and voice recognition fiction will be automatically trigger.

Related

How can I create a fulfillment for intent in Google Actions?

I created a Google Action using the Google Actions console, then pulled it using the gactions CLI and now I am trying to connect my intents to a fulfillment webhook but don't know how.
I tried using the following code for the fulfillment from the Google Action help:
const { conversation } = require('actions-on-google');
const functions = require{'firebase-functions'};
const app = conversation();
app.handle('sayHello', conv => {
conv.add("Hi there! It\'s good to see you!");
})
exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app)
Conversation doesn't seem to exist and I am having trouble finding other ways of accepting requests.
This is my current directory:
How can I send requests to the fulfillment webhook from intents?
The conversation is the term for the container when using Actions Builder or Actions SDK along with the #assistant/conversation library.
If you are using either one, you should change libraries.
If you are using Dialogflow, you would want to keep actions-on-google as the library and switch the method from app.handle to app.intent.
Additionally, this may be an encoding problem, but when your handler contains conv => { there should be a 'greater than' symbol instead:
conv => {

InAppBrowser not loading website because of SSL certificate

I have an Ionic 5.x app with the InAppBrowser plugin. I am trying to load a website with the plugin, the browser opens but the page is completely blank and with no errors thrown.
After many hours of debugging I have concluded that the issue is the certificate of the website not being trusted.
What does not make sense is the website is secure when viewed on a browser and is "Verified by: DigiCert Inc"
Other questions with same issue:
Loading url in ionic shows blank screen,
Cordova inAppBrowser opens www.google.com but not my custom facebook login page?
Does anyone have any ideas on why this is happening?
The code I am using to open:
this.browser = this.inAppBrowser.create( "https://mywebsite.com/", "_blank", "location=yes" );
this.browser.on("loadstart").subscribe( event => {
console.log( event ); // not triggered
});
this.browser.on("loadstop").subscribe( event => {
console.log( event ); // triggered
});
this.browser.on("loaderror").subscribe( event => {
console.log( event ); // not triggered
});
After many many hours of digging around I was finally able to find a solution. Editing a plugin file is not ideal but it does fix this issue!
Edit this file: plugins/cordova-plugin-inappbrowser/src/android/InAppBrowser.java
Add this to the import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Then add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In file "plugins\cordova-plugin-inappbrowser\src\android\InAppBrowser.java":
Add this lines to import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In Console of Project Root: execute
$ cordova platform remove android
$ cordova platform add android

How to use Google Analytics in Ionic 3?

I want to implement Google Analytics in my application to know how many users access my application in real time, but I'm having some difficulties. In the Google Analytics panel, the following message appears (in Portuguese):
And I'm following Ionic's documentation, but I can not add in my application, could someone give me a "north" about it?
And this is code of documentation
import { GoogleAnalytics } from '#ionic-native/google-analytics';
constructor(private ga: GoogleAnalytics) { }
...
this.ga.startTrackerWithId('YOUR_TRACKER_ID')
.then(() => {
console.log('Google analytics is ready now');
this.ga.trackView('test');
// Tracker is ready
// You can now track pages or set additional information such as AppVersion or UserId
})
.catch(e => console.log('Error starting GoogleAnalytics', e))

Ionic 4 read SMS plugin for OTP Verification

I am developing the ionic4 app, to auto verification or whenever I will get SMS my app has to read that message. for this I used 'Cordova plugin add Cordova-plugin-SMS' but it is not working. i declared 'declare var window: any; and declare var SMS: any;' nothing has worked. it showing "java.lang.ClassNotFoundException: com.rjfun.cordova.sms.SMSPlugin" in Android, in the web while developing it showing " TypeError: Cannot read property 'listSMS' of undefined". can any one help me to solve this issue
There is one plugin which could solve your problem. Named cordova-plugin-sms-receive.
This will help to read sms when any phone received and you can do whatever you want.
https://www.npmjs.com/package/cordova-plugin-sms-receive
That plugin enables sending an SMS from the app, not receiving an SMS.
To get data from an SMS to your app, you could pass it as args using deeplinks. This would required the user to tap a link in the SMS. I am not aware of a way to have SMS data fed to your app automatically, and I would think it is not possible as it would be a security risk.
A custom URL scheme is the simplest way to do that (e.g. mycoolapp://some-path?p1=data1&p2=data2.
App Links (Android > 6.0) and Universal Links (iOS > 9.0) are more powerful but may be unnecessary and are not as well supported. It really depends on your use case.
Ionic has a community maintained plugin for this which I use and does the job, albeit with a workaround needed here and there. Branch.io's plugin is also an option but I haven't used it.
very nice question ... you need to use cordova plugin for that. Below are the
First you need to install Android Permission Ionic Native Plugin.
run these two commands first to install Android Permission Plugin.
ionic cordova plugin add cordova-plugin-android-permissions
npm install #ionic-native/android-permissions
Add android-permissions to your app's Module.
import { AndroidPermissions} from '#ionic-native/android-permissions';
#NgModule({
providers: [
AndroidPermissions
]
})
export class AppModule { }
Check permissions on page
import { AndroidPermissions } from '#ionic-native/android-permissions';
export class HomePage {
constructor(public androidPermissions: AndroidPermissions) { }
ionViewWillEnter()
{
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then(
success => console.log('Permission granted'),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS)
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]);
}
}
After allowing Read SMS permission now you need to install cordova-plugin-sms. Run this command for install it.
ionic cordova plugin add cordova-sms-plugin
npm install #ionic-native/sms
and in your page while reading SMS -
place this in top before declare class
declare var SMS:any;
place below inside class
ionViewDidEnter()
{
this.platform.ready().then((readySource) => {
if(SMS) SMS.startWatch(()=>{
console.log('watching started');
}, Error=>{
console.log('failed to start watching');
});
document.addEventListener('onSMSArrive', (e:any)=>{
var sms = e.data;
console.log(sms);
});
});
}
You can use this Ionic/Cordova plugin for Auto OTP verification and this will not ask the user for SMS read Permissions.
Plugin: https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
Demo App: https://github.com/hanatharesh2712/sms-plugin-test

Getting error unsupported_response_type

I am working on login with google functionality with $cordovaOauth.google plugin. But I am getting unsupported_response_type error.
$cordovaOauth.google("MY_APP_ID", ["https://www.googleapis.com/auth/urlshortener", "https://www.googleapis.com/auth/userinfo.email"]).then(function (result) {
console.log(JSON.stringify(result));
alert(JSON.stringify(result));
$scope.gdata = result;
}, function (error) {
console.log(error);
});
Where I am making mistake !?
Yes because $cordovaOauth plugin loading webview so you must need web clientID from Google API. And that will not work for ionic ( Mobile app ) so you need to do following things.
First
You need to use schema for your app to give internal URL like google:// or twitter://
Reference : http://mcgivery.com/using-custom-url-schemes-ionic-framework-app/
and provide that custom URL in Google redirect url ( This is not working all time as Google not accept custom URL but you can give it a try ).
Second and Working solution :
You need to create Google app with your app identifier and keytool.
For Android :
https://developers.google.com/identity/sign-in/android/start follow step second and provide your app name and unique identifier ( i.e dipesh.cool.com )
For iOS : 
https://developers.google.com/mobile/add?platform=ios&cntapi=signin
same information as mentioned for android.
Then you need to get REVERSED_CLIENT_ID value from the config file which download will be available once you are done with above two steps ( you can grab it from iOS config file it is easy to find from that file ).
And then simply run below command and code and you will have all working.
Command :
cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=GRAB_THIS_FROM_IOS_OR_ANDROID_CONFIG_FILE
Angular code :
$scope.GoogleLogin = function()
{
$scope.loaderShow('Google');
window.plugins.googleplus.login({},function (obj)
{
window.localStorage.setItem('signin', 'Google');
window.localStorage.setItem('g_uid', obj.userId);
window.localStorage.setItem('g_fname', obj.givenName);
window.localStorage.setItem('g_lname', obj.familyName);
window.localStorage.setItem('user_full_name', obj.displayName);
window.localStorage.setItem('g_email', obj.email);
window.localStorage.setItem('gotPdetails', 'false');
$scope.loaderHide();
$state.go('app.dashboard');
},
function (msg)
{
$scope.showAlert('Google signin Error<br/>'+msg);
$scope.loaderHide();
});
}