>> Welcome back everyone to the Xamarin Show.
I'm your host, James Montemagno.
And today, I am crazy excited because George from
the Microsoft Garage Team is here to show
this ridiculously amazing app that interns has built.
>> Yes, that's 100 percent true.
>> Yes, what is this thing called?
It's called what?
>> Ink to Code in Microsoft Garage Project.
>> Okay. Well, first off,
what do you do and what is
the Microsoft Garage because we've had
no one ever from the Garage on here.
>> Wow. Okay. I got to be the first.
>> Yeah.
>> So, the Microsoft Garage is a place,
a space, a place and a group of people
who we tried to encourage new ways of doing things,
and new ways of thinking, and new ways of
experimenting for the benefit of our customers.
>> Oh, cool.
>> So, we do lots of activities for Microsoft.
We run Hackathons.
We have Makerspaces and we also have
this intern program that's based in both Cambridge,
Massachusetts and Vancouver, British Columbia.
>> Oh, cool.
>> And we take super
talented, amazing university students,
and they come in and they help us
prototype and build experiments,
and really do amazing stuff liking Ink to Code.
>> That's awesome. So, you get to like
tinker and try out and listen
to all of your developers
and build awesome ridiculous stuff.
>> Exactly.
>> That's super cool.
>> It's super fun.
>> I've walked through some of them.
I think like in one of our Buildings 27,
there's like robots and there's all sorts of crazy stuff.
>> The punching robots?
>> Yeah.
>> You can go in there.
I wouldn't recommend sparing
with a robot. That's probably not a good idea.
>> So, what do you do at the Garage,
and how did this project come about?
>> So, I mostly work with the teams that
come up with different ideas
we use to build new products.
>> Okay.
>> So, I both helped
shepherd the intern teams
as they come and like in getting started,
how did we get them started, how do we have
the idea and bring it to fruition.
>> Okay, got it.
So, I think Ink to Code,
I think we can talk about
it but I feel like we should just show it
because it kind of demos
in a way, and then talk about it.
How do you feel about that?
>> That's that's probably a better way to do it.
>> All right.
>> I tried talking about it before.
I usually missed the point.
>> So, set it up. Like, what are we looking at right now?
>> So, this is what
you see when you launch Ink to Code.
>> The UWP App?
>> It's a UWP App, available
right now in the Microsoft Store.
You can go get it for free. And when you launch the [inaudible]
you are greeted with a blank canvas.
>> Okay.
>> And I have my surface pen in
my hand I don't know if you
can you can see what I'm doing here?
>> There should be a little pip right there. Perfect.
>> Oh, look at that. So, I'm going to
pretend that I'm going to sketch out my next great app.
>> Okay.
>> And I think the one that we've been kind
of playing around with this initial
experiment is a Tip Calculator.
It's the next big thing on the App Store.
I don't know if anyone has noticed that.
>> I've never seen any or installed any.
>> No, they definitely,
none has ever existed before.
>> So, you're just drawing stuff.
>> So, I'm just going to start drawing. I'm going to draw
a phone and you can
see immediately what happened here and I'm just
going to kind of zoom out so you can see.
But it snapped in and started
thinking that I am drawing a phone app,
and you can see it just snapped into that right size.
It just recognizes what I drew.
So, I'm going to go in here and I'm going to draw
the title of my app which is Tip Calculator.
>> So, the idea here is that
we literally are just coming
in and have this idea for an app,
and you're just going to draw it.
>> I'm just going to start sketching.
>> And I've done this on like pieces of paper,
in journals, books like this,
but this is real.
>> We've been calling this a smarter napkin.
>> Smarter napkin.
>> So, many great app ideas have actually started from
that so we figured it was a cheeky way to think about it.
So, my app's going to have a logo.
>> Okay.
>> You're going to have a good logo. So, I'm going to
draw a box with a with a cross through it.
You see, I got snap in and recognizes an image.
>> Cool.
>> This shorthand that I'm using here is,
actually, we looked at designers.
We looked at user-interface designers
and we ask them to show us their notebooks.
And one of the things that our
intern teams that actually went out to do,
this they actually did a lot of user research to
figure out the right way to have these gestures work.
>> Okay, cool.
>> So, if you're not familiar with
that, it's totally fine.
First time you're actually launching
to code when you first install it.
You actually see this very handy guide over here.
It will show you the different gestures
that we support right now and also how to use
some of the advanced features of the app.
>> Oh, nice.
>> So, let me keep drawing here.
My app is going to calculate tips.
We're going to be pretty
generous so we're going to start with
a 15 percent tip,
an 18 percent tip,
and a 20 percent tip.
Now, you might start thinking
that I've now drawn these slightly out of line.
You're like, this is not super straight.
>> But size is different [inaudible] yeah.
>> Yeah, they're kind of all over the place right now.
So, we're going to bring in
another tool and since we're using Windows Ink,
we can make use of the "Smart Toolbar."
So, I'm going to switch pens here
and we have two pens over here.
We have the Regular Pen and we have the Constraint Pen.
>> Okay.
>> So, I'm going to pick up this Constraint Pen
and I'm going to draw a red line, a straight red line.
And you'll see that it
actually snapped in, made this dotted red line.
Again, this is inspired from designers.
We took designer shorthand of red lines.
>> Yeah.
>> It's actually where this one came from.
>> This reminds me very much of getting like,
this is a dieline of a cut-out,
or this is exactly what we need to follow, right?
>> Exactly.
>> Yeah.
>> And if you really want to get precise,
you can just tap on the grid and you can get
this visually handy grid up here.
>> That's cool.
>> I'm going to bring all my elements into alignment.
I'm just going to tap and hit "Snap."
And this one didn't quite go where I
wanted to go so I'm just going to move it.
So, it snaps the bottom.
>> Okay, perfect.
>> This is what we really want. There we go.
>> Nice.
>> And now, see there are much more
aligned and some of my OCD is gone so we can keep going.
>> Okay.
>> So, we can have a text field in here for the amount.
And if it doesn't
recognize what your handwriting is doing, that's fine.
You can just write on top.
>> Nice.
>> And it will re-recognize and just do that.
Really useful for people like me
who've been used to writing
in chicken scratch for so long.
>> Yeah, me, too.
>> But it's super useful for that.
So, you can move this around.
We're just going to resize this just a little
bit and I'm just going to keep going here,
just in the interest of time so we don't
spend all day and that's going to have
one little button down here.
And we're going to have that say, "Calculate."
Oops, but one day I'll be able to write.
>> Nice.
>> There we go.
>> So, you drew that box,
drew a circle and then you're like,
this is what the button should also say?
>> Yeah.
>> And we can see that the amount is very
different than the button
because it has lines through it.
>> Exactly.
>> It's like there's a graphical indication.
>> Yes. Some sort of indication to help you
understand that they're slightly different.
The really cool part though, the sketching part
is incredible and we worked really hard on it.
>> I can only imagine because in my mind,
I know one developer,
Frank, we've had him before.
He's done a lot of this like,
this is what a circle and it
snaps it and this is a square.
That's not easy to do.
So, I think there's a lot of love and
passion for just that part of it alone, right?
>> Yeah, we're actually making
really heavy use of the Windows Smarting Platform.
A lot of the Artificial Intelligence Machine Learning,
it's actually powered from Windows.
>> Oh, cool.
>> So, we're actually leveraging a lot of that
to make this magic happen.
The super cool part, though, this is my favorite,
is we call it Ink to Code, not just Ink.
>> CV Inking.
>> Right. The inking is here. You can see that.
So, I'm going to clip my pen back in,
and I'm just going to pull
my service backup into Laptop Mode.
>> Okay, cool.
>> And, I'm going to use my mouse and go up
here to export and you'll see right now,
we can export to Android XML and UAP XAML.
>> Oh, very cool.
>> So, the idea
that we had is that we really want to make
it just super fast
before you get started with your next app.
We see so many developers who,
they start building your app and they kind
of jump into the tool and start getting
UI elements arranged on
the screen correctly and it's kind of hard to
take that napkin sketch that
you drew earlier and bringing it into the apps.
We are trying to jump start that process a little bit.
>> Yeah, and while they have these designers,
you're literally then dragging and
dropping and figuring out
the constrained systems in there.
They're different between Android and Windows 10.
>> Exactly.
>> I fell in love with Android XML
because it's very much like XAML.
But it was different and there's a lot of its thing.
>> Yeah. it's a little bit different.
>> A little bit different, yeah.
>> But it's pretty cool
so you can just export it right there.
>> So, you can just export and I'll just do
both because we can, and why not?
So if you're using something like Xamarin,
which would be super useful here,
you can use both the Android XML and the
UWP XAML to make yourself a Xamarin app.
>> Yeah.
>> And you can start going right here.
>> Yeah.
>> So I'm going to show you.
Let me pick up my mouse over here.
It's going to jump in and I'm going to
pull open the UWP one.
I'm going to open that with Visual Studio Code.
You can see that the XAML code that it
generates has everything we need to actually get going.
Like, this will render
and display on the screen perfectly.
And rather than just
talk about it, I'm just going to do it.
So I'm going to pop over to my little studio over
here and I have a UWP app ready to go.
If you look at our blog post you can see examples of
how to make the Android app in Xamarin.
>> Yeah.
>> get going too so,
I'm going to try and show your different ones.
>> Yeah put that link into the blog post. Yeah.
>> Perfect. Yeah you'll
you'll see it's super, super easy to get started.
Make sure I actually copy that.
>> The whole pages just like-
>> Whole page is drag and drop.
I also could have just drag and dropped that.
>> And then it actually has the real elements, right?
Because obviously that text box,
or whatever, it's not going to show
us the squiggly version, right?
It's gonna show us
the real version and that's the goal, right?
>> Yeah, exactly. And you can see I'm just going in and
just swapping names and
the only thing you need to look for,
the to-dos that we actually
leave you which actually make it a little bit easy.
You see we put a little to-do in there so
you can you can get going.
I'm just going to replace this with
the store logo that Windows generates for you just for
>> Makes sense.
>> proof of concept. You can
replace this with anything you'd like.
And we can go ahead and run this and you'll see that
it gives us a really big jump start on
actually getting our prototype ready.
So you could start adding the rest of your code,
adding the app logic
and you have a prototype ready to go.
Ready to start testing out your next idea.
>> Yeah. I could see a designer just coming in that has
this idea for this next page and here it is, right?
Because anyone can do this.
I feel like, as a developer,
I think sometimes it's hard for me to use design tools.
But I can draw something, right?
>> Exactly! And it's kind of ready to go.
And you can see I have lots of functionality.
I mean these are full function UWP elements
and just lined up and ready to go on the screen.
Need a little bit of work
to kind of make this look presentable,
but it's much less time for me to get started with
my app than if I had to
do everything from scratch from day one.
>> Very cool. This is
nice because you just use any of your images.
And then you can- what's cool
here is that you can actually then,
yeah, see the constraint system,
you can modify stuff, so if you're like.
>> Exactly.
>> That was a phone but
now this is what it's going to look like on desktop,
right, so you can start modifying that a little bit too.
>> Right. And if you start seeing
something that you're like wow,
we're being very precise with
the height and the width of what you're getting at.
We really do our best job to
replicate where you were with the pen.
>> Yeah.
>> You can go in and you can
start modifying that and saying like,
hey like this is actually going to be
slightly more pixels or
less pixels off to the left or right.
>> But what what does the Android XML look like.
I'm just curious out of the box here.
>>Yeah, yeah.
>> Because that's what I'm all about, the UWP.
It's also super cool that yeah,
I am a cross-platform developer,
but I want the platform-specific stuff
and that's what I want. Not all of this.
>> Right. And you can see we do the same thing.
In Android one of the things that we do to make
the layout a little bit easier and to make
sure it works on different screen sizes,
we use the constraint layout.
>> Oh, yeah.
>> And so when you're building this and you're
bringing this into your Android project in Xamarin,
all you have to do is pull in the
Xamarin constraint layout package
from NuGet and you're just ready to go.
>> Yeah if anyone is not familiar,
that's kind of like the new,
new also too because I'm really used
to linear layouts and
kind of placing things and wrapping things.
But, like iOS, it has
a constraint system and kind of like grids,
that are almost like constraint systems,
Android has has done that
as an optional way of doing it too, which is cool.
But, yeah these look familiar.
I have text views,
and the constraint layout,
and all of my different controls that I
would want. Wow, that's pretty cool.
>> Yeah, and these come through, and these will render
on almost any size
display that we have running on Android.
So it makes it super convenient,
really easy get started,
and really easy to make sure that,
no matter what kind of device you're going to deploy to,
that it will look good.
>> Yeah. So who built this and how do I get it?
Like, that's always my question.
Like, now everyone just
saw it and they're like, I want to go do that.
>> Everyone's going to get it. You can go get it now.
>> Yeah.
>> It's free!
>> Yeah. That's awesome, by the way.
Yeah. So where can people
find out about this and where can they grab it from?
>> So we always recommend that people come
and visit us at microsoft.com/garage.
We have all the information
about the app, where to get it,
the link to the store,
and we have to really extra big things on here.
We'd love for you to kind of read about and
see our intern team to actually put this together.
They're super talented
>> Oh, nice.
>> and this would not be possible without them.
So make sure you go there and give them credit.
>> That's really cool.
>> The other big thing that we
really want to encourage we will do is provide feedback.
We are hosting a user voice site.
So if you have a specific feature requests, or bugs,
or ideas that you want to suggest,
we're certainly willing to hear that.
We're launching this as a Microsoft Garage project
in the spirit of trying to learn.
>> Yeah.
>> And I think what the whole team and myself,
we're trying to figure out how can we make
this a better tool to help
you jump start their next project.
>> That makes sense, yeah.
>> We're totally open to suggestions and ideas.
>> Yeah, so I'd imagine probably the
first feedback you probably get is like,
oh, where's the Xamarin Forms XAML, right?
>> Yeah!
>> That's where people can give you feedback as a team.
>> That's where they can go and find that,
and up vote that idea,
and help us prioritize that in our backlog.
>> It's important that you remember, like,
that a team of interns
came into the garage and build this.
How long did it take for them to build?
>> We got started with the initial idea back in June.
>> Okay.
>> That's when we started prototyping
and playing around with the idea.
>> Yeah. It's amazing to see
because I've always thought about something like this,
but I'm like I don't have time for that, right?
These interns come in;
they just build this amazing application,
so that's really cool.
>> Yeah it's pretty incredible. I mean,
like we said they're super talented college students and
we're thrilled actually that
many of them are coming back to rejoin us.
>> Nice.
>> They're actually coming back and hopefully
give us another hand to help us continue working on this.
>> Is there a place on the Garage website where people,
maybe that are interested in interning?
Like, can they find that on the garage website too?
>> Sure. Our garage internships,
if you're interested in joining us
>> Yeah, pitch it. I'm ready.
I get this question all the time,
by the way, and I'm like I don't know.
There's got to be a website somewhere.
>> No, absolutely. And we actually work with the rest of
our Microsoft University Recruiting Team
to get the super talented interns,
so if you're interested, please go
to microsoft.com/university.
There's a button on there, it says
"Find My School Recruiter".
>> Oh nice.
>> You can get in touch and
that's how you can get started
with your application process.
>> Awesome. Well George this is
absolutely amazing. I love it.
>> Thank you!
>> Yeah.
>> Yeah, we're pretty happy with it.
>> Yeah.
>> It's kind of fun.
>> I'll put all of the links into
the show notes below and there's some blogs on it,
some more details, how to get it into
your Xamarin Android application.
>> Yeah.
>> Thank you so much for coming on to show this off.
>>Yeah, no. This is this has
been great. I'm really happy to be here.
>> Awesome.
>> Thank you.
>> Well, thanks everyone for tuning in.
This has 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.
Get those notifications right in
your inbox each and every week.
So until next time, thanks for watching.
For more infomation >> И снова street legal - Duration: 1:37:46. 
For more infomation >> #DatoResponde 07 - PFRM3 em 2018, Mecânica quântica, Cota x Valor patrimonial em FII - Duration: 4:11. 
For more infomation >> [FREE] Rich The Kid x YBN Almighty Jay Type Beat | Drip Fashion ( Prod. by SammieSosza) - Duration: 2:37. 
For more infomation >> Crescimento da emissão de gases poluentes na atmosfera - Duration: 1:54. 
For more infomation >> Hitfilm Express 2017 RENDER ALMA (Videoyu kaydetme) | How to export hitfilm express 2017 - Duration: 5:58. 
Không có nhận xét nào:
Đăng nhận xét