Part 1 - Designing your Mobile App

Now that we have made a decision on which application we are going to build, we have to get some design work out of the way so we know what we are aiming for.  We will need some basic screens for login, adding and editing clients, and creating and viewing invoices.  I’ll use a site called draw.io to mock up some screens for the application.

For some helpful controls, after navigating to draw.io, click the “x” on the initial popup such that you are presented with a blank canvas for designing your application.  On the left nav, select More Shapes in the bottom left, then select the Bootstrap option and click Apply.



I’ll start with a simple login screen, which I’ll borrow straight from the login screen already provided in the Bootstrap tools we just added.



Next I’ll need a way to view and add clients such that we can start invoicing them.  For that, I’ll use one of the built in controls and add in some modifications for viewing client detail and a button to create a new invoice for the client.



When they click the View button, we’ll need a screen to edit the client details.  This will simply be a few text boxes to collect some information about the client.



When we click the invoice button on the client list, we’ll want to go to a new invoice screen to enter invoice details.  We’ll add a Download option such that we can obtain a PDF report and an Email button such that we can send the invoice to the client right from the app.



We’ll also need a way to review all of our invoices.  So we’ll also build an invoice listing screen.  We’ll add a view button to this list such that we can see the invoice details again.  We’ll also allow the user to change the status right from the list to keep things easy.



This should be all we need to get a good start on our app.  We can make some adjustments along the way if needed.