So let's plan
the app we'll build and we'll build a basic shopping app, a basic online shop in an app
you could say. So therefore in this application here, we'll definitely need a bunch of products which can
be listed,
so we'll have like a product overview screen where we see these cards with our products, with an
image, with the title and the price maybe, something like this
and also a cart or an add to cart button and a details button,
so basically a button that allows us to go to a detail page and a button that allows us to add this
to a cart.
Because if you do tap this cart button here,
so if you do select this cart button, then this is added to a cart and you can reach that cart with an
action button here in the action bar,
so in the top header, there I want to have such a cart
icon, probably a bit nicer than what I drew here but this icon here in the end allows us to go to a
separate page thereafter, a separate screen of this application where we of course then can also go
back where we will see like a total sum in dollars here which our total cart items add up to
and then a list of our items like a book
and what this cost
and something like this.
So basically we see our cart here, we see a sum of that
and then we see the individual items
and of course, I also want to have a button that allows me to order what's in the cart and actually
that button should be not below this,
so here we'll have an order button.
Actually this should be here,
so here I want to have one row where we have the total sum and then next to it, the order button.
So that's basically the goal
but you could place this wherever you want,
in the end, we want have a button that allows us to order whatever we have in the cart and on each cart item
here,
I also want to have like a trash icon here which allows me to delete an item from the cart.
So where this places an order, this icon over here will basically just delete an item from the
cart.
So that's the idea,
of course if you add the same item multiple times to the cart, you should not add multiple rows for that
but instead here, I also want to show like a quantity of the item which simply increases if we
add it more often to the cart and which decreases if we delete it until all items are deleted in which
case the entire row would be deleted here.
So that's how this cart page will work,
this is the overview page here, of course therefore we can also tap the detail button or maybe the item
in general, so anywhere on the image or anything like that
and then we should be taken to a detail page.
So that's another screen in this application where we of course also can go back.
That's detail page of the icon where we should see the image,
we should probably see like the title here in the header,
so that would be the title of the item. Then below that, we see like the price, we see the description
and we probably want to have a to cart button here as well, where we can also add items to the cart
here. So that's the flow regarding our products
we have here. Now
the important thing in this app will be that we can not just see products and shop them and add them
to cart and so on but of course that we can also view our orders and most importantly, that we can also
add new products.
Hence here, we need a drawer and this drawer will present us with a couple of options. Now
the first option of course is that we go to our shop so to say, that's this part here where we are
on when the app starts.
The second option should be our orders
and the third option should be like a manage products option, where we can manage our own products
which you want to offer to other users.
So as I said, shop is basically what we see already.
Now if we tap on orders, well then I want to be taken to a screen where we of course also can open that
drawer because that will then allow us to go back
but on that screen we should see the orders where we basically have items where we kind of see like
the sum of that order, the date and then also a button where we can tap on where we see more
details and if we tap this button, then we have this optional area which opens or closes and in there,
I basically want to see the items of the order which is basically what we had in the cart.
So we had two books in here with a price of 19 for example, well then this would show up here in the
detail area when we open this.
So that's the idea here
in the order,
we can expand an order so that we don't just see the sum and the date but we also see the cart items we
placed in there basically,
so basically what we had here in the cart, that's showing up in the orders.
So that's the orders screen,
we also have managed products and let's draw that here maybe. Managed products is another area of this
app where we also have that menu button to open that drawer again so that we can reach the other parts
of the app but here in the managed products screen where we have our own products,
so the user products and in this app, we won't add authentication yet but we'll add this later but here,
we have our own products. Here
the idea is again that we basically see a list of products which is pretty close to what we see here
on the shop screen, so that we have like our cards here with with an image, with the title and the price
maybe, so we can reuse this list here probably
but of course the options we have on each product, that differs. Instead of adding it to a cart and viewing
the details, we can delete it,
that's one button and we can also edit it. Of course we can only edit our own products but again, we'll
have no real user mapping here, we can do this with some dummy user ID which we attach to each product
but that's it for now.
So we have the edit and delete button,
now in addition here in the header,
so we need more space here, in the header we'll also have an action button that allows us to add a new
product.
So basically that should just be a little bit broader here, I drew this too narrow.
So we have this action button here and this action button here, this plus button, this should take us
to a new page where we can add a new product,
so this will take us to the added product page here where we can of course go back and there, we can
add a new product and that allows us to add a title here with a text input and that text input can also
be below the title label, you can build this however you want.
We should be able to add the price,
we should be able to add description here, might be a multiline input here,
we of course need to be able to add an imageUrl as well.
So that's what we can add here and then we need a button here in the action bar, a check mark button or
anything like that which allows us to confirm this. We'll not care too much about all that user input
handling here
at this stage because I'll have a separate module where I dive into all the details there, how you can
do this in an elegant way, how you can add validation, so here in this app we'll keep this very basic, we'll
not check whether the user entered something correct or anything like that,
we'll do that later in the course.
Here we just gathered that basic input when this button here, this check mark button here is pressed,
we're taken back to this page and of course we use Redux in our state management system to add a new
product to the list of products which then also shows up here in our shop and which shows up here in
our product list of course which we can administrate.
So that's what we have here.
Now if we tap edit here, if we select this edit button here, then we're also taken to that same edit product
page but of course now we have some prepopulated values here, prepopulated with the product we loaded
and there are certain fields which we can't edit,
for example the price should not be editable because if the price would be editable, then if we had it
in the cart already, that would be a problem,
so we'll not allow editing the price here,
we will allow editing the title, the description and the imageUrl though,
so that's something which is possible.
So that's the one difference,
we have prepopulated fields and the price is not editable.
If we press the checkmark in the edit mode and we can find out whether we're editing or not by the
fact whether we received a product ID as a parameter for example,
so once we're done editing, we can press that checkmark icon and then we're also taken back and we simply
save whatever we edited here back to our product.
This is the app here.
As I mentioned, this will be a basis for the subsequent modules as well,
there we will then also add HTTP request, authentication, we'll do all that form validation here in
a more elegant way and so on
but this module here now is a great practice for how to build such an app, for how to work with components,
style them, how to add navigation because obviously we have a lot of navigation in this app and how
to manage our state in this shopping app.
As I mentioned in the last lecture, you could skip this module but then you should definitely dive into
the finished code so that you're able to follow along in the next modules but my recommendation of course
is that you a) either try this all on your own and of course your result will not be the same
I get, so you should definitely also watch my videos thereafter to see how I did this and so that you
have the same code basis to follow along
but this will be a great practice even if your result there first because there is no wrong or right
approach necessarily or b) your other option of course is that you don't try it on your own and you just
follow along,
also a valid option but I believe you'll get a bit more out of the course if you do try it on your own
first
but in the end, do whatever you like. In the next lecture, we'll dive right into this and start building
this app.