How to use Spotify Views API? - api

How do I use Spotifies Views API the right way?
https://developer.spotify.com/technologies/apps/docs/preview/views/index.html
I am trying to implement a throbber in a div, so I use this code:
require(['$views/throbber#Throbber'], function(Throbber) {
var favs = document.getElementById('favs');
var throbber = Throbber.forElement(favs);
});
But this is throwing an "ReferenceError: require is not defined".
When I use it like this:
var sp = getSpotifyApi();
sp.require(['$views/throbber#Throbber'], function(Throbber) {
var favs = document.getElementById('favs');
var throbber = Throbber.forElement(favs);
});
It is throwing this error." TypeError: Object $views/throbber#Throbber has no method 'match' ".

The Throbber component is only available on 1.X API, using the syntax of your first code snippet.
In order to let the Spotify client know that you are using that version of the API you need to specify in your manifest.json file that are using the 1.X API by adding a Dependencies attribute including the api and views framework:
"Dependencies": {
"api": "1.0.0",
"views": "1.0.0"
}

Related

Local docusaurus plugins in typescript

I want to write local docusaurus plugins using typescript. (it works fine using js)
Is this possible? Like the docs here suggest to put them under ./src/plugins/name-of-plugin.
Reading the docs there are examples with ts, but if I just try and replace is with ts i get various errors. (eg "Cannot find module").
I'm using typescript for pages as well.
Adding the file extension worked for me.
For example:
plugins: ['./src/plugins/my-plugin.ts'],
my-plugin.ts
module.exports = async function myPlugin(context, options) {
return {
name: "my-plugin",
async loadContent() {
console.log("Hello World plugin wow!");
},
async contentLoaded({ content, actions }) {
console.log(content);
},
};
};
removing the extension shows the same error :)

Why imported Twilio in vuejs is invalid?

I want to use twilio API to my vuejs2 app looking at demo https://github.com/TwilioDevEd/sdk-starter-node:
I added in in project with command
yarn add twilio
But I failed to create Twilio.Chat.Client with valid token, which I got from backendpoint,
as imported twilio object is invalid. In src/main.js I added line :
export const Twilio = require('twilio')
and in my vue page with code:
console.log('initializeChatClient token::')
console.log(token)
console.log('initializeChatClient id::')
console.log(id)
console.log('initializeChatClient channel::')
console.log(channel)
// const Twilio = require('twilio')
console.log('$twilio::')
console.log(Twilio)
console.log('$twilio.Chat::')
console.log(Twilio.Chat)
const client = await Twilio.Chat.Client.create(token)
I got error :
TypeError: Cannot read property 'Client' of undefined
and in console I see invalid twilio object : https://prnt.sc/w41cc7
What is wrong ?
package.json :
"axios": "^0.19.0",
"core-js": "^3.3.2",
...
"twilio": "^3.54.0",
"vue": "^2.6.10",
...
Thanks!
Based on your screenshot, Twilio actually contains a function.
Check out this file: https://github.com/TwilioDevEd/sdk-starter-node/blob/master/src/notification_handler.js:
There is this method that initialises the client using new Twilio(...):
function getTwilioClient() {
// Twilio Library
const client = new Twilio(
config.TWILIO_API_KEY,
config.TWILIO_API_SECRET,
{accountSid: config.TWILIO_ACCOUNT_SID}
);
...
}
Follow the same approach to initialise yours.

Using react native with Optimizely

