Using AWS.cloudSearch with javaScript - javascript

I'm trying to use AWS cloudSearch on my site, and I'm missing something fundamental. I've had no luck finding a working example.
In my HTML head I've included the SDK. per: http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html
<script type="text/javascript" src="https://sdk.amazonaws.com/js/aws-sdk-2.0.31.min.js"></script>
Then in my script tag I have this snippet (with my creds, not the ones shown here). I used hard coded creds for my testing per: http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-configuring.html
var s3 = new AWS.S3({region: 'ap-southeast-2', maxRetries: 15});
AWS.config.update({accessKeyId: 'akid', secretAccessKey: 'secret'});
console.log(AWS);
//
var cloudsearch = new AWS.CloudSearch();
When it tries to execute the last line javaScript tells me: Uncaught TypeError: undefined is not a function
I've been unable to find a demo, example or tutorial. The docs don't even have working examples.
Can you help?
Thank you for your time.

That error is saying it doesn't find reference to cloudsearch when you are calling the new AWS.Cloudsearch().
The script you reference doesn't appear to have a reference to cloudsearch api. I think you need to build it out like they specify in Building the SDK for Use in the Browser.
For kicks I replicated the error you received, then did a browser build as specified by the link above. It worked.
Upon further investigation after looking through the libraries. I think you probably want to use CloudSearchDomain to issue searches to a given domain setup within cloudsearch.
http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudSearchDomain.html
The other cloudsearch library is all administrative/setup related to Search domain creation and other administrative types of objects. Looks like there are some issues with CORS/setup for cloudsearch in general so if you want to issue this straight from the browser might be a bit tricky.
The most common way to get around the CORS issue is to use a proxy.
The easiest way to play around with search from the browser\local is using a form, as suggested here.
Amazon CloudSearch query
<form action="https://$YOURSEARCHDOMAIN/2013-01-01/search" method="get">
<label>Search: <input name="q" /></label>
<input type="hidden" name="q.parser" value="simple" />
<button type="submit">Search</button>
</form>
above solution is pretty much cut and paste\play, works like the AWS cloudsearch console, and returns the json to the browser. Not sure if you can incorporate suggests without the api directly. You will need to open up your access policy to work, I believe.
I tried a variety of access policies and various tricks to get around the CORS issue, all no dice.
You actually need the CORS plugin for chrome to make this work properly.

Created an angularjs project that demos this and added to git hub. You need CORS-anywhere to route properly to the domain.
https://github.com/tkntobfrk/amazon-cloudsearch-angular
project uses suggesters to search domain data and populate the input field with autocomplete data. Uses bootstrap.ui typeahead.

Related

Code in Google Tag Manager does not working

