Build an app in Bubble that leverages GPT-3

Below is a recording of the talk I gave last night at Nocode Lisboa demonstrating how to build an app in Bubble.io from scratch that leverages the tech behind OpenAI’s ChatGPT.

GPT-3 is the large language model engine that powers ChatGPT, a service which allows you to ask questions in plain english of an artificial intelligence. Many people are playing around with the ChatGPT web interface raving about it but may not realize that you can query the LLM programmatically from your application using the GPT-3 API. Once you wrap your head around how to do this and the potential that becomes possible when you sequence API requests programmatically, pull down data, save data and then iterate calls on calls on calls… it’s mind-blowing what this can enable.

In this demo we go from a blank slate in Bubble to a fully-functioning parameterized app that writes data to the database in one hour. This demo extends this guy’s tutorial and takes it a step further connecting inputs, sending dynamic params and storing responses in the database. This is the syllabus I used for the talk with all the links to the various tools and below is the transcript from the call if you want to search anything.

There were two questions I was unable to answer definitively during the meeting: 1) can OpenAI be trained on a custom data set like one’s own personal emails and 2) does GPT-3 retain state on subsequent API calls the same way ChatGPT does. I’ve gotten more insight on both questions today:

1) Yes, there’s an API call explained here that allows you to upload a custom “train_file” for fine tuning it to your dataset. I’ve not done this personally but it sounds like the capability exists.
2) Unclear. I ran a simple test by cloning the original API call and then changing the prompt to say “Can you provide more specific versions of each of these questions?” The thought was that would reveal whether it maintains state between subsequent API requests and allows you to drill down based on the results you get from previous prompts.

You can see the result indicates that it’s confused and for some reason keyed in on climate change (not sure what’s going on there). I have heard that it does retain state (presumably by knowing followup requests from the same API key are from the same prompter). But I have yet to be able to confirm this myself.

At any rate, lots to think about and amazing potential here when you combine GPT-3 with Nocode tools like Bubble.

If you’d like to join our next Meetup we welcome remote attendees. Feel free to join here. cheers

Transcript

Sean 0:01
So this will be available, like my goal here basically is to sit like, don’t worry about trying to like note every little thing because there’s probably gonna be stuff. It’s just like minutia that you might miss. So this video will be available afterwards if you want to refer back to anything. And yeah, we are live streaming it. So like don’t say anything that you wouldn’t want out on a YouTube video or whatever. So, before we get started, I want to do Jarrah, she’s here, the marketing director for Lady Yvonne. And yeah, just give you a minute.

Chiara 0:34
Today or people’s money, class, I know we are facing someone who may or may not have kids or some of you may already be aware of what we are. Basically, we are a coding school. So we teach courses in web development and data science number launching also data analytics, and we are exploring different topics besides coding. So that’s why we started also partnering, call to hear meetups, explore different specularity topics are ready to get into where we are interested in sporting goods on an intensive basis, either. Fine, fine, fine, if you have any doubts, or you just would like to know more about this. And yeah, that’s pretty much it. Awesome.

Sean 1:32
And yeah, love icon is very awesome for letting us use the space. Hope to release the Oh, no.

See, hopefully we have the projector that when it’s happened. There it is.

So yeah, that we’re super thankful for them letting us use this space. Sorry. Make it bigger, no. Okay, so what we’re gonna do you guys, let me just give you kind of the quick backdrop for why I think this stuff is so powerful. So it sounds like we have representation. There’s my lovely husband, it’s like we got to Belgium, Russia, Norway, us like Spain, all these countries represented here. It’s awesome to hear all these different backgrounds. Some people who have some experience with Bumble some with not. To me what’s so fantastic about this stuff like and why I started this Meetup is just because I think this is like the single biggest thing is to democratize software development, and to like, bring it and make it accessible to people who aren’t programmers. And to me, that is amazing. Because it means that we can like start building apps, we don’t need to go to school and like hire engineers and like spend all this time, you can literally just dive in and start building apps. And not just like, people with very, like weird domain expertise that might never otherwise build an app are going to have the super like, like interesting domain knowledge to then make a really powerful app. So I think that’s why it’s so powerful. I guess this one struck a nerve, like the GPT stuff is mind blowing, as you’ll see right now. So I think the combination of these two technologies is like peanut butter and chocolate, it’s just bananas, we can do this stuff. So so this is gonna be the syllabus tonight, what we’re going to try to get done in the course of the hour is go from literally zero, I have nothing, I’m going to create the app. Now you’re gonna see everything is a blank slate. And we’re just gonna walk through each of these steps. I will try to remember to highlight where we’re at. So you guys know where we are. And then this link, I will publish on the meetup as a comment, so you can refer back to it. It’s got all the links to the different tools and whatnot. And yeah, with that, I’m gonna kill the light in

Unknown Speaker 3:37
a doctor. So see, hopefully, that’s a little better. And yeah, let’s get going. Okay, so, first thing I’m

Sean 3:48
gonna do, like I said, this is a brand new blank slate here. Let me share my screen for the Zoom

Oops, my broadcasting See, share screen. Okay. So first thing we need to do is

create a new app in bubble here. So you just go to bubble. You can see I’ve got one app here. This is my main thing right now. So I’m gonna create a new blank app. We’ll just call it GPT demo.

That’s already taken. Demo two. There we go.

Unknown Speaker 4:51
And this is setting up the app in the background. Okay,

Sean 4:58
so we don’t need to do We’re just going to get up, skip the Setup Assistant, skip this thing, and just build this stuff from scratch. So the very first thing we need to do is now, we’re going to be using the chat or the GPT three API. And so I’m

Unknown Speaker 5:15
going to show you they’ve got some example apps.

Sean 5:20
And I thought the best way to demonstrate this stuff is literally just use one of the example apps. And we’ll invoke it from within bubble. And just to show how the API works, and then we’ll like, basically make it dynamic. And we’ll parameterize it, we’ll send in things dynamically. So you can see how that works. So I want to point out that there’s a guy who did an awesome tutorial, I’m basically just extending what he did. I’ve linked it here at the bottom. So we’re basically gonna do what he did. But then we’re gonna take it a step further and make it dynamic. We’re gonna make it so the results can be saved to the database, sorry.

Unknown Speaker 5:55
It’s off. fluxes? Yeah,

Sean 6:02
it might be nice shift. I’m not sure if there’s an easy way to turn that off.

Unknown Speaker 6:07
But yeah, hopefully this is good enough. Okay,

Sean 6:10
so yeah, so first thing we need to do, let’s take a look at the example apps. So this is the page, it’s linked in there. A bunch of examples here, you can go and play with this stuff. We’re going to use this one, the very last one. It’s called interview questions. And so the idea here, you can read it. This is the prompt. So shad GPT, just kind of took a full step backwards. This is a large language model that was trained on like, all this content. And you can basically ask it natural language questions. And so this is we’re now going to, we’re now going to look at how to invoke that through the API. And so here’s an example of a prompt that you give it create a list of eight questions for my interview with a science fiction author. And then this is what it returns eight questions, right. So what we’re going to try to do right now is actually pull this off instead of doing it from like the chat GPT interface where you have like the web browser, and you type it in, and then it gives you the answer. We’re going to do that from the bubble

Unknown Speaker 7:13
app. Right.

Sean 7:16
So what we need to do next is to set up bubbles API connector. So this is something that comes with standard in even in the free bubble account, you can go in here to plugins, and you can say add plug in. And it’s a very first thing that pops up API connector, so I’m going to install that

Sean 7:44
and here it is.

Sean 7:45
Okay, so we are now on this step.

Sean 7:49
Okay, so to set this up,

Sean 7:53
I’m gonna first walk through this manually, and I’m gonna do it the hard way. And then I’m gonna show you this super simple shortcut, but I want you to like get kind of the basics of what we’re doing first. So to set this up, we go in here, and we add an API. And we’re going to call this GPT. Three. And just leave authentication blank for now. And we’re going to add an API

Sean 8:16
call. So

Sean 8:21
so let’s take a look at this now. So in pretty much every API that you look at, a REST API is going to typically have documentation that comes with it. And like, look at any API, like any of the major ones, you can think of Facebook and Twitter and Stripe and all these API’s. If you look, you’ll find the documentation. And at some point, they’ll give you something that shows you code examples. And so what we’re going to do, we’re looking at the curl. And this is basically a command line URL. So this is basically telling you what the parameters are that you send to the API. And so let’s just kind of take this apart here, and it’s saying, this is the endpoint. So you’re hitting this URL, and you’re sending this H means it’s a header parameter. So this is one header. This is another header.

Sean 9:14
And these have to do

Sean 9:15
with, like authorization is how you authenticate. It’s like, you have to give it your API key so it knows who you are. Content Type JSON is just what we’re going to be sending it. And then this D means data. And so this block of stuff is a JSON object. Now I’m gonna open this is one of the tools it’s LinkedIn that that thing. This is a JSON, it’s aptly named JSON visual, but it’s a visualizer that allows you to paste in JSON and it’ll give you a nice tabular like visual way to look at it. And it’s just way easier to make sense of stuff. So we’ll, we’ll use this throughout to try and better visualize what we’re doing here. Okay, so we got to start with sending it, telling it what the endpoint is. So let’s grab this out of the curl, we’re going to give that to bubble and we’re going to say, use this endpoint, it’s going to be a, the, the request type is going to be post, don’t worry about like the difference yet. But just know that typically, anytime you’re like sending data to an endpoint, it’s going to be a post, there are some cases where it can be a get, but like, you’re pretty much safe to just do it as post and do like try it out first, and it’s probably gonna work. Okay, so we’re sending JSON data, we’ll leave that alone. And that’s the endpoint. And now what we need to do is tell it who we are. So we’re going to add a header here. And we’re going to say just, we’re stealing these headers from the

Sean 10:50
from the curl thing. So content type,

Sean 10:54
application JSON, so I’m just going to

Sean 11:03
add another one, which is the authorization.

Sean 11:08
And then you see it says bearer open a API key. So we’re going to have to basically,

Sean 11:15
we need to go create an API key. Let me go do that real quick. You do that in.

Sean 11:25
In here, you just go up to API keys, and I need to create a new one.

Sean 11:32
So here is that key.

Sean 11:34
For the people watching this later, this will be just disabled. So don’t try to like use the API key. But we’re going to put that in here. And I’m going to store it in the notepad just because we’re gonna use it later as well.

And we need that to say actually bear

Sean 12:04
is the format actually it isn’t just the API, it’s fair. API.

Sean 12:17
Okay, and it can be private, that’s fine. Alright, so we’ve got the authentication part of this down. So now all we need to do is add the actual

Sean 12:26
JSON. And we’re here now, by the way. Okay, so let’s grab

Sean 12:34
this sample block of JSON. And this is exactly what is up here, it’s just sending this prompt. So this is the, the object we need to send, that has all the parameters is expecting for the prompts. So we’re gonna paste that in here.

Unknown Speaker 12:54
And now we should

Sean 12:55
I think, have everything we need. So let’s just try it out and see if this works.

