Please help me create sample ML-Kit for javascript

[Adangsutisna]

hei @EddyVerbruggen

I made a big project with Nativscript using javascript,

I want to add the ML-KIT feature but I don't see the documentation using javascript

please add sample using javascript

thank you

[EddyVerbruggen]

You need to be more specific. There's an XML sample here: https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/ML_KIT.md#xml, and JS instead of TS is not that different.

[Adangsutisna]

hi @EddyVerbruggen

I have made the required configuration

Required Android permissions (ok)

On-device configuration (ok) <meta-data android:name="com.google.firebase.ml.vision.DEPENDENCIES" android:value="ocr" />

Cloud configuration(ok) Enable the Cloud Vision API (ok) Upgrade to a Blaze plan(ok)

this is my code xml: <Page loaded="loaded" navigatingTo="onNavigatingTo" xmlns:lv="nativescript-ui-listview" xmlns:ns="nativescript-carousel" xmlns:TIL="nativescript-textinputlayout">

<ActionBar backgroundColor="#1E252B" >
    <StackLayout orientation="horizontal"  horizontalAlignment="left" >
    <StackLayout orientation="horizontal"  class="btn_back_android" verticalAlignment="center" horizontalAlignment="left" >
        <Label style="font-size:34;font-family:MaterialIcons;text:&#xe5c4;" 
            padding="0"
            borderRadius="50"
            verticalAlignment="center" 
            font-weight="bold"
            color="white"
            tap="onNavBtnTap"
            verticalAlignment="center" 
            horizontalAlignment="right">
        </Label>
    </StackLayout> 

    <StackLayout orientation="horizontal" marginLeft="3" verticalAlignment="center" horizontalAlignment="left" >
            <Label  padding="5"  text="{{ nameGame }}" style="font-family:FontAwesome;font-weight:bold;color:white;font-size:16;text-align:left" 
            />
    </StackLayout>

</StackLayout>
<ActionItem android.position="right" >

</ActionItem> 
<ActionItem  android.position="right" >

</ActionItem> 

</ActionBar>

---

this is my code javascript

var localStorage = require( "nativescript-localstorage" ); var frameModule = require("ui/frame");

var observable = require("data/observable"); var dialogs = require("ui/dialogs"); var ObservableArray = require("data/observable-array").ObservableArray; var fetchModule = require("fetch"); const platformModule = require("tns-core-modules/platform");

//error import { MLKitRecognizeTextResult } from "nativescript-plugin-firebase/mlkit/textrecognition"; //error

//var MLKitRecognizeTextResult = require("nativescript-plugin-firebase/mlkit/textrecognition"); const firebase = require("nativescript-plugin-firebase");

var config = require("../../shared/config");

var pageData = new observable.fromObject({

nameGame:'',
idGame:'',
txcover_img:'',
txplayer_in_game_id:''

//showTitle: true

});

exports.onNavigatingTo = function (args) { localStorage.setItem('HomePage', false); const page = args.object; page.bindingContext = pageData; gotData = page.navigationContext; pageData.set("idGame", gotData.id); pageData.set("nameGame", gotData.nameGame); console.log("game-detail.js lihat sukses 200", gotData.nameGame, gotData.id );

getGameId().then(function () {
    //   console.log(pageName,'getGetFeedsNewForLimit : ' + pageData.data_feed_new.length);

}); 

}

function getGameId() { var tokens = localStorage.getItem('xxxx'); var post_body = JSON.stringify({ xxxxx: xxxxx, xxxx: xxxx.xxxx }); console.log("game-detail.js lihat sukses ",pageData.idGame ); return fetchModule.fetch(config.apiUrl + "xxxxxxxxxxxxx", { method: "POST", body: post_body, headers: { "Content-Type": "application/json" } }) .then(handleErrors) .then(function (response) { return response.json(); }) .then(function (data) {

    if (data.status==200) {
        pageData.set("txcover_img", data.result.game.cover_img);
        pageData.set("txplayer_in_game_id", data.result.player.player_in_game_id);
        console.log("game-detail.js lihat sukses 200", pageData.txcover_img  );
    }else{

    }
});

}

function tapGoogleVision(args){

console.log("geme-detail-upload.js lihat google vision");
var imageSource= "res://def";

    firebase.mlkit.textrecognition.recognizeTextOnDevice({
    image: imageSource // a NativeScript Image or ImageSource, see the demo for examples
    }).then((result: MLKitRecognizeTextResult) => { // just look at this type to see what else is returned
    console.log(result.text ? result.text : "");
    }).catch(errorMessage => console.log("ML Kit error: " + errorMessage));

}exports.tapGoogleVision = tapGoogleVision;

function handleErrors(response) { if (!response.ok) { console.log(JSON.stringify(response)); throw Error(response.text_info); } return response; }

function onNavBtnTap(args) { console.log("BTN BACK..."); var topmost = frameModule.topmost(); topmost.goBack(); clearHistory: true // topmost.navigate("views/home/home"); } exports.onNavBtnTap = onNavBtnTap;

but there is still an error when I add the sample project that you provided please help me, error line code: //error import { MLKitRecognizeTextResult } from "nativescript-plugin-firebase/mlkit/textrecognition"; //error

thanks you

[EddyVerbruggen]

I don't know what you want from me exactly, but I'm not going to write your app for you. If there's an issue with the plugin feel free to open a new issue.

[Adangsutisna]

hi @EddyVerbruggen

sorry to make you confused,

so actually I want you to give an example of the ML-KIT version of javascript,

like the sample on firebase realtime database I use it and it works well

because I tried this sample ML-kit in javascript this error occurred;

thank you

error:

========================================================================== this my code java:

[carlosGesimde]

I have the same problem. I need to know how can convert the doc ts code into js code working with this plugin. The view works fine for me, only the example js needs to be more understandable for me.

[EddyVerbruggen]

@carlosGesimde I've justed added some JS samples to the ML Kit readme. The main differences between TS and JS here are:

• Use require instead of import.
• Use var instead of let / const.
• Don't specify types, so use (result) instead of (result: TheTypeOfTheResultObject).

[carlosGesimde]

@carlosGesimde I've justed added some JS samples to the ML Kit readme. The main differences between TS and JS here are:

• Use require instead of import.
• Use var instead of let / const.
• Don't specify types, so use (result) instead of (result: TheTypeOfTheResultObject).

Thank you very much this really helps me.

[Adangsutisna]

@EddyVerbruggen Thank you very much