Journal: Design to Working App in 2 weeks

Hey bubble community!

I’ve decided to try a fun experiment. I’m going to build an app in 2 weeks and document the process on the forum. My goal is to program for at least 2 hours per day. I’ll post my questions in other sections of the forum, but I’ll post my daily update in this thread.

I’ve “built” the app in powerpoint and have a customer that wants to use the app and pay $150 per month for it. He’s also paid for the deposit and the launch date is two weeks away!!

I’ve played around with bubble, some APIs, etc, but never build a full app that someone was going to use.

I think that posting here will be a good way to keep my accountable, will be a good learning resource for other that want to do this, and also be a good way for me to get help from the bubble community along the way.

Background: CallBoss

The tool is called the CallBoss. It’s part FAQ, part decision tree, and par marketing automation. It’s a pre-CRM tool that guides the CSR (the person who answers the phone for an HVAC business) around what to say when a person calls. It automates the followup, gets rid of paper notes, and people using their memory to remember what to say, etc.

Here are some screenshots of the app.

Here are the features that have to be built

  1. Navigation and logic. Each part of the call is documented and they all have to flow together. Many of the elements of how the call flow is dependent on previous parts of the call.
  2. Save data about a call and display it later in the call. This might be use parameters, I’m not sure yet.
  3. Integration with outlook. Part of the call is going to be the CSR booking appointments for the sales person. Thus, I’ll need to pull in their existing calendar and also take data from CallBoss to put into a new event.
  4. Send emails automatically with dynamic data based on what happened during the call.
  5. Accounts for different CSR
  6. Setting up a subdomain. In this case “customername.getcallboss.com
  7. Future: Saving all of the data of what is clicked and when in the app to the database so that call analytics can be run.

Here’s my timeline for development and why I picked this timeline. I’d love anyone’s thoughts on this.

  1. Outlook integration. This will be the hardest part, so it makes sense to me to do this first.
  2. Build the navigation and logic of the call. I don’t see this to be a huge challenge, thought it could be time-consuming. Some of the workflows for the condition logic could be tricky.
  3. Build the database so that data enter can be saved for a specific call and also displayed later in the call. I need to have the data posting to the database before building and testing the emails.
  4. Send emails automatically. Build the ability for emails to be sent based on the database and logic of the app.
  5. After this, everything will mostly be built so I can build the account creation process.

One question. I’ve left the account log/in creation process to the end. Is this the wrong strategy?

4 Likes

Personally, I’d recommend building the highest value, lowest complexity pieces first. Working software trumps everything, so starting with the most complex thing feels risky to me. Source: I’m a consultant for Pivotal Labs, I do this advising for a living lol

@potentialthings Completely agree. The feature set that I’ve sold is the highest value least complex. However, within the “not complex” feature set, there is still a most complex aspect. This is the outlook sync. To me, it seems like working on the most complex element makes the most sense. If this can’t be done, nothing else matters. Thoughts on that?

Also, what are your thoughts on building the “account” part of app last. Could this cause problems? This is the first project I’ve ever built, so it’s hard for me know.

Best of luck with the project!

Also awesome work actually talking to customers, solving a problem and proving sales before building something. I’ve worked with many entrepreneurs that get lost in the idea and realize the hard truth come time to sell.

Around development, I usually start with data and accounts/logins. That way as I create features I can constantly test it as the user who will use the specific features

2 Likes

hey @gf_wolfer yup, I’m a salesperson by nature so it doesn’t make any sense for me to making anything before getting paid.

Re: development. So, it sounds like would create the account signup/login feature first and then start with the the rest of the features?

Thanks for the advice on that.

Chris

1 Like

My background unasked as well, so maybe someone with a development background can chime in as well.

But I find creating things based on a User flow help me make sure things work as I go, instead of developing a lot of different pieces only to realize that half of them aren’t working right. Example (user signs up, sets name and profile picture, clicks ‘sync with outlook’, is taken to calendar, etc.)

To make sure you can do the Outlook integration, look into their API docs and plan out exactly what data you need to view, and what actions you need to make, such as creating a meeting in someone’s schedule. Between their API documents and some specific questions here you should be able to find what is possible with it.

@gf_wolfer Thanks for the insight. This makes sense. I’m going to build it that way. I’ll be programming this entire afternoon!

