I recently came across the CEO who kept complaining about his inability to separate his business/employee contacts from his general friends and family contact list. He had to search over 300 contacts on his phone and it became really difficult for him to edit and continuously update his phone whenever an employees updated their information or left the company. I asked him whether they he had an internal contact list and app that he could manage to which he replied he didn’t even know where to start.
A controlled, internal contact list is a great resource for any executive to maintain all of the business’ contacts up to date and in one place. In this tutorial, Rheti will show you how to build your very own Android Contact List application in minutes for free.
2. Open up a Parse.com account (you will need a backend to store all contacts, phones, emails, etc) and start a new app. For this example, let’s call it My Contacts. Make sure you copy the App keys: Application ID, Client Key, and REST API Key. Go into the Rheti settings menu and add these under “services” as you will need them to build your app.
HINT: It’s easier if you just copy and paste them into an email that you can then access from your phone.
3. Once you’re done, go to the Data Browser of the app you just created and add a “New Class” on the left-hand column. In the pop up, type in a name for your contact list. In my case, I made it Businesscontacts, and clicked on “Create Class”.
4. You will see that a number of columns automatically created. These include objected, createdAt, updatedAt, ACL,…By clicking on the “+Col” button, we’ll be able to add our columns. We’ll want to add a few columns in this area that will show up in our contact list. These can include: first_name, last_name, email, email2, mobile, home phone, address, address 2, city, and anything else you might find useful. Make sure the columns added are type “String”, (except for phone numbers which will be type “number”).
You can now begin to populate your data just as you would in an excel document. This is the data that will show up in our app and will serve as your directory.
5. Let’s build our app now. Open up Rheti on your Android phone and start a new app from scratch HINT: there is a section in Rheti with pre-made app templates. If you don’t wish to build the app from scratch, simply select from the contact list templates available and tie it in with your Parse.com account to be done within seconds.
6. Design your app. You will need at least 2 screens. The first one will be your contact list. In here you will showcase the list view of all of your contacts. The second screen will be your contact detail screen. To learn how to build screens, please visit the Rheti tutorials section.
HINT: you can add a login screen to your app should you wish it as well.
6a) Build the Contact List view screen – On a blank screen, design how you want your page to look. To add the list view, tap and hold in the middle of the screen and click on the “+” icon. In the Select a Feature screen, find the “Feed List” icon and select it. Once it is added inside your screen layout, you can change the width and height or your list view by clicking on the bottom left “configure” icon in the bottom black bar.
6b) Once you have configured your view, you must now configure how you want your list items to show up in the app. Tap and hold inside the “feed view” box you just added and click on the “Feeds” icon in the control panel (the cloud with the cog inside it). This will take you to the Data screen. Now it’s time to add your parse feed. Click on the Parse icon on the top and a dialog will pop up. You will need to add the following
- Class name – make sure it appears exactly as you put it in Parse. In my case it was “Businesscontacts”
- Add the rest of the fields: first_name, last_name, etc…make sure that the names and spinners match the field you’re adding (i.e., text for address/email, number for phone) from Parse.
6c) click inside the + sign in the data screen to design your feed. I designed mine to include a picture on the left and show the firstName on the right (see image below). Save the feed design, go back to the data screen and now the Parse item you created will have a download icon. Tapping on it will place it in your app’s screen.
If you’ve done everything correctly, your screen will now show a list of your contacts (straight from Parse). You can view it in live mode just like mine:
6d) Create a new screen to showcase your Contact’s details. Design it how you wish and go crazy! Below is my design which I also uploaded as a template in case you want to edit it. As you can see, it includes rich text boxes, an image placeholder, and some titles as well.
6e) Finally, you have to tell your Android app to go fetch the information from the correct Parse class (think of it as assigning the column item to each box you just added). To do so, simply tap and hold on each item (i.e., phone number, email, or even the picture…whatever you want to come from Parse) and select the cloud icon/Feed. Then find the Parse feed you can created and tap on it. This will open up a dialog that will read something like “___ Content Provider”.
NOTE: All of the items you will be adding (for the page) have to be assigned to the same content provider. For example, I have a name, phone, email, and image that need to be assigned a Content Provider they will all be assigned to Content Provider 2. In my case, I added them all to “Parse Content Provider1″. If you have no content providers so far, create a New one for the first item (name, for example) and then make sure that every other field goes to that content provider1. If you add them to different content providers, the app will not function as you wish.
7) Here comes the fun part! Let’s t add actions to our app so that when a user clicks on the phone or email, the app will respond. In this process, we will also learn some basics in programming (requires no previous programming knowledge)
7a) We must first create some app action settings. To do so, Tap and hold on the same area where the app name is to bring up the App Menu (at the bottom of our app builder screen). Click on the Cog / Settings icon. This will bring up a screen where we will add a number of settings by clicking on the + sign on the top right. Add the following (depending on the number of fields in your contact list. In my case, I just have 1 email and 1 phone number I want to manage.
- position (will be used when we tell the contact list screen to open up the contact details screen)
7b) programming click on phone action to call that number – Tap and hold on the box where the phone number is going to go and select the configure icon > Events (this is the cog icon > puzzle piece).
HINT: if you don’t wish program functions individually, Rheti has a number of pre-programmed actions available (called Rheti Kits) under “Add Kit” (which will show up in the drawer from the bottom once you select the “Events” icon).
7c) Select the kits for the fields you’d like to have those actions. I selected: a)call number item from Parse; and b)Click to send email from parse for my phone and email fields.
HINT: you can customize these kits by clicking on the icon at the far right with the + sign. In here, you will see how the items were also constructed in case you want to learn some programming techniques.
Repeat the same steps as necessary and you would have programmed all of the fields in your Android app in seconds.
8) The final step is to tell the contact list to open up the contact detail screen when you click on a particular name. Click on the feed list box and select the events icon. You will need to add various items here:
8a) Add block > Global Settings > select “position” from drop down arrow >tap in the text field next to “to” > Select Feature from options > find “Feed List1.position” from list and select it > click OK
8b) Add block > Feature Action > New > Show New Screen > Go to “Set Show New Screen….” where the red warning sign icon is and fill out which screen you want to open by tapping on it > Select Use Placeholder (will open up all active screens in your app > Select your screen (In my case, it was titled Contact Detail
HINT: to change the names of your app screens from UNTITLED, you can simply single tap on the top left of the app builder screen (right where the app’s icon would show up). This will open up a dialog titled screen details.
Congratulations! You now have your very own internal Contact list and Directory that anyone can manage and update from Parse. Make sure you share your great design with all your co-workers, friends, even clients and show off your great Android programming skills.