I have a test tasks and 2 from 3 I've done.
But this one I don't understand how and what I need to do?!
I managed to find syntax error:
At first should be:
...function someFunctionName() {...}
or
(function() {...})()
...second it's anonymous function...
TASK:
This script is executed in GTM and implemented in Google analytics by custom Task.
The script sends information about user behavior to Optimozg server and then to Bigquery (bq.php file processes and forwards data). Optimozg server data is coming in correctly, but the data in Google Analytics does not reach.
What is the reason?
How do you fix it?
Hint:
(test the code on your site instance with GTM)
function(){return function(tracker){if("undefined"===typeof tracker.get("BigQueryStreaming")){var f=tracker.get("sendHitTask"),h=function(){function d(c){var a=!1;try{document.createElement("img").src=e(!0)+"?"+c,a=!0}catch(k){}
return a}
function e(c){var a="https://test.optimozg.com/bq/bq-test.php";c||(a+="?tid="+encodeURIComponent(tracker.get("trackingId")));return a}
return{send:function(c){var a;if(!(a=2036>=c.length&&d(c))){a=!1;try{a=navigator.sendBeacon&&navigator.sendBeacon(e(),c)}catch(g){}}
if(!a){a=!1;var b;try{window.XMLHttpRequest&&"withCredentials" in(b=new XMLHttpRequest)&&(b.open("POST",e(),!0),b.setRequestHeader("Content-Type","text/plain"),b.send(c),a=!0)}catch(g){}}
return a||d(c)}}}();tracker.set("sendHitTask",function(d){h.send(d.get("hitPayload"));tracker.set("BigQueryStreaming",!0)})}}}
Not sure why JS devs should know anything about GTM. They typically don't go there.
But yes, to understand how to use the given code properly, just read this article: https://www.simoahava.com/analytics/customtask-the-guide/ it describes what custom tasks are and how to use them.
Ok, so first make a GTM account. Deploy the GTM code on your site. May as well use a local site. Or, rather, have the GTM code being injected by a local extension to a random site that doesn't have GTM yet. Or maybe use a redirector extension to redirect the request for their GTM to yours, up to you.
After that, you just make a tag in GTM that would send a Universal Analytics pageview. GA4 decided not to bother with custom tasks, unfortunately, so UA only. Then you make a trigger on pageview. You assign the trigger to the tag. Don't forget to publish the workspace at least once for it to be testable. Then you preview. Preview is a CTA in GTM in top right corner, near the publish. Basically a neat GTM debugger. Enter the site where you have your GTM snippet deployed/injected. Make sure preview sees your tag firing on page load. That would mean you did the preparation correctly.
We're doing the Hint section here, by the way. Now you need to make a custom javascript variable in GTM, paste the code snippet as is in there. The reason why it wants the code in an anonymous function is because it will run it as a closure on it's own. So they kinda remove the need of the extra ()(). It's mostly done for people who don't know JS, so don't be surprised.
Ok, you've made the CJS var, now go to your tag, and set your customTag exactly as Simo shows in his article:
Good, now publish your container, go to the site where you have it deployed, open the network tab and reload the page.
Inspect the calls to the BQ and Optimozg endpoints. Now what they ask is, I believe, why the original call that is meant to be sent by the tag is not being send. So if you remove the setting of the customTask, then publish and reload the page, you should see a request to the collect endpoint, which is the GA's endpoint for data tracking. If you re-add the customTask code, it will prevent the normal tag's functionality from execution, so no collect call.
What they want to hear from you is how to make the tag fire the original event alongside their optimozg and bq calls.
Most likely, the answer is pretty simple and elegant, but requires a lot of debugging to reach to. Reading Simo's article will help understanding the significance of setting various tasks.
Uh, ok, I didn't mean to really debug it, but it looks like I found the bug. It's in the var f = tracker.get("sendHitTask") It's being used to store the original sendHitTask function, but it never gets used. Why is that? Basically, you just need to call the function in the new sendHitTask function that you set in the last line. I'm not going to debug it in my GTM, but I'm pretty sure that's the issue. It's kinda begging to be found there.
Also, this is not quite a junior JS dev task. It's a senior tracking implementation task. Basically, about $110/hr in Canada and US. Junior JS devs are around $35/hr, I guess. They're just trying to save money, heh. I was thinking of hiring junior JS devs instead of tracking implementators too, but it's hard to teach how data analysis works in all the different tools.

How to avoid '#' sign expansion in `vega#3`

In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?

How to integrate tesseract OCR with Cordova/Phonegap app