Chris

Have you looked at timekit.io ? Its a calendars and booking system api and looks pretty straight forward but powerful software , heard about it here so one of the bubble users can probably tell you a bit more about it

I have. The customers uses outlook 365, so I have to integrate with this.

oh nevermind, good luck with your project

I wouldn’t call myself experienced, so grain of salt.

I think it’s significant that when you load up a brand new blank app in Bubble it’s already got authentication and user account functionality setup. When you’re doing work online, the very first thing you have to do (after establishing communication) is verify who you’re talking to. So as I’m developing apps I start with the user and their information first. The user is the first, last, and most consistent element across the entire app. Therefore I’d suggest building the account creation stuff first.

As a related example, I’m working on an app that’s going to have administered groups in addition to users. In both cases (users and groups) I need to have some kind of data to represent the user/group as I’m building out the other functions, which means I need a place to put that user/group data. So I have to build the user/group tables/fields first. To even test the app I have to pretend to be a user, so the user has to exist before any of the other app functions. Finally, if I have bugs in the app, I can figure out the bug in any function as long as the user thing itself doesn’t have bugs.

Thank you, this is very useful. I did create the account login process first. There’s only a single user first, so it was easy enough.

Update from day 1 - calendars!

As part of my project to build an app in two weeks, I need to send some data from the app to Microsoft Outlook. I need to be able to see a person’s calendar, create events, etc.

I dug into the calendar issue, haven’t found a solution yet, but there seem to be 2 options.

Here’s what I need to be able to do

  1. User Is gathering information about a phone call with the app itself as the call it taking place.
  2. User can see another person’s calendar to find a good time within the app. No switching screens.
  3. User can create events in their calendar and app will create and populate that event with information about the event that’s been gathered during the call.

I need to integrate with Office 365 because that’s what the customer is using.

From a technical perspective, this meant I needed to be able to

  1. View multiple office 365 calendar
  2. Put data into office 365 calendars

I tried 3 specific paths.

  1. Microsoft APIs
  2. Syncing Outlook with Google and using Google Calendar APIs
  3. Embed the Outlook calendar within the app itself.

Optin 1 - Using Microsoft API
Microsoft has an API for all of their office products. It’s called Microsoft Graph: https://graph.microsoft.io/en-us/

