NFC is Magic | Xamarin Developer Summit

NFC is Magic | Xamarin Developer Summit

>>All right. So this
presentation comes with toys. Now, you don’t get to take them home. I do have something
that you can take home. After the presentation, I have
the best stickers in the house. These are NFC stickers. You can stick it on anything. But why they’re so cool? Because they’re blank, is
they’re programmable stickers. In a Dev Conference, I
think that’s just the best, but that’s just me. So if you want to come
by after the talk or anytime during the conference,
you can run into me. I will have some of
these. You can have one. I will show you today how to program them hopefully
if we get started. I’m good. All right. So if you didn’t know, and
I hope you already know, we’re at the Xamarin
Developer Summit. We’re in Houston. So if you
didn’t know that, now you do. If you want to tweet about
anything involving the conference, make sure you use the XamDevSummit. Make sure all your friends
know what they missed out on, because this is
an amazing conference. So my talk is going
to be NFC is Magic. You can blame my boss for
this idea of the theme. I had the Magic of NFC, and he’s like, “Why
don’t you put a little My Little Pony Twist on it.” I’m like, “Okay.” So instead of Friendship is Magic, we have NFC is Magic. My name is Sean Sparkman. If you’re not familiar with me, my Twitter handle is
going to be everywhere. So tweet at me if you have any questions afterwards,
or you can e-mail me. I work in a neat little company
called Infinity Interactive. I’m a Team Lead and
Senior Developer there. I’m also a Microsoft MVP. I don’t know how that
transitioned by itself, but it must be some magic. So these are the amazing sponsors I put on this amazing conference. Wasn’t for the sponsors,
we wouldn’t be here. So make sure you visit
their booths and say hello or lounges. I
guess they’re lounges. If you haven’t seen
the agenda yet, check it out. There’s amazing app out there. If you’re having
any problems with it, make sure you check for an update. There was a slight issue. It’s a pretty cool app. So once upon a time, I was a young kid, and I liked sci-fi and fantasy
and all those lovely things. One of the things I
loved is holograms. The whole appeal to
holograms to me was bringing the digital world into reality. NFC to me is a way of doing that. So let’s talk about what is NFC. So if you didn’t know,
which by the show of hands earlier you probably do, and this is just a repeat, Near Field Communication
is what NFC stands for. It’s based on the RFID standard. Is anybody here have a passport? So you probably have an RFID, and that makes
scanning those a lot easier. So NFC is also a starting point for a lot of other technologies
you may not be aware of Android Beam,
Bluetooth Pairing, S-Beam. There’s even some wireless
access points that you can just tap your phone to when
you connect to the Wi-Fi. So what is an NFC chip looks like? So this is a big antenna
wrapped around the little writable memory,
and it’s really small. I’ve seen some that are just
like the size of my pinky nail. If you can’t see this,
they’re super thin. So I can fit this on
a business card or on a badge. There’s been some conferences, that instead of QR codes, they have NFC tags, which is really cool I think. There’s a lot of different
stuff you can do with it. These are some of the types
and sizes that are out there. This is a bit old. It is somewhat limited on how
much space you can have on there. It’s not like SD cards where you can put a terabyte or whatever
they’re up to now. Does anybody follow that? I remember when I was a kid, and we’ve got this huge hard drive. It was a whole eight megabytes. I was so excited. The thing was huge. But yeah, there’s not
much space on here. It is a good leaping point
for other technologies. I’ll show you what you can do
with it here in a little bit. So this isn’t really magical. I’m talking about bringing
the digital world in reality. This doesn’t seem very magical. Let’s talk about some of the things
that people are doing with it. Does anybody here use Apple Pay? Anybody use Google Wallet? You don’t want to admit it. I noticed the hands are kind of like. So that’s some of the
things we can do with it. One of the really exciting things that I was really excited
about was Disney Infinity. They had these little figurines, they were bringing toys
into the digital world, but it’s crossing over. You have this toy you can play with, but you can also play
with it in a game. Unfortunately, Disney went away with it because Disney
is cutting money in IT. But that’s another story if you want to talk to
me about that later. But in the base of
this is an NFC chip. It’s really just an ID, and you plug it into
their special NFC reader that you attach to your Xbox or your PS4 or your Xbox
360 or whatever system. It tells the game that
you’ve bought this toy, and you can now play it in the game. There’s some other little pieces
in there that lets you have different levels and
things like that. But to me, it’s crossing over. We’ve got AR and VR. This is like the opposite. Instead of going into
the digital world, look, bringing things out of it. They had Skylanders. I haven’t seen those
in stores lately. Amiibo is the last one that
seems to be out there. Amiibo was the Nintendo version. Does anybody here have a Nintendo
Wii, Yu, Switch, whatever. So one of the interesting things
is they had the horse. Does anybody remember the
name of the horse? What?>>Epona.>>Epona. Yeah. So you
can get the horse, but only if you had the Amiibo. You put it on the thing, and it became part of the Zelda game, which I thought was really fun. The only problem I’ve seen with it is that this is one of the Amiibos, and so is this, is that
they do use standard NFC, which means that people can clone it. So in fact, the stickers are
advertised being able to clone these. Because it’s the standard,
is not proprietary, anybody can do it with
your Android phone. So there is a little
problem with that. I haven’t really looked
into the security of it, but it makes sense if they
could have a unique ID and may register it and prevent other people from using it
or something like that. But that’s been
the limitation in that area. The other big one, and if you see down
here, is the MagicBand. Has anybody gone to
Disney World or Disneyland or whatever variety of name? I think they have them
on the cruises too. So that’s another one. So that’s pretty cool. Rainbows
in the eyes, I don’t know. Let’s talk about NFC Payment. There used to be a soft card, one that was one of the first. It was for Windows phone. Any Windows phone fans out there? One, two. Anybody else not just admitting it? I was a Windows phone fan
for a long time. I still am. I don’t have any more, but my wife
kept breaking them, anyway. So what it worked is, instead of having a magnetic barcode, you’d have your ID on the NFC chip. That’s really great
except the problem with the NFC is that somebody else could potentially scan it
and steal your ID. So Apple Pay tied it to the Touch ID. So you had to do
Touch ID for it to work. It initiated a handshake, and then it would pass the ID. That’s how it was secure. It would be the same thing of like entering that pay or
something like that. The Google Wallet has
its own equivalent of that. Does anybody find these fascinating? I think it’s so awesome
that I can just go up, and I can tap the thing,
and I’m done, and I’m paid. I don’t have to swipe it. I don’t have to stick the stupid
card in and sit there and wait. Does anybody like
sticking the card in? No. So yeah, I think NFC is a much better solution
than sticking the card in. The problem though is that there
are readers out there that can read an NFC chips
from a distance. Let’s go back to this. So there’s two types.
There’s there’s passive NFC, which is what you’re going
to see in most of these. These are all passive NFCs. The great thing about this is that I don’t have to
have a battery in here. This will last forever as long as it doesn’t corrode or rust or whatever. So I don’t have to
have this plugged in. I don’t have to have a battery
because it’s passive. The power comes from the reader. The reader sends
the power to the chip, and then it receives the signal back with whatever is
encoded on the chip. Ideally, they work in
about 20 centimeters. So it’s a very short range
on most readers. The best reception you’re going
to get is about four centimeters. So it’s going to be pretty
close to this thing, even tapping it even. So there are some limitations. So 20 centimeters isn’t very far. Four centimeters isn’t very far. If you can see here, here’s
the little reader that they have. For Disney Infinity,
you just set it on the stand, and that’s touching. The Skylanders, this
is their reader that you plugged into your device. So let’s talk a little bit
about readers. So the iPhone, everybody was really excited
when the iOS 11 came out, and we were actually able to use NFC. Before that, they had Apple Pay. They had NFC in the phones, but as a developer, we couldn’t access it. Apple limited that API
of who’s a private API. Then iOS 11 came out and then they opened up the API
so that we could read with it. So iPhone 7 and above
can read NFC chips. Most Android’s have
an NFC reader in it. I’m going to say that it’s become a lot more popular
since Google Wallet came along. People like being able to pay
with their phone and people like copying iPhone because now
all iPhones have NFC readers. Unfortunately, on the
iPhone you cannot write, but you can with Android and that’s what I’m going
to show you how to do today. The other use that I really
wanted to talk about is Disney. I had a few show of hands, who here is going to like Six Flags
or another amusement park? You all like lines?>>Yes.>>Yes. Well, one of
the big things that Disney discovered is that
waiting in line suck, and the way that they used
to do it is you had a card, a magnetic strip on the card and you swipe the card
to get into the park. That’s super slow and the magnetic strips would wear
out because they’re super cheap. Because they were only for one visit and it had multiple swipes and then they introduced
a thing called magic band. So there’s NFC in this, and you put it on
the little device and you tap it and it
shines green or red. Almost doubling how fast they can get people in or reducing the time
to scan in people by half. That really cut down on lines. They tried it out in
Disney World first and then they made it available at
other parks and the cruise line. One of the other things they did
is being able to pay with this. So Disney World has a lot of things. You could put a credit card on it, you can have a meal plan
and all this, and they added the ability to pay for your meals with it as well
which is pretty cool. The way they secured it
is they put a pin on it so you can just tap
it and you’re done, you’re good to go,
making even less lines. They put FastPass on it and then the really cool thing that they added was that when you go on a ride, has anybody gone on a ride on a roller coaster you
put your arms up in the air and they take
a picture of you. It’s always the worst
picture, isn’t it? I’ve got quite a few of those
my wife insisted on buying, and it’s just like I’m going to
hide this when you get home. Don’t need my friends seeing that. But one of the cool things
is that they put on NFC readers on the rides. So now, when you go on a ride
within like a few hours, your picture shows up
on your account from that ride and you can buy it. So I thought that was pretty cool. So let’s actually talk
about what we can do. So like I mentioned earlier, it’s built into many devices. You can read it in the background. So one of the cool things
you can do with Android is that I can program
a business card or I can program a URL or I can program basically a small file
with a mine type on here, and I can put it up against my
phone and it’ll open up the file, or the URL, or the business
card and add it to my contacts. You can actually write those with Android and read them
in the background. So if I had my phone locked, it’s going pop up with
the display and say, you want to open this URL
in your browser. Then iOS 11, Apple and their infinite wisdom decided that you needed to read the NFC using
their special dialogues. Does anybody here have
worked with designers? Yeah, they don’t like this. I can’t say that I blame them because it breaks
the look and feel of your app, it breaks the user experience. So whenever you try to read it, you’d like push a button
or activate the read like through
an event or something. It shows this little display. Then once it reads
the NFC tag, it displays this. Does anybody like
that? No. Okay, good. I don’t have to say some mean things. That’s not really
ideal, but whatever. Then iOS 12 came along and I’m like oh, this
is going to be so great. We’re going to be able to
read in the background. So those things that I was
telling you about if I have my phone locked and I have like a business card
with an NFC tag on it, I just tap the back of phone and it’s going to add
it to my contacts. Well, iOS is going to
be able to do that. They are going to give us
read in the background, but only on certain devices. I think Apple might be
a hardware company. They’re really trying to
sell their new phones. So who here has an iPhone X, S, or R? They’re pretty nice. I like mine. I recently had to break down and get one because I was
working on an iOS app and just couldn’t test it on
my Android for some reason. I don’t know why. So
let’s go to a demo. Everybody likes code.
Everybody here likes code? Anybody not like code? Good. Because you’d be
at the wrong conference. So let’s get out of this. All right. So what we’re going
to do is we’re not going to use that project
because that’s already done. So we’re going to do
“File” “New” here. Everybody here using
Visual Studio 2019 on Mac? So we’re going to start
a new Android app. Who here writes solely
iPhone apps, anybody? Good. So NFC demo. We’re just going to name it NFC demo and we’re going to
select a single view app and we’re going to go with Lollipop. There’s some Android versions that
don’t support certain NFC tags. When you start out, if you are lucky enough to
have it like a paid project, do your research on what is
supported and what’s not on NFC tags before you
buy your NFC tags. That’s one of the big things
I’ve heard is that, was it Android 4? Doesn’t support certain types and
they went and bought a bunch of NFC tags and started
writing it and they had the smaller devices and ended
up having to re-buy them all. So that didn’t work out
very well for them. So let’s create a new project. We’re doing five Lollipop, and every time I see that I had
to think of the song Lollipop. Does anybody else do that? All right. Like all good demos, I’m going to cheat
and copy and paste. Does anybody mind me not writing
code on the spot, on the fly? All right. Hello compile. Come on. There we go. So I’m connected now. Visual Studio has frozen up
on me. Okay, here we go. All right, so I have
a blank single-page project. Nothing special going on here. Can everybody read this in the back? I can zoom in if you need. Speak now. Try to guess beforehand how big it needs to be,
but you never know. So the first thing we
need to do is we need to allow our app to use NFC. We have to ask permission and we’re going to
add it in both places because I like being redundant. Use permission, I’m going to cheat. I’m not going to change.
It stays this way. All right. So I have
my handy little checkbox here. It’s hard to read. I’m sorry I don’t know
how to adjust the screen. I’m sure there’s
some fancy way to do it that James Montemagno would
tell me or something. So the only permission when
lead for this project is NFC. Just straight up NFC. If you can’t read that I’m go ahead and check that
and I’m going to save it and it should update my Android manifest so you can
actually see what I’ve added. I think that was there before. I might accidentally
checked except handover. Let’s get rid of that. Just because I like being
redundant I’m going to add it to my assembly and I didn’t
include that either. Okay. All right and I’m going to double cheat by actually looking
at my existing project. Manifest that’s not
write copy and paste. So I’m going to copy the
constant here for NFC. So if you prefer using
the assembly you can and that NFC right there is just the android.permission.nfc
if you’re wondering. It’s a little hard
to see the tool-tip. So now we have
our permissions in place, the really boring stuff let’s
actually get into the code. So the first thing that we’re
going to want is we want an NFC adapter because
Android loves adapters. We’re going to set it up as a class variable and I’m going to add the name-space android.nfc. That’s where a lot of our
NFC stuff’s going to come from and then in
my onCreate I’m going to assign it by copying and pasting some code and getting
the Default Adapter. The nice thing is as I’ve seen that
the Android devices that don’t have an NFC reader or writer instead of throwing an exception it’s just
going to return a null. Yes, I will check it. I will make sure that it’s not
null and author a message.>>[inaudible]>>So that probably isn’t way to check it but
it just returns a null. I like doing things the easy way. So we can look around here. Yes now we’re not going to do that. Okay. So it’ll return null. Yes.>>[inaudible]>>Yes.>>Is there any cross-platform
options nowadays?>>So there are
some cross-platform options. If you look, I believe
there’s one in the Xamarin, if you look for
Xamarin component plug-ins there’s an NSC plug-in there. I haven’t used it
myself because I like writing NFC tags and you
can’t do that on iOS. So yes, thank you Apple. So let’s throw these in here. These aren’t really important to NFC. They’re just to make my app work. I have some class variables. I’m going to have an in write mode. So just to a flag to let me know
that I’m trying to write to an NFC tag and I’m going to have my NFC adapter which I already
put here. So let’s delete that. Then I have my fabulous
floating action button. If that’s not a mouthful
to you then all right. One of the really neat things
that you can do with this is that you can
register a mime type on here and you can register
a mime type with your app. So whenever I, well, let’s use the actual Android phone. Whenever I tap it here,
it’s going to know to open my app and I can do something
very specific with it. I can provide it like
an ID or something like that or a little bit of data and it will open up my app if I register
that mime type with it. So let’s copy that. Anybody play with mime types a lot like reading mime
type specifications? Now. Okay. Good. So let’s
grab this bit of code. So this is overly complicated. I will show you the important bits. Okay. So I added the Android content name space
if you didn’t see that. I’m going to use an intent filter because I’m intent
on looking at tags. With this I’m going to enable write. So I’m looking to detect tags. So this is where it gets a little complicated with coding
right because I have to touch this here and if
it’s not close enough for whatever when I hit the button so there’s some user
interaction going on here. So you want to sit and wait and listen for the user to
tap the tag on here. Okay. As I mentioned earlier I’m just checking to
see if the NFC adapter is null. If it is null I’m going to tell the user that there is
no NFC reader on here. If there is one then I’m going to
start listening by an enabling the foreground dispatch
for the NFC adapter. Does anybody have any
questions on that? Feel free to ask questions
through the demo.>>Can you do this in Xamarin form?>>Can I do this in Xamarin Forms? So what I would want to
do is write an interface. Then I would write
a service for Android. Because it works
differently for iOS and Android you’d have to think about the workflow because they’re
both going to be different between iOS and Android.
Was there another question?>>[inaudible]>>I could have said NFC doesn’t
equal no and then enablers no. That’s just how I did it. Are there any other questions? So we want to be able to
actually write to the tag. There’s a ton of different things
you can write to a tag. The way that we’re
going to do these tags is a special format called NDEF. There’s a couple other ISO specs
out there that you could use. For pretty much all that I’m going
to demo here is in the NDEF. That allows us to write
a mime type or URI or make a phone call or
something like that. You’re going to see a lot of
the examples online is NDEF. What I’m doing is I’m
taking the message, I’m taking the tag that we’re
going to receive when we tap the tag to the device, I’m going to check if it’s writeable because you can make
these not writeable, please don’t do that if you’re learning how to do
this because then you have to get a new one because you
can make them read-only. Then if it is writeable, then I’m going to write the message. This is just a lot of
stuff I don’t actually need for this example but I wanted to hear if
anybody wants to look at it. One of the things
you need to check is you need to make sure that
there’s enough space on here because I can’t
write like a huge image. I can’t store my pictures
from my vacation on here. This is an SD card. Then we can just write a tag. One of the other things
that you might run into is if the tag is not formatted. We’ll need to be able
to format the tag. If you do take one of
these to play with, these are not formatted
you’re going to format them yourself and you can do
that from this code. You need AndroidNFC.Tech to do that. What we’re going to do is
we’re going to connect to the tag and we’re going to format it. It’s really just two lines of code. So this is really boring. So let’s go to the fun stuff. Does anybody remember
what time this is over? Four minutes. Okay, so
let’s see some speedcoding. By the way, this is going to
be like a mini hack later. So if you-all are
interested in learning how to do this, come talk to me. I’ve got a URL for you. I’m going to replace my fabulous floating action button, ClickEvent. What am I doing wrong
there? Do enabled writes? I do. Let’s get rid of this one. Scrolling on touchpad
is a pain in the keys. So let’s actually talk about
what we’re writing somewhere. Let’s just go to the
completed one and cheat. In school, they always
told me that cheating was bad but you’re doing a demo. Is anybody here not “Copy” and
“Paste” from Stack Overflow? Yeah. So here’s a couple options. This is the mime type I was
telling you about you can set a mime type for whatever
and put some data into it. It’s really small which
you can put onto it. You want to use TF mime type media
and that’ll create your record. There’s a ton options. Let me just click through
the IntelliSense. There’s text record, URI, there’s all kinds of records. But let’s create a URI for this demo. I’m going to run it here on my pixel because you can’t run
this on an emulator because emulators don’t
have NFC readers. If you figure out how to
do that, let me know. You probably have a way into
the matrix while you’re at it. So just in case you’re wondering, this is my visor. That’s hooked up to
my phone right here. So you can see it on the screen. Because then you just have
to trust me to see if it works. I built you earlier. One of the annoying things about
writing a URI to an NFC tag is that it automatically
sets it up to open the browser so it’s a
little hard to overwrite. There a few apps out there, I haven’t figured out how to
do it in the code to fix that, but to override a URI on
an NFC tag. There we go. There it is. So the NfcPlayground, I’m going to click this little
“Floating action” button. Well, it’s still there. So now I’m writing to the tag, I’m going to tap it on here. Successfully wrote the tag, you probably can’t see that. Now, this will open a URI
whenever I attach it to an NFC tag reader on
a phone like this. If we had better WiFi here, it’d actually load. Thank you-all. We’ll have Q&A but I think
you-all want to get to lunch. You feel free to find me after
or come up here and talk to me. Just FYI, my company is looking
to hire junior mobile developer. There’s a URL at the top
if you are interested. If you have any questions
after the talk, hit me up on Twitter or e-mail me. I’m much more responsive on Twitter. If you want an NFC tag,
I have them up here. One per customer please.

1 Comment

Leave a Reply

Your email address will not be published.