Sean 13:05
Okay,

Sean 13:05
so this is what it returned. And you can see if we go down here to show rod data, that it’s come back with our question or interview questions here.

Sean 13:16
Right. So I don’t know if you guys can read that. Yeah, those are all the questions.

Sean 13:24
Alright. So so far, so good. We’ve got it now. initialized and bubble can talk to the API. So we’re gonna save it.

Sean 13:32
And, yeah, so any questions so far? Cool. In again,

Sean 13:40
like, there’s some minutia here, refer back to the video in terms of how to set it up if you’re going to try to do this on your own. Okay, now, what I’m going to do is actually just completely delete what we just did, and show you the easy way to do this. So I’m going to delete that API call that we just

Sean 13:56
made. And

Sean 14:00
we’re going to import another call from curl. And then this is what the cheat code is here, you guys, you can just go in the end of this thing.

Sean 14:11
Copy this curl code

and bubble can figure all that

Sean 14:20
out just by pasting it in there once so we just save a bunch of energy by doing that, but we do need to put our API key back in there that’s why

Unknown Speaker 14:29
tested in the notepad

Sean 14:38
and rename it and you have to initialize it again

okay. So there it is. And we are done

Sean 15:02
with that. So we’ve actually done all three of these things showed you the tool, the cheat code. And so now we are building the

Unknown Speaker 15:11
mini app in bubble. So let’s go back.

Sean 15:15
And we’re gonna go to our design canvas here.

Sean 15:19
No, no, no Hi, this, see where to get rid of this? There we go. Okay,

Sean 15:32
so let’s try to display the response here that we got from the API, let’s just do it statically. Let’s not try to make it dynamic yet. But let’s give a what’s called a repeating group. This is a group of list, like items in a list. And we’re going to display the datatype is

Sean 15:52
going to be text.

Sean 15:55
The data source is going to be the API call that we just made.

Sean 16:04
And

Sean 16:06
okay, so I want to change one thing here, we need to make some parameters, though, let me go back.

Sean 16:15
Okay, so

Sean 16:17
in bubble, what you can do is you can actually turn these into parameters just by saying, using like, the greater than, less than symbol, so I’m going to say,

Sean 16:26
number of questions.

Sean 16:34
And that becomes a parameter. Now, we want it to be public. So do check that, and then we’re going to change this profession. And we’re just going to call it profession. And same thing, we’ll make it public. And we’re going to default it to let’s say, five, and

Sean 16:51
librarian.

Sean 16:56
And I’m actually going to pull these headers into what’s called a shared header. Because as we add, if we start adding multiple API calls, we don’t want to have to repeat like putting our key every time What if it changes that we have to go back and change in a bunch of places? So I’m actually going to, I’m going to delete these, I’m going to move them up to

Sean 17:15
a shared header. So let’s make these up here.

Sean 17:21
And the key again, is authorization.

Sean 17:28
What’s that, and then content site. And its application. JSON. Okay, so let’s reinitialize the call.

Sean 17:42
Check to make sure it still works.

Sean 17:46
Here it is, let’s just inspect the raw data. There we go. And you can see that it’s pulled.

Sean 17:53
librarian, I guess librarianship is so Okay, so good. So it works. Let’s save it.

Sean 18:05
And now, when we go back to the canvas, and we look at this

Sean 18:12
API call here, you can see that it’s got the public parameters that we just exposed, and they default to the five and library in there. Okay, so so

Sean 18:21
far, so good. close that out. And what we’re going to do is, let’s look at, let’s look at that,

Sean 18:31
that API request, so you can see what it returned again, so I’m just going to actually reinitialize it.

Sean 18:41
And then let’s inspect that raw data. And I’m gonna grab this

Sean 18:48
JSON object, I’m gonna put that into the visualizer. So you guys can see

Sean 18:58
what this

Sean 18:59
actually looks like here, and I know that text is really small, but here’s the key right here. It’s the choices block. It’s got a text section in that and all the answers are there. So GPT just returns a text, it doesn’t like give you a structured JSON object with all the right elements, like an array of elements just gives you a text blob. So what that means is in bubble, we’re just going to have to make sure that we parse through that text blob and like, separate that out into elements. Good news is bubble makes that pretty easy to do. So, okay, so

Sean 19:32
that’s. So that’s what’s returning here. And if we

Sean 19:38
were to publish this right now, like so, we’re looking for the choices. And we want the because it’s just basically returning one item with all this stuff stuffed into one blob. We’re gonna grab the first item of that list text. And let me just show you if we do this now. So this thing is looking for a list of things. So We have to take that text blob and turn it into a list. So what bubble does is it has this neat function called split by. So we can take that text do split by. And then what we’re looking at is can’t see here, but it’s in the raw, raw code that we pasted. There’s this line delimiter, called like slash n means a new line. And that’s the one thing here that you just kind of have to know. Like, yeah, I guess, Google that to figure out what that is. But knowing that that is the delimiter, you just add that newline here in the text

Sean 20:38
separator. And that should give us what we want.

Sean 20:46
So I’m going to take off the fixed number of rows. And at this point, we should have the data coming to our repeating group for display. So let’s just add in a text element, so we can express it. And we’re gonna say show us the current cells text. And fingers crossed, this should work. I know, there’s one problem with it, but I’ll show you we’ll correct that here in a second.

Sean 21:10
So preview it. And if any luck, this should give us

okay, and you can

Sean 21:24
see, here’s our five responses, but it has two blank lines, like basically two blank elements. And if you were to go back and look at the raw JSON, you’d see that there are actually two, line delimiters with nothing. So that makes sense. So all we need to do to correct that issue is actually to go back in here to the repeating group. And then append here on the split by append a little thing called items from. And so we’ll just do from item three on and that will solve that issue.

Unknown Speaker 22:02
So let it

Sean 22:04
turn again here. And we should have indeed, there it is darkness. Right. So we have now the five responses coming from the API call to chat. GBT displaying in bubble, right? One. Okay, so any questions thus far? I know that there’s some technical details again, refer the video to figure that stuff out if you need help. But conceptually, do you guys understand what we’re doing so far? Cool. Okay, so now let’s get fancier. We’re now here. So we’ve done, we just successfully parsed the response object and populated a repeating group. So now what we’re gonna do is parameterize, that call, so it’s not going to be a static API call anymore, we’re actually going to send it parameters. And we’re gonna get to pick some wacky professions and see what it comes back with. So

Sean 22:55
so let’s do that next.

Sean 22:58
Okay, so how do we do that? What do we need in order to

Sean 23:00
do that? On this page? The input?

Sean 23:06
So let’s add, and we’re going to do two inputs, we’re going to do one that is called How many questions

Sean 23:13
and this is going to be of type

Sean 23:18
integer and it can’t be blank. And then we’re going to do another one called

Sean 23:28
this is going to be profession. Or which profession

Sean 23:39
as we type text, likewise, can’t be empty.

Sean 23:44
And then we need a submit button.

Sean 23:51
And we’ll say, Retrieve

Sean 23:54
Questions. Yep.

Unknown Speaker 24:01
Usually what we’re gonna like,

Unknown Speaker 24:06
when you’re when you’re making a

Unknown Speaker 24:08
forum like this, sometimes they may have some when power is submitted by

Sean 24:18
you can? Yeah, good question. So bubble has this concept of workflows that we’re going to see right now. And anything can trigger a workflow. So you could say, when the field reaches, you know, when the field is defocused, or reaches a certain character number or whatever, like, you can set whatever parameters you want that then trigger that workflow, and the workflow can initiate the form set. So yeah, I’m doing it. Everyone’s pretty familiar with the button interaction model. And now I’m also going to make it so we can reflect get multiple rounds, so Okay, so we got the volume, we got the two inputs, we now need to make this button. Basically refer ask the group. And so I’m actually going to hide this group.

Sean 25:04
By default, the way I’m going to do this is, let’s,

Sean 25:12
let’s say it’s not visible on page load, that this button will basically trigger a workflow.

Sean 25:24
That makes it

Sean 25:25
visible. So show elements. And we’re going to show that repeating group.

Unknown Speaker 25:37
And the other thing that

Sean 25:37
we need to do is change the data source. So make sure that it sends those dynamic parameters that we just made. So the way you do that in battle is it’s got this little blue dynamic data, let’s change that to how many questions the value, and then we’ll change this one to the other text field, which is which profession and its value.

Sean 26:04
Okay, and now,

Sean 26:05
if this works, and what I’m also going to do is go back into the API connector, and I’m going to set these to No, so it doesn’t actually default to anything.

Sean 26:20
And okay, so this, in theory should work. Let’s try it. And you guys notice, like,

Sean 26:28
what’s kind of cool about bubble is you don’t have to click Preview every time you just go back here to the page, it’s open and hit on that top bar. It knows when the page has changed. And so it just makes it super fast for development. But okay, so how many questions do we want to get back?

Unknown Speaker 26:44
How many? No, no,

Sean 26:45
no, it’d be all night. Let’s do six.

Sean 26:51
In what profession? Anyway? Carpenter. All right. What do we do here?

Sean 27:09
So we need to basically hide it. Yeah, we need to basically have it. So you saw it display into the API call from the no data? So basically, we need to put something in the interface that would wait until it populates with responses, but here you go, you can see it got it in the background. What inspired you to become a carpenter? What do you find most rewarding about your job challenges? Okay, here’s, so this, this is illustrating that Chad GPT knows what a carpenter is. So what safety precautions do you take when working with blah, blah, blah. These are right now as fixed. So I need to actually make

Sean 27:44
these I can make them just bigger, or we can change them to the other the what’s it called responsive UI.

Sean 28:01
Let’s do that again. Carpenter.

Sean 28:15
This The other thing is

Sean 28:15
just that this chat, GBT, I think they said they hit 5 million users or no, sorry, they hit a million users in five days, which is unheard of in terms of a new product. And so it’s API. If anyone’s been playing with it. Like, they’ll just be times when it just doesn’t work, because it’s so slammed, and so they throttle. But here we go. We got our six carpenter questions, and you can read them. Yeah, what’s your experience working with different types of wood? So you can see that these are actual questions. These aren’t just like, how did you get into carpentry? What do you like about carpentry? You know, it’s, it’s like actual contextual questions that makes sense for carpentry,

Unknown Speaker 28:54
which is cool.

Sean 29:00
Okay, so that’s good news is we’ve got it working. We’ve got it, invoking the API with dynamic elements. So yeah, so I’d say that’s pretty big when we did that in 30 minutes from zero at that point. So we’re now also going to take it a step further. And I’m going to show you how to then save this data in the database. And this is where, like, I want you to get to like the wheels to start turning like think about what you can do is you chain API calls together and use calls that then use the results of other calls to do stuff, because this is where we get into select some pretty incredible possibilities here. But I’m just gonna show you how we do that. We basically need to create a data table. We’re going to create one called let’s just call it interviews. And we need a field called

Sean 29:53
profession. type text. And let’s do a field called a Questions.

