Hi guys, and welcome back to the Mean Stack 30 Day Challenge!
I've set myself a challenge to post a video everyday on how you can build your first Mean
Stack App, and we're going to jump straight into it.
What I've got open here is an interaction flow of the app that we're going to build.
I've got a home page, we've got a login page, and then we've got this customers section
of the app.
In the customers section, we'll have a page to view and search for customers and we're
also going to have modals. Modal windows that will pop up and we're going to use that to
create customers, and we'll also have one to update customers.
So that's the structure of the app that we're going to build, and depending on how much
time we have in the next 30 days, we might add a few more things to that as well.
To start off, we're going to look at the home page. We've got a use-case here, for our fictitious
company, and the idea is that the company is called App-Makers, and one of their employees,
they need to be able to log into the app.
So in order to actually use it, they need to be registered, and they can register or
login by using the Login button. The storyboard says that when the login button is selected
then that will navigate the user to the login page.
So that's the process for what we're actually going to be creating.
So, what does it look like? We've already got a couple of wireframes, we've got one
for the landing page for a mobile phone, we've got one for a landing page that displays on
a tablet or desktop device.
I'm going to just pop that open, so what we're looking at here is the landing page that we're
going to create for a mobile phone, when you're looking at this, I want you to think of the
content and think of what it would look like in a grid format.
We've got two columns, we've got one column for the icons, and we've got one column for
the text. So, that's when we're looking at it vertically. And then when we're looking
at it horizontally, we see we've got these rows that are going across. So here we've
got two rows, again we've got two rows, so on and so forth, through.
When we jump across to the tablet, so this is how we want the tablet or the desktop display
to look. This time, we've got two key columns, we've got these columns over here, and we've
got a second lot of columns over here.
And they take up about half of the screen, now within this particular column, again we're
split into another set - one column for the icons, and one column for the text. Again
over here for this larger column we've got one column for the icons, and another column
for the text, and we've got two rows for each of these sets of data.
And the reason why I'm talking in terms of this grid columns and rows is because we're
using bootstrap. If I jump across to bootstrap.
At getbootstrap.com, and you go across to the CSS section of getbootstrap.com, and
just go down to grid system. You'll see there's some example grids that they've got in their
website here.
The way that bootstrap works is each row can be split into up to 12 columns, and each column
can have a length. If you think about it, here we've got 12 columns, and they're worth
1 column length, because you can only have 12 columns, so that's the maximum they can
have.
This next one down, we've got two key columns, this one has a length of 8, and this one has
a length of 4, again they make up 12.
This time, we've got three columns, they're all the equivalent of four columns each. If
you measure them across the single columns, you'll see they come up to four.
Again, 4 x 3 = 12. In the last one, you'll see that this is equally split into two, so
12 divided by 2 = 6.
When we're looking at the tablet, or that desktop layout, we said we needed to split
it into two. We'll be using a lot of these six sized columns. So, where are we going
to do this? We'll we're going to create this landing page using our apps home page.
So, lets go and find that. I'm just going to make this smaller, so you can still see
it.
I'm going to go to where this landing page is. So, the way that you find that, is when
you go to the mean app, go to Public, and then go to Modules, and go to Core.
Core is where you find anything to do with the header part of the app, so the bit that
you see at the very top of the app, and you'll see the home page.
Any of those related items, they're in the core, as they make up the core of the app.
So, we go down to views, and then we just go to home.
Now you see that because I'm using Webstorm, there's a few things in here which are highlighted
in this brown colour.
The reason for that is because I've just initiated Git, you can do that in two ways. You can
either go to your command line, into your terminal and type git init, which initiates
Git, for your source control. Or if you're using Webstorm, you can go to VCS, Import
into Source Control > Create, and that will set it up for you.
That's an important thing to do before we start.
Before we actually start to do any editing, I'm just going to start up the App. So, just
type in 'Grunt', and just let Grunt start up the Node server for us, and run it's tasks,
and start the app.
As soon as that's done, when it say's 'Mean.JS application started on port 3000'. I'm just
going to jump across and open up localhost:3000, and you can see, that here's the mean app,
that we have, that comes with the Mean.JS Stack. I'm just going to remove everything
between the Section Tags. So that can go.
We're going to start over here.
So I'm going to start by creating a row
This is going to be my overarching row. I'll give that a bit of space.
Now I'm going to create my first column
I'm going to make that small
So, what I'm focusing on first, is this little section of the app here
I'm really going to be looking at creating something that goes half the length of this row
The thing that I'm going to create is actually going to be a column that's length of 6, and it's split into two rows
One row for this top section, and another row for the bottom section.
This top row is actually going to be further split into two columns.
We're going with extra small because we want to maintain this structure when we're looking at it
on a mobile
Just to show you what we've got here. We've got our row which is just the whole page that we're creating.
Then we've got this particular div, and we're making this go to half of this page, half way through.
We've got two rows, because we've actually split this into two parts
The first row, we've got two parts to that again, we've split that into another column
ICON and 20, 408
The second row, we've got 'Total Customers'
So what we can do now is just copy that, and for each item, we will just make the change
So lets have a look at our handy work.
I'll just save that one over here
When you've got the screen reduced to that smaller width, Bootstrap media queries will kick in
It will actually change the layout of your page depending on what size screen that we're looking at
When we're looking over at our app
We see that we've got two key columns, and this is the equivalent of the appearance on a mobile device
You can see that bootstrap also includes this navigation bar at the top
And it's got this little hamburger menu
When we make this bigger, we should actually see the hamburger menu has disappeared
And our structure has actually split into two
So we're starting to resemble what we're looking for when we're looking at the wireframe over here
Alright, so that's it for today, we're going to pick it up again from here tomorrow, and we'll get one step closer
To turning our Mean Stack into a nice workable app
Thanks for joining me, please subscribe to the channel, or please check out www.bossable.com for more details
Thanks again!