>> Welcome back everyone to the Xamarin Show.
I'm your host James Montemagno.
And today, my very good friend
Brandon is returning to talk about?
>> That's right James. Today we're talking
about Xamarin and Blob storage.
>> Yeah. See how I set that up?
I didn't even know what we were talking
about. We're talking about Blob storage.
Now last time you came on, we talked about using
Cosmos DB for
a really scalable data solution for mobile applications.
Now that's really kind of structured data.
But Blob storage to me is like unstructured data.
That kind of how you would put it together?.
>> Totally. Yeah. The way I like to think about it is,
imagine just a folder on
your desktop filled with a bunch of photos.
Those photos you wouldn't
necessarily want to jam into a database,
because they're totally different sizes.
Who knows? So let's put them in a folder.
And in this case, Blob storage is
that folder in the Cloud.
>> Got it. And I'm imagining then,
the unique part is that,
I can then access that from my mobile device or?
>> Anywhere. Oh yeah.
>> What does it give me?
If I upload a Blob let's say I'm assuming,
it could be a photo like you said,
or a text file, or something like.
What does it give me? Is it just
magically up there and then how do I get it?
>> Yeah. That's a good question.
So actually I'll tell you what,
Let's take a look at this sample right here.
So again, very simple app.
It's just got a couple of
photos that we've been taking throughout the day.
>> Lots of James photos I see you.
>> Yeah. James one, two, and three.
>> That's good. I like that.
>> So, yeah. We can tap on any of
these photos. There's a good looking guy right there.
>> James-ception. I saw that.
>> That's right. So, tell you what.
Let's take a photo for the Xamarin Show today.
>> Well monkey maybe.
>> We'll do it live.
>> Xamarin Show. All right.
Let's get the monkey in here. Cool.
>> So, when we click "Save" what's going
on in the background is,
it's uploading to Blob storage.
It's putting that photo
in that folder in the Cloud, right?
>> Yeah.
>> And I'm also taking a step further.
I'm saving all the metadata from the photo
actually in a structured SQL database.
>> Okay. So there's kind of a comedy text.
I'm so used to structured data where it's just,
I have a list of monkeys, right?
And this monkey is monkey one,
monkey two, It's a baboon.
It's a capuchin, it's a tamarin.
You could just name monkeys all day.
So, when I upload it to Blob storage,
why do I need a structured part?
What is that keeping then?
>> Yeah that's a good question. So, all
that metadata from the photo.
So in this case, I'm including the title.
When we have anything in Blob storage,
we have a URL associated with it.
So I'm keeping that URL on the table.
>> Okay. So once I upload it,
Azure assigns a URL?
>> That's right.
>> So once that in the URL,
is that how you're displaying these photos?
>> Yeah exactly.
>> Got it.
>> So when this app loads,
it's syncing its local database with
that remote database that has the metadata,
and it's just assigning the Image Source to that URL.
>> Got it. That makes sense. Cool.
>> Couldn't be easier.
So, once we have it up there,
where's it at? Can I see it? Like what happens?
>> Yeah. Let's check it out.
>> How did you set this up?
>> So I actually have the Azure Portal up here.
And what we're looking at here
is our Blob storage. This was.
>> What's a container? What is this container?
Blob Service Container?
>> Good question. So containers basically are folder.
>> Okay. I got it.
>> So this one,
I have a container called, Photos.
I could have another container called,
Word Documents, PDFs, whatever.
It just kind of a way to keep organized,
like we would on our computers desktop.
And so yeah, if I click "Refresh" here,
we should see Xamarin Show pop up. There it is.
>> Got it.
>> And along with that,
this other tab, this is
our SQL database with our metadata.
>> Okay.
>> And so if I run this query again,
we'll see Xamarin Show right there with the URL.
>> Got it. So that container
is like a folder on my desktop,
I have all of my files in it.
Is it all human readable, writable?
What's the authentication model for that then?
>> Yeah. You can choose how you want to do it.
So, we can have authentication at the container level.
We can have it at the Blob level,
so I could have only certain users see certain images.
>> Got it.
>> Or I could organize my users in containers,
or folders and have a James's photo container.
>> Got it.
>> And then you can access all of your photos.
>> So only James can put it up there? That makes sense.
>> Yeah.
>> Now, did you upload from
the mobile device directly
into this container? How did that work?
>> Good question. So, you could.
>> Okay.
>> And there's actually an SDK that Blob storage offers.
So we can add that new Get-Package to our app.
But what I did here since
we're two steps and we don't want to miss both of them.
>> Yeah.
>> Because I'm pushing that photo to Blob storage,
but I'm also adding that metadata to our database.
>> Yes.
I see.
So in my situation,
if I was to do it directly to the APIs,
you're saying I would upload the Blob,
I'd wait for that to return,
but then I would have to then
insert it into my Azure Database
and hope that all that is successful?
But You're not doing that?
>> Correct. Because my concern is always with mobile.
We don't know what the connection is.
So if I'm driving through a tunnel,
maybe the photo gets uploaded to Blob storage.
>> Yeah.
>> But then, I'm in a tunnel.
I can't connect and
the metadata never goes to the database.
And so now we've kind of had this orphaned photo
that is in the Cloud,
but I have none of the associated metadata.
>> Okay.
>> So, what we're doing
is we're actually uploading it to an Azure Function.
>> Our good old Azure Function friends,
yes so all of them.
>> That's right. Yeah. So in the Function,
I send the photo from the app to the Function.
Function is actually what adds it to Blob storage.
>> Got it.
>> If that's successful, it will add it
to our metadata database.
>> Yeah.
>> And then when that's successful,
it lets the mobile device know.
>> Cool.
>> So if we miss a step somewhere along the way,
no corruption, no worries.
>> Yeah. And in that instance,
then as long as the mobile app
then only cares that the Blob got up there,
it doesn't actually care that it finished or not,
because it will go query the database later.
So if I'm driving along,
I get the photo up there,
and then the minute I'm in airplane mode,
the Azure Function is going to take care of the rest?
>> Yup. It's all happened in the Cloud.
>> Are you able to take a look at that code?
>> Sure. Yeah. Let's pull that Function Code.
So, in the solution here,
we've got our, let's shrink this a little bit.
>> Back end-.
>> There we go.
>> Okay, I got it.
>> See, we've got the code for a mobile app,
the code for our back end and
then some shared code
that I put in this common folder here.
>> Okay.
>> So, in our case, we're talking functions,
and I've got two.
So, we have a GetPhotosFunction.
Again, that was just kind of a
simple way of making an API.
>> Got it.
>> And the PostBlobFunction.
This is where we are posting that photo.
>> As it looks pretty straightforward to me,
it looks really simplistic.
You taken a photo,
I assume like a byte array
or stream or something like that.
>> Yep. Exactly.
>> And this is a few lines of code.
Just to insert into a database,
get some information,
the BlobStorageService, how interesting, okay.
I'm trying to understand,
and put my mind in the Dell developer who wrote this.
So guess I, imageBlob, got it.
Photo, got it. Insert it.
Walk me through it in real talk.
>> Totally. So, just like he said,
this photo blob model,
if we check that guy out, it's a byte array.
>> Yep.
>> Just like we expect,
and so we have to do serialize that.
So, we get our byte array.
And then, I have this class
here called my "BlobStorageService".
>> Okay.
>> And just like we talked about a minute ago,
we're using the Azure storage, SDK.
>> But in the function?
>> In the function.
>> Got it, okay.
>> That's right. And so it makes it super easy.
So, this save photo method.
All I have to do is pass in the title of that photo,
and I say, "UploadFromByteArrayAsync".
>> Very cool. Very simple.
>> And that's it.
>> Super simple.
>> Yep.
>> Yeah.
>> And so, the next step
in the function is once that's done,
add all that metadata to our database.
>> The Azure database?
>> The Azure database.
>> Got it. Okay.
>> And then we're good to go. And then says.
"Hey, I'm all done". It lets
the phone know, save completed.
>> Now what is the data structure
of the photo that's being returned?
Because you said there, it's more than byte array, right?
It's not even the byte array. Correct?
>> That's a good question.
So, we have two models here,
once are PhotoBlobModel, which we just looked at.
That's just a byte array, and then,
the PhotoModel looks a little
crazy because I'm doing some stuff in some databases,
but at the heart of it,
it's just this URL in this title.
>> Okay, got it.
>> So, because it's in SQL,
we got to know the updated app timestamp
that is deleted all of the stuff we know and enough.
>> Got it.
>> But yeah. Just your URL and Title.
>> No, that's easy-peasy then.
>> Totally.
>> Cool, nice.
>> Yep. So, when it's all done,
I just assign that URL to
the image source in
this Xamarin Forms app. And we're good to go.
>> And you're good to go. That's it. So, now,
what does it look like from the mobile app side of it?
This is the functions side,
we're inside of a Visual Studio for Mac,
you deployed that app there,
how is the mobile app talking to this?
>> Yeah. Good question.
So, this PostBlobFunction, let's see.
So, add photo, and right here.
So, I have an API Service.
>> Okay.
>> And I say, "PostPhotoBlob",
so let's check that out.
And all this is doing is sending in,
this is the URL for our function.
>> Yep.
>> It's passing in the Title,
so we can save that metadata.
I've got a function key,
and the functions just handle the rest.
and so once it's done,
it sends back that response.
>> Okay. Got it.
>> So, it lets me know, is everything
good? Is everything okay?
And I even include in the response the updated metadata?
>> Oh, got it. Yeah.
>> Yeah. So, when it comes back and says it's okay,
I also save that new metadata to the local database.
>> So, you don't have to go immediately
pull down the data edge just there.
Because it is literally waiting for its return.
You'll know if everything was successful or not,
or you don't even have to,
you could probably do something like, fire it off,
say you're uploading in the back like SnapChats,
you fire, you set, you fire and forget.
>> Yep.
>> But you have
the photo there, and you know it's queued up.
>> Yeah. I just save the step.
Yeah we can fire and forget,
but then we need the user to do a pulled refresh.
>> Yeah.
>> Sometimes they're going to get confused and wonder,
"Hey, where's that photo I just took?"
So, if we can we can save it locally first,
and have it there waiting for that.
>> And this seems also like
a nice approach because for me,
when I talk about databases themselves,
and we've talked about Cosmos DB, and we talked about
SQL Server, and things like that.
The nice thing, that you're talking to
Cosmos DB is you're kind of
talking to this core layer on top of it, right?
>> Right.
>> Well, a lot of people who are like,
"Oh I have a SQL database,
and I need to connect to the database."
Like from the mobile app,
you don't really want to connect to the Blob Storage
because it almost seems like a security flaw, right?
Where this is built on top of Azure functions,
which is on app service,
so you can actually get all that security
up to you to put in place.
>> Exactly.
>> That's cool. That's cool because that's
the number one question I always get is "Hey James,
you've seen structured data
a thousand times, what about photos"?
My app needs photos.
>> All apps.
>> So, basically I want to choose some photos just to
sometimes put in there.
>> That's right.
One of the big problems with photos are so big.
And so sure we can add
these photos in and then upload it to the store,
but maybe our app becomes hundred bags, 100, 200.
Nobody wants to download an app that big,
so we can pull them from
the cloud after the download has happened,
or in this case, have that user to upload photos too.
So, make a dynamic, make it interactive.
>> So, you just using standard HTTP request basically,
then to set it up there,
and then you post it.
>> Yeah.
>> HTTP client, post it to the cloud.
>> Nice. So, that way is fully cross platform.
So, is going to work on your iOS
device, Android device, everywhere.
>> You got it.
>> Any probably-, any.NET.
>> Any.NET.
>> That device.
>> Right.
>> Very cool.
Anything else you want to dive through on
a actual storage stuff?
>> I think we hit on everything.
>> I love it. I love it. It's a really
straight into the point because again, like I said,
I guess the number one question I get sometimes which is
I get the structured part, I don't get the blob part.
>> Right.
>> So, and all that is of an Azure,
I'm assuming is probably really cheap. Is it cheap?
>> Oh yeah. We've using serverless functions.
We're uising Blob's storage, couldn't be cheaper.
>> Awesome. Cool. How did you create a blob before we go?
Just so everyone kind of knows, you just go and is like
a blob thing in Azure, how does is it work?
>> I would create new blob storage.
>> Yeah.
>> So, what we can come in here I've got
my "Blob's" here. and so-.
>> Got it. So, you were inside of this blob thing,
that's the "Browse" button.
Yeah. When I hit "New
resources", how do you add a new blob.
Is it just a blob?
In a world where James thinks it's a blob.
Could it be blob storage account.
Let's give it a second a pop up,
there it is, storage account.
>> Yep.
>> Got it.
>> Didn't want to give away the big reveal.
>> Got it.
>> Yeah. That's a good point because in Azure,
yes there's blob storage
that's what we're talking about today,
but there's also table storage you can
have queues that help.
Those are really helpful functions.
Maybe we will do another episode on that.
>> Yeah.
>> But yeah, they all fall under
the storage account on Azure.
>> Okay, got it. Perfect. So, head over there,
we'll put links in
the show notes below not only to the sample,
which is super awesome because
it's nice and straight and to the point,
but also how to get your own storage account in Azure.
Well Brandon, thank you so much for
coming on and crushing some code.
>> Thanks James.
>> Yeah. Absolutely. So, until next time,
there's been another episode of The Xamarin Show.
Don't forget to subscribe it's up over there,
down over there, ding that bell.
You know what to do.
That's right just point all the location,
he knows where it's at.
That way you get the latest Xamarin
shows right in your inbox, and in your feeds.
Until next time. I'm James Montemagno,
and thanks for watching.