I try to follow documentation in Optimizely to get my react native app (#22.2) working but getting such bug.
MainActivity.java:24: error: cannot find symbol
Optimizely.startOptimizelyWithApiToken("xxxxxx", getApplication());
^
symbol: method startOptimizelyWithApiToken(String,Application)
location: class Optimizely
1 error
:app:compileDebugJavaWithJavac
What is wrong and how can I debug . I try
adb logcat ReactNative:V ReactNativeJS:V
but it's not giving me any information
I an on the engineering team at Optimizely and we've released a brand new product called FullStack that is more geared towards developers. As part of the product we now offer a JavaScript SDK for running experiments in all JavaScript clients, including React Native.
To use you would install our SDK:
npm install optimizely-client-sdk
And then you can split traffic using our activate and track methods.
Here is an example:
var optimizely = require('optimizely-client-sdk');
// Initialize an Optimizely client
var optimizelyClientInstance = optimizely.createInstance({ datafile: datafile });
// ALTERNATIVELY, if you don't use CommonJS or npm, you can install the minified snippet and use the globally exported varible as follows:
var optimizelyClientInstance = window.optimizelyClient.createInstance({ datafile: datafile });
// Activate user in an experiment
var variation = optimizelyClientInstance.activate("my_experiment", userId);
if (variation === 'control') {
// Execute code for variation A
} else if (variation === 'treatment') {
// Execute code for variation B
} else {
// Execute default code
}
// Track conversion event
optimizelyClientInstance.track("my_conversion", userId);
For more information please checkout our developer docs: https://developers.optimizely.com/x/solutions/sdks/introduction/index.html?language=javascript
i sorted problem is more about reading docs and using legacy:
compile ('com.optimizely:optimizely-legacy:+#aar') {
transitive = true
}
and then:
Optimizely.startOptimizely("xxxx", getApplication());

In cloud code seems impossible to use Parse.Config.get() with express is it correct?

Is there any way to use Parse.Config.get() inside an expressjs app hosted in cloud code?
Looks very easy to use Parse.Object and Parse.User but with Parse.Config.get() the code is not deployed using "parse deploy"
We manage to use it adding the jssdk in html and using "frontend js" but haven't find any way to use in directly in express controllers.
Thanks
It seem to be related with some kind of permissions issues...
var Parse = require('parse-cloud-express').Parse;
var Util = require('util')
Parse.Cloud.define("currentConfig", function(request, response) {
console.log('Ran currentConfig cloud function.');
// why do I have to do this?
Parse.initialize(xxx, yyy);
Parse.Config.get().then(function(config) {
// never called
// ...
console.log(config.get('xxx'))
}, function(error) {
console.log(Util.inspect(error))
});
});
Output
Ran currentConfig cloud function.
{ code: undefined, message: 'unauthorized' }
Edited code which work for me:
var Parse = require('parse-cloud-express').Parse;
var Util = require('util')
Parse.initialize("appId", "restApiKey", "masterKey");
Parse.Cloud.define("currentConfig", function(request, response) {
console.log('Ran currentConfig cloud function.');
Parse.Cloud.useMasterKey();
Parse.Config.get().then(function(config) {
// never called
// ...
console.log(config.get('xxx'))
}, function(error) {
console.log(Util.inspect(error))
});
});
EDIT: Add solution :)

Is it possible to use the default tabs with 1.X api

I am using the "new" spotify apps api and their documentation about the default tabs only seem to be relevant if you are using the old 0.X api.
I can create the tabs with my manifest using the below code. But I can't seem to fin a way to interact with them.
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I found a example of interacting with the default tabs that looks like this:
sp = getSpotifyApi(1);
// detects arguments value for tab
sp.core.addEventListener("argumentsChanged", function (event) {
console.log('args changed', sp.core.getArguments());
});
But I keep getting the error message "Uncaught ReferenceError: getSpotifyApi is not defined " and according to this post Cannot use the "getSpotifyApi" function in spotify app it's due to the fact that it's the 0.X way of interacting with the api.
Cannot use the "getSpotifyApi" function in spotify app
The only thing close to it that i found where the 1.X tab bars, they dont resemble a classic spotify tab bar, more like regulair gray buttons.
https://developer.spotify.com/docs/apps/views/1.0/tabbar-tabbar.html
anyone have any ideas here?
Looks like your tabbar docs point to the proper usage documented on https://developer.spotify.com/docs/apps/views/1.0/ui-ui.html. I think UI.setActiveView should do what you want.
Alternatively, you should be able to navigate using uri's like spotify:app:appname:tabname
disclaimer I haven't built any tabs into my app yet.