I'm here Marcia, by the way.
Hi, Jane.
You are afraid to take it away if you would like to.
I will just keep walking and listening.
Ah yeah, take it away. Let me find my thing from Marjorie one
second.
So we have a first Samantha Dunlap.
Women, is it right?
Yeah, this is the right one.
That's me.
Samantha Dunlap, do we have?
Go ahead.
Just saying. Hey, I'm here. I'm ready to ready to go.
OK, sorry. Go ahead. I'll. I'm discombobulated entirely. There.
Let me.
Too many screens.
Are your friend.
Let me. Ohh yes, recording. OK cool. I'm muting.
Alright, let me get my screen shared.
OK, here we go.
My master class presentation is going to be on the phaser
framework for browser game development.
What is phaser?
It is an HTML5 game framework. HTML5 is a version of HTML that
lets you create compact.
Some powerful websites and it's the most popular version in use
today. Frameworks and programming provide ready made
components that speed up development. They provide low
level functionality which allows developers to focus on other
things. Phaser works with canvas and Webgl, which lets browsers
perform 2D and 3D rendering.
It's swaps automatically between these two, depending on the
browser, to allow better compatibility. Phaser is meant
for 2D browser games, though there are some plugins available
that support 3D development.
Coding is done in JavaScript or TypeScript, enabling a huge
amount of user interaction and easy integration with web pages.
But why browser games?
Browser based games are continuing to grow in
popularity. There are a few good reasons for that. The games are
more accessible to users. Users can access them without
downloading anything, and the games are much more lightweight,
requiring less expensive hardware than other games do.
They're supported on lots of different platforms, including
most browsers and versions, especially with phaser and on
mobile devices as well. Mobile devices continuing to be one of
the most popular gaming platforms and browser games,
including phaser games, are often made specifically for
mobile devices when they are not, they're easily ported.
So before you start making your phaser game.
There are a few things that need to be done. First, you have to
set up a local web server to mitigate security issues. Local
servers can be established in a number of ways. I've been using
Wamp server, but other options include Microsoft IIS, MMP for
OSX, HTTPS.
My master's making your phaser game.
I'm sorry I'm having a little technical issue here.
The first files visually as I'm walking phaser first of all.
No problem.
These scenes.
My message? There are a few things that need to be done.
Local servers can be established in a number of ways. I've been
using Wamp server, but other options include Microsoft IIS,
MMP for OSX, HTTP server with node JS and more.
Using a local server prevents JavaScript from loading files
from the system at will.
Browsers will tighten the security when loading from the
file system, but running a game requires access to a lot of
different files.
Without a local server, the browser is likely to prevent
loading.
An IDE is required as well to write the games code, JavaScript
or TypeScript is used with phaser, so Visual Studio code is
a good option. Sublime is recommended as well because the
phaser team used this in development. My examples will
use VS code.
The first files you should make for your phaser came and the
most important ones are index dot HTML and main dot JS.
Index dot HTML is the file the browser will load first when you
open the game.
This should contain references to the files in the game so they
can be accessed, such as the phaser library.
These scenes.
And main dot JS.
Each scene is lauded as the module.
Finally, the game itself is loaded, as it did, which is
created in Main dot JS.
It's right here.
And memes scene modules are imported so they can be used
later at. This is the list of all the scenes.
Being imported.
Then we must set this games configuration settings. You can
see the type is a phaser file.
And the parent is phaser app which is the device ID from the
index dot HTML.
The width and height of the Denver listed and the physics
engine and some attributes are set, which we'll discuss later.
The scenes were loaded next, so I use the comments that outline
here to test scenes individually as I'm walking on them, but the
next line of scenes is all of the scenes that we have in the
game so far.
This allows us to load these scenes in games.
Finally, the game itself is created as a new phaser game
using these configuration settings.
Scenes are where the action happens in the games. They will
all use the configuration settings set up in main dot JS.
Same classes extend phaser dot scene, meaning they use the
phaser framework scene class attributes.
Since I'll have 4 means sections in it, preload, create and
update.
And that is where data is passed on scene initialization. So this
is where data can be passed in between scenes. Here we have a
couple pieces of data that are being passed between scenes.
And preload we load the images, tile sheets and Sprite sheets so
that they could be used later, usually in the create function.
So here we got the task sheets, Sprite sheets and map.
The meat of the scene goes here and create here. We're gonna
load the map or the background image which is here set up the
world and the camera boundary is.
Add any objects and PC's and players. Here we got more tiles
that images layers.
And here's objects being created. Here's our our player
Sprite.
We'll set up collisions in the create area that in collators
establish animations right here, set up user controls.
And add interactivity to game objects.
She didn't see right here.
No, an update anything written here is updated frequently while
playing. Only necessary function should be placed here because
the more there is an update the more bogged down the application
will get. Things like detecting user input should be here
because the game should constantly be listening to to
user input to update according to it. So here we have the keys,
the user compress and what happens when they do so.
And I animations are also played from this section. You can see
that happening right here.
Things were supports 3 different physics engines. Arcade is the
most lightweight and easiest to work with, so there's the most
highly recommended.
Impact requires more processing power, but it offers better
support for tiles and tile maps. Matter is a complex system that
supports many different game features such as polygons and
springs.
I will be using arcade physics in my examples. Collisions with
arcade are based on tiles, not polygons, so the player will
collide with the tile and object is on instead of colliding with
the polygonal object. There are less settings to worry about, so
we will just be setting the gravity because this game
example is a top down game, we'll set the gravity to 0 so
the player doesn't fall through the floor.
Maps can be created a few ways, but in this example I use tiled
which is a popular open source program you can use for free.
Phaser can retire maps made this program as dot Jason files.
So you create a new tile map here.
And you're add the tile sheets needed.
That's right. Here. They're gonna look a lot like this.
There's different ways to obtain one. Make tile sheets.
So every when you're creating the map, you should create new
layers every time you use a different tile sheet. Or if you
want certain objects to collide or not collide with the player.
So, for example, the floors layer should be separate.
Because the players shouldn't collide with floor tiles or they
wouldn't be able to move for our top down game, it was a side
scroller than the floors would be colliding because they would
act as platforms.
So you can see I've got a number of different layers here, and
each one is gonna reference to different tile sheet because
that's how they're loaded in phaser.
What we've created the entire map here.
Using these layers and using all of these different time sheets.
But when you're finished with the map, you're gonna export it.
Because aid dot Jason file.
And you're gonna do that into your game folder so that it can
be accessed within the game.
Then you're gonna load it into the preload section.
Of your scene.
Let's see. Here we have the tile map tile JSON file you got the
name and this is the reference to the location in the game
folder. We're also going to load all the tile sheets that are
used to create this map, which are all going to be.
Right here. These shall be in the game pile as well.
In the year create section, you're going to load these tiles
that images to.
Yeah, here we are.
So that you can create the layers.
All these layers should reference directly with the
layer names in the tiled file.
So we've got like floors and occlusion. It's exactly the same
as here.
That's how it knows how to load the tile sets.
Right after that, you're going to set your collisions, so this
sets what tile or.
Yeah. What tiles?
Our collisions, we've got the walls layer, we've got
collisions all here, set collision by exclusion means.
Every single one is gonna be a collision object, the -, 1 means
all of them.
And finally, you're going to add your colliders using the physics
engine.
So this sets collision between the player and the layers.
This makes it to where the player can't walk through any of
these layers. Any of the objects within the layers, all the tiles
are gonna be collisions here.
And you'll see that the floors layer is not a collision object
because we need to be able to walk through these floor tiles.
As this is a top down game and not a side scroller.
Sprites are going to include the player and PC's and animated
game objects.
Load the Sprite sheets in preload, specifying the width
and the height of the frame.
This is done so phaser can select frames from the Sprite
sheet individually instead of requiring different files to be
loaded for each frame. This is useful with animated game
objects.
You create the sprites in the create section.
As physics objects.
So the sprites are subjected to arcade physics.
This enables collisions, animation and movement for the
Sprite the Sprite is instantiated with certain
settings, including the X position, the Y position, the
Sprite sheet or image to load from, and the frame within the
Sprite sheet to use, which would go after this if I was using
that.
Animations are also created from the Sprite sheets.
Are you create animations using?
That's right. Here. This dot Ms dot creates we specify the key
to be called on in the update section. That's right here.
Frames are taken from the Sprite sheet and the frames to be used
are defined in the start.
And the end you set the frame rates and whether it repeats or
not as well.
Created animations are called in the update section by their key.
You can see the key being used here.
The stock player dot anims dot play is going to be a animations
that are used for the player.
And then you see we've got Walter. He's a different NPC.
I'll show you in a minute. We've got the fireplace animations, so
these animations are either going to be used when something
happens.
Like.
In this case, we're using WASD keys for player movement, so
when the user presses a.
The.
The character is gonna move left, so we're gonna play the
left animation.
Other things will play constantly, like here we have
the fireplace animation. It just shows like a ********* fireplace
that plays constantly.
And the animation for the Walter MPC plays constantly as well. So
I will show that.
Here you can kind of see the fireplace *********. You can see
our character moves in different directions and her little feet
move. Those are animations and this is Walter right here. He
will eventually turn the page in his book. This just plays
constantly repeating.
To enable user input, we must create keyboard inputs in the
create section of the scene and this game example we're using
WASD as the directional keys as well as the P key to access the
pause menu. You can see those here. We have key ADW, S&P.
These are all created using the phaser framework.
Kingsman used in the update section.
Because that's where the game is constantly listening for input.
The keys that were created before being used here, you can
see that well, we've got keep PADWNS.
If the keys are pressed, the player will move through the set
velocity function.
That's that's what direction it's going and the animations
for movement are created, as are are played here. So if the key D
is pressed, the player is gonna move right and it's gonna play
at the right movement animation.
Additionally, the game listens for mouse clicks to interact
with the game objects.
To do this, existing game objects are set as interactive
and we have on pointer down. That means on the mouse click.
So when the user clicks on an object, something is going to
happen. In this case it's a scene transition, but it could
also trigger a dialogue box if the user's talking about NPC or
clicking an object that triggers text.
So you can see that here when I click on Wendy.
We get dialogue.
We can keep moving and we'll interact with an object. Here we
have an object that's a door.
That triggers a dialogue box as well because the store is
locked.
Or.
You can interact with another object. Here we've got another
door.
But this triggers a scene transition instead.
Collisions can be created between physics objects and
phasor. This can include layers and a tile map.
Game objects like doors or bookshelves or other sprites
like NPC's.
He didn't see these are collisions that are created
within the tile map. These are collisions between objects and
the game.
Cushions prevent the player from walking through objects. They
can also be used to trigger events. For example, if the
player collides with an enemy and this might trigger a battle.
So here we have a working game where the player walks into the
desk.
And into the walls.
And she can't walk through them. That collision is established.
But if we comment out some of these code like this physics add
Collider, this is a collision code. This makes the player
collide with the walls, so we'll get rid of that.
And we're gonna get rid of this collision right here.
Which makes the player collide with the desk. So let's reload
this and see what happens.
All right. And the player walks right through the desk when that
collision is deleted.
We have this issue.
The walls as well.
So we don't like that that's not ideal.
Ever bring it back? Then all the collisions work again.
In this scene, the Collider is an overlap.
And it triggers a battle scene to begin when the player
overlaps with the enemies sprites which we have named
here.
The previous scene is gonna be paused when the battle scene
begins. You can see the scene pause. That's gonna pause this
one, and it's gonna start the next scene, which is called
combat.
So let's see how that works.
So here we see that the combat scene did transition once we
overlapped with the enemy, and you can complete your attack
here. You can kind of see some of the stuff that you can do is
just a turn based combat system.
So you can attack and then there's a timer from phaser.
And after a certain amount of time, the enemy decides what to
do, which is attack your character.
And he went.
And you're back here. The enemy is gone.
No more collision.
And that's about it on phaser.
Nice job. That was awesome.
Thank you.
Ohh.
Sorry. I'm like, huh. What? Sorry.
That was really great, Samantha.
Ohh man that was amazing. I just I don't know man. I'm blown
away.
Hopefully Tristen Burt has a.
I don't know what you're going to be talking about, but I do
have you up next, Sir.
OK. Yep, I'm I'm ready. Uh.
He ready for us? OK, alright.
Probably won't be as interesting, but we'll go for
it.
Alright, let me share.
Can everybody see that?
Should be PowerPoint OK?
Yes, we can. You gotta in presentation mode. There we go,
Wrong slide.
OK.
Yep. OK Umm, so I'll be talking about roles in the cloud and
deployment with Cloud 9.
So there are many job opportunities in the world of IT
in general in the world is constantly expanding. Of course
we know about cyber security, software development and cloud
has also been constantly growing in popularity amongst it. But
the the roles mainly include architects and administrators
and there are various types as you can see from this list
system administrators, application, database
administrators, network storage security and their roles.
Are increasingly growing.
But those roles can also be applied to the cloud, since the
clouds are highly flexible platform. It also offers
opportunities to those different fields of IT. Finance even plays
a role. Considering that the cost for services that cloud
uses needs to be managed when you use a cloud service, you pay
as you go, but that needs to be watched over. So this image just
kind of shows some of those different roles as far as
business management infrastructure, which is.
Closer to building those cloud environments.
Cloud security, which is great for cloud security, for security
professionals of course, and then cloud application
infrastructure, which is great for software development and
deploying apps within or web apps within the cloud.
So today I want to play the role of a architect or a development
engineer, which is.
Pretty fun if I can get out of this. If you really quick.
There we go.
So I've already set up a cloud environment, it's called Wild
rides web app development. So with this wild rides web app
development where you are going to deploy a web app, this web
app is basically for a Unicorn Uber service. Found this through
Aaron Lima, which he graduated a couple of weeks ago. So thank
you for this Aaron.
Let's get started. So this is my cloud 9 environment.
As you can see, I can code in here the same way that I would
if I was in command prompt or some similar application through
Windows.
So I'll be copying pasting a lot of the code throughout of this.
And just kind of talking through it.
Umm, so first we'll be creating a code commit repository, which
is where I'll be able to place my app into.
Season that information we're going to call from GitHub.
And I'll Jordan does not like GitHub. Forget what the other
one was. But you don't care for it.
OK.
Now we're going to change into.
The repository directory.
We're going to go serverless, which basically means that we
don't have to manage the servers that we're using through the
cloud. We don't have to worry about that part in AWS will
manage that for us. So as you can see, the directory changed
here to serverless web Web app Workshop.
Which is? Well, we'll be working through.
This is jumpy.
Now we're going to branch code.
OK, so now we can see create a branch is called wild rides view
which is gonna be important later when we start adding roles
into.
Our web app.
See.
Going to create another directory for the code commit.
Repository.
They were going to initialize a new repository.
There we go.
So now we want to pull from the original workshop directory that
we made earlier using Git.
OK did that.
Aragon to add the repository as a.
Remote.
Right.
They're going to push the code that we just added in to our
code commit repository.
Tyler should beat the master oscillatory.
OK.
And now we're going to delete that first repository that we
created, which was AWS Serverless.
Web app workshop.
All right.
Now I can go.
Back to my AWS management console, so from here this is
where you're able to use the different services and fruitier
apps that you can use with AWS. So right now we're gonna go to.
Not going to amplify. Yep, amplify.
It's kind of Scroll down.
Going to get started with hosting our web app.
I don't have.
Not think Nolan coconut.
Coconut.
All right, so you can see while rides repository, that's the one
that we created in our Cloud 9.
Environment should be the master branch ship already.
OK, so here we can choose what the app name will be called.
See that here? The environment as well. We're going to create a
new environment. We're gonna name it prod for production or.
There we go.
And I already created a back end role using identity access
management, so I'm not going to go through that process because
that is.
Pretty, pretty long and extensive, but basically the
identity access management role allows you to set what policies
the back end role can have such as read, write and the ability
to edit files which this while ends back end role has only read
capabilities.
Ford.
And.
Already attached the policy.
See.
All right, now we're going to deploy the app.
This should take a couple of minutes for the app to deploy.
You see here it will show some time while you provision the
app.
And no dilled and then deploy.
Right where you should be in the building phase right now.
Just you more minutes before it deploys.
Come on.
Sorry guys, this is the longest part of the process.
Ohh.
Or into a problem.
I like tackling.
Crazy.
I'm hearing this again.
OK, back to repository.
I built it all that should already exist.
On it.
From here.
OK, rectory.
Around the Sudo song branch.
No, that's good.
Create a new directory.
And or Umm please.
Right.
No.
Push.
Things up to date.
OK, so I didn't this work.
I'll close that one this one out since it failed.
Yep.
Any.
And positor.
Dale environment.
Action.
Suggesting law.
Wait, unless I have to create.
And new roles since I already did this OK.
Mr Creating a new world.
So I guess we get to see amplify.
Roles are going to amplify.
Except permission.
Ah, I don't wanna get administrator anxious.
Holy.
It's not right.
There we go.
My first delete you.
Because you're bothering me.
That's weird.
Why isn't it popping up?
Umm.
Ah.
Well.
That is not working for me for some reason.
Now that deleted this role, I don't know why it's not showing
up. Where I can create it and I am maybe I have to go to
amplify.
Selected create new role.
That's how they do.
Course I get to master class and it gets buggy as usual.
Here we go. Now I can create a new role.
Amplify use case back and forment.
Cricket tags. OK, that's what I did. Forget review.
All right. So that we know what it is.
Create the role.
OK, here we go.
Hmm. Ministry access. Should I read it read only?
Under tech policies.
There we go.
We only.
OK, now I can attach it to.
OK.
Alright.
Alright, do wrong because I already did this.
Here we go. Now it's attached. OK, so I can go back.
To build console.
Refresh this list.
I will see the will rise back and roll.
Down with next.
You can click save and deploy.
And then while it takes forever to create the app.
Ohh, we can expect after it provisions builds and deploys
the app we will be able to open it, open the web app and view
the site as if it was a regular website that was built with HTML
and JavaScript.
As if you just built the site and notebook or something like
that.
Obviously because I will already have the file downloaded.
To cloud 9.
I can show you real quick.
No, no, no.
I said.
Yep. So you see the CSS files, fonts, the images that pull up
for the file, and even the index page.
It's right here. It's not much in here, but we will be going in
here eventually after the.
App deploys.
So Jordan, is this what happens when you're trying to solve
problems and soft dev?
Usually by now I shut everything down. I go to bed.
Drives me Dan nuts.
I understand that completely.
You have more patience than I do.
Is Jordan next or is?
Are we? I'm sorry. I'm on two different meetings.
I believe I'm next after Tristan.
Nope, you're fine.
Yep, Yep. Jordan is next.
You're next, I mean.
OK, but Tristen, you're still, uh.
Yeah, once this app deploys, I'll just show everybody and
Do your thing. OK. I'm sorry. I just. I thought it was. I
then I'll be done.
apologize. I thought it was over, and then I thought y'all
were waiting for me. So.
No, you're good. I wish it was over.
OK, you're good. No problem.
Yeah, we're just waiting for this app to build itself and
then deploy.
Evan makes you feel better spent like 2 1/2 hours yesterday
Of.
trying to push my code from command line into GitHub and I
was in the wrong folder and that that's the problem was.
Ohh.
Oh.
They kept pushing an empty folder. I was like, why is this
happening?
Yeah, that they say, uh, simple solutions for complex issues.
Yes, and I found the solution out by actually messing up what
I thought I was doing right.
Yep, that's how it goes for you.
Bye.
No issues, that's all I want. No issues.
When I first started doing this project, I also tried to create
a user like a folder for. If you complete a form on the website
that took forever is I was figuring out that I could not
install node JS for some reason to my Cloud 9 console. So I
spent two weeks after practice and for master class trying to
figure that issue out. So part of the reason I'm probably
running into this issue is that had to delete.
All the work that I had did just so I could clear my mind and get
prepared for master class this week.
So.
That's kind of similar to what happened. I had a lot of straw.
I was like, you know what, let me just make sure my slides are
so good and my projects are so good for master class. I open it
up and like it didn't want to open, so I had to remake it
early this morning.
Yep, yeah.
My God, I tested that out beforehand because I would not
been good.
Now I'm wishing I had just recorded everything when I did
it the first time.
The good man you're doing just fine.
Thank you.
There we go. Alright, no problems.
And I click this.
While riots, this is the web app, you can scroll through.
Has all the images that is in that Cloud 9 file.
Can even type in this field whatever you want to of course.
And just typing random stuff.
Download the App Store. I've never tried that one, but Yep.
And that's how you at least get the base part of the web app
deployed.
You can even sign into the account if you want it, which is
what would be the next part of this, but I'm not going into
that right now.
OK, back to you, Jane.
OK. And Next up is Jordan Mendes. Take it away, Sir.
Alright, alright.
Thank you, Tristan.
Let me share my screen here.
All right. Can you guys see my screen?
Yes, we can.
Alright, let me move this over because it says every time there
we go.
Alright, let's get it rolling.
So this is gonna be on interfaces and dependency
injection.
Come on. There we go. Alright, so I wanna show you guys
dependency injection and interfaces first and action.
And then excuse me here, my daughter crying. She's freaking
out right now.
It's gonna be based off dependency injection and
interfaces and action. So first I want to show you guys how
dependency injection interfaces work and then I'm gonna go ahead
and show you in the slide show. It all comes together and then
at the end.
And then at the end I'm going to.
Go ahead and make it all from scratch and kind of go from
there so you get to see it in action first. Then you get to
see it right from the beginning.
Umm of how it's actually made and kind of how it goes through
the slideshow.
So let's get started. So before I show you this, let me show you
what it looks like here. So here we have a normal website.
And just a regular welcome screen. We have five different
pages here, so this one says this is a message to send.
Message to send. This is all different pages you look up here
you can see where it says Page 3, page 2 up in the URL. So
these different pages they all have the same message.
And this is numbers, OK, just random numbers here. Now let's
say I wanted to change this all. Let's say you had 35 pages here
and you wanted to change the all the same message and you wanted
to change it. Well, how would you do that? Well, the best way
to do it.
Most people, if you're not using dependency injection, have to go
line by line and change this in multiple different places and
that's not fun, especially when you have 3540 pages to change.
Not cool. So how do you do it? Well, dependency injection is a
good way to do it, so here.
I have.
Where I'm injecting in an interface and a class, which
I'll explain in a second. But I'm gonna actually stop this
application here, so I'll stop it.
And I'm I'm gonna change this from message to.
Hello. Hello world? That's what I named it. Hello world. So now
I just change this class. I changed the code at one place
and I'm going to run this application again and we're
gonna see.
What happens?
So now.
So that's hello world.
On all these pages.
Same thing again. If I change this and I say you know what, I
don't wanna do hello world anymore. I wanna do goodbye
world.
I can change it one spot.
And it changes is.
And every single place.
No matter what happens. So how does this all work?
Well, first you have to understand what an interface is.
So what is an interface?
Interface is an abstract class that implements a copy of
another class and it's all often considered as a contract.
And I'll explain how it's a contract here in a few minutes.
Interfaces allow for multiple classes to be quote inherited
into a single class.
I use that term in hair to loosely. It's actually
implemented, implemented is the true correct term that you could
be using. You're not inheriting an interface, you're are
implementing one, but it looks identical to inheritance. If
anybody familiar with that.
With inheritance, only a single class can be inherited into the
child class. But in a places are a way to implement multiple
classes into a single class, so again, I'll show you that in a
second.
Inheritance. You can only do A1 for one trade off.
Where interfaces you can do multiple inside of 1. It's kind
of a workaround to inheritance and it still keeps your
applications loosely coupled.
Interfaces do not contain bodies, so you only translate
transmute their properties over. So if they have any kind of if
the class that you are making an interface of has any kind of
methods or constructors that go along with it, those do not get
included. It is only the properties.
And then interfaces? Well, yeah, just actually just said
interfaces contain properties and methods.
All right, so how do you implement an interface? Well,
you have to create one first.
And then to create an an interface, you first create a
class. You put your properties you want in the class, kind of
like creating an object.
And you put your properties in there whatever you want to put
in there for your properties and then you would go ahead and you
would right click right here or it says class. So here we would
have the public class and this one called renter right click on
that one you can click extract interface. That's the easiest
way to do it.
Or if you wanted to make one from scratch, which I don't
recommend because it's a lot more work and more error moved
is just like you creating a class from scratch, you would
create an interface from class instead of searching app class.
When you create one.
You would go ahead and just search up interface and you
would type in the name of your interface that way too.
And then using the interface.
When you're implementing, it's like using inheritance. Same
idea. Base class is named following by a colon and then
following that by the interface name you want to implement. So
if you want to implement multiple interfaces, you just
add a comma after each interface prior to it. So right here on
the bottom left corner I have single implemented interfaces.
So I have the interface. I have the class of rental contract and
I pulled an interface out of it of I rental contract.
Now that's a one for one. This one only has one interface in it
and it's its own interface. I I pulled the contract out of
there.
Multiple inherited interfaces. Here. For example, you have a
renter class and it takes the interfaces of I, renter I
vehicle and I contract. So basically what's gonna happen
here now and I'll show you in the next slide is renter. Now
we'll have everything that comes with I renter everything that
comes with a vehicle and everything that comes with a
rental contract even though they're all in their own places.
So that's what makes interfaces really powerful.
And you use them to create dependency injection.
By default, interfaces are public.
You cannot use them to create objects, only the properties
that come with the objects or that class, I should say.
They are simply a contract of the base class.
So.
While they are can be used to work around for inheritance,
they are incredibly powerful and useful when implementing
dependency injection.
So here you go. So you get implement the interface. Best
way to implement it is after you inherit it.
Uh, you go ahead, right click it and there's an option called
quick reactions and factoring, which I'll show you in a second
when I actually code this up and then.
We're going to be clicking on and implement interface and this
will automatically pull all the properties out of whatever
interface you you click on. It will pull them all out and I'll
check them right there, so you only have to type anything. You
just have to type in the rental. The interface you want to
implement, and then you extract it all and it throws it all in
there for you.
Uh.
And you have to do it for each end. For face you are
implementing and it look like something like this. So here we
have all the interfaces in one class.
We have the rental contract, the eye renter and the eye vehicle.
So rental contract that believe was price per day rental number
and that was it.
I renter was renter age first name and ID last name and then
the vehicle was mileage, number of passengers and the VIN
number. So these three.
Uh interface is just came up with all these properties.
And they all come when I when I use this class here I will get
all these for free.
Because I'm using all these interfaces.
So Yep, so here it is again. Another example of it. So we
have all the properties in my renter the age versus same ID
and last name.
And then I vehicle mileage, number of passengers have been
number and then rental contract price per day rental number and
here you go. So now we're calling the rental renter class
and you have access to all of these things. So now if I wanna
go ahead and set up a renter, let's say we're have a renter
business and I say OK, you wanna come and rent a car?
This is how the information will get input here. So generally
your ID if you're doing this in database will automatically be
generated for you, but for simplicity sake we're just gonna
say the ID is 1 renter at just 26, first name is interfaces,
last name is rock.
Price per day is $1.00. The rental number is 1212344 mileage
as one mile, and it can only do 1 passenger and the number is 1.
So all that would get taken in stored into the database that
way.
While keeping your application loosely coupled.
Alright.
So before I jump into this, I actually want to show you guys a
little bit of interfaces and how they kind of work. So this is
dependency injection part of it so.
We're going to come here and we're gonna move this out the
way.
And we're going to do this.
So.
Let's go ahead and create a controller or get. We're
actually to create a new class here.
I'm actually a stop running this, so we I'm not lagging as
much.
We'll create a new class.
And we'll name this.
I don't know renter again.
Actually, you know what? We'll name this. Uh car. We'll name
this car.
Alright so.
Where the heck did that just go?
Right here. Here it is. OK, so, car, we're gonna give it some
properties. So one of the properties that has is number of
wheels. OK.
Uh. Strained car name? Sure.
We can do property, uh, and mileage. Alright, that's just
something simple. Just to kind of get something out here. We'll
actually do car make.
And we'll do property car model.
OK.
Now we have car make, car model. Uh, number of wheels and
mileage. Super simple. We'll keep it like that.
OK, so now we have car. We're gonna go ahead and extract an
interface out of car. Alright? And to keep this neat and we're
gonna. I'm gonna make two folders here.
I'm gonna make one folder and I'm going to name this one
classes.
So I could find it easier and I'm gonna name another one. And
I'm gonna name this one interfaces.
OK.
So the car will go into classes alright and so now I'm gonna
pull out an interface from car. So I go ahead and click that
right click actions, refactorings.
Extract interface.
And this pops up at once the name at ICAR, which is the
typical default name you wanna have that in front of whatever
the class name is. So that's just a good practice to keep hit
OK.
And here it looks like I inherited in I car, but what I
do is I pulled an interview out of it. So now let's go take a
look at the interface.
Looks the same.
Pulls out here.
Looks the same but.
If you notice, there is no public, nothing is public for
properties, is just string. Car make done and that's it.
That's what now if I if I actually may show you something
else here.
Let me delete this.
Put another one out here in a second.
Alright, let me also do a a method right? So I wanna do.
Public void.
I don't know start engine.
Return engine turned on.
Uh, well, actually it turned this into a string.
OK, so when I call this method to engine could turn on boom.
Simple. OK, so now with what I explained before, we're only
going to get these properties and this is actually going to be
left behind when we extract an interface. So let's see if I'm
right.
But go ahead, pull that interface back out and it does
give me this here, but it doesn't give me the logic behind
it.
So it doesn't give me engine turns on. If I go call that,
nothing actually will happen. It won't know what to do.
Based off of whatever is in here.
So if I leave this blank then nothing will happen. If I I
could turn I could change this right here and say engine turns
off, and when I call this over here it will come here and say
oh, where do I go? OK, I'm gonna go to car because that's what
I'm implementing and it's going to turn this off.
So we're gonna take this. I'm gonna throw that out interface
as folder and we'll do one more. We'll do.
Well, do uh truck?
OK.
And we'll just do.
Property string.
Truck make.
Can't type today.
Truck make and property and we'll do a Boolean and we'll do.
Has 8 foot bed I don't know.
8 foot or 6 foot but I I don't know. We'll just use that for
the sake of.
Uh, demonstrating here? Pull another interface.
Done. Alright, so now we're going to make one more. One
more.
Class, and we're gonna do vehicle.
All right.
And we're just going to.
Give it some properties here so we're as good to do. Uh.
Actually not on what changed this class here. This is a bad
example. I'll do this. I'll do a rental.
I'll make a new class. I might do renter.
OK. And this is gonna be the person rendering renting it,
right. So we're gonna do their in. We're gonna do the age.
We'll do that first name.
Alright, that's enough for now. So we got their age, first name,
last name. Definitely not all you want. You're gonna want more
than that, but for simplicity sake again.
So now if I come over to the home controller and I'm gonna go
ahead and let's say I wanna use this.
Alright, so now I'm gonna making this thing called interfaces
here.
And I want to go ahead and get those classes right. So if I go
ahead and I do vehicle, I mean if I do renter right. So if I do
renter and I need to use using.
Renter renter is new renter. OK, so now.
When I oops, I don't want that. So now when I do renter and I
hit a period it's gonna give me their age.
The first name and their last name. I could set all those to
whatever I need. It's set to.
Now, what if I needed to find out what if they rented a truck
and I needed to find out what kind of truck make and if they
had an 8 foot better? Not well, then that's a problem because I
can't associate those two together. That's where
interfaces come in. I can go ahead and I could do.
That pull an interface off of the I did OK, so I can go to I
truck.
All right. And now it's yelling at me because it wants me to
implement this interface. So.
By just to implement interface and now it's giving me the two
automatically 8 foot bed truck make model.
So now if I go back here.
If I do truck make now I have truck make for renter.
And I could do, I don't know.
GMC.
Right. And I could do renter.
8 foot bed true.
OK.
That's how interfaces work. I had allows me to and and and and
if I wanted to I could even throw a car in here. I mean, it
won't make much sense, but let's say I rent out 2/2 vehicles. I
guess I rent out a truck and a car I can tack on car to this
too.
Icar's gonna want me to implement it as well.
OK, so now I have Carme car model mileage, number, wheels.
I come back here.
Renter.
Our make there it is.
I can't type Honda for the life of me Honda.
So that's how interfaces work. You can add on.
And you can it. It makes your application loosely coupled
because now you're not. You can change these whereas
inheritance. If you were to go ahead and change your to go
ahead and change something you inherited.
Well then at that point, you would have to change way more in
your application. Every time you make a change in your
inheritance, you change a lot more as the application grows.
So usually inheritance is not a great practice to keep.
But that is how.
Interfaces work and I'm going to show you oops, I need that.
My show you guys in a second how dependency injection works?
Let me go back to my slideshow.
Here we go, OK.
So now that we kind of understand a little bit of what
interfaces are and what they do.
Act of implementing it and injecting into a class through
its constructor. That is dependency injection.
So we can implement 3 different types, a Singleton, a non single
instance of a class is not good for security purposes.
A Singleton basically is a single session that is opened up
and allows users to pretty much.
It's one session per time. The application pretty much runs, so
if you have let's say I have a website that I hosted and it's
run on a Singleton. I have a dependency. It's run on a
Singleton accessing a database.
Everything that pops up on my page on my web page will be the
same exact thing that will pop up on Jane's web page.
And same thing that pops up for everybody else's because it's
Singleton. So even if something has changed.
We won't even notice it changed until that dependency gets
called again.
So if somebody's always in that dependency, it will never update
for us and it just it leads to memory leaks and data leaks and
it's just not a good practice to really have.
Umm, scoped is a.
Midway between single tenant transient, it's a single
instance per session of the user. So basically if Jane goes
on, she goes to go ahead and do something on my website that's
using a dependency injection. Under scoped she will have that
same exact session the entire time she's on that page until
she exits out of that.
Umm, exit out of that session? Same with me, same with whoever
else.
With transient transient really good to have if you wanna keep
everything short lived, you don't wanna have your sessions
kind of.
A long at all. What transient basically does is every single
time that interface gets called.
It gets reinitialized every single time. So if genes on her
web page and she's messing around with the database or
something and I'm on that web page, if I make an update to the
web page and she refreshes her page, will update for her too.
It's pretty much newing up the class every single time that it
gets called, and that's what transient does.
Transient.
The usually going to be the default that most people will go
with occasionally, scoped, not so much Singleton.
Dependency injection is built through the services container,
so the services container is actually this right here. Oops.
What just happened? It's this right here. So this is your
services container. This is what literally builds your
application.
Before you even see it, it's grabbing all the bits and pieces
you need for it. To put it all together to build your
application so that way you can actually physically see it.
The services are initialized when the program is source built
upon launch, so there you go.
Alright, so I think I just messed something up here. What
the heck is going on? Ohh my goodness.
Go back some.
Alright so.
Assigning the interface to the class in order to use the pennsy
injection, you have to create a class that you want to have as a
default class. So we've seen that earlier. When I first first
started this presentation with the interface and the class we
want to inject.
And then basically you you assign the interface to whatever
you want to inject, and again you're using that contract
system. So it doesn't matter what you're actually returning
back, the interface doesn't care about that. What the interface
cares about is that you're asking for a specific item, and
you're getting that item back. It doesn't matter what kind of
item that is, it just matters that you get that item back. So
in other words.
If your interface is asking for a number.
It doesn't care if it's a negative number. It doesn't care
if it's a positive number, it doesn't if it's a long number or
a short number. Multidigit doesn't care, it just wants a
number and then it will be complete because you had a
contract with your interface saying that I want a number and
it said I will get you a number.
If it doesn't do that, then it runs into a problem.
So here we see that same idea. We have iMessage and message.
This is saying I will get you a message and it's saying where am
I gonna get it from? I'm gonna get it from here. The class of
message.
Umm.
So yeah, that's how that is right there.
So here we go. So this is a demonstration here. So again, we
have public class message iMessage.
The message to send we have a property of message to send.
That's what it's going to grab right there. It's gonna grab the
message test, send. It doesn't care what's going on down here,
because it does. Even see this, the interface doesn't even see
this here. This is called the constructor.
So a constructor is initiated, initiated upon.
Calling of the class every time that the program goes in the
class of message it goes in. That constructor says OK what am
I gonna do here? I'm gonna do all this perfect and then I'm
gonna do whatever else needs to be done.
So when you go in when this class starts, it's gonna go
ahead and say message to send is gonna be set to. This is a
message.
And then it gets set this property right here to this as a
message. So then when the interface comes in here and it
says where's my message? Oh, here it is. I'm gonna take it.
I'm injecting it here.
And this is what the result is. This is a message. That's what
you see on the front end.
Same idea. So now we want to change the message so all we did
was made a new class.
Message to send same property.
Doesn't have to be in the same as long as it is returning a
string, that's all cares about. This could be named whatever.
But right here, message to send is being set to. This is a good
morning message. Totally different message, but it
doesn't care because it got a string and saying that's all I
came for is I came for a string or a message, whatever.
And I'm injecting it directly in change the class because you're
getting it from a different spot now, no one getting from message
getting from good morning message. You're expecting it and
this is a result.
So that's into the slide show. I'm going to show you real quick
how to actually do dependency injection.
So I think this is the one. Yes, it is. OK, so this is the one
we're gonna use. Let me close my other application down. So I
don't get confused.
Here.
But then on the other side, actually, because we could use
as my template so I don't mess anything up.
Alrighty, perfect. Cool. So here we have the pages.
Let me run this real quick. So you guys can see you guys
already kind of took a peek at this earlier when I first
started this up here.
But basically we have come on, come on, computer, open it up on
that side. So here we have thing. This class will cover.
Blah blah, blah, whatever. We really went over all this. So if
we click on page one, this is page one, page 2345 lottery
numbers. We don't even have numbers here, but we're gonna
get some here in a minute.
So now.
Let's make a message to send.
Alright, so we're going to open up a new class, making new
class, and we're just gonna call it.
Message we can do the same idea that we did before.
Give it a property. Could be a string and we're to say.
Message to send.
You cannot name a property the same thing as a class. It will
freak out. Do not do that. It will yell at you.
We're going to make a constructor again when this
class gets opened up this code and this bracket right here will
be initialized first before anything else happens, so I'm
gonna go ahead and I'm a name.
This message to send.
And I'm going to say, uh, you know.
Interface or dependency injection.
Is awesome, OK?
That's my message this end.
Alright, I'm gonna extract an interface because we need to do
this to be able to do and dependency injection. So now
here we go.
Put that in the interfaces folder. I can't move because I'm
running the program, but it's OK.
So now we need to do one more thing. Now we need to add this
to our services folder. Here we go down a program CS.
App Builder build services right here.
We're going to builder, not services.
Oops.
Dot add transient because that's the one we want. That's the most
secure one.
Now this will give us a new instance every time.
We wanna give it the iMessage interface that we just created.
It's yelling at me because I don't have a using statement.
There it is.
And I want to give it the message class.
All right.
So now.
You can come over here.
And we can inject.
IMessage.
And probably yelling at me because Yep, there it is. I
message and we're gonna do message.
And now if I come over here and I just do message.
Now this is going to take whatever this interface brings
back.
I'm calling it the name of message. It's gonna take
whatever this thing brings back. I don't even care what it is,
but I'm gonna insert it in this H1 element and you're going to
see how it works in a second. This is on page one. So now if I
stop the program, you have to stop the program every time,
because again, this all gets initiated on that building.
Wait, hold on. I know what I did here. I then do message to send.
So I did was I actually described the class name? I
didn't grab the actual property that belonged to it. So now it
is that dependency injection is awesome. And I could do this
every single page. So I'm just going to go ahead and copy this.
They were here.
I don't want that one. I don't want that one and I don't want
that one.
For that one this one I want.
Three, what was the other one?
4.
And five, OK.
So now if I restart this program.
By the yelling at me.
Now comma using it.
So because I'm injecting it directly, I have to use it using
statement. If this was a model, I wouldn't have to worry about
it.
OK.
So now if I run this program, all those pages that I just did
that all said page one, page 2, Page 3 blah blah blah will all
say dependency injection is awesome.
Now.
Let's say I want to change this. Let's say I don't want to use
dependence. I don't want to use that message anymore. You come
in one day and your boss says not we're changing the message.
Yeah, like crap. I gotta change that. And a bunch of different
spots. Well, no, you don't.
Come here and you could do.
We're gonna name this one message.
Better message OK.
Naming is hard.
Property string.
Message to send because why not?
And we're going to give this one.
Message to send.
And we're going to say.
Software Dev is better than cyber.
Security.
OK and now?
What we're going to do is we're gonna go ahead down to this
program.
And all we did was create a class, create a, change it right
here where I say better message.
Save it.
As you see on at me.
But as a parameter blah blah blah blah blah blah blah blah
blah.
Apple One interface out of it. I don't know. We'll see what
happens here in a second.
Playing on me, what did I do wrong?
Lottery numbers.
Hmm.
So that.
Class should be fine. Don't know these things freaking out.
Now, why are you yelling at me?
Add services transient better message.
Pass.
Cannot be used as a parameter.
Ohh.
Duh.
I need to implement that interface.
That's why.
There we go.
I always forget to do that whenever I do this.
Alright, so now.
Software Dev is better than cybersecurity.
And that will work with however many times you wanna change. It
doesn't matter, it will always work.
So that is pretty cool stuff. We'll take a quick look at the
lottery numbers.
So get rid of that. I'll get rid of this. Get rid of this. Get
rid of this.
This and this and this OK.
So now we got a lottery numbers here, and we're gonna do the
same thing. We're gonna create another class here.
Item class and we're gonna do numbers.
We'll give it two properties.
And we're gonna do a #1.
Property and.
#2 and we're going to open up a constructor so we can give these
things some value, right. So we're gonna open up, we're gonna
create a random number generator. Random random.
Yeah, yeah, yeah. Random.
OK. And we're gonna do.
Number one is random next and let's give it a value between.
I don't know. We'll do a zero in 100.
Here with 100 and #2 between 100 and 200.
Yes, anybody who doesn't know this will stop. This will go
start at zero and it will count all way up to this index, but
not including this index. So if I wanna hundred I have to do
101. If I wanted 99 I would do 100.
Because it doesn't it. It stops at that index prior to this
number I'm giving it.
So now it basically this is gonna give me a random number.
Right here. All right.
And I'm going to extract an interface here.
That's fine and all dandy. Now we come down. We're gonna inject
it in.
Service this transient.
And we're gonna do.
I number.
I numbers and we're gonna give it the same exact class we just
extracted it from. I'm going to show you how the scoped works
here.
Or how UM Singleton works should say?
Singleton.
You have to restart our program here, but before I do that, show
you no numbers here.
Stop this. We go ahead and run it now.
And now?
Fighting and work. Oh, I never injected into the page. Duh.
Yeah, I never did that. I'd probably be probably be helpful.
I lottery I numbers.
Numbers, OK. And now instead of this, we're gonna go ahead and
do.
Numbers dot.
Dot #1.
And we're gonna do numbers dot #2.
Now we'll get a number one and a number 21837. Now how transient
works is now. I mean how Singleton works is now I can
move between these pages here.
And this thing will never change because it is a single instance.
Since the thing has been called.
So I'm still in that same exact session.
Like I was mentioning before and This is why it's bad to do
because as memory leaks, even if I refresh the page, still the
same exact numbers because I'm still running the application.
Right.
So you could see how this would cause memory leaks and problems.
When you start dealing with database issues.
So let's start. Let's close this and let's change this instead of
Singleton.
Change it to transient.
Transient run and now.
When I start this program up.
Here I am 9591 reload 89140 four 84156.
Even swapping between the pages doesn't matter. I will always
every single time that interface gets called.
It will always generate a new number.
No matter what happens, because every single time I open up this
page.
This program is saying, OK, you're opening up this page, it
wants me to inject these numbers with an I number interface.
Well, where am I getting that from? It comes all the way over
here and it says ohh numbers. You're gonna get it from numbers
here. All right, let's come here. OK. You're gonna get #1
and #2, and it's gonna get generated here.
So by the time it gets to #1 #2, it already has a value because
this isn't. This is bill already.
So it gets these number values and says transient. OK, perfect.
And it's gonna come back and it's good to display it here.
And now when I reload the page it comes here and it does that
all over again every single time.
Because of it being a transient feel, a Singleton like it was
before, it comes here and says oh, I don't need to do that
cause the Singleton this this is already open, I don't need it. I
don't really know what up.
That's how. That's how it dependency injection works, that
is interfaces.
And that is my presentation.
Nice job, Jordan.
Thank you so much, Jordan. Sorry, I'm still talking to
interns and.
Sending messages.
All that good stuff. I did not see your presentation. I will
rewatch it cause I've been 100 miles a minute everywhere else.
I know where he's.
I made most of it.
Yeah, I started again a little. I was trying to speed it up a
little bit.
And that was great. Good job.
Thank you.
Does anybody have any questions for the presenters that are
still here?
Well, I think everybody did a great job tonight. I learned a
lot.
Wow.
Great job. No one has any questions for our presenters.
Does it make you wanna go back into coding, Marcia?
No, I told you. I'm never gonna do coding.
More power to you guys, but no, no, that's not my thing.
But I definitely.
I'm joining the dark side.
I definitely enjoy watching your skill and your knowledge of it.
All three of you did a great job.
But no one has any questions. We can go ahead and close this out.
Of course there'll be a recording. If you wanna watch it
again.
Alright, we'll go ahead and say goodnight. Everybody have a
great night. Have a great weekend.
And you know where we're at. If you have any questions, check us
out and chat. Have a good night, everyone.
Night.
Not everyone.