(music)
>> The idea today is to build an Azure function
that goes off when you call it and fetches a dad joke
and then brings that dad joke back.
And then goes off to the pirate API
and brings it back, translated into pirate speak.
And then what we do with that, is up to you.
Let's go and open up Visual Studio. So let's open a project.
Now I could have created this from inside visual studio
and we want the pirate function.
So what we get to start with is just the empty,
empty project.
Let's go and add
our first function.
So we should just be able to come down here
and add a new Azure function.
So,
let's go and call this
Pirate Joke function.
So easy. Now we've got all these different options,
but today we are going to stick with a HTTP trigger.
We'll see how we go.
We may need to do a different one.
So what we're going to do is
have a look at the documentation briefly as well.
So you can see we've got the Pirate Joke Function
as the name of it,
but we don't actually have to keep that as the name
of this particular function.
What I'm going to do is change this to Get Joke.
So it's a bit easier to do,
and we can change this function to that as well.
So let me run, I'm also going to go and open up Postman.
So what this has given us, look, it's given us the URL.
So if I grab this and this takes a get or a post
let's go and see.
So we're already up and running.
We're already up and running. This is good.
So let's pop that API.
I'm going to do this as a get, first.
And it says it was triggered successfully.
'Pass the name in the query string or in the request body
for a personal response'.
So that is coming from here.
So what we can do is go and do name =, on that query string.
Then we can do name = captain Layla
Hello, captain Layla.
You see, so it's working.
That's really good. We've got the basics working.
We know our function runs and now we can start to adapt it.
If we come in here, that's it, pop it up here.
So now we've got our new HTTP client,
which is going to allow us to make some HTTP calls
and then we just can do R for a response.
So we just need to bring in the usings as well.
So we can do that by doing this one,
and then we can come and start using it.
So let's try this from inside Postman and see what we get.
Postman's also really good for testing APIs
before you use them.
We got the web page.
So we definitely need some stuff in that.
I'm sure Json would be- There it is.
I thought that can't be, let's try that then.
There we go. So that's why we needed to set that.
That we didn't want just the HTML page to come back,
we wanted the joke.
To have application Json, come back.
So we'll grab this and see
if we can just return it straight up. So little steps.
So we're going to go and get this.
And what we want to do then from our body is pull out.
I think we need to set the HTTP header there as well.
I am going to make that,
can I make that underscore? That'd be acceptable?
Just because I find it easier to read.
So we're going to grab that and go client.
So let's put this on a new line and this is probably just,
we need a using to come in.
And that content type
we're going to say is,
Application Json.
There we go.
So this is going to emulate what we did in Postman.
Let's go and say
var joke
is equal to,
and we're going to go response.
We want content, lets see, content.read as Async.
Let's try this one.
Our response.content is going to be our adjacent string.
And let's grab that var Json string
is equal to response.content.read string and sync
So let's try that.
So now we can pass Json string in that.
And what we'll get out is, lets see, var Json.
We'll just call it that for the moment
and then we need to make it an object.
So what we're going to do,
we know what this looks like, because we can go in here.
It's got an ID, joke and a status.
Can I do this?
So what we're going to do is make an object that looks like
what we're getting in. So if we go Solution Explorer,
I'm going to add a folder just called models
because it's nice practice to keep it all nice and tidy.
And we're going to add a new item
and we're going to call this a Joke model,
and that needs to be a class, okay?
I can paste special
paste Json's classes. Yay!
See, this is a Joke.
So let's go and do that and you can bring that back in here.
You can do that.
Then we can say that this is a Json and we need
to bring that in joke response. That's changed that there.
And we can change the name of that.
So we may need to go and set something up
on how the serializer reads and compares Json
and the model.
So let me go in rename. We'll see.
That might be a problem when it comes to bind.
Let's go back into here and that's going to be
a joke response, and we'll call that a joke response. Okay.
Now we bring in our models.
Okay, so we just need to await this as well,
because this is doing a sync when it comes back.
Go and see that's a string. Oh, hang on.
'Cannot convert from string to newtonsoft.json.jsonreader.
Now, interesting.
Let's go see.
It's put in Newtonsoft so let's get rid of that.
We don't want Newtonsoft and that's the problem
we want to bring in system.text.json.
And we'll come down here and fix that one in a minute.
So hopefully that will work now.
We can loose... I'm going to only do it as a get,
so let's come up here and we can do that by removing
the post here, so it will only accept a get
and we can remove that bit.
Hello. Here is a joke
and we can pass in jokeresponse.joke.
Let's do some break points then.
So we've hit here and let's just F turn over that.
It's saying it's okay. So we've got it all through.
I've got a status code.
We've got some content let's just F turn onto the next bit.
Let's have a look at as well our Json string.
That looks pretty good. There you go.
So that's all coming in as we expect.
So we're making the correct call.
Let's go and see how we set case in sensitivity.
So let's do that.
So if we pop that in and what we need to do
is pass the options in, all right?
So we know that that was working.
So let's just put that there and let's run
and try it again. We've hit this.
Let's step over. Yay! So that was it.
We could see now that that did have an effect.
We needed to set that case in sensitivity
because the Json was coming in another case
and our model had uppercase. See if we can get that,
let's get rid of some of these windows.
So we're gonna do a post and we're going to just give it
some text to translate.
So let's do a trial run
inside our Postman. Okay.
So let's go in here and go body and we'll go, Json.
So now we can go make a Json object and then
that's going to be a text.
And then we'll put this in here.
There we go. Welcome to the stream mateys.
So good. We're getting it.
Let's go and try this slide.
So we can try that and see what we get back.
It's worth a try, isn't it folks? All right.
So what I'm going to do actually is make this request
in another method outside of here.
So we can maybe use it with another function
just to translate. Doesn't need to be the joke translated,
it could just be a translator.
So I'm going to come down here and we're going to make
a private...
We'll return the string.
There might need to be a task find,
translate to pirate.
Let's do that.
That's what I wanted, wasn't it?
Let me just go and comment that out.
That's what I grabbed out. Let's grab this.
Okay, so this one now is going to be,
we definitely need to make this Async and type task
returning a string.
There we go.
And this is going to be the API we want to call.
So we want it slash part. There we go.
So that's going to be our new URL that we're going to.
I think that's going to tell it that we need Json
so we probably don't need that now. We'll see.
And then we'll get the response back.
So we'll read it just as we did here.
So we have that and the bit we need is this,
the Json strings. This is going to get the content and then
we'll bring in the Json string
and then we'll get an Expando object.
So then we go and bring that in.
And I'm actually just going to take that out for the moment,
then make this void. And we'll just put that back.
We can make this static or we can make it Async static.
I think we can do that.
Because this whole thing is static sometimes we,
if we're going to use dependency injection or something,
which we can do it in functions,
we wouldn't... we'd need a constructor
so none of this would be static.
So what we can now do,
we're just going to call our translate, just here.
Text to translate, and that's going to be our content.
Okay. So now up here,
we're going to pass in our jokeresponse.joke.
So let me just copy all of that, drop that in.
We need to await it. There we go. That's the last bit.
And what we need, this bit here.
So let's go and say HTTP content = ,
and this is going to be text to translate, goes in here.
And then we need to bring in the system.text.
And now we can pass this content into our post.
And there we go. Semi-colon we need that on the end,
and that. Right.
Now, that all looks happy.
We can lose the request header there
come here and go into this one. Synced.
And that's step on. We're all happy with.
And now this is going into your translator.
Let's go and have a look.
So let's grab this.
So let me get rid of this
private, because I only want to use it in here, struct.
pirate text.
And I'll say
that's got a prop of string,
or text. Pirate, Js- Pirate.
That's going to be a pirate text. That's going to be text.
And that is going to take in this.
Oh, okay. That needs to be public. Oh, I see.
It's outside. That's why. Public.
So let's pass in our pirate text now,
but it didn't like...
Oh no, we just haven't stepped on enough.
There we go. Whoops.
Yay! So now it's coming through it.
We're being great. So it's translated.
It has, it has. Okay.
Let's have a look at what the Expando object is.
We'll need to get into,
looks like object and then translate it,
so it's going to take a little bit of fiddling
to get in there.
Let's stop and let's go
Json result, then we go 1.value, so see? Okay.
Result string, I think
is equal to that.
And we should be able to get that back. And then if we go,
let's get rid of that
and then we're just going to see
if we can get some stuff out of this.
And var s = kvp.value
Okay. So let's step on.
We have something in here. Oh, good.
We're stepping in.
So we've got T is success an S is the second object.
So this is good. So we know that we've got
translated text and translation.
So if I come down here and do
public, struct, pirate, translation, string,
and that's translated
prop string and that's text.
And then we had translation texts
and translated translation. Okay.
So now we've got that.
Let's go.
We'll have a new translation
let's say = new pirate translation.
Let's just make that ready.
A translation is equal to, what do we have up here?
This jobby here.
s.ToString.
Let's go. kpvalue.ToString.
Let's go and put that in there instead.
S pirate translation,
There we go. So return.
Good. Okay.
So that bit's done translatit.translatit options
that we had here, and set our options.
We can pass in options there.
So I'm going to do,
just change that to key, value and update
that just sits a little bit nicer, key value.
And then down here we can come and make this capitalized
because we've told it to ignore the options there.
So that now can be translated.
Now let's go to portal.azure
and have a look see.
So we created that resource from here,
and this is what we want.
Let's open up
the Chatbot.
This is my Twitch Bot,
and if we go into
the Twitch client service,
what we could do is create a case for pirate joke.
We can have, case pirate joke,
and we're going to do, await get joke.
So we'll do that.
So private
Async task,
and this one's going to be,
get joke var client = new HTTP client.
Alrighty, what we're going to do is
we're going to grab that.
So let's go and have a look at
the Chatbot.
So if we drop that in, we're going to use client here.
And this one is now going to go to that new API.
So if we go here,
it was this
and we can drop that in
and the name is going to be your Twitch name.
So we can do like that. We need to have a dollar sign
on the front.
Looks like it's going to be a chat command that we pass in.
We need to break there as well.
e.command.
So if we pass in the e-chat command,
we can then come here
and we can say that the name
is e.display.
We need to get chat message, e.chatmessage.displayname
and then we'll get that response string back,
We'll do @client and all we need to do is
pass in the response string here
and this is settings.channel.
We can try out this,
and see what happens.
So that's going to be pirate joke, as a command.
All right, let's run this.
So we should see the new track. Let's go and see.
That's... Yeah, so that's my name. There we go.
So that's cool. We've got a response.
Step over.
(music)
Boom! It worked, and it's translated!
'Our wedding were being so beautiful,
even the cake were being intense'.
So that's it. It's fixed. It's done.
Together, we got it working. Yay!