Step 1: Let's plan out our app

What are we building? 

In this walk-through we'll go through the process of building a Contact Management app from idea to full implementation. 

App Requirements

We have 5 main objectives: 

  1. Build a beautiful mobile friendly web app to: 
  2. Track all the companies we're working with
  3. Track all the contacts in each company
  4. Track all the updates of each contact and any correspondence we've had with said contact. 
  5. Secure all pages to our company admins. 

 

Building Process: 

So how will we build this app? we'll go through a few steps. 

  1. Define Your Data
  2. Define your workflow
  3. Add your tables and build your data
  4. Add the pages and views
  5. Secure the pages

Define the data

We'll define which data we want to collect. This can be done prior to even touching the app builder, simply draw out the tables and fields you wish In our case we have 3 sets of data each with its own unique fields/columns. 

9bIData-We-Need-To-Collect.jpg

As you can see from above we have 3 tables, and if you notice the Contacts table has a "Company Name" field and the "Note" table has a "Contact" field. We want to use these as connections so when we add a new contact we can associate this contact with a specific company and when we add a new note we associate the note with a specific Contact. 

Essentially, our data looks like this: 

  • Each Company has many contacts
  • Each Contact belongs to a Company and has many Notes
  • Each Note belongs to a contact

If we were draw out the relationship it would look like this:

FDbData-We-Need-To-Collect-Relationship.jpg

Define Your Workflow

So you don't waste too much time doing and redoing your app, it's highly advisable to define your workflow ahead of time. This can also be what process you want you and your users to take when they come to your fully build app. 

In this simple Contact Management application, the workflow will be quite simple but as your applications become more complex this can drastically help you save time and energy. 

In our case we want: 

  1. Our company employees go to: https://contacts.mycompany.com
  2. Employees login with credentials provided by IT
  3. Employee can browse any company in the database
  4. Employee can add new companies if it doesn't exist in the database
  5. Employee can view further details about each company as well as all the contacts in the company
  6. Employee can add additional contacts into any company
  7. Employee can add notes about any contact within each company
  8. Employee logsout when he's done. 

Since we've already built this app, here's how this will look: 

workflow1.jpg

Now that we have our requirements, data and workflow layout let's start building. 

Click Next below.