Sean 30:02
And it’s gonna be typed text, and it’s going to be multiple entries. So it’s gonna be a list of texts. And like from a pure data model perspective, this isn’t the best way to do this, like, I’m a more of a purist. So I will like actually do normalize, like split tables out and do relations and whatnot. But just for the purposes of a demo, this is the quickest thing to demonstrate, but it will work. So okay, so now we

Unknown Speaker 30:26
need, let’s just add another button.

Sean 30:29
And we’ll call this one save, save to dB.

Sean 30:38
And, yeah, and so this one, what we’ll do with it will invoke a workflow that creates a thing creates a new thing

Sean 30:50
of type interviews. And we’re going to set the field profession equal to

Sean 30:57
let’s see, the which profession value, and we’ll set the questions equal to

Sean 31:08
or add the list that we just returned in

Sean 31:11
the repeating group? List of texts. Okay. So, to show you,

Sean 31:23
there’s no data in the database right now. There’s zero rows there, let’s run this

Sean 31:28
sucker. And anyone want to make another profession? Golfer maybe?

Okay, what motivated you? Alright, so these are all pretty generic.

Sean 31:59
There’s nothing golf specific in that one, but doesn’t matter. So Alright, so now let’s save it to the database with that button, and it probably makes sense to actually let’s put a little, let’s just put a hidden message here, like we’ll say successfully save.

Sean 32:30
Whatever I mean, we won’t worry about how it looks, but we’re going to hide it to start.

Sean 32:37
And then as a part of that workflow that we made, when it says that thing to the database, let’s learn how to do show elements. And let’s show that text. So we actually have some feedback in the app when it’s succeeded. But as you can see, in the data, I’ll just show you that that element is there. But let’s do another one just to

Unknown Speaker 32:59
prove successful, especially

Unknown Speaker 33:06
when you order, the other one? When the database in degrees, database, but what if, for some reason you didn’t manage the database, but it’s still successfully saved to the database? Or what didn’t go to the next.

Sean 33:29
So if you if you have something to detect, like bubble will just do what it can if it airs out, then unless you have a method of displaying an error, you won’t be any wiser. And so it’s up to you to build the

Unknown Speaker 33:45
person with somebody else.

Sean 33:51
Great question. So I don’t know if you can see this is controls for the zoom. Down here, you guys can see this inspect. So what this is, this is super useful. This is the debugger in, in bubble. And this allows you to see like as things are running, you can inspect certain blocks, you can inspect, like the repeating group and see the sorry, I’m gonna move these guys over here. You can see basically the content of this stuff. And the states and all this debug information and you can also you can hear it, I’ll just do it we can set it to step by step.

Sean 34:37
And then

you can see that it’s gonna actually

Sean 34:45
intercept the actions and it’s gonna let you step through them one at a time. And you can like this is really useful to get like these debug breakpoints and see what’s the status of something before this workflow runs and after it runs. And so it’s super useful for that on your project. For now, obviously, it’s not going to have those controls. You only have this on development, but

Sean 35:03
it’s very useful. Okay. Cool.

Sean 35:08
And then yeah, just to confirm and show that this works, you can see that there’s the, the two rows in the database there. And if we wanted to add a third, let’s see policeman.

Sean 35:27
So far, so good. Any questions? Yeah.

Unknown Speaker 35:37
Thank you provide me some original question.

Unknown Speaker 35:46
Wow, that looks good.

Sean 35:49
Let’s do it more for it. Okay, so let’s, so that where are you? Where does it exist? I’m

Sean 35:55
going to quiz you on this. Where would I change that prompt basically.

Sean 36:06
So I didn’t mean to put you on the spot. But so this is where that prompt exists right now. So we might say, create a list of questions for my interview with a profession, let’s say

Sean 36:19
wacky

Sean 36:19
and scandalous questions, and we do have to reinitialize it. Otherwise bubbles can be working with a cached copy of API. So when we do

Sean 36:31
that we go save it. And then go back here. And yeah, we should be good. And we reload this page. And what do we want to have scandalous questions about? Lawyer I think.

Okay, I mean, these aren’t,

Sean 37:03
like scandalous, I would say, but they are a little Okay. Well, what is the most outrageous thing a client has ever asked you to do? So GPT is trying to be interesting. You know, maybe it’s a it’s like a toned down. Non risque version of GPT. But you get the point like that changes to the prompt will incorporate in

Unknown Speaker 37:23
its Yes.

Sean 37:29
Yeah, you can see the tone of the questions change.

Unknown Speaker 37:34
asking silly questions. But could you for example, wearing like Blackie asked and was pretty changed. Gives you for example, a list of different types of weapons? Yeah.

Sean 37:50
Yeah. Yeah, exactly. So you guys think about this. This is kind of what I want your wheels to start turning. Like, where my mind went on this stuff is like, how do we make some money with this? Like, what is a product that can be traded here immediately? And I think probably within half day, we could create a little app that says chat, GBT. Like let’s just let’s just ask it. I’m going to use the web interface because it’s just the easiest way to ask it questions. But let’s say like, Chad GBT, one of the top 20 profession or top 20 professions by

Sean 38:21
interest what are the top 20 professions by interest okay, it’s been it likes to like see why likes to basically never be wrong. So it will give you some long winded answer. Let’s say what are the top 10 jobs of I don’t know blue collar workers

Sean 39:16
Yeah, so there’s different parameters you can send I’m not like what’s called a prompt engineer Believe it or not, there’s like already a profession emerging around this stuff because it takes some artistry to like prompt it right. But they have these parameters you can send with it if you notice in the the send it in the API connector, you can see temperature, this frequency penalty, so there’s ways of like shaping the response a little bit like temperature I think has to do with like how spicy you want it to be, which maybe we should just set that to like Max spiciness.

Sean 39:49
but yeah, so so you can shape the the responses you get back with some of these parameters. I have not done it enough to really know the boundaries really well. But like you saw here, it just came back with like, construction worker, electrician, plumber, welder, mechanic, carpenter blah, blah. So it just gave us a list of 10 jobs. I was thinking, like, be very trivial to say Chad GBT, give me go look up the top 1000 jobs by, you know, number of job seekers. store that in the database, then write a process that goes and hits every one of those and say, give me the top 20 most commonly asked Job Interview Questions for these positions. And we make an app that gives like the first five away for free and then paywall the next 15. And we can even have it right like, what how do I best prepare for this question as one of the prompts, right? So it’s like we can build this whole, like custom tailored solution to job seekers, and then we SEO the heck out of it. So it basically say like, you know, every one of these pages is indexable, minus the ones behind the paywall, but like you get the point, like, it’s very trivial to start building some really powerful applications. And you could do that you put that together in like a few hours. Right. Yeah. The API in the context of it. So this is an excellent question. So. So what Chak Chak GPT did was it allowed you to basically keep state, and you could go and ask clarifying questions. So if we said on here, it says, like, what? Let me know, what’s a question we can refine this?

Sean 41:26
Like, are there? Are there specific versions of these professions? More specific versions of these professions. Right, so it will,

Sean 41:48
it remembers that it was blue collar, and so it will give you like a more granular, like subcategories of those professions? So the answer is yes, in charge GPT. As long as you maintain, I forget how it knows, like the socket connection or something. But it will in this case, if we continue to, like invoke it from the same API. Like, IP, or I don’t know how they’re maintaining or how they know it’s still the same session. But yes,

Sean 42:14
it does. That answer your question.

Sean 42:22
Okay, um, but yeah, but that was just an idea. Like I’m an app, you can build very quickly and probably make some money with it. Right. So there’s endless ideas like that. It’s limited by creativity at this point. And yeah, hopefully this was mind blowing you guys as it was to me. So I think this is a good pause point. I haven’t been updating this. But basically, yeah, we just committed the results to the database table. We talked about how chaining results together, you can build pretty sophisticated apps. That’s pretty good breakpoint. Does anyone? Anything else you want to cover on this topic? Because I’m going to show you next basically, some some independent standalone tools that can be useful in the debugging if we want to get into that. Well, I can show you this other this, this extension for Google Sheets, it’s also been asked, yeah.

Unknown Speaker 43:13
Always needs

Sean 43:19
to know, yeah. So the way you would do it in bubble is it has this concept of scheduled workflows. And so you can like create a process that goes runs hits API pulls those things down to the database, and then you create what’s called a recursive workflow that will then iterate through each record in the database and do something to it. And you can do it just yet. Yeah, like the entries that we made in here and the database, you could write then a process that would come back here, you can’t do this in the free plan, which this is using right now. But in the paid plan. It has this concept of what’s called backend workflows. Yeah, I can show you in my app has actually paid for mine. But that allows you to schedule things and it’s the equivalent of like a cron job. So you can set up a cron tasks that will hit it repeatedly. And then the way to do like to iterate through rows of something or lists of stuff is using this thing called a recursive workflow. So you invoke it and basically like, do something to the list the stack and then knock one off the stack and then basically give it itself call itself again, and then process the list until there’s zero elements left and then it finishes. Yeah,

Sean 44:36
good question. Okay, well,

Sean 44:40
if there’s no other questions, I figured I’d show you the other two tools that I think are worth looking at. These are just like, like bubble has great like that that thing where we can just import the curl code that makes up parameters like that’s super handy. But if you happen to be not using bubble or if we want to take bubble out by the equation let’s say there’s something going wrong and we need to like troubleshoot it. These are like standalone tools that you should know about. And they basically there’s two of them, because we’re debugging, the sending and the receiving of API requests. And so if you think about like, bubbles over here, chat, GBT is over here. It’s sending an API request, retrieving stuff. And then chat, GBT is giving a response back. So we can emulate that saying, We can pretend we’re bubble basically, and hit that the chat GPT API without using bubble. And that’s we use postman to do that. And if we’re going the other direction, and we’re expecting something, so let’s say we’re bubble and we want to know, we want to not pit chat up to let’s say it’s down or whatever, or it’s doing something that we don’t expect, and we want to see what we’re actually sending it, then that’s when we use this thing called pipe pipe dream. And I’m sure there’s other tools out there, these ones are free and the best ones that I found. So let me just quickly show you each of these what they are. They’re linked in this doc, if you want to download them. But yeah, but let’s look at first let’s look at pipe dream, actually. So the way we do this is we can set up you can think of this like, like setting up a dummy endpoint that we’re gonna hit. And it’s gonna show us exactly what it got. So this is just really useful for debugging. So let’s set up a new request, Bennett’s call, and it’s going to be HTTP requests.

Sean 46:32
Fool HGP. I think that’s all good. And let’s see. Okay, and then we’re gonna take this.

Sean 46:44
And we’re just going to substitute it.

Sean 46:48
We’re gonna go back in here, and

Sean 46:49
we’re just gonna basically change the endpoint. So it’s no longer hitting charges, GBT, we’re gonna hit this thing. And we again have to reinitialize it. But you’ll see when you do

Sean 46:59
this it’s

Sean 47:06
because it’s not expecting response. And it’s not getting one let’s see.

Sean 47:13
Data Type. I’m just gonna say

Sean 47:16
empty for this. I think that’s what it’s complaining about.

Sean 47:21
Initialize

