How to build a photo sharing mobile app using Xamarin and Azure Functions | Azure Makers Series


>>Hi everyone, I’m Jim Bennett.
I’m a Cloud Developer Advocate.
Today, I want to show
off an app that I’ve
been building in my spare time.
I thought it would
be fun to create
an online photo sharing app.
So, I needed to build
a mobile app for this,
and I needed some form
of back-end with
storage and some AI
capabilities up in the Cloud.
So, this picture I’ve got here,
shows the kind of architecture
I wanted to build.
I want to build a mobile app,
runs on iOS and Android,
maybe desktop and
Windows as well.
I wanted something with back-end.
I want content moderation,
to make sure that nobody’s
uploading anything
a little bit naughty.
I want some kind of
storage for those photos.
I want automatic captioning
of those photos,
so that visually-impaired users
could take advantage of
my app and I need a way to
store this information,
and download it.
So, the technology
I’m using for this,
on the mobile site,
I’m going for Xamarin.
Xamarin is the only fully
cross-platform native mobile
application framework.
So, you can write hundred
percent native apps on iOS and
Android with a hundred percent
access to all the SDKs,
you can take advantage
of extensions,
and Siri shortcuts, and
any capability that you could
do with the native platform.
But you can do it
using a.NET language,
so you can do it in
C sharp or F sharp.
Because you’re
using one language,
you can actually
share code between
the different platforms.
Meaning that you really any have
to write a small part of
your app more than once.
Even think of Xamarin forms,
which is an abstraction layer,
sits on top, allows you to
build your UI just once.
You can get up to
like 99 percent of
code reuse if you want
to using Xamarin,
still with a hundred
percent API access.
For the back-end, I’m going
to use of Azure functions,
because hey, serverless is cool.
If you haven’t seen
Azure functions,
they’re little small bits
of code that could be
triggered by rest calls or
item being put in a queue
and these functions
can be bound to
other capabilities.
I’m going to use Azure Storage,
a Blob storage for photos,
table storage metadata, and then,
I’m going to use the
Azure Cognitive Services
to do content moderation,
make sure there’s nothing naughty
and provide captions
for my photos.
So, I’m going to build
my code in C sharp.
I want to build my iOS app,
my Android app,
my Windows app, and my Azure
functions in the same technology.
But doing it in
C Sharp, I can share
code between both platforms.
But if you want, you can both as
your functions using F Sharp,
Java, JavaScript, whatever
takes your fancy.
So, here is my Azure
Function projects.
You can create these
in Visual Studio
with right-click Add,
Azure Functions project and
this is my first function here.
This allows me to upload
a photo to the Cloud.
Now, these functions are
all driven through
various forms of binding.
This is how you tell
the function runtime,
that thing that makes us work,
how to connect your function
to various services.
So, for example, I have
this HTTP trigger.
This tells the functions runtime,
that this piece of code should
listen to my HTTP request.
This request is listen for
the post that comes
into photo/name.
So, if I go to
mywebsite/photos/1234,
this will then do a post
to one, two, three, four.
So, I can build up a rest API,
pretty much just by
adding an attribute to,
I’ve request entry of
a parameter that comes
into my function.
So, this brings my photo in.
I can send it ends up
base 64 encoded string,
because that’s how I roll.
But then, I want to put
this photo into Blob storage.
I don’t need to write the code to
connect to Blob storage,
I can just use another attribute
of my code to say, “Hey,
create a connection
to the Blob storage,
the photos collection,
and the blobbing
question should have
the same name as
the request that came in.”
I want to write access on
user’s connection string in
my settings and they give me
a string that I
can then write to.
Then, with that string,
I can just write my data.
I don’t need to create
a connection to Blob storage,
this is handled for me by
the functions runtime.
So, much code, I
don’t have to write.
Now, I want to make sure
this photo is allowed,
doesn’t contain anything naughty.
So, I’ve got a function,
an internal method in here that
uses, the Content
Moderator Client.
This is one of the Azure
content services,
allows me to filter content
for racy images or adult images.
I can just call it, pass
the image and it tells
whether it’s adult or racy.
Got more functions here
for Triggers, I’ve got a
to blob trigger.
Whenever a Blob’s updated,
this calls this function.
I can then, use the Computer
Vision Client to create
a caption of the image and then,
return this caption as
an object from this function,
and that automatically gets
inserted into a table for me.
So, I don’t have to
do the hard work,
it’s all done for me
and this is fantastic.
Then, I can run this functions,
I can write it locally or
I can deploy segues up,
push it up to the Cloud
and that gives me
whole functions API running up
in the Cloud, whole rest API.
Then, once it’s up in the Cloud,
if I want to add things of
authentication, it’s really easy.
I can just turn on
authentication,
I can configure it to
use Microsoft account,
or Facebook, or Google,
add a little bit of code in
a mobile app and suddenly,
I’ve got full authentication.
You can only use my rest API,
if you’ve been authenticated.
So, this is how you can build
an iPad photo sharing app,
that runs in the Cloud,
or built using Azure
functions and everything
I’m doing in this app can be
done using the free account.
You can spin up a function’s app,
you can have some storage
and you’d follow-ups
free tiers for AI.
All this stuff available for
free. So, thank you for watching.
If you’ve enjoyed
this, please subscribe
to the Azure YouTube channel,
where it’s going to be a
whole lot more content,
showing you the cool
things that you can
build with the
Azure free account.
If you want to get in touch, I’m
on Twitter @JimBobBennett.
There’s a GitHub link
with all the code for
this, below this video.
Thank you very much.

2 Replies to “How to build a photo sharing mobile app using Xamarin and Azure Functions | Azure Makers Series”

  1. This was a great sales pitch for Xamarin + azure functions… even if it wasn't intended to be. Well done. Would love to see a how-to video on this repo.

Leave a Reply

Your email address will not be published. Required fields are marked *