请选择 进入手机版 | 继续访问电脑版

技术控

    今日:505| 主题:53728
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web

[复制链接]
爽场 发表于 2016-10-2 11:26:23
229 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
I’m contributing a few hours a week on Fridays to tutor kids on programming and a bit of electronics, in what we call a “Geeks’ School” (or Escuela de Geeks ). I’m always exploring ways to make it more interesting for kids (12-16yo) to learn programming. I found out that given that the cellphone (mostly Androids here in Argentina) is their primary computing device, they were instantly hooked to theMIT AppInventor 2 platform.
   We’re actually using Thunkable , a fork of the original MIT AI2 that provides a nicer Material Design UI and sleeker looking client/companion app for the device. Kids have even interacted via chat directly with the site owners, which was a blast!
  One of the kids wanted to build a translating app that would:
  
       
  • Accept spoken spanish input   
  • Recognize the text and send it to a web api for translation   
  • Get the translated text and have the app speak it loud  
   The speech recognition and text-to-speech parts were very straightforward involving just a couple built-in blocks with simple input-output connectors:
   

Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

   Plugging a Web component in-between the recognized (Spanish in this case) text in when speech.After Getting Text and the call to call tts.Speak proved quite challenging. To be clear, invoking web services by issuing POSTs and GETs is as easy as anything else: just drop the non-visual Web component on the designer and just call it from the blocks view. That’s the easy part. But the key thing in invoking web services is processing its output, of course ;)
   Most web APIs nowadays return plain JSON, and a quick search around the web for how to parse and consume JSON from an app yielded some very scary looking massive amount of blocks for something that is just a couple lines of code in any modern programming language.
  Azure Functions to the rescue

   So I remembered the Build Conference introduction of Azure Functions and chatting with the team at their booth, as well as Scott’s great introduction to Serverless Computing and this seemed like the perfect opportunity to give it a shot.
  In short, what I wanted was a way to get a single JSON property value from the response of Google’s translate API. The request looks like the following:
  1. https://www.googleapis.com/language/translate/v2?q=hola⌖=en&format=text&source=es&key={YOUR_API_KEY}
复制代码
And the response:
  1. {
  2.     "data": {
  3.         "translations": [
  4.             {
  5.                 "translatedText": "Hello"
  6.             }
  7.         ]
  8.     }
  9. }
复制代码
  It takes literally ONE line of code to retrieve the translatedText using Json.NET:
  1. var result = JObject.Parse(json).SelectToken("data.translations[0].translatedText")
复制代码
  So I went to http://functions.azure.com ( love the customized subdomain, as opposed to navigating the seemingly endless features of Azure in the portal) and created a new “Function app”.
   NOTE: the “function app” is the actual Web API ‘site lite’ that will host the actual function (or functions). So if you name it like your function, i.e. parsejson then define the parsejson function, the resulting URL will look slightly awkward: https://parsejson.azurewebsites.net/api/parsejson
   In my case I went for stringify for the function app name, and json for the function name, which results in a nice looking url https://stringify.azurewebsites.net/api/json
   I started directly with from the Or create your own custom function link at the bottom of the wizard, and chose the HttpTrigger - C# template. Then I wrote the code in a window without any intellisense (I hope that changes soon ;)) but it was dead-simple. The whole function that takes POSTed JSON bodies and takes a “q=[JSON PATH]” argument for stringifying it is:
  1. #r "Newtonsoft.Json"
  2. using System.Net;
  3. using Newtonsoft.Json.Linq;
  4. public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
  5. {
  6.     var query = req.GetQueryNameValuePairs()
  7.         .FirstOrDefault(q => string.Compare(q.Key, "q", true) == 0)
  8.         .Value;
  9.     var json = await req.Content.ReadAsStringAsync();
  10.     return string.IsNullOrEmpty(json) || string.IsNullOrEmpty(query) ?
  11.         req.CreateResponse(HttpStatusCode.OK, "") :
  12.         req.CreateResponse(HttpStatusCode.OK, JObject.Parse(json).SelectToken(query).ToString());
  13. }
复制代码
  And of course you can try it out simply from curl :
  1. curl -k -X POST -d "{"data":{"translations":[{"translatedText":"Hello"}]}}" https://stringify.azurewebsites.net/api/json?q=data.translations\[0\].translatedText
复制代码
A whole speech to text translation app in less than 20 blocks

  And with that, suddenly, interacting with the Web from MIT AppInventor2 or Thunkable is super straight-forward. The whole program is easy to grasp by any 12yo+ kid:
  
       
  • When the button is clicked, start listening for speech:

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...
       
  • When speech is recognized, ship it off for translation:

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...
       
  • When translation JSON comes back, ship it off for “stringifying”:

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...
       
  • When the simple string comes back from “stringify”, speak it out loud:

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...

    Daniel Cazzulino's Blog: Leveraging Azure Functions for MIT AppInventor Web ...
      
   It would have taken that many blocks or more just to parse the JSON response from the translation Web API. A massive improvement by just using a little bit of serverless computing to aid in teaching :)
  For other teachers leveraging MIT AppInventor for the Web, here’s the “documentation”:
  
       
  • Set the stringify Web component’s URL to https://stringify.azurewebsites.net/api/json   
  • Append the path of the JSON value to retrieve as the query string parameter, like ?q=data.translations[0].translatedText   
  • Use a POST Text call passing in the JSON to parse.  
   NOTE: if you are dealing with a single JSON web response format, the URL of the stringify Web component can be set statically in the Designer pane and never changed from blocks, as shown in the above translation example.
   I look forward to using Azure Functions a whole lot more. For one, I think I’ll expand the stringify Azure Fuction app to include an xml and possibly html functions receiving an XPath expression as the ?q= query string parameter.



上一篇:Android 实现点击两次BACK键退出应用
下一篇:从零开始的 JSON 库教程(四):Unicode
xa6zswdex0 发表于 2016-10-2 15:23:10
看帖要回,回帖才健康
回复 支持 反对

使用道具 举报

彤亦 发表于 2016-10-3 04:28:58
生我之前谁是我,生我之后我是谁?  
回复 支持 反对

使用道具 举报

房莉 发表于 2016-10-6 03:00:08
连广告也信,读书读傻了吧
回复 支持 反对

使用道具 举报

微信1823939240 发表于 2016-11-16 10:35:47
没人回帖。。。我来个吧
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表