Im trying use tesseract OCR with my app and by instructions posted here
http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/create-an-ocr-android-app-with-cordova-and-tesseract
several times I followed the instructions but with no success.When im inspecting code with Google Chrome Dev console thru the WebVieW it give me
Uncaught SyntaxError: Unexpected token }
in file tesseractPlugin.js:11
thats located somewhere in
file:///android_asset/www/plugins/com.tesseract.phonegap/tesseractPlugin/tesseractPlugin.js
and
Uncaught Error: Module com.tesseract.phonegap.tesseractPlugin.TesseractPlugin does not exist.
in cordova.js:1431
witch i think means the cordova cant find the plugin but i dont know why.I think it's something with the version of Cordova and its access to plugins
its frustrating because there are no other options on the web and i dont know how to write my own cordova plugin.
I would also like to add that I created the project exactly as instructed to avoid the mistakes and over I have found that it is not possible to download the plugin by git from
https://github.com/engzhaowei/Tesseract-phonegap-android-example/tree/master/plugins/com.tesseract.phonegap.tesseractPlugin
so i downloaded full package and fetch plugin from
C:\xxx\plugins\com.tesseract.phonegap.tesseractPlugin
There is tessaract js http://tesseract.projectnaptha.com/
which is a javascript library and you can use it and will work for phonegap its very easy to implement.
Just reference the cdn script in the header and call the code snippet it should work. Be warned actress is slow.
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
var myimage = document.getElementById("largeImage").src;
Tesseract.recognize(myimage)
.then(function(result){
// console.log(result);
document.getElementById("textarea1").value = result.text; // assign results to a textbox

CafePress Widget Not Showing Products

I'm trying to put a CafePress Widget on a website, using the tool provided here: http://www.cafepress.com/cp/widgets/ but it's not working. The box gets added, but no products within.
There's an error in the Console that shows that cpwidget.js is trying to access search.json with a relative URL. When I put this code in a jsFiddle this is the error I got:
http://fiddle.jshell.net/search.json?query=&pageNumber=1&utm_medium=affiliate&utm_campaign=cpwidget 404 (NOT FOUND)
(not sure what the snippet error will look like, so providing this too). My website returned the same error.
So this seems to be the problem, but I'm finding it hard to believe that this widget simply does not work. I couldn't possibly be the only person who's ever tried to use it?
var CPwaitForLoad,jQwaitForLoad,init=function(){if("CPWidget"in window)window.clearTimeout(CPwaitForLoad),CPWidget.init({title:"My CafePress Products",topcolor:"#8CBE21",bottomcolor:"#79A618",bgcolor:"#FFFFFF",rows:1,cols:1,imgsize:"125",prodtitle:"true",partnerid:"",shopid:"",tags:""});else{CPwaitForLoad=window.setTimeout(init,200);var t=document.createElement("SCRIPT");t.src="http://content.cpcache.com/cplabs/cpwidget.js?v=5",t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)}},jQinit=function(){if("jQuery"in window)window.clearTimeout(jQwaitForLoad),init();else{var t=document.createElement("SCRIPT");t.src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js",t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t),jQwaitForLoad=window.setTimeout(jQinit,200)}};jQinit();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cpwidget'></div>
Having the same issue: I believe widgets are no longer supported. If you look at their builder page (http://www.cafepress.com/cp/widgets/) you'll find the links to the Blogger & Joomla no longer work, either, and WordPress version is 2 years out of date with a low score.
Did you get any technical support responses from CafePress? I sent a contact email but have yet to get a response.
My answer: CafePress widgets no longer work.

Chrome Folder Upload API. Detect support & Workaround with JS / JQuery

I am currently working on a web media player and would like to use the new "Folder Upload API" from Google Chrome (or however its being called officially) to recursively work with local directories. Unfortunately I wasn't able to find any further information on this and I'm not quite familiar with HTML5's FileReader object. Is there any official site or documentation of that specific API by any chance?
Without posting the entire and minor code of my example, I would like to refer to a JSFiddle site: http://jsfiddle.net/a869q/
The example displays both, the 'usual' upload method and the one using webkit-directory.
<input id="file_input" type="file" multiple="" />
<input id="file_input_dir" type="file" multiple="" webkitdirectory="" directory="" />
<div id="test"></div>
On event.change the references (blobs) to these files are then being used to get duration of mp3-files and to create a list of audio-elements. Works just fine. Choosing directories only works in Chrome.
$('#file_input, #file_input_dir').change(function(e) {
$.each(e.target.files, function(index,file) {
// ....
$('#test').append('<audio src="'+window.URL.createObjectURL(file)+'"></audio>');
// ....
});
});
Now, using Javascript / jQuery I would like to find out if the client does support the new webkit-directory feature and I really hope that there is a way doing this without just reading the UserAgent and check against string "Chrome". Any ideas?
Regarding the matter, that it's only working in Chrome at the moment, I would also like to know if there is a common or suitable workaround to let this work in different browsers, but at least Firefox. In this article there have been some neat posts made with different examples already. But mainly all the working plugins are using Flash or Applets which I'm really trying to avoid. Still hoping for solution.
In addition, talking about the method I'm gathering the duration of chosen audio-files with (please see JSFiddle). Any way doing this with pure JScript, without creating HTML5-Audio-Elements?
(function() {
var input = document.createElement("input");
input.type = "file";
return !!("webkitdirectory" in (input || document.querySelectorAll("input[type=file]")[0] ))
}())

Categories