Complete Newbie Needs Help

I’m new to Spokestack (as of 5 minutes ago) and am trying to get some general information. I want to port a specific Alexa skill (NLU) to a mobile app using React Native and Spokestack. Can someone provide me with an outline of the steps that it will take to accomplish this? Also, do I need to have good coding skills to do this? (Note: I don’t have good coding skills…). Thanks!

Welcome, Stephen, and thanks for reaching out.

You will need to have some coding experience to complete your project. In general, more code goes into a mobile app than a smart speaker skill—you’ll want a functional UI that handles gestures, for example.

The good news, though, is that Spokestack has a UI library that can help you put together a prototype of your experience without making a custom UI. It’s called Spokestack Tray. The readme will help you get started, but there’s more information about everything in our documentation; here’s the link to the section for the React Native Tray.

You can start out with a blank screen behind the tray; it’ll let you run through your entire experience and give you a text-based history of the conversation as you go. You can then elaborate the UI as you get more comfortable.

For the NLU piece, we support direct conversion of the Alexa interaction model format; see our export instructions for a step-by-step process.

Hope this helps! If you have more specific questions as you get into the process, you might want to browse or post in the React Native category.

To summarize, here’s the order I’d do things in:

  1. Convert your NLU model. (I put this one first because conversion isn’t instantaneous, so you can move on with the rest while it’s happening.)
  2. Set up a new React Native app.
  3. Add a dependency on Spokestack Tray.
  4. Following the sample code in the example app or our docs, swap in the URLs to your converted NLU model files.
  5. Run the app (if on Android, use a physical device to test voice interactions).

Josh

1 Like

Hi Josh.

Thanks for your reply, it was a huge help in getting me started on my project. I actually went ahead and taught myself a bit about JavaScript and React Native and I currently have a simple, working React Native app and was able to import Spokestack to it successfully. I’m able to test the app by connecting my Android phone to my computer.

I’m now running into an issue where I’m trying to call the Spokestack ‘classify()’ function and I’m not getting any kind of response. As far as I can tell, all of the other Spokestack functions are working properly. I’m able to use ‘start()’, ‘activate()’, ‘deactivate()’, and ‘stop()’ to recognize user input and I’m able to get Text to Speech through the ‘synthesize()’ function. The only function that’s giving me problems is the ‘classify()’ function (which I really need to work for this project!).

For now I’m only trying to get it working with one of the example NLU’s (the Trivia model) and I included all of the required files for that. I’m not running into any kinds of errors when the app is running so it’s loading all of the files correctly. I think the problem has something to do with the ‘classify()’ function not returning any data after being called.

Here’s the piece of code that I’m running in the App

await Spokestack.classify("Hello").then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

I never end up seeing the response or any error logged in the console, even after waiting for minutes.

I have essentially the same code below with using the ‘synthesize()’ function and have no problems with it. When I run this code, I see the ‘url’ logged in the console almost immediately and there are no errors.

await Spokestack.synthesize("Hello").then(url => {
  console.log(url)
}).catch(error => {
  console.log(error)
})

Do you have any advice on how I can resolve this issue with the ‘classify()’ function?

Thanks
Stephen

Glad to hear you’ve got something up and running (almost)!

To help us troubleshoot with you, could you give us the following info?

  • React Native version
  • React Native Spokestack (or React Native Spokestack Tray) version
  • platform you’re testing your app on (Android/iOS)
  • OS version

Thanks,
Josh

Sure thing.

When looking at ‘package.json’ in the ‘react-native’ folder in ‘node-modules’ I see a React Native version of 0.64.0. When I type ‘npm react-native -v’ and ‘npm react-native-spokestack -v’ into my command prompt I see a version of 6.14.8.

When looking at ‘package.json’ in the ‘react-native-spokestack’ folder I see a React Native Spokestack version 5.0.0.

I’m testing my app on a physical Android device connected to my PC.

My PC’s OS is Windows 10 64 bit.

Stephen

Thanks! It’s getting a bit late our time, so I’m not sure whether we’ll be able to solve this today, but if not we’ll definitely get back to you. A couple things for now:

  • npm react-native -v is actually giving you the version of npm itself on your system. You should be able to get the versions we’re looking for from either the dependencies section of package.json at the root of your project or, failing that, package-lock.json.
  • Version 0.64.0 of RN and 5.0.0 of RN Spokestack sound right, though. We’ve actually had a couple releases of RN Spokestack since our last conversation that included a bug fix or two and updates for RN 0.64, so try updating (npm update react-native-spokestack) and see if that fixes things for you.

Josh

Oops, make that npm install react-native-spokestack@latest since we released a new major version.

Hi Josh. Thanks for the update. I’ll try this and then get back to you to let you know if it worked. I have a deadline to get this project done (this coming Friday) and the one thing I’ve been told I MUST do is get the ‘classify()’ function to work. So hopefully this does the trick! I’ll let you know…