Sean 47:26
so it should get this here, we got a new events, we got two events. Okay, so it twice basically double wasn’t happy because it was expecting a JSON response back. And this thing apparently doesn’t turn return a JSON response. That’s why it was complaining. But you can see

Sean 47:42
here that this shows you what we got. And it’s got the prompts.

Sean 47:49
There’s our list of wacky scandalous questions for my interview with no because we left those blank remember. So this is just it’s showing you literally everything it got and like the headers and everything like this is all the stuff super useful error logging information when you get into weeds? If you do really sophisticated stuff, like these tools are indispensable for like trying to figure out you know, what is that actually sending? How do we intercept that in transit, look at the payload and like get to the bottom of this. So this is on the receive side of it. To show you how it works on the Senate side of it, we use this other thing called postman.

Sean 48:24
And that’s this one.

And so yeah,

Sean 48:36
we basically set this up just kind of the same way that we set up the other one. And so let’s just do that real quick.

Sean 48:44
We got to send it those editors. Oops. Thanks. Okay, so sending its headers, we ascended authorization and it’s kind of got that prefilled nice thing where we don’t have to type everything out. Content type application JSON

we’re going to send it this body of stuff

send raw JSON is to send there. Okay, and it’s type post and we’ll use that At

Sean 50:02
original endpoint, so you can see what we get back from the GPT. API when we do this, oops, keep opening.

Sean 50:16
Okay, so knock on wood, this should

and there’s

Sean 50:32
the response. And I’m going to, again, put this in the

Sean 50:38
visualizer. So you can see it a little better here.

Okay,

Sean 50:50
and so you can see there is basically the same thing that we got back and bubble sim response. Right. But in this case, we’ve basically gotten rid of bubble we just pulled bubble out of the equation entirely, and we’re just using

Sean 51:02
postman. Okay. All right. So

Sean 51:06
if there’s no questions on these tools, I just bring them up. Because it’s kind of like, I like to learn like the fundamentals, like show me the stuff that I need to know about, like to figure stuff out. The last thing I’m gonna show you guys is another just crazy, awesome thing that I found. So this is like, the duct tape of Chachi Beatty, like being able to invoke it from Google Sheets is super useful, just to get scrappy if you need to do something quick, or you’re gonna prototype an app like this, without even getting into bubble.

Sean 51:34
So let’s look at how to do this. And the example that I figured I would show you is let’s just,

Sean 51:44
let’s just take, I don’t know, I’m gonna make some people up, Ben, and Fred, and Joan. And how did we meet Ben? Again, I’m just making this up as a way, like a way to show you how cool the prompting step is. But meeting circumstance, so I’m gonna say, Matt, on

Unknown Speaker 52:06
New Year’s Eve,

Sean 52:09
at a party in Sentra with talks about investments. And he gave me some good

Sean 52:19
advice. And I’m gonna say, Fred, on what 115 In sell bento,

Sean 52:33
and he helps me fix my flat tire. And Jonah must say, on Christmas

Sean 52:48
in Phoenix, and she, and we talked about climate change. She had some good ideas or projects could help.

Sean 53:10
Okay, so I’m just giving it some context of how I met these people. If you guys like, track, you know, meetings and people you want to stay in touch with you just literally like lock stuff in a sheet like this. But now watch this, this is what’s super powerful, is we can invoke this thing. You install this thing called sheet AI, which is this

Sean 53:30
sheet AI the app, and we can invoke it. Any prompt here. From within here, so I’m going to say

Sean 53:44
I am writing follow up emails to people I met recently. We, let’s say please write a five sentence, email to and then let’s say

Sean 54:08
Column A

Sean 54:11
given that we met under these circumstances

Sean 54:20
and column B. Okay. I’m going

Sean 54:28
to say use and informal tone and express eagerness

Sean 54:40
to meet again. So I’m not suggesting that

Sean 54:46
you write all your follow up emails this way because it’s kind of cheating and informal, but like this is just to show you kind of what’s possible here.

Sean 55:00
And there we go.

Sean 55:01
All right, and let’s see did one, let’s just drag it down, and it’ll do the others. And they’ll read these emails, I’m gonna blow it up so you can see it

Sean 55:14
I can make that bigger. There we go. Just like it’s pretty incredible. knows you guys can read us, or read them out for the people

Sean 55:24
in the back. Happy New Year, hope you had a great time of the party and center, I want to thank you again, for the great advice you gave me about investments, I really appreciate it, I would love to meet up again, continue our conversation, I think would be really helpful to hear more of your insights, maybe we could grab a coffee sometime this week in chat. So now imagine sprinkling in here in that front, if I want to say, let’s I’m trying to drive these people to actually sign up to my newsletter. So I’m reading for the most people I met recently,

Sean 55:50
and encouraging them. them to sign up for my newsletter. To stay in touch, they can do so at my blog.

Sean 56:08
my about page. So now let’s make that modification. And this is literally it’s just like this lead funnel basically that you’re automating by doing this

Sean 56:20
rewrites the email. And it says

Sean 56:24
you’d like to stay in touch, you can sign up, blah, blah, blah. So you can get an idea like you can just do this for you know, input 1000 contacts that you just met, how you met them real quick context, and it writes 1000 emails, and you’re now driving some of those people. That’s just your newsletter. Yeah.

Sean 56:40
You go through every email, you learn how you might be.

Sean 56:49
I so don’t quote me on this. But I know for sure you can train it has the ability. Let’s see.

Sean 56:58
The answer is yes. You can train can you train shot GPT? On custom data set?

Sean 57:07
The answer is yes. I found this. Hold on.

Sean 57:21
I know for sure you can. There’s some way of invoking the API and sending it like a body of texts to train it on. I’ll post it. I’ll update that note with it at the bottom because I don’t remember offhand how you do it. But yes, there’s definitely a way to do that. Actually. Yeah, I have the link somewhere. So I like to say real estate here somewhere. Yeah. Sorry. So the last part again, that could be monetized. So if you have Right,

Sean 58:06
exactly. Yeah, the value too. So as these things emerge, you know, for sure that like Google is working on it, and Amazon is probably working on its equivalent, and everyone’s gonna, at some point, these will be commodities. And they’ll converge on the same stuff, because they’re all trained on the internet. So that what he’s saying is that then really the alpha here is in these like siloed data sets that don’t exist publicly that you exclusively have access to and you’re absolutely right. I’m also semi terrified of like training like giving an access to all my email having opened a I just like read all my email that seems kind of weird, but I guess Google already has it right now. So

it’s literally going to be like have your I talked to my AI and like setup launched sometime this week? Right? Like, it’s crazy. So anyways, you guys like the sky’s the limit with this stuff. As you can see, like we can, it’s we’re limited literally by the creativity of the prompts. So now I’m very much interested in like prompt engineering and like what goes into that and how do you like get sophisticated but like, to me learning prompt engineering is kind of like the way back in the day like learning Boolean searches and like constraining by file type and like some of these kind of like, Power User Google techniques like that gave us some superpowers. I think like prompts Engineering, being good at data is kind of like the next frontier. So anyways, any other questions before we wrap? This is really all I have at this point. Yep, are there any ways not only are creating the site or the website on level, but at a certain point in our life wants to be useful anymore? Is there a way to turn the website I’ve created into

Sean 59:58
that with bubble so Yes, so flutter flow apparently does it there’s also another one called did it did it by I believe app diver is another no code thing that’s open source. So actually, your personal front end class takes a lot of time to do it. So if there was like a tool that you can already things are probably way easier and anybody wants to employ other functionalities.

Sean 1:00:30
You can, you can call within bubble you can like, invoke, like it has this rich component library. So like things that you can’t do natively and bubble, there’s someone’s likely already built a component. But you can also like call JavaScript, like I embed a JavaScript snippet on our site. So like, I have a discourse server for our forums. And on the pages of projects, I’ll actually just actually do want to see it in Bumble. Yeah, within normal. If you guys are up for like, you guys have time for one more thing I’m going to show you just stick around for site, check this out, like so I just literally released this yesterday. This is my main thing at this point. It’s a initiative that I started called problematic. The idea here is that I think we can solve like, massive problems, I think we have all the people and resources we need to solve like pretty much every major world problem. And it’s kind of just a coordination issue at this point. So this is the platform that I created to try and start to chip away at that. I just put out the largest feature release that I’ve done to date, it’s two months worth of work. But I basically built an entire trading platform in bubble. And my vision here is that I think by like we do these events, they’re almost like Startup Weekends. The last one we did was in December. And what we did on the last one was gamify it with poker chips and paper cap tables, capitalization tables. And so we basically made like this little mini startup ecosystem in the room, where, you know, we go through this sequence people Ida pitch projects, forming the teams. And then now that we have these teams, they’re almost like little mini startups. And so I brought subject matter experts to the events, and then gave people poker chips that they could then buy services from the subject matter experts. And it created this really cool, like, yeah, like a mini startup ecosystem in that room. So what I’ve since done is basically take that same game mechanics, and I turned it into the application. And I baked all that in here. And so if you wanted to see like, I’ll just show you real quick, what’s possible. So anyone today can now come here and nominate a project. Oops, or know how to get rid of this sucker. Anyone can nominate a project

Sean 1:02:44
loops, what’s going on

Unknown Speaker 1:02:56
and

Sean 1:02:56
I’m actually I have one that I said how to add, so this is perfect. So Esperanza is a group that we worked with in Barcelona, and hunger and homelessness. So I’ve coded all these problems, I’ve coded them against the SDGs, the United Nations Framework. And let’s just go through the process. And this is literally anyone can add nominate one of these.

Sean 1:03:21
So got this here

Sean 1:03:40
so this is just like a blurb, a description, the roles that it needs right now.

Sean 1:03:48
Basically, you need a project manager. And

Sean 1:03:54
a minute so you can like link to an existing YouTube video or you can skip it or you can actually even record video right from within the browser. And this is again one of those plugins in bubble that makes it really crazy. So yeah, so like, test test check 123 This is a test recording of the pitch

Unknown Speaker 1:04:21
and

Sean 1:04:22
this last thing is what I added were now is there a bounty for this project? I’m going to say no on the root node and just submit it. And I’ll show you though. So then on the back end what it looks like.

Sean 1:04:49
Seems this defaults to dead? Let’s go live. Yeah, so this is my app. And if we look at the project’s data Now, you’ll see what we just submitted there. This is it. So you can see the video that we just recorded. Like, test TAs, check 123, this is the dear, so all I would have to do

Sean 1:05:40
and obviously, I’m cheating, I’m using the backend. But at some point, I’m right tooling to then expose this so that this too can be I can have other people doing this. But let’s go ahead and approve it. And what happens when I approve it is it does a number of things. And this is where I can show you what the back end workflows look like. So behind the scenes, it’s gone out. And it’s done. All of this, let me show you.

Sean 1:06:01
So this is

Sean 1:06:06
back in workflows are not initiated by the front, they’re things that get triggered based on conditions. And so this whole sequence of events, I created a entity user for the basically the the company, the project I just created and made a wallet, funded the wallet, does all this stuff, creates a login link notifies the owner. And so basically, it’s like you can automate all this stuff. But the net result of all this is

