>> Our next presenter, Cassie Breviu, has a really cool background
because she comes from a data analyst citizen
devs background. Today, she has moved on to becoming, I would say, traditional coder. She does a lot of work with
C-Sharp and TypeScript. Today, she's going to
walk the lines between the dev she used to be and
the dev she is today and show you an end-to-end
fusion dev project where she is going to build a
TypeScript PowerApps component, build a PowerApp and then
pull the component into it. I'm really excited to
see that because that's exactly the thing that all of us devs should be
doing in our companies, making the right components, making the right connectors, so that all of our
business analyst teams can do their good work,
understand the business, build the right front-end
things they need to do their job while we build
like the org charts, the expense tracker slider thing, all of these backend
pieces that we're good at, that are highly reusable
or non-reusable and that way all of the business owners don't
ever need to worry about it. >> Do you want to hear a
cool story of I met Cassie? >> Yeah. Tells us. >> I went to a conference called That Conference in Wisconsin Dells. I love going to the Midwest
for conferences because they are so cool. It feels like you're
with family and stuff. I gave an AI talk and sure all the dudes lined up and
were like, "Hey, Seth, I have a really good
idea about how to use Machine Learning for
doing a stock trading, I'm like, "Tell me. No has
ever said this to me." >> Did Cassie save
you from this terror? >> It wasn't her. Then other people that are like, "Aren't you worried that the
robots are going to kill us?" If you were here for
the last segment, you'll realize that it's not robots. It's basically linear algebra
and calculus. That's it. >> The robots though are here to
kill you, just letting you know. >> Well, agree to this. There's some robots
that I'm okay with. So anyway, she comes
up and she's like, I don't remember what
it was, but it was something similar to this. "So how do you adjust your learning rates when you're
doing actual machine learning? How do you know which models to use, you know feature engineering?" It's like "This is cool. Finally real questions
from a professional data scientist" and
I'm like, "Awesome. This and that and I'm like, "How long have you been
doing data science?" She's like "I had to pick it up over a couple of weeks because
of this project I was doing" and I was like "You did in three weeks what I went to
grad school for four years for?" She's like "Yeah" and
I'm like "All right. I'll write this down because we
need to hire you" and we did. >> Wow. That's cool.
I did not know that. >> Yeah, it was pretty cool. People sometimes after a talk, they come up to ask questions
because they want to like, I love people feeling important. I'm going to make you feel
important if you talk to me because everyone's
important in my opinion. But there's other people
that come up and you're like "This is like a legit. They have actual questions." Then there's the dude bros that like statement ask a question to
show they know a lot of stuff. She came up and she was
like I have this and this. I'm like these aren't
actually "Holy cow. You got great questions.
So what's your background? Where do you go to school on?"
"I picked it up over a couple of weeks" and I'm like amazing. So that's my story of
Cassie, who's fantastic. >> That is fantastic.
Speaking of Cassie. >> How am I supposed to live
up to that introduction. >> I know, you've got to, and it is the truth. I remember still. Was it two years ago? >> Yeah, I think it
was two years ago now. >> Look at that and Cassie has
a guitar in her background too. This is like the theme of the
conference that I didn't know about, where everyone has guitars
hanging in their room. >> I was going to bring mine and do some song-ing, is that
what it's called? Song-ing. But I feel like we want people to continue watching
and also LaBrina pointed out, Taco bot would never hurt anyone, and I am a 1000 percent in
agreement with you LaBrina, any Taco bot, I would be a fan of. >> All right. Now we're going to let Cassie have her moment and Seth and I will shut up for the next
30 minutes. Thanks, Cassie. >> So welcome. I don't need to
introduce myself since I've gotten such a lovely introduction from some amazing people
that I'm lucky to work with. So today, as we talked about, we're going to be looking at creating code components with the
PowerApps Component Framework. So as I talked about, my
background is in both.Net, so I started as a Fullstack on Software engineers
start getting to an AI, and I play with TypeScript to node
and pretty much like anything, I can get my hands on. Let me share my screen here. So first, let's go over the agenda of what we're
going to be covering today. So first, we're going to talk
about what are Power Apps, just to make sure
everybody's seen them. I'm sure we've talked about
it a little bit already, but want to make sure
everyone's on the same page. I want to talk about the PCF on CLI, which is the PowerApps
Component Framework, CLI. Then we are going to be
building a code component from stuff to an end and then we're
going to add it to a PowerApp. So let's talk about some of the tech that we're going
to be using today. Some of you may be
really familiar with this tech here and some
of it may be new to you. So you type what we're
going to be using PowerApps Component
Framework and that has a CLI that we're
going to be using. We're going to be using NodeJS. VS Code will be our IDE, we're going to be using
TypeScript and Windows Terminal. So if you haven't used TypeScript and maybe you come from
a C-sharp background. TypeScript is awesome
because it gives you optional static typing
to JavaScript and so it's really what made
me start to love doing front-end development
was when I could start using TypeScript versus JavaScript. So if you come from more of that C-sharp background,
I think you'll like that. Then Windows Terminal, which
is a command-line front-end. So what are PowerApps? So PowerApps is essentially they're low code or no code ways that allow you to build
business solutions. So you've probably been hearing
about these fusion developers and citizen developers versus
traditional developers and were all developers
were all building a solution coming together to
make our business work better. So I love that these definitely
empower people to build. Like they said, I came from
a data analyst background and I started building
stuff in Excel Macros, actually was how I
wrote my first code. So I also think of them as like a development or too
traditional development. I used to work at a company
and a lot of times we have different requests from the
different business lines and they'd stack up and the businesses
would be waiting for maybe a change in a
label or adding a field or maybe a full application and they have to wait till we
had a development resource. So PowerApps are a really cool
way to enable and empower PMs, VAs, to be able to
solve their problems. But sometimes when you're
using out of the box solution, you have custom needs and
you need to build something custom in order to get
it to work for you. That's where these code
components come in. So you can build a
custom code component and add that into your PowerApp to better suit and make sure you can customize the application
that you're going to build. So let's take a quick look at PowerApps if you have
not seen them before. Here's the Home page where
you go to build a Power App. You have the different data
connectors that you can use here. You can select an app to create it. Then if we click "Create"
on the left-hand side here, we can see some different
templates that are available. The cool thing about starting out is having a template and
reverse engineering things. You could start with
one of those templates, start seeing how it's built. But I'm just going to
go ahead and create a basic app here or a blank app. We'll leave the template as a tablet. Then this is going to
go and it's going to create my development environment, and we can see how we would start
building out an application. Here's my blank environment. If I go to Insert at the top, you can see the different ways
that I can insert a component. We're going to be using that custom. Then also on the left nav, we have ways to insert
components as well. Let's talk a little bit more about
the code component framework. Again, as you're saying,
it allows you to create these reusable components
customized to your needs. The cool thing about
them is it's going to be using things that
you're familiar with. If you're already a web developer, you can use JavaScript or TypeScript. If you're using React or Angular, you can use those as well. You can also share what you create. So we have this PCF gallery. When you're using React, is
that a lot of times you have different components that you can go get from the community and
add them in your application. Well, we have PCF
gallery and you can do that with code components as well. That I think is a
really awesome feature. If you do end up creating one, make sure you share it with
the community as well. The code component has
three main elements. We have our manifest, and
this is where we're going to describe the metadata
for our component. We have our implementation that's
going to be in our indexts, that's where all of our
logic is going to go. Then there's a lifecycle in
order to be able to interact with the Power Apps
component framework. We have some methods
that need to be created. There'll be created for us in
our project through the CLI. Then there's different resources. We have our CSS, if we want to add our
business, our custom CSS. So it goes in line with our style
guide or with your style guide. The code, the images,
all that good stuff. Here are the methods that
are created for you, pretty standard when you're thinking
about building applications. I like to point them out
even though like I said, it gets created for you. But just so you're
aware of that and then how that interacts with
the component lifecycle. Here we have a nice diagram
where you can see how the init starts and how that's
interacting with the host, and how that's going
to be updating view, which allows you to build this component and then plug
it right into your Power App. Let's build a code component. We're going to be building
this slider component, which is a pretty simple component, but we really want to highlight
the different ways or the process of creating
the component. If we go back to our
Power Apps option, and then we're going to
open the Windows Terminal. I'm going to open up a
terminal that I've already created with the directory
that I want to be in, and I'm going to make
this a little bit bigger. This is the Windows Terminal
that I'm using here. I'm going to make the directory
for the linear components. Then I'm going to go
to that directory. The next thing I want
to do is the PAC helps. So PAC is how we access the
CLI or the CLI activation, and then we're going to do dash help. So one thing that when people
are starting to use CLIs, sometimes it can be scary if
you're not someone that uses CLI. For someone that is, you're
like, "Yeah, I know." But if you're new to it, help will actually tell you
what you can do next. We can see that we have the PCF
Power Apps component framework, and we can see that we have solution. Those are two of the ones that
we're going to want to be using. But it's one of those
things that I think helps. You don't have to
memorize every command. Obviously when you use them a lot, you do start remembering them. I'm going to do PAC, PCF, and then I'm going to do help again. It's going to do it with
this one, so you can see how you can step through each step. Again, you can see I want to init. So I want to initialize
the directory for my app. I'll do PAC, PCF init. Then I'm going to just
paste in the namespace, the name and the
template, which is field. When I hit "Enter," that's going
to initialize my project for me, and then I'm going to do NPM install. If you're not familiar
with node development, NPM is the package manager for node. When I do NPM install, it's going to look
at my package.json, and it's going to go and it's
going to grab all of the packages that I need to run my project
and install them for me. So it's really cool. NPM is again the CLI for node. If you haven't used it much, it's one of those things that
when you start using it, you start to like it
more and more, I think. So we got our packages installed. Now we're going to go to code dot, and this is going to open
up our VS code instance, and show us the project
that we just created. Cool. If we look over to the left, I'll click through these
quick and show you the different files
that were created. We have RPC config,
which is our directory, the package.json that I was
telling you about, our project. Then if we go up to the folder, we can see our main logic
for our application. If I go to the manifest here, this is where we are going to describe that metadata that
we were talking about. We have our control,
which has our namespace, our constructor, we can
scroll over a little bit. [inaudible] ignore my update.
That needs to be done. Then you have the display, and then we have the property here. If we scroll down, we can
take a look at the resources. You can see we have
the code resource, which is going to the index.ts, where we're going to write out
all of our logic, our CSS. But what I'm going to do
is actually just paste in what I want it to look
like for our project. I will make this a little bit easier so you
can see what changed here. So we have our display
key that changed. We have our control
type and our name. Then you'll also notice underneath
that we have this type group. We want to define the different
types for our property. In there, we have created a group. So we have multiple types available. You can have a single type. There's
other types than just this. But then when we define
our property metadata, you can see that we assign
the type group to it. We can assign if it's required, and so all that information that
our component is going to need. Then in resources, you see
we have added this CSS, but that does not exist yet. So we need to go over
here and add it. I will click "Add Folder,"
I'll create the CSS folder, and then I will create
the CSS file here. Again, I'm just going
to copy and paste the CSS in here for this component. It's super basic CSS. You could, again, make
it whatever you need. Let's go back to index.ts and take
a look at our main logic here. Actually, let me wrap the text here so it's a bit
easier to see. There we go. We can see the functions, we have our init function here. We're taking in the context
for the component framework. We have the update view, the get outputs, and the destroys. All those methods
that we talked about, they're created for us along with some lovely comments for helping. But I'm just going to copy
and paste in our logic, again, here to keep things moving. Ignore those red squigglies. I know as developers
that stresses us out. But when we do an NPM run
build, those will go away. Let's take a look at
what we've created here. We have our value, we're adding our HTML elements, and I'm able to add the type
since we're using type strips. Then call in and telling it's
a div or an input or a label. Then if you keep going down here, you can see that we're
going to then create that, add it to the documents. Then we're going to be adding
the different attributes. So we have our input,
which will be our slider, and then our label,
which shows the number. You can see all the normal class
ID attributes that we have, your normal HTML attributes. I'm just adding them
here in our init. Then you also have a
terminal in VS codes. If you haven't used VS code before, we have this integrated
terminal that we can use and we can just
do an NPM run build. That's going to create my output. If you remember that outfile, if you look on the right, we now have an out, and that's
going to have my bundlejs with all my logic and everything
that I need to run this. You can see now the main logic, we added this refresh data. That's a new one when
we pasted it in, but you can see how simple it can be to create a component
and add your custom logic. If we look over here
in the out directory, like I said, we have our bundle.js. Yeah, not scary. Now we're going to do
npm-start and we're going to start this project. We have a test environment
that allows us to run it locally and test it out and see
if it looks the way that we want. We can make sure that the value is being passed to the
framework as we want to see. It gives us a really cool
way to just do that without having to import it or
anything, and test it there. So there's our slider. We can see the value for the data
output over there. We can see the height. We can see the different
types that we added. It all looks pretty good to me. So now that we have
created our component, we're going to create a
directory for our solution. We're going to go to
that directory location, and then we are going to use the PAC component or
CLI solution init. I'm not going to go through
the help each step here. You could do that if you needed to, but I'm just going to go ahead
and type out what we want. So we want publisher name, and that can be whatever you want
to have your publisher name be. I'll just do MS Learn, and then we'll have
our publisher prefix, and I need to add a dash there. Then I'll just do MSL, and
then I'll hit "Enter." Now, this is going to
create my solution project that I'll need to edit. So we can see our directory, we can see everything was created. Awesome. Now we want to add a reference to the component
that we just created. We'll do add-reference --path, and then we will grab
our path from here, copy that and paste it over here. Now we want to run an MSBuild, and so this is going
to build our solution. I've configured my terminal in order to be able to use
that command within it. You'd have to add it to your path
variables in order to do this. But if you're using Visual Studio, you could use that terminal,
I'm pretty sure that one is already pre-configured for you. We can take a look now.
If we type explorer. , that will open up our current
directory in our location. If I go to the "Bin" and "Debug", I can see that I have
my solutions.zip, which is what we want. So I'm going to run another build here for the release configuration. You can have different
configurations in that manifest. If I go back to "Bin"
and click on "Release", you'll see nothing because
it's still building. Now we can see that we
have our zip created. If we go back to PowerApps, we got to do a couple of things. Actually, let me click on
"Solutions" here quick, and then let's click on "Settings". Then I'm going to go to the
"PowerApps Admin Center". Here I want to enable using the PowerApps component
framework for my application. I can go to my environment, or from my environment,
I should have said, click "Settings", and then in
Settings, we'll go to "Products". We'll click on "Features", and then, in here we can turn on the PowerApp component
framework and hit "Save". Now we can import our component. So if I go to "Import", then I can import that
zip that we just created. I'm going to choose the file
and search for that directory. So you can see how you can
quickly go from a CLI, you're editing your project, you're updating your logic, you can test it directly in it, and then you are creating
this zip solution, and then you're able to add
that in to your solution. Now, anybody that goes and
creates a PowerApp can use this component that you created. I think it's pretty neat
and I love that it also can be maybe the first time that you start playing
with TypeScript. Maybe you've been playing with PowerApps and you've
been thinking about doing some work on traditional
development and code. This would be a really cool way
to start learning how to do that and learn more about
the web development. Let me refresh here, and then I'm going to
go to "Solutions", and we can see our custom
control that we just created. If we go back to our PowerApp, we'll go to "Insert", and we'll go to "Custom", and then we want to import that
component that we created. We'll go to the code components, we'll select it, and then
we'll click "Import". Now, when we go over to the
left here, we can click "Add". We'll see the built-in components, but we scroll down and now
we see code components, and we can drag and drop
that onto the canvas. Let's move this over a little bit, and I think we need to maybe zoom in, make that a little easier to see. So there we can see the
slider that we created. A cool thing with PowerApps too if you want to try
it without hitting Play, if you hold down Alt you can
actually try your control. Normally, when you've
go to test it, you hit the Play button in the
upper right-hand corner. But if you just want to
test the control quick, you can hold down Alt. Let's update our value in the slider value and see that
that updates on our slider. Cool. So everything looks like
it's working the way that we want. We can see the different
properties over here as well. One of the things that I
think about these tasks is that they really show
you what's possible, get you excited, get you inspired
to go learn and do more. I want to show you some of
the different resources that are available to you after
this to continue your journey. Let me flip over to
the first resource. This is the GitHub repository. Here we have the full code
for the linear component that we just built out if
you want to go check it out. I also have some different resource
links available to you here. You can see we have the PCF Gallery, the PowerApps home, all
those kind of things. Then if we go over to Learn, so if you're not familiar with Learn, it's Microsoft's learning platform. We have these different
modules, they're really cool. Thirty-five to, maybe, an hour-and-a-half time
frame to go through one. This one in particular is a really
good one to start out with. It's actually the one
I started out with as well when I started
building components. If you go here, it'll
give you a nice overview. If you click into the "Build
the PowerApps Component", the other thing that's
cool is it talks about all the different
prereqs that you need, and it shows you how to install
those different things. If you haven't done development
yet and you're going to start, you can go in here and see how you would configure your environment. Another cool thing for beginners is that it'll also show you how
to test and debug your code, a very important part because we all know it doesn't work
the first time you run it. But if you scroll down in here, it'll actually show you some basic JavaScript and TypeScript
debugging tools that you'll have right
within your browser. So definitely beginner friendly. Even if you're already a web
developer and traditional developer, there's also some cool
advanced ones in here as well. You can go to the advanced features, and in here it'll show you
how to add and use React. So if you're a React shop and you want to see how you can use React in your PowerApps components, there's an intro to that as well. So this is a really good place to
start and continue your journey. As they talked about, there's
going to be an AMA after this. So come talk to me,
come ask questions. I'm happy to answer any
types of questions. I get a lot of questions about, how do I get started
with [inaudible]? How did you start doing
different things? I'm happy to answer those. As well as maybe you have done some PowerApps component
framework stuff and you're having
issues or questions, happy to answer those as well. Here is the PCF Gallery
that I was talking about that shows some of the
different components that have already been created. I love this one that has
the reactions so you can add different reactions
into your PowerApp. There's some really cool things in
here that you can go and check, and there's lots of fun, cool stuff. Then another place that's
good to look at is there's all these sample
components as well. If you have an idea
of something that you want and you're not
really sure how to do it, check out these different sample
custom components in our docs. Thank you so much for
joining me today. I hope you're excited to start building with the PowerApps
component framework. If you come from that traditional
developer background, I hope you're excited to start learning and doing some
of these things that empower the other types of
developers to create that cool fusion development
team. Thank you.
