IONIC Section 7 - 7.4 Project Planning

Click here for more videos available on our youtube channel !

Hello everyone, now it's time to move on to our main course project, as it will be a much larger application that will actually implement all of the navigation concepts. For later modules, it also allows me to add all these features interesting, such as access to the camera of the device and so on. What are we going to design? We are going to create an application of place booking, where people can offer their places and you can book other places, a bit like “AirBnB”, like you could tell. Therefore, we will have two different pages. We definitely need a page where people can find places, now what can we see on this page? We will be able to see that we will have a toolbar with a side menu and we will also use navigation in the tabs for example to find places. On the page, we then have a place selected, and then a list of all other addresses you can rent. At the top, I want a toggle to switch between all addresses, including the ones you have offered and reservable places including only those which are not offered to you and which are actually reservable. Now when you tap on a location, let's say a location 2 here we will go to the location detail page which is now always on the same page stack, which has been pushed so to speak, in which we can see the image and the title, maybe a short description, whatever we want and we will have a button that will allow us to reserve this place which will open a reservation modal. A modal is basically an overlay, regarding our page stack. Then we can also suggest places and this will be our other tab. So, in the navigation tab at the bottom, one of these tabs will display the places that can be reserved or that we want to book, and the other tab will offer our places. If we operate one of the places offered here, we will see the details of the offer. Once again this page is then placed on top of the page stack where we can see who booked our seats or we basically see the reservations for this place. And that's not all, because we can press the plus button, which will lead to the new offer page. By the way we will also implement methods to modify existing offers, so that existing places are offered and we are talking about reservations accessible from the side menu, there we will find a link concerning the reservations page where we no longer see reservations for places we have offered, but those we have made for other places. On this page, we can also drag our reservations to delete them. Finally we will also have an authentication screen controlled by a guard, whether we see this screen or not when we we are not connected. We then have to log in to access all the other pages. This is the approximate configuration. In this module, we will only be able to not add all the functionality, because it would take too long, we will add all these different pages and the necessary navigation concepts. The content of the pages will then be added step by step with the other modules. Where we will learn things like retrieving user input, accessing the camera of the device, loading data in different formats, using a background server, etc. So let's start with the project configuration, the creation of our page structure and the addition of the different types of navigation in the next video.