Sean 1:06:33
now

Sean 1:06:42
this project Esperanza project is now live here in the gallery. And what’s cool about it is it’s now got

Sean 1:06:53
a cap table with the user, let’s see.

Sean 1:07:03
I’m not sure maybe it hasn’t finished creating that one, I’ll show you a different one. But basically like these things now have

Sean 1:07:09
the ability to do bounties.

Sean 1:07:13
And so like here, you can see there’s a cap table, this one has a like every project can have infinite number of subtasks. So it’s like this recursion, where you can basically do nesting. And you can see this one has a bounty on it. And so if I were to say, like claim this bounty, I can basically upload an asset that satisfies the bounty, I’m proposing a trade and then the owner of the project can accept the trace. So we’re basically recreating that those game mechanics that I mentioned, only now it’s completely in software. And so this can be done with remote asynchronous, we can use it at the event. I can create like an admin to make people bring us to their city and throw the events. So there yeah, there’s just a lot of possibilities. But this is all done in bubble.

Sean 1:07:57
Cool. Awesome.

Sean 1:08:00
All right. Well, thanks for sticking around. We did that in basically an hour and hopefully you guys found it useful. So yeah, cheers.

What Bob Ross can teach us about overcoming blank canvas syndrome in software development

“Blank canvas syndrome” is a paralysis you face as a creative when you’re starting a new project. If you’ve ever found yourself staring hopelessly at a blank computer screen at a loss for where to begin then you know how debilitating blank canvas syndrome can be. Fortunately we have a master artisan we can model who taught us through his 30-season TV show how to beat this paralysis.

What would Bob do?

I grew up watching a TV show called “The Joy of Painting with Bob Ross.” Day after mesmerizing day this soft-spoken dude with the huge afro would convert a blank canvas into a work of art over the course of a 30min show. It was hypnotizing to watch him repeatedly actuate his vision out of nothing and step you through his thought process the whole way with his signature gentle, supportive style.

In this post I’m going to do my best to channel Bob Ross and spell out the advice I believe he would give us if he were alive today coaching us on how to build an application from scratch via nocode. The key, as with most layered creative challenges, is to peel it back one layer at a time and use reverse goal planning to start with the end in mind and work in layers moving from your big daunting idea to a fully-functional app. So let’s begin, friend.

Step 1: Crystalize your vision with an aspirational press release

Mental gridlock can originate from a handful of causes but almost always traces back to an ill-defined vision. One of the best exercises for getting crystal clarity on your vision up front is a technique I synthesized from two sources: an Innovation Game called “Remember the Future” and how Amazon does its product development via its “working backwards” methodology.

The gist of the technique is to imagine forward to some future point in time at which you’ve released your shiny new application and are publishing a celebratory press release that touts the benefits to your user. The process of writing that future press release accomplishes a few things, namely:

  1. It gets you thinking in terms of users and benefits and how to message the value proposition to your target audience. If you struggle with this exercise will reveal exactly where the holes are currently in your understanding of the landscape, market, product, etc.
  2. It yields an artifact that will be useful to you later as a north star by which you can make product decisions and ensure a team is all operating on the same page. It’s essentially a roll-up of a bunch of user stories into a concise high-level document which consequently….
  3. Allows you to deconstruct this vision in the next step to yield your constituent user stories.

In terms of the mechanism of how this works, the theory is that by projecting forward and remembering hypothetically backwards of what must have occurred up to that point to make the product possible you use different set of neural circuitry vs. trying to speculate forward from today. I admittedly don’t understand the psychological mechanism behind why this subtly different approach actually works but I can vouch anecdotally that it does work.

Bob Ross Equivalent Advice (BREA): Prep the canvas and get clear on your idea.

Homework: Write your aspirational press release for your proposed application. Bonus if you post it somewhere publicly and use it as a commitment instrument. If you need inspiration read the linked Quora article above. Here is mine for v2 of the Charity Makeover platform.

Step 2: Capture conceptual requirements of the MVP via User Stories

The next step once you have your aspirational press release is to deconstruct that document into user stories that capture the essential requirements of your minimum viable product (MVP).

User stories allow you to express functional requirements while remaining at a conceptual level (ie. not worrying about user experience – UX) and thinking in terms of stakeholders, goals and acceptance criteria. If you’re new to user stories I highly recommend this half-day course on Udemy for getting up to speed on how to use them effectively.

A way to get started here if you’re struggling is to take each of the main benefits you wrote about in your aspirational press release and think about the discreet blocks of functionality that would need to exist for each in order to enable it. You want to restrict your initial user stories to the bare minimum set of functionality necessary to deliver your MVP. Resist the temptation to go overboard in documenting every conceivable function your app might need to perform and keep it constrained to only those stories which directly support the benefits you enumerated in your press release.

You can use any tool to capture these. I’m a fan of Trello as it’s a free tool and allows you to put the user story in the title of each Trello card, any supporting explanation in the description and your acceptance criteria as a checklist on the card. I use a simple 4-column layout of: backlog, MVP, in progress, and completed.

Further explanation of user stories is beyond the scope of this post. The Udemy course referenced above is a fantastic resource for quickly learning the 80/20 essence of how to craft effective user stories.

BREA: Layer in the background and add some fluffy clouds.

Homework: Create a free Trello account and load it up with the user stories that represent the bare minimum functionality of your MVP. Go to sleep and review it the next day. Does it capture all the key functionality? If not add new stories until you cover all the major bases. Is there anything that’s overkill feature-wise for the MVP? If so, move those story cards to the backlog column. Here are my user stories for the v2 Charity Makeover build.

Step 3: Create a low-fidelity wireframe

Once you have your user stories you’re ready to move from the purely conceptual expression of the app into a rough visual sketch of the user experience (UX). The key here is to stay decidedly low-fidelity and not get derailed committing precision error by moving too prematurely to a hi-fi prototype. This is the intermediary step that is most tempting to skip in favor of jumping directly to building the clickable hi-fi mockup. But that’s a mistake that will lead to unnecessary angst.

There are a number of applications like Balsamiq Mockups for doing this part on the computer but I’ve found what works best is to ditch tech, stand in front of a white board and just start sketching screens.

Draw empty containers that mimic the proportions of the target screen resolution of your app (if you’re doing a mobile app, divide the whiteboard into a set of 8 or so rectangles that are roughly the same proportions of a mobile phone screen). Next you’ll work through each of the user stories in your Trello board and sketch out the screens necessary to deliver the functionality that fulfills the acceptance criteria of that story. You’ll find inevitably that some user stories share common screens. The goal is to get complete coverage so that you wind up with the full set of screens that facilitate all stories.

When your finished you’ll have a set of screens that constitute v1 of your application. Woohoo! That should feel good. You’re looking at the bare minimum set of UX you will need to create in order to deliver your app.

BREA: Complete all the major background scene elements with your majestic mountains.

Homework: Sketch out the low-fi wireframe for your application. If you don’t have a whiteboard, do this on a piece of paper (I find a whiteboard for whatever reason yields better flow than sketching on paper for this stage). Don’t erase anything. If you don’t have enough white board real estate to capture it all, move to the next step before you erase any screens. Here are my sketches for the v2 Charity Makeover build.

Step 4: Make a clickable mockup from your wireframe and get user feedback

Hold onto your butt. We’re going to make a quantum leap with a few minutes of work by converting your static whiteboard sketches into an interactive, clickable prototype of your application that you can share online and use to solicit user feedback. And yes, I’m serious this will take you less time than it takes Bob to paint a happy little tree.

Here’s what you do:

  1. Signup for Marvel App and download their iOS or Android mobile app.
  2. Take photos of each panel representing a screen of your application. Frame the photo so the edges are perfectly aligned with the container of the screen.
  3. Follow the prompts in the application to create a new app and add the photos you just took as the screens ol your application.
  4. Draw hotspots on each interactive element (buttons, lists, anything clickable) and link it to the target screen.
  5. Publish the app and copy the link.

You should now have a link that you can share like this one that yields a clickable low-fi prototype you can share with anyone. Testers can leave feedback inline while using the application with the comment feature and give you context-specific input about the UX for each screen.

BREA: Layer in the midground elements and add some happy little trees.

Homework: Use the free Marvel App to convert your whiteboard sketches into a clickable prototype and solicit feedback from at least five prospective users of the application. Now go through each user story Trello card. Can you check off the acceptance criteria in each? Are there any holes where the current prototype fails test coverage? Do not advance to the next step until you have input from at least five people who would be your prospective users and until you can in good conscience check off every single acceptance criteria item. This is the time to validate whether you’re truly building the right thing. It’s easiest to make changes before you move further so take advantage of this time to get the functionality right.

Step 5: Make a high-fidelity clickable mockup

Ok so you’ve validated that there is A) demand for what you’re building B) it’s got the right set of essential functionality and C) the UX makes sense to prospective users. If you failed A, B or C now is the time to make changes. Go back and redo step 4. Bob and I will wait 😉

Assuming there are no obvious structural changes required it’s time to move to a high-fidelity mockup. Depending on what tool you’re using there are different ways of doing this. Figma is great especially if you’ll be working with a team but is likely is overkill if you’re the one doing the implementation. Sketch & Invision are a good combo and good value. If you happen to be planning to implement in a nocode tool like Adalo or AppGyver you can make the clickable hi-fi prototype in the tool itself and just forget about the data model for now and make the UI elements link to their respective target screens. Hat tip to this guy in the Adalo forums for pointing out this time-saving, brilliant technique. Bob Ross would throw some yellow ochre on the canvas and paint him a happy gold star for this trick.

Whatever tool you use, the goal at this stage is to make a clickable prototype that will be as close to a pixel-perfect replica of the final app that you can use for soliciting another round of feedback prior to investing in the final stage of brick-laying. Once you begin work on creating the data model and wiring up screens and design elements it gets significantly harder to make changes. Changes will be inevitable over time but the goal is to get it as right as we can out of the gate to minimize having to redo plumbing work once we’re past mockups and into building the actual guts of the app.

BREA: Layer in the foreground elements.

Homework: Make the clickable hi-fi prototype in whatever tool best suits your situation and gather one final round of user feedback prior to going to implementation. This is your last chance to make any substantive structural changes prior to incurring the inertia of design decisions which are harder to rework.

Step 6: Wire up the database & UI elements and implement the app

If you used Adalo to build your clickable hi-fi prototype this last step is purely a matter of wiring up the database and functionality of each UI element so that the app works. If you made your clickable prototype in a separate prototyping tool like Figma or Invision, there may be a streamlined way to port your prototype into whatever nocode tool you’re using to implement. Bubble for instance has a Figma -> Bubble import feature currently in beta that will bring over your prototype and get you 85% of the way there in building the app in Bubble.

Regardless of how good a job you did soliciting user feedback, there will always be new requirements and changes that come via seeing things from a new vantage point but the more robust feedback you solicit in the prototype stages, the more likely you are to nail the core feature set out of the gate.