So, I thought this would be easy to create a developer account (https://apps.dev.microsoft.com/Docs/Web), link it to bubble, read about the documentation and get going. Boy was I wrong!

From an in-experienced eye, Microsoft Graph is cluster bomb, after a few hours, I could barely figure out how to create a developer account. I think I was getting close to figuring it out, but I’m not sure.

This might still be the best way to go, but I can’t figure out how to do it myself. I need a little guidance. If anyone has any experience with Microsoft Graph let me know.

Option 2 - Syncing Outlook with Google

I wanted to see if I could solve it a different way, so I thought using google calendar API (Google Calendar  |  Google for Developers) would be easier. I realized I might be able to sync outlook to google calendar to each other and then write new events on google calendar, which would then auto sync to outlook. Google calendars are super easy to embed and I’ve heard the api was either to use as well.

This provided to be a much harder challenge than I thought as well. I thought I would be able to sync them to each other like I do with iCal and like this article suggestions (How to Sync Google Calendar with Outlook - Tech Advisor) but it seemed impossible.

I was able to export each calendar and import it to other and it would share the information that was on the respective calendar, but it would never update the calendars when information was posted on the other one after the import/export had happened.

It’s a little confusing to figure out if it’s possible to do. Even Microsoft’s support community and literature says that this is possible (Import or subscribe to a calendar in Outlook.com or Outlook on the web - Microsoft Support) some forum’s say that it isn’t possible (Redirecting) and some still say you can subscribe but it will only work one way from Google to Outlook, but not from Outlook to Google (See your Google Calendar in Outlook - Microsoft Support) but I did find some 2 way syncing utilities that people have built: Sync Google Calendar with Outlook

Zapier also has Office 365 and Google Calendar integrations, but it appears this only works to write new events each way, it doesn’t subscribe so you can see already existing events.

Option 3 - Embed

After going through the hassle of figuring out if you could sync Outlook and Google Calendar’s together, I realized it would be possible with a slight change in design if I could just embed the Office 365 Calendar into the app directly. It would add one manual step in the app, but it would be that bad.

If I could embed the calendar and make it work, it would be good enough to release in beta, and this would give me enough confidence to continue building the rest of the app while figuring out how to find the “perfect” solution. Instead of an automatic sync, it would require a single copy and past from the user.

Embed the calendar on a website.

This describes how to do it in an iframe with outlook.com: Redirecting

I found the code how to do this. However, I tried the code and it didn’t work.

Here’s how it said to get the correct URL

  1. Sign in to Calendar (http://outlook.live.com)
  2. On the toolbar, click Share
  3. Select the calendar that you want to export/embed.
  4. Click Get a link.
  5. Under Show event details (click Create)
    Note: If step number 5 is already performed, just skip it and click Link to event details
  6. Copy the link that you needed and paste it on the desired program/website.

However, now I can’t get this embed code to work on bubble!?

Conclusion, next steps, and questions.

  1. Based on my thought process, doesn’t anyone see if I’m missing something here? Perhaps Microsoft Graph is really easy and I just went to the wrong place!

  2. Any advice on the embedding code from the calendar from outlook.com? Am I missing something?

  3. Does anyone have any experience with Microsoft graph? If no, where I could find someone to do this? Elance?

I had a great lesson today that I’ll remember for a long time.

When starting a new project with integrations, make sure to research forms for other people before you do this! This is especially true for problems you might be having.

A good lesson for a beginner, you experienced folk know this already :wink:

Someone had written about Bubble + Graph in December: Anyone built an API plugin for Microsoft Graph yet?

1 Like

Update from the past two days.

I’ve been programming for 6 to 10 hours a day. As a side note, I’ve found it interesting how quickly it is to get distracted. In terms of learning, it feels similar to when I built a tiny house this summer in 61 days and needed to learn about carpentry, siding, electrical, plumbing, etc. However, with physical tasks it’s harder to get distracted on a day to day basis.

Here’s a few updates with how things going:

  1. I only have two tables within my database. A “caller” and the caller logs “calls.” The tricky part is that the caller logs a single call at a time, but this call is updated over many pages. So, it took me a little while how to figure out how to constantly change the same record. Also, future pages have to initial content with information that has already been filled out. Bubble has the perfect functionality with this with the initial content field.

  2. I’ve been focusing on getting the front end of the app working with the navigation, major data inputs. I’m about 25% done today, hope to get to 50%+ by the end of today.

  3. I’ve figured out the email system as well. This was pretty easy as well. Right now, it’s sending from bubbls’ platform so the “from” address is a “do not reply” message, but this is not a huge concern right now.

Current problems:
Problem One - Multi-Select Fields

I need to create a multi-select field that is stored in the database and based no what is selected in the multi-fields send out different information in emails. I did create a post about this: Create multi-select input with checkboxes?

Part of the hard part of figuring these things out as a beginner is not knowing the exact words of how to explain what you’re trying to do. This makes it difficult for others to help you.

I’ve found this tricky for a few reasons. The user needs to be able to have a field where many items could be selected. It could be 1, it could be 5, out of a list of 15 or so items. Once this is selected, it needs to be saved in the database, but it also needs to be shown as ‘initial content’ in another page in the app, where the user could change it again.

Once the user confirms these items, they need to be able to send an email with a list of these items AND based on what is in that list, a different set of URLs for each item.

I’ve figured out how to do everything but the last step. The last step seems like I need another table in the database that can be referenced that has the URLs for each specific product that are referenced.

Problem Two - Calendar integration

The ability to directly connect bubble with Microsoft Graph isn’t possible at this point, but I’ve found a few ways around this.

I think the way I’m going to do is have a “view only” Outlook calendar that is page so the user can quickly identify a time that is free. They will take this free time and put it into the app. The app will automatically create an appointment (through the workflow bubble > zapier > outlook 365) when call is finished being logged.

Feel free to let me know if you have any questions.

1 Like

Keep it up :slight_smile:

Follow-alongs are very useful.
a) Motivates people that are following
b) Keeps you accountable and on track with your project.

Best,
Jon

@JonL Truth!

Hey @topherwilliams did you manage to see this through it looked very exciting. Loved the MVP with the power point first as well. Just interested to see if you have any updates?

1 Like