Deciding What to Build First

When I am building an application I try to first focus on getting straight to the thing that my application, or the feature I am working on, “does”. We are going to want to save the data in our application at some point, but that is not what the application is all about. We could start there, but it’s not the best starting point.

The application is about creating and managing checklists, so as a starting point, it makes sense to focus on being able to create a checklist. But how do we get there? It can be intimidating to take in everything all at once, so just focus on whatever the next step is.

If we want to be able to create a checklist, then there is going to need to be some kind of user interface for the user to do that. What will that look like in our application? Well, in this case, we are going to have some kind of add button the user will click when they want to add a new checklist. Let’s focus on that first.

Create the add checklist button

Add the following to the HomeComponent template:

    <ion-header>
      <ion-toolbar>
        <ion-title> Home </ion-title>
        <ion-buttons slot="end">
          <ion-button>
            <ion-icon name="add" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

Now we have a button in the top toolbar that can be clicked, which currently does nothing. You can go ahead and check for yourself if you like by running:

ionic serve

It is a good idea to have this running in the background whilst you are developing your application. The earlier you catch an error the easier it will be to solve. You don’t want to add hundreds of lines of code before you check that your application actually works.

Create a modal

Now we need to move on to what we actually want to do when our add button is clicked. In this case, we are going to launch a modal. A modal is a view that pops on top of your current view, and Ionic supports this out of the box with their <ion-modal> component.

Add the following to the HomeComponent template:

    <ion-content>
      <ion-modal>
        <ng-template>
          <p>I will be a form one day</p>
        </ng-template>
      </ion-modal>
    </ion-content>