The other thing you’ll want to do at this point is to enable whatever you can for tracking how users are interacting with the application. Adalo has MixPanel integration baked in so it’s very simple to just create a MixPanel project and add your token to begin getting granular event data logged from the users who are using the app. Their cohort analysis and funnel analysis tools give you a wealth of insight on where the bottlenecks are and let you see the effect of changes you make over time on your user engagement and retention. Adalo also now has native analytics built into the platform which is nice because there’s no work required to leverage that now, but their analytics lack the sophistication of analysis that’s possible via something like MixPanel.

BREA: Add in all the shadows, highlights and detail.

Homework: It’s time to take your user-validated hi-fi prototype and turn it into a functional application. You should have a good level of confidence at this point that you’re building something your users will want and that should give you the motivational fuel to power through what is likely the most technically complex phase of this process. The good news is if you stall out at this point, there are plenty of developers via platforms like Upwork who you can bring in to complete the implementation. Having a clickable hi-fi prototype makes it much easier to direct a developer than trying to convey the end result you’re aiming for via some more nebulous means. If the app is so ambitious in scope that it makes sense to raise money to fund the development, you’ll have a way easier time approaching investors or running a crowdfunding campaign with a hi-fi prototype than without one.

Conclusion

We’ve covered a lot of ground having navigated through each of the six incremental stages of actuating your vision into a functional application. By breaking this process down into these gated stages we’ve both de-risked the chances of building the wrong thing as well as reduced our likelihood of having to make unnecessary changes later in the process. This also has allowed us to parallelize the marketing aspect as we can create full clickable product demos and begin to spin up the marketing efforts for demand generation without having to wait until development is complete. Lastly, by taking these intermediate steps and reverse goal planning from an aspirational press release, we’ve backed our way into our grand vision with baby steps between each layer enabling us to beat the dreaded blank canvas syndrome at each step of the way.

I hope you find these prescriptive steps useful in actuating whatever your vision is. If you need help with this stuff, Grid7 is launching an exciting program in which we partner with select early-stage founders to help execute your MVP. Sign up below for consideration in that program.

Run your own Adalo-based crowdfunding app to fund your next project


Crowdfunding platforms like Kickstarter and Indiegogo are amazing in how they enable makers to rally early support, de-risk product ideas and fund the development of products which otherwise might not have been possible. Crowdfunding forces you to nail your sales & marketing early and win early supporters thereby helping you avoid the all-too-common trap of building something nobody wants nor needs. My buddy Gabe is running an Indiegogo now which has already raised over $30k for his graphic novel project – Amazing!! For all their benefits though these platforms have some downsides, namely:

  • Fees: Both Kickstarter and Indiegogo take 5% of the funds raised on top of 3-5% for payment processing for a total of 8-10%.
  • Not geared for software projects: These programs seem to be largely aimed towards physical consumer products- gadgets, art projects and such. This means unfortunately that…
  • Distribution benefit is nil: if you’re seeking to fund a software project you’ll likely be using the platform for its crowdfunding functionality but end up being responsible to bring your own audience which means you’re not getting additional reach or exposure of their user base.
  • You have to message backers via their system: which is less ideal than building your own email list.
  • Funding model: In some cases it’s an all-or-nothing funding model. For example with Kickstarter if you set a $10k goal for your campaign and fail to raise that before the completion date, you get none of those funds. That force you to set conservative funding targets but can result in a bunch of work with zero return if you set the goal post too high (Indiegogo is different in that it allows you to keep whatever you raise).
  • You’re subject to their rules: This may not be a huge deal but you’re at the mercy of their guidelines and their approval.

I explored building a Kickstarter or Indiegogo campaign as a way to de-risk and fund the development of the Charity Makeover v2 platform but couldn’t bring myself to pull the trigger for the above reasons. But after researching these platforms I had an epiphany: use nocode itself to build a personal Kickstarter I control and run my campaign via that.

One day later I had built this app.

Design-wise it’s not going to win any awards but it’s a fully-functional crowdfunding system complete with email capture, Stripe integration, progress meter, CRM, donor wall and viral social media share widget on the thank you page. With this app you pay only Stripe fees, get all the emails AND they feed directly into any CRM that has a Zapier integration so you have all the control of being able to kick off whatever drip emails you need to indoctrinate your backers.

Adalo just announced a “cloneable apps” feature which means I can now share this app with you. You can clone it to your own account here.

This gives you an option wherein you have the main benefits of those 3rd party crowdfunding platforms while keeping control of your own destiny and running it under your own Adalo and Stripe accounts. We’ve used it already to raise $1500 towards our $10k goal with this project for the new platform rewrite.

If you use this and derive benefit from it consider becoming one of the first 100 backers for the Charity Makeover launch sponsorship program at whatever level you believe represents the value you received.

How to add a Facebook share widget to your Adalo application


Social media sharing widgets when placed strategically at various points in your application allow you to leverage your happy users as a free marketing channel for getting extra distribution. In this tutorial I’ll show you how you can embed a Facebook share widget within your Adalo application using the webview component.

This tutorial was requested as additional clarification to a brief response I made in the Adalo forums here. It’s also a feature request that has been upvoted 22 times as of this writing.

This video shows the full process start to finish:

Basically the steps are these:

  • Use the sample code from this page of documentation on the Facebook Developer portal and modify the values so they represent the page you’re intending to make sharable.
  • Put that code somewhere where it can be served publicly (either on a webserver you control or in a Amazon S3 bucket set to public).
  • Lastly, create a webview component wherever you want the share button to appear and have it call that .html file.

If you needed to make the widget reusable across multiple pages on your site you could make it a .php file instead of a .html file. This would be useful if you wanted to make it so each user of your app could share a unique tracking link or their own user profile link. The way you would do that would be to echo the REQUEST_URI variable or if you wanted to manually specify those params when calling the code via the webview component you could pass them in via the query string and have the script populate them that way.

This same technique can be used to embed sharing widgets for the other platforms. You can find docs for Twitter and LinkedIn respectively. If you’re intending to add a bunch of these buttons the easiest thing would be to create a ShareThis account, register all the services there and then just reference that in the webview component.

Let me know if you have any questions. And as always if you want a monthly summary of useful tips like these in your email inbox be sure to opt-in for my “Inbox Insights” below. cheers

3 ways to send email from Adalo using Gmail, MixPanel & ActiveCampaign

Adalo makes it easy to send in-app notifications to users but when it comes to sending emails it’s conspicuously deficient. There’s currently no way to natively send an email based on activity within the app.

I’m going to show you today three different approaches for solving this problem, all of which rely upon external systems for sending the email. We’ll look at the pro’s and con’s of each approach and then do a video tutorial that shows how to set it up in each scenario. When we’re finished you’ll have all the information necessary to pick the most appropriate method for circumstances and solve email delivery from within your Adalo app.

The pro’s and con’s of each method

While Adalo doesn’t natively have the ability to send email it does enable different approaches via middleware and its integration with MixPanel. Given the use of middleware there are infinite ways to connect to external systems but I’m going to show you three approaches using Gmail, MixPanel and ActiveCampaign for sending email. Let’s explore each one:

Gmail

Using middleware like Zapier or Integromat it’s possible to invoke an external system like Gmail to send the message.
When to use this approach: If you’re just seeking to send a single email immediately to a user this is likely your best choice.
PROS: It’s free, it’s fast and it will originate from your Gmail account so it should have the same deliverability as a message you would send from Gmail.
CONS: It’s a “dumb” send in that there’s no sophistication of wait timers or conditionals and there’s no unsubscribe link so if your users decide to hit the spam button it’s going to diminish the deliverability of your main email address. You can address this by using an alias with a different sending domain but this is something you should be aware of.
How to set it up:

MixPanel

When to use this approach: This is a good method to use if you’re already making use of MixPanel for your app’s analytics and therefore have key events for your app defined in MixPanel.
PROS: Free up to 1000 tracked users. Their pricing here. MixPanel is a powerful tool for event-based tracking and gives you the ability to analyze funnels, do cohort analysis for retention and slice & dice on any property you’re tracking. Their customer journeys and messaging features allow you to send emails that are triggered when conditions you specify are met. You can build complex sequences that send your users relevant communications based off what they have or haven’t done in your app.
CONS: The customer journeys feature is still in beta and has some quirks to it. The way Adalo passes event data to MixPanel is unintuitive and means you need to write custom formulas to interpret the raw events and do anything useful with them. It’s a bit like sipping through a straw in that you only have access to event data tracked in MixPanel and therefore can’t use data from Adalo collections in your emails.
How to set it up:

ActiveCampaign

When to use this approach: Use if you’re seeking to have an external CRM outside of Adalo tracking your users and automating communications.
PROS: ActiveCampaign is a full CRM with a powerful visual editor for building automations and workflows. Contacts can store data in tags or custom fields and this info can be used to trigger automated messaging, SMS, site messages and anything you can do with a webhook post request.
CONS: Not free. ActiveCampaign pricing here. You end up duplicating contact data outside of Adalo which can lead to data inconsistency and the overhead associated with keeping data in sync.
How to set it up:

Other considerations

We could have used the Custom Actions feature in Adalo to trigger the middleware via web hook and there can be times when that’s desirable. I chose decidedly not to use that approach in this scenario because it would yield a more brittle solution given that we sometimes manually add event attendees via the backend Adalo interface and keying off of a button press in the app would mean the emails would not send in that scenario. In general it’s a good idea to craft your solution in a way that is most resilient in the face of variance and by keying things off the Zapier “new record” trigger it becomes irrelevant how that record got there (whether it came via self-signup in the app or manually via our intervention in the admin).

I didn’t show the Sendgrid approach for sending email because it requires a $100/mo subscription to their PRO plan in order to make it work with Zapier. You could use custom actions in Adalo to call their API directly and do either a single send or initiate a full marketing campaign sequence. This would be yet a fourth way to send email from Adalo but I didn’t go down that rabbit hole for this post.

Conclusion

You now have three different approaches for sending email from within Adalo and can choose the most appropriate method given your circumstances. If you have any questions on the techniques shown above please leave a comment below. If you’d like to receive an occasional email from me teaching methods like these sign up for my email list below. cheers

A 5-step universal framework for better outsourcing

You’re handling a bunch of tasks that you know you should be offloading to a virtual assistant. This daily operational muck will monopolize your time and keep you mired in place until you figure out how to extricate yourself. Welcome to operational quicksand.

Photo credit Wikimedia Commons

You may already know you need to delegate and may have even already attempted to do so through outsourcing but had a bad experience. Or maybe it’s something you’ve put off attempting because you dwell on the number of ways it could go wrong:

  • What if you get a bad apple worker and they screw things up?
  • What if you find a great worker but it turns out that training and supporting that person takes up as much time as executing the tasks yourself?
  • What if you find that unicorn perfect assistant, you’re able to efficiently train the person but then he/she leaves after you’ve invested all that time and you then have to start from scratch?

These are all valid concerns.

The good news is there’s a repeatable playbook you can use to reliably build up a bullpen of low-cost, high-skill outsourced talent that will permanently free you from the operational muck. Forever. And it’s a method you can use regardless of what industry you’re in or what role you’re hiring for.

Before we get there though, let’s first look at how the traditional approach to outsourcing typically goes wrong.

How outsourcing typically fails

The problem with the traditional approach to outsourcing is it’s not a system. This is one of my favorite quotes:

“If you can’t describe what you are doing as a process, you don’t know what you’re doing.” – Edwards Deming.

If you’ve tried and failed with outsourcing before chances are your experience went something roughly like this:

  • You had a specific job you needed done and went to a service like Fiverr or Upwork.
  • You posted a job and got a bajillion applications.
  • Applicant quality was all over the map but you settled on the one that seemingly sounded like the best fit from the heresay of his/her cover letter and skill set.
  • You awarded that person the job.
  • And you got back a result that missed the mark, possibly in a huge way. Maybe communication was difficult or they went dark indefinitely or they just didn’t truly understand the goal of the project and fundamentally botched the outcome.
  • You closed your laptop lid in disgust and wrote off outsourcing as a waste of time and went back to doing all the muck work yourself.

If your experience approximated this trajectory you’re not alone. Sadly this dysfunctional scenario plays out daily on these outsourcing sites despite all the ratings and reviews and technological checks & balances that exist. You know why? Because no amount of technology will solve a problem that’s happening on a different axis. The fundamental failing here comes down to this:

You bet on hope as a strategy instead of betting on a system.

Hope is not a reliable strategy. A system is.

My hero Jermaine Griggs has a brilliant saying: “A SYSTEM is Something You Stick To Emphatically and Methodically.”

Note nowhere does that definition say anything about technology because a system does not equal technology. It can incorporate technology but a system is just the deterministic playbook you execute that ensures you have a process to get you reliably closer to your goal.

A system makes it so you don’t have to bet on hope anymore.

I’m going to now show you the system I use for recruiting, vetting and working with outsourced labor. This methodology works regardless whether you’re outsourcing website development, podcast production, graphic design, lead generation, or baking cakes. It’s axiomatic and predicated on three different patterns that I call the “horse race,” “airlocks” and “fail canary” patterns.

How it works

The gist of this method is to remove the guesswork from recruiting outsourced labor and make it a data-driven game. You will be setting up essentially a mini “horse race” with multiple candidates that will ultimately reveal who your winning horse is empirically. Note: when I refer to “horses” in this context I’m purely using this tangible analogy to drive home the crux of the technique and not seeking to dehumanize outsourced labor nor imply they’re like horses.

Photo credit Pixabay

The “Horse Race” is the controlled experiment which gives you apples-to-apples comparison of potential candidates in a real-world scenario.

“Airlocks” is the method by which you partition and parallelize the work amongst the horses in the race.

And “Fail Canary” is the technique you use to screen out candidates up front who can’t follow instructions.

So without further ado, here are the five steps and how these patterns work together:

  1. PREPARE: Develop a challenge that will test the primary skills you’re hiring for. If you’re hiring a full-stack web developer to build custom functionality for your WordPress site you could enumerate a set of features, sketch up a few screens and talk through it in a video. If you’re hiring a graphic designer to spruce up your site you can craft a redesign project with the goals and constraints defining desired styles, exemplary sites, etc. The point is to create a project that captures a good cross section of the work they will be doing with you over time and that won’t be solvable in two hours but can reveal meaningful progress in that time.
  2. RECRUIT: Create an account on a service like Upwork and post the job requirements. I’m a huge fan of using Trello and filming a Loom video walkthrough for this part (here are a few examples from a couple past mini projects). This is where I typically include a “Fail Canary” to screen out candidates who are incapable of following instructions. In the video up front I tell them I’m running a screening test to hire 1-2 contract workers who will be on retainer long-term with me and will be paid their full hourly rate for their participation in this preliminary screening test. I tell them they need to watch the full video explanation of the project and follow all instructions in order to qualify. Then at the end of the video when I’m done explaining the project requirements I ask them to parrot back their understanding of the project, how they propose to solve it and ask for an extra random bit of information like “what is your favorite food?” Failure to provide an answer to this “fail canary” question disqualifies them from consideration. While that might sound harsh this is your first filtration mechanism for screening down your pool of applicants to those who can follow instructions.

    You can further screen using proxy requirements. Here’s what I mean by that: you may be hiring for a PHP dev role but what are the adjacent skill sets which identify a truly progressive dev who is on top of his/her game, well-rounded and focused on continuous learning? For this scenario I’ll further constrain my pool of applicants by including a tangential skill set like “Angular JS” “Node JS” or “Laravel” because finding the intersection of those two skill sets tells me this is a person who is at the forefront of his/her craft pushing the boundaries and learning complimentary frameworks that separate him/her from the pack.

    Your job now is to canvas the available pool of potential hires and invite the most desirable candidates to fill your recruiting funnel. Your only goal at this stage is to get job applications from qualified candidates who demonstrate they understand the job and at least seem competent in their proposed approach for solving the challenge. Systems like Upwork enable you to search available candidates based on defined skills and quickly invite them to your position. You can copy/paste your invite or personalize it depending on how your funnel for qualified applicants is looking. If your invites are getting declined more often then not, consider taking a few extra seconds to personalize them.

  3. SCREEN: You should now have a pool of qualified candidates and your job from here is to winnow down to the 4-5 ones you think are best. Hopefully they’ve all submitted a cover letter fulfilling your request to summarize their understanding of the project, their proposed approach for addressing the challenges and their fail canary response. And ideally they’ve sent you a video instead of a cover letter. A video can reveal a lot about communication and personality style. You should have at least 10 qualified applicants at this stage. If not, keep recruiting until you do.

    Once you have your 10 applicants evaluate them on the info you have at hand, namely their job application and their past track record of job completion and comments from previous clients. You’re now going to invite the most desirable horses to your horse race and equate the track on time or money so it’s a level, objective playing field. You want to award this project to 4-5 candidates and ask them to complete a fixed chunk of work towards solving it. I like to hire people for 2hrs at their full hourly rate. Alternatively you could pay each for $50 worth of work and let them work however long that gets you as a function of their hourly rate. The key here is to have a common fixed-length racetrack for the horse race so there can be a clear winner. I find it works best to fix on an allotted time block and just pay the different hourly rates. You will be admittedly paying 5x for the same piece of work in this mini-project but you will be gaining an invaluable apples-to-apples comparison of real-world work experience in the process that will help you definitively pick your winning horse tomorrow and avoid weeks of working with the wrong candidate.

    Once you’ve awarded the jobs to your applicants it’s horse race time! Aaaaaand they’re off….

  4. EVALUATE: Depending on the complexity of the role, the job and what you’re testing for you may want to invite each candidate to use whatever project management infrastructure you usually use. The more you can test the candidates in a real-world scenario of how they’ll actually be working with you, the better. I like to invite my applicants as single-channel guests in a Slack channel setup for the project. Encourage questions if anything is unclear. Gauge their performance on the dimensions you care about: how responsive are they? What is the quality of their communication? Are they big-picture-focused and goal oriented or following a spec with blinders on with no eye towards the end goal? If you’re testing collaboration, are they cooperating with other candidates in Slack? How is the quality of the final work product? Did they come back with proposed improvements that indicated they thought deeply about the problem and found a better solution? If so, congrats you’ve found a gem.
  5. AWARD: So who was your winner? Typically the performance graph you see looks something like this:

    Photo credit Pixabay


    You’ll have one that did pretty well, two who gave a very lukewarm performance, one who was running perpendicular to the race track and one who nailed it. Double-down on that lead horse. If you lucked out and had two who nailed it this is how you build a bull-pen of fallbacks and/or scale to parallelize work and have multiple workers going simultaneously. Don’t burn bridges at this point. Respectfully report the results to everyone who won’t be hired back and congratulate your lead horse on crushing it. Open a standing contract with that person and at this point you almost certainly want them as a single-channel Slack guest and in whatever other project management systems you use. I recommend paying slightly over their full hourly rate so that if they get busy they prioritize your jobs. Paying $1/hr extra is peanuts to you but could be a 5% pay increase for them. Also, take time to get to know your contractors, their family situation, what they like to do, when their holidays are. I guarantee 90% of his/her clients don’t do that so this is yet another opportunity to strengthen the relationship at no additional cost and this rapport can prove invaluable later when inevitable misunderstandings arise.

The role of “Airlocks”

We didn’t talk about the “Airlocks” pattern and what that is so let me briefly explain. Airlocks is a term I use for compartmentalizing and ensuring an air gap to your production system so that you can have a safe sandbox for untrusted labor to work without exposing you to security risk.

Photo credit Wallpaperflare

This is situation-specific to your circumstances vs. a blanket one-size-fits-all recommendation but let me give you some examples:

  • If you’re hiring for WordPress development, clone the site and create a separate site sandbox for each developer.
  • If you’re hiring a VA to produce your podcast, create a dummy account for each worker in whatever system you’re using (ie. Anchor.fm).
  • If you’re hiring a graphic designer, give them read-only access to the media assets in Gdrive or Dropbox and give them a private write-enabled sub-folder just for them to save their work product.

As you identify winning horses over time you will obviously need to open the kimono to various systems and grant access. I’ve become a huge fan of the open source team password sharing system Passbolt. There’s a Digital Ocean droplet for it and for $6/mo you can get a really elegant system for granting and revoking access to your key systems with tiered trust levels. Very useful. Obviously change your passwords when you let people go just as you would with a traditional full-time employee.

Antifragility

There’s one last thing we need to talk about: what happens if/when you lose your lead horse? Turnover is a reality with any form of employment and people move on for a variety of reasons. One of the beautiful features of this approach to hiring is it’s particularly resilient in the face of turnover- I would even argue it’s anti-fragile in that the system actually becomes stronger in the face of turnover.

This is my actual documentation for my VA Marko from Macedonia who handles the production of The Nomad Podcast. Marko is amazing and for $50/episode he takes 6hrs of production work off my plate. We have a great relationship but if Marko won the lottery tomorrow I’m guessing he would move on and cease producing my podcast. What then?

The elegance of this approach is that I still have all the scaffolding that I created to recruit and train Marko, the original job posting with the screening challenge, the documentation above and all the Slack history of answering his questions. If I had to find another Marko at this point, the playbook is already written and just needs to be re-run. That’s leverage, that’s efficiency and ultimately that’s peace of mind.

Conclusion

We’ve covered a lot of ground here: the why for outsourcing, the ways it goes off the rails, a bulletproof system for reliably getting and working with the best talent. Once you have the outsourcing superpower you begin to win back your time, escape the operational quick sand and conquer increasingly difficult challenges with less stress because now not only do you have a solution but rather a system that solves. Yay. Proper use of outsourcing is a massive strategic advantage for you and having a bulletproof method for consistently finding the best talent faster than others puts you at an advantage amongst this advantaged subset. Remember if you can’t describe what you’re doing as a process…

If you enjoyed this post join my email list for exclusive tutorials on how to increase your leverage. Happy outsourcing.

Lateral thinking and “Flintstoning” your way around technical problems

Sometimes the best solution to a problem is to step around it.

When was the last time you butted your head against a technical challenge and had several failed attempts to solve it? Maybe it was due to limitations of the platform you’re using or limitations of your own technical ability. Or maybe it was just a really freakin’ hard problem to solve that is solvable via technical means but not ultimately worth the energy for doing so.

Sometimes the best solution isn’t to “beat the problem” so much as to side-step it with a human-powered solution. I’m going to show you a technique for doing this called “Flintstoning” and give you some guidelines for how to identify situations where a low-tech Flintstoned solution might make more sense than tackling the problem head-on.

What is Flintstoning?


Flintstoning is using human power under the hood to solve what would traditionally be a software-based problem. I first heard this term back in 2006 via Cambrian House. It’s typically used in the context of doing things in a decidedly-manual way early on in a startup for the sake of learning a process inside & out before you try to automate it. But it’s valuable in other contexts such as in the case where you have a particularly elusive technical challenge that meets a certain set of criteria.

When does it make sense to Flintstone?

If you can answer yes to these five questions it’s likely that your problem is a good candidate for a Flintstoning-based solution:

  1. problem is particularly “fuzzy”
  2. a human can do the task cheaply
  3. easy to expose an interface
  4. costs of solving via software-powered outweigh value of problem
  5. does not need to be solved in real-time

Let me give you a concrete example of a good Flintstoning solution candidate from a comment on one of my recent YouTube videos:


This guy Tapan is asking if it would be possible to use my hack with browser-based automation for essentially doing periodic garbage collection clearing out unused photos in his database after a certain time period.

Browser-automation really isn’t the right tool for this. He needs the equivalent of a cron process that runs in Adalo and handles this but Adalo currently has no concept of time-based system generated tasks so he’s scratching his head trying to figure out how to automate this garbage collection process.

Rather than engineering a technical solution I suggested he just hire a virtual assistant (VA) to log into his app weekly and clean out the unused images in the database. Given how Adalo works with the ability for two apps to share the same database it’s trivial for him to create a special admin interface for his VA with heavily-restricted permissions that enables that person to handle this without creating any real security risk. With maybe two hours of work between recruiting and tasking the VA and writing a quick visual interface his garbage collection problem is solved with no more head butting. He’ll pay a few dollars each week in VA fees but has saved would could be a couple thousand dollars in dev work and has the problem handled immediately so it’s a massive win.

Considerations and tools

Obviously not every problem lends itself to being solved in this way but by going through your feature backlog and analyzing what’s on your plate dev-wise using the above five questions, you may find you can knock out a bunch of features using this technique in short order.

I have a few VA’s from Upwork on retainer in Slack with standing open hourly contracts and for situations like this I can simply record a Loom video and task them in situations like these. This works well for situations when there’s a bit of context required to understand and complete the task and it’s low-priority and infrequent work that’s required.

For situations where the work is more mindless, 24/7 and needs to scale beyond what one person can handle Amazon offers a service called Mechanical Turk to programmatically task humans with small jobs called HITs (human intelligence tasks). It’s basically like a realtime eBay of grunt work in which you’re farming out this labor via microtransactions of a few pennies from within your app. That’s a topic for another post but a powerful tool to have in your arsenal.

Conclusion

Next time you find yourself going down a rabbit hole of failed technical attempts at solving a problem, use the questions above to determine whether your problem is a good candidate for a Flntstone solution. It’s a win all around with you getting a cheaper/faster/resilient solution in place while also employing someone who is happy to have the work.

In a future post I’ll deconstruct the two main underlying principles of this technique of Flintstoning which are two design patterns I use called “Inversion of Control” and “Airlocks.” I’ll show you how those are like lego blocks that can be used in conjunction with a third I call the “Horserace” pattern to solve hard problems creatively. Be sure to join my email list if you want exclusive content like this around automation, leverage and lateral thinking in your inbox. cheers

UPDATE 6/10/20: This post got some traction on Hacker News yesterday and a few people pointed out in the comments that there is already another name coined for this technique: The Wizard of Oz Paradigm. Name it whatever you like. The important takeaway is that this technique of software-invoked human intervention is a powerful fudge factor to use in your apps that can give you a superpower for solving a class of problems that would otherwise require unjustifiable time & dev resources to solve.

How to save time & frustration by automating repetitive browser-based tasks

Today we’re going to look at how to automate hours of mindless busywork using a free open source piece of software called “Katalon Studio.”

The specific challenge we’re automating is the bulk deletion of records in an Adalo collection. Currently the Adalo tool (as amazing as it is) offers no way to wipe all the records in a collection. Currently your only options are:

  1. Drop and recreate the collection, which then means you have to re-establish all the relational connections to other collections not to mention rewire all the data in the screens that reference that collection.
  2. Go through one by one and delete each record individually.

No bueno either way.

I talked to one gentleman in the Adalo forums who had this issue and he had 5k records to delete.

Unfortunately he tackled it the manual way before I had the chance to document this method. Guess how long that took him?

That’s four hours of mind-numbing work. Computers are meant to work for us, not the other way around. We can do better.

I’m going to show you now a superpower in how you can take a four-hour task like this one, automate it once and solve it forever. So let’s get started.

Browser automation with Katalon Studio

Katalon is an open source piece of unit testing software based on the Selenium project. It’s entirely free to use. It’s typically a tool for QA testing in software applications that allows you to run a set of unit tests on an Android or web application. We’re not going to use it as a testing tool though. We’re just using it to perform the busywork we don’t want to do here.

The easiest way to tinker with Katalon is to get the Katalon Chrome Extension and play with it in your browser.
We need the looping capability which is only present in the desktop version so you’ll need to download and install that before you go on.

Showing it in action

First check out how the end result works in this video:

That’s four hours of your time you win back not to mention in the process you acquire a new superpower which can save you from future scenarios like this…

This video shows you the steps necessary to build the script I used in the above video:

The basic procedural steps here are:

  1. Record the initial automation.
  2. Fix anything that needs to be parameterized as a variable.
  3. Loop just the repetitive portion so you’re not wasting time on unnecessary steps.
  4. Execute the script and go do something fun while your computer is working for you 😉

As I mentioned in the video there are other further optimizations that could be made to the script to make it even more dynamic, like setting the number of loop iterations based on figuring out the record count of the items in the db… but, diminishing returns.

Additional resources and ideas

If you happen to have this exact scenario and just want to delete a bunch of records in Adalo, I put the Katalon Studio deletion script in Github. You can just download it and change the start URL to your Adalo collection and update it with your username/password and it should work without any other modification assuming nothing changes in the Adalo interface between now and then.

And that brings up a good point about this tactic: it’s incredibly powerful to be able to automate anything you could do in a browser but unlike API’s, user interfaces are prone to changing. If Adalo changes anything about how their user interface works it will likely require updating the script to work. It’s somewhat resillient because it uses Xpath and regular expressions for finding elements on the page but this this is something to be aware of about this approach is that it’s inherently brittle based on UI.

The best resource I found for learning the basics of Katalon was this free Udemy course. One of the great things is that there are a ton of people on Upwork who know how to write browser automation scripts so if you don’t have the time or ability to generate this (and you’re comfortable giving access to whatever system you’re using to an outsider) you can hire a freelance engineer from Upwork to write the script for you. Win-win, they make a few bucks and you save a few hours…

I’ll write up in another post the process I use delegating something like this to Upwork. That’s a whole topic unto itself but even that can be automated 😉

I hope this technique saves you time and frustration and frees you up to do something else productive. If you want to receive more awesomeness like this from me be sure to join my email list below. Happy automating.

How to create a star ratings component in Adalo

If you’re building an app in Adalo and seeking to give your users the ability to leave star ratings, it can be confusing because there are infinite ways to skin that cat. How do you handle displaying the star review? Do you modify a numeric field in the listing table? If so how do you track new reviews and prevent gaming of the system by users repeatedly reviewing listings?

I’m going to show you a simple technique for how to accomplish all this and in the process teach some lessons around visibility rules, custom formulas and a key principle of database design.

Questions on how to do this come up quite a bit in the Adalo Forums and it’s one of the more requested components in their feature request system. The technique I’m about to show you is what I used in building a kiva clone for us at Charity Makeover to add progress meter functionality for donations.

In this video I’m going to demonstrate from scratch how to build a simple wine listing directory app with a 5-star review component.

The first video sets everything up from scratch to the point of being able to review the wine:

And this second video shows how to display the star ratings and rating count:

That is the 80/20 of how you do it. Something I forgot to show in the video is you’ll want to use the Round() function in the custom formula for the magic text that generates the star graphic. As it stands now if I were to add one more rating that made the review average something like 3.33333333 it would break the graphic. But to prevent that scenario you just do this:

Leave a comment if you have a question about anything in the videos and if you enjoyed this tutorial you’ll love getting my emails. Sign up below.

Improving the first-time user experience in your Adalo app with smart visual onboarding prompts

Getting your users over the “suck threshold” sooner

You’ve worked hard to build a great app and have done a bunch of work to promote it. You’re getting signups but too many of your new users are fizzling out and leaving before they get their first win in your application. Kathy Sierra calls this getting over the suck threshold:

Image credit Kathy Sierra

You need to improve your first-time user experience but how do you do that? How do you help your users get over the suck threshold faster?

If your app is built in Adalo you can easily create a custom walkthrough overlay that hand-holds your new users through the steps necessary to get them their first win. This overlay will conditionally display custom visual cues to your users in sequence until they take the necessary actions that get them to the point where they’ve accomplished something that makes them want to come back.

What’s different about this approach

You’ve undoubtedly experienced one of those visual walkthroughs when first logging into a new software application.

It likely took the form of a tour that explained the gist of how to get started and maybe it was even interactive, but chances are it was a canned, one-time, linear sequence – essentially a slide show. The technique I’m about to teach you is better because instead of being a one-time canned tour, it’s a smart, persistent set of visual cues that handhold the users through a series of steps until they achieve their first win.

Why this matters

What is the impact of getting more of your users past the suck threshold early on? Well for starters:

  1. More engagement means less churn/attrition and a wider funnel.
  2. Every dollar you spend on advertising or hour you spend on organic traffic promotion yields more return.
  3. New user satisfaction improves and consequently…
  4. Referral rates on your application go up because your users are delighted with the experience.

Boom! For a few minutes of work this technique pays dividends indefinitely unkinking the hose with your new signups. So let’s dig into the nitty gritty of how it works.

How it works

The video below shows you first the front-end experience as a new user so you can see how it works:

And this video shows you the back-end of how to create this experience in Adalo using layers of elements with nested visibility rules:

Pretty cool, right? Try it out with your own app and see what it does to your new user engagement. Post any questions on this technique in a comment below.

This is my first post. I’m trying an experiment for the next month documenting a bunch of useful insights I’ve gleaned from having worked with various nocode tools and platforms for the past few years. If you want to get juicy tips like this one join my list below. And if you found value in this the greatest compliment you can pay is that of a referral or a social share. cheers