Filipe 3:23
So welcome. Welcome to this talk about flutter flow. And we’ll dive right into it. So before introducing to flutter flow, I do want to talk a bit about flutter itself. Okay? The what flutter flow uses behind the scenes to create all the apps. Okay. So to introduce myself, it’s just a bit. So I’m My name is Bahasa. And I work as a Senior flutter developer for now for a couple of years now. And I’m a community organizer of flutter, Bushnell, and Google Maps will bring this. So about flutter flutter is a UI toolkits developed by Google. And it’s not no code not to set I’ll get all talk about flutter flow, the tool of no code to develop flutter apps. But before I want to tell you about flutter, and why is it different? And what’s exciting about flutter? So why is for two different reasons. First of all, of course, flutter is multiplatform coding framework that allows you to code for mobile devices, Android, iOS, and others. Desktop and desktop, I mean, Mac OS, Linux and Windows. And then of course, you can build for web. And to give a bit of context, and why is such a difference. Let’s assume the following that on your left parts, you have the font no result of your app. And the final result is always in the native code of the device. And we really need to think about abstract ways is just the device that has something. And the device can be identified by different interactions with the hardware, right? We have the platform, which has the canvas normally is just a screen, the screen can be a touchscreen. So it has events that can reply to the use of touch touching or other times. And also some services and services are more hardware rights can be GPS location, Bluetooth, sensors, audio, camera, etc, can be a really a lot of things. And what flutter does immediately, what I can tell you about is that flutter draws directly on the screen, and also access the services directly. What does this mean? Well, to the sun a bit better? What does this mean? Let me tell you how other solutions found their way to develop mobile apps, desktop apps in general for devices? Well, what was the solution that people found to develop for multiple devices using one code base? Well, we have the more traditional one, and more more oldest one, that is true, the OEM widgets, I mean, with original original equipment manufacturer, which is, I mean, if you remember, those who remember Nokia, to develop for Nokia, you had to use their SDK to develop for other devices you had, you have to use their SDK to code in their language in their systems, you will restrict it to that. Luckily, for Android and iOS, show up, WhatsApp was this Android SDK and then iOS also SDK where you can develop your own apps. But that means what if you want to code for Android, you had to use their coding language, Java, Kotlin. And iOS, you have to use Objective C Swift, when precisely and this means for each device you had to use, you have your own codes with me, it’s really hard for that. So with this problem, ahead, some solutions appear again, in an abstract way. Some leverage the web view of the screen. So when viewed through HTML and Dom structured, you could draw on the screen by writing some HTML, right. And then you can have a certain bridge that can be in different languages, the most common being JavaScript. And a solution that I can mention that applies this concept is, for example, Cordova, Cordova leverages a lot, it’s just a WebView, you have a language associated to it, you code once, and wherever you can run that WebView, you can run your app. So if you can run the WebView on the mobile device, you can run your app. But this was really not enough, because no one not everyone wants to call the WebView like this. So and the bridge can be different languages, so so that a new social kind of appear, and one that they call a native builds rights, one that leverage the existing OEMs that creates the bridge between the services and the platform. And this can mean that with only one language programming language, the most common again is JavaScript. You called okay code accesses to, to the platform, the service with only one language. But it’s still a bit hard because if the original original equipment manufacturer releases a new SDK, that framework needs to update itself, the codes. And if you want to be on the bleeding edge of the development unit, always tweet, an example that applies this concept is, for example, native scripts, or tools like that, that they call they are multiplatform, but native for natives builds. So this one of solutions, but still this bridging between even that the funnel code is compiled, there’s always this bridge that gives extra burden X layer in between your app so it makes kind of a sluggish and hard to make it performance right. And yes, exactly. PhoneGap we uses Cordova well, so it’s fun WebView. So we leverage that more but the PhoneGap appears to have this one language access to All right under it uses the web view components. So it’s good points, excellent points. One solution also well known is React Native native comes because they really use the OEM widgets from from the devices, final products, right. And with this breach, they gives you the functionality of being reactive to all the coding. So really nice. However, flutter really disregards all of this, even the OEM widgets of the device itself. And it will build directly to native, okay. This is what I have to tell it’s really building directly to native building the screen and drawing on the screen directly. So a bit more about that further on. So what also what makes the flutter so exciting? First of all, it’s a different way of coding, you don’t have to coordinate imperative waits more declarative, you have, we have, what we do is we have a certain state, that can be any information, a string, a context, a list, and then endpoint, whatever. But what you are going to build are these functions, you you write down the rules, constraints, to how to show certain states. And in the end, you have the UI. So with this kind of structuring of the declarative language, with an asterix, but with this way of thinking, it’s really predictive, what you’re going to end up with says like a function, we insert some data, you note what to be the results.

A bit about sort of framework. And this is important because of the our Ys floods are so flexible, and able to build for so many devices. First of all, we have the, let’s call it, the flutter framework, as a whole has two parts. It has this framework parts written in the duct language, that is all the screen area that has our components for UI coding. On top of it, you have the design guidelines for Google the design guideline called material. On the right, you have the Cupertino one built on top of some widgets. And of course, some other companies have built their own design guide systems on the left on top of raises, or even on top of their existing design guidelines. I won’t go much further. But what I want to tell you about is the second part, and this is what really caught my eye with such a framework is flutter has a different component that we call the engine. And when you want to build a flutter app, for a certain device, you leverage the correct engine for that purpose. So if you’re going to build for mobile for Android, or iOS, you will leverage the engine made colloquy with C++ that leverages Skia. It’s just a library on top of OpenGL to draw all the components directly on the screen. So and the new render that is impeller, and then of course, the language itself and the text. But afterwards, if you want to build for the web, well, you leverage a different engine to compile your Dart Dart framework into HTML, CSS, using Canvas, or even now more recently, you can which without changing your code, you can compile your app to web assembly. It’s still in bed, but you can already play with it. It’s in a strong development. But without changing anything. You only need the engine to build the app. So this is quite powerful. So whatever you need to build your flutter app, if there’s correct engine, you can run for it. So I spoke about what about widgets. But what is the widgets? A quick question. These are just some examples of running apps. Can someone tells me Tell me what is not the widget?

Unknown Speaker 14:29
Just throw it up there.

Filipe 14:32
Okay. I will tell you immediately I have been giving some hints. But only the only thing that is not a widget is this Android. But bar that are the buttons for the androids. This toolbar on top, and everything else you see on screen is a widget and it’s a widget and it’s something that is drawn directly by flutter into the screen. So what does this mean? It means that when you see a button like this the start exploring, that can have the same look and feel as a material guideline button, in fact, is the exact clone the exact replication of that button UI in flutter. Two, and is being drawn on the screen directly truth sort of framework. So that’s why when I present you this arrows to the canvas, it won’t go through the OEM widgets, it will draw directly on the screen. So this is really powerful. And that’s why I say this. But it’s the closest thing I can say that flutter is so much more closer to a game engine, in terms of rendering all the components on the screen than any other framework out there to develop apps. And why is that? It’s really because of this because flutter takes care of the full run errands stack draws everything pixel by pixel on the front ends on this apps. So whatever you are, it’s a display, that flutter draws directly the screen there, okay. And taking this into account makes the apps really slow solids smooth. And it’s really noticeable, versus other apps.

Sean 16:19
So taking into account Apple’s recent VisionPro announcement, does that mean that Flutter could target that as an output canvas? And just like that your app can work on their headset?

Filipe 16:40
Well, I don’t know what’s going to be the screen on the let’s let’s let’s assume that? Well, there’s a lot of assumptions we can make for that, because it’s AR now. But assume that some random during the weekend, some random guy crazy draws an engine to run any app on flutter. So on the vision so it can or maybe, I don’t know, there’s a lot of assumptions. I cannot tell you what vision but if the if vision runs apps, iOS apps or something similar? Well, nothing stops by running an iOS app made with flutter. Maybe you don’t have to go so far to create an engine for the vision apple, but maybe just I saw that the run Netflix and things like that might be an app that, well, there’s a lot of assumptions. It’s not so up there. But it’s something possible.

Sean 17:47
Getting mentioned, I don’t care what

your time. Florida is essentially the same thing as Utah.

Filipe 17:56
Yeah. Don’t leverage that leverage the so many language computer languages, they target the machine that they are going to run apps, right. And Google has experience with that with goal and with the most all this language C C++ does that right? They compile to the machine that run so flutter earns letters from that learn saucer form React Native in terms of React Native setting, coding declarative, and applies them to such a framework. So it’s really, I’ve worked with androids native for 10 years, no other platform like this caught my eye. And I went on full 100% unfortunate because of this decisions. Just moving a bit further. So 99% of your time when coding flutter will be on top of here. Okay, just material design. Cupertino, you can interchange and it’s kind of weird for people even to unsend. This is so sort of draws everything on the screen that you can have a Cupertino, look, look and feel app running on Androids. You can have the latest and greatest iOS Cupertino version, the symbol can feel running on iphone four. You know, it’s kind of weird. Why is that because it draws everything on screen just to reiterate on that. And the code itself. It’s quite being declarative is quite easy to understand. And when you read you read it as one go, you don’t go back and forwards let’s go here together. So you will have something centers. That centered of course is as one shelf that is a column. A column you we immediately can see is something vertically and a column can have multiple children rights. And this children one the first one will be a law monster fish on top Oh, we can start measuring that and then one, minimally afterwards, it’s going to be an icon. That is a star with color green. And the final results is going to be always the same. These were the center column and texts are our functions. And then we concatenate with, with the state, in this case, it’s always fixed, it’s always the same text, always the same type of column. So we always end up with this. So we can expect this code to run in every device that flutter runs, is that really the same? I will go through this faster. Since this is a no code. But I just want to give you a heads up why Dart was picked for this for the framework. Because when we are coding, we have always to two mindsets to develop mindset. And then let’s go and deploy. And darts comes with batteries included, which means that when you’re developing, you compile using just in time compilation. And this together with a small virtual machine, that when you’re coding, it will run directly on your if you’re running your app and coding on your device. On a mobile device, or on your mobile on your desktop, what means is any change, you do any small changes to the code, the virtual machine will catch it the just in time compilation ComPilot, the virtual machine will catch only the differences and show it the email. And this is what the flutter team always is selling the hot reloads. And it’s definitely a development experience that it’s really great to advance. And of course, when we deploy, we use the head of time compilation, and, of course, with runtime. And then you can have your app running on the X 88 or arm depending if it’s iOS, or for this example, iOS, or Android. This is how that was picked this in other reasons. And that’s how we can build flutter apps. So just to reiterate, flutter with photo, we have full control of the rendering stack. We have reactive views, this kind of declarative without any bridge, so everything is run on screen. It hasn’t really has great development experience with hot reloads. And it’s past smooth and predictable UI. So fast. And only now only in 2023, the Google team started releasing improvements of performance for flutter, because so far, it was really not necessary. And the main improvements for was for web not for mobile devices. And of course, the big advantages of flutter is that you can deploy for multiple platforms using one code base. So really cool. So just showing some data. This is from statistical.com. They haven’t released a new version yet. We are waiting for 2022. But we can already see that for the ces 2019. They released the version 1.0 and latest to 2018. It’s catching up really fast. And it’s already suppressed, React Native in terms of developments. And just for a little heads up. I do have some noteworthy apps made in flutter with impossible, you can say you can see already that I think of that pity. The app from the government Portuguese government is made with filter. We have the IRS app is made with flutter okay? That’s not that’s the one thing it was built with flutter. Not I think if it’s implemented. Yeah. And of course there are other ones zero nose net Mio, email, parking, curtain, staples, other apps entertainment, super safe. And all of it. This, this will work just catch caught on by the community and reason here. And yet, flutter is a UI toolkit. And this is a sentence from 2019 flutter team, they don’t want talk mentioned that this is a we want to keep but in fact, it is what it is. It’s a you writing kit to build. And our amazing will it be to have all this power of creating apps but without goals. Just drag and drop, multi platform, you know? Yeah. So Whoa, oh, curious common

Ines 25:12
streaming? When we are designing and creating?

Filipe 25:21
Yes, you can you have to be aware of the implementation, maybe there, I’m not sure if there is already a plugin for that. But you can play videos, you can play partial streaming, even with a WebView. But we can talk afterwards in I can pinpoint such you can do anything you can, unless there’s no plugin for that for web or places that you can develop that. So nowadays, I work with a company that is the for recording purposes, you record your call, and then you can review your call on the platform. So it’s a matter of I have some ideas, but we can talk about it afterwards. Okay. Sure.

Sean 26:06
Does Flutter the engine have access to all the same resources that the device has? .

Speaker 1 26:14
Good question. So nowadays, I don’t mention that at all, because there is a package of difference. But in case some years ago, I will say, in case there’s for example, you cannot access the battery of the device, you know, there is no way to connect, Well, nowadays, back then you will use some what we call back functionals. Now we we use FFI Gen, so what does this mean, you can by leveraging the native code of this device barette. So can be a browser can be in Android Kotlin, or iOS, or Swift, you can create some code that on one side of the device exposes the information. And then on side of flutter, you can create a package that wraps that language, and expose that information to flutter. So that’s why when you go to pub dot Dev, that is the repository of the all the packages and libraries of flutter. If you look for battery, let’s look for streaming. There’s not much but there’s a camera that let’s look for a battery. It’s a service. That’s a bit more complicated.

Sean 27:38
So definitely.

Filipe 27:41
So for example, we call this for this library, and you will have access to the battery of the device. Okay. And this will this library will make the battery available for all devices. You notice. Okay.

The environment is? Yeah, so we’ll save that. So

Sean 28:04
when you observe this when you go to publish it, this interesting dependency is included. Yes. So it’s on iOS devices. There are only Native (unintelligible) perspective at the compilation stage, and

Speaker 3 28:27
so so well, it’s

Filipe 28:37
that’s really specific. We’ll talk afterwards, okay. Because there’s a lot of things that you can connect. Wallets going to be. Now I can hide this. So yeah, there’s a solution for if you don’t want to coat flutter. There’s such a flow to the rescue. Flutter flow was started by 2x schools. I mean, what’s not started nowadays by ex Googlers, right. It’s a tool for low code, no code development apps on top of flutter. So immediately, what I said so far regarding flutter applies to this. So when you are building something with flutter flow, you will be able to build your app for multiple devices, says this just to give you a bit more, be a bit more hub to flutter flow. It’s it’s also been pushed by the flutter team itself. You can see mentioning the sort of flow to mentioning in some events, official events of flutter, so it’s being pushed and there’s a cooperation between flutter team and for the floor for sure. Okay. And then A lot of things to say. But some apps already built with flutter. It’s all the one girl. But it seemed Y Combinator 2021, if I’m not mistaken, so it’s an ongoing project that has a really a good starting point. Even it’s a partner. And so what is this sort of flow to nothing better than extending flutter flow by hands on experience? Okay. So I will just start about the UI, I will show you. Again, it’s overly wide, but I’m not a designer. And I just want to implement these things. So immediately, what you see is what you get. You have this app, you can run immediately you have the screens, you can change pages, depending on where you’re at. Okay? For example, this folder is created for authentication. User lenses in this page can enter without login, some buttons here, and when you’re building, or you drag and drop some elements. But here, you can have a cause all this stuff, or, in my experience, it’s easier to just look at the widget tree here and drag any items you wish down here. And it’s not only this basic widgets you have, if you wish, okay, you wish to have a static map, you can simply drag under the place you want, and you will have it positioned in place, I’m in a smaller screen, so it’s a bit harder. So please bear with me. Let me see what static map, I can place it here, I just have to minimize what as soon as I drag a widget like this map, on the right, I have all this. Everything you do in flutter in terms of resizing sizing content, you can set up on the right panel. So you have even the initial position, the the map box API key, you have to include it here. But you can also call it immediately from different different sources, API key, you can increase the sizes you can decrease can change all the valves around on the right hand panel. Okay. But more interesting is not the building part because there are so many social that builds and anywise drag and drops, but are what we call here the connects. So the Connect means that you can connect directly at first is Firebase, but you can connect to other backends as a service or even your own. But I’ll focus on Firebase, it’s really easy to start the project. And they will follow you and help you set up the Firebase console. And then as soon as you have everything configured, everything you were in terms of permissions of accessing that information. Everything regarding Firebase can be handled through Potter flow, even if you wish to manage its content content. So you can add more information to Firebase and assume this is a restaurant app. So this means you can add more data to to the app. So let’s first Xenia special, everything with an egg on top the second.

No. So you can have different ways of connecting the data. Firebase is one of them. But if you wish you can connect using

Sean 34:06
second I need to

Filipe 34:11
let me I’ll get I’ll get there. You’ll see, okay. You can or you postpone or you write that information five days in loaded from five days. Okay. Or you can use other connectors. I don’t know them all. I know that process. But you need to have that information in some way. But I’ll talk a bit further than I mentioned. Again, you besides connecting database directly, it’s quite easy. You can have already some structured data, some classes, some objects. In this case, this is a restaurant app. So I built a schema only for the front Zenia. So just a structure that you can reuse all over the app. Also If you can define a certain state that is used all over the app, here, I use selected state, which means that leverage the data type food item. That means that every time the user picks one first Xenia, it says is the in the state to be reused in many other components. I’ll show it in a bit. And also, of course, when the user picks one for Xenia to order, I will add it to the cart. So at the end user can have the list of existing processing is that they picked moving forward on the left panel on the connecting ports, you can also have, and this is for you, that’s why I was moving forward, you can make calls directly to an endpoint. You can define if it’s a getter, post, whatever, okay? Exactly, you can expose your information in some some way. And then read that information into such a flow, using this yes to nano into your table or read, read post, whatever you want. If you use for example, wherefore has not worked for metal tables, or they expose the data in API’s? Correct me if I’m wrong, yeah, you can read using these API’s. Instead, we’re using databases as a services, you can call them by API’s, API’s to read data or anything else you want. And it’s quite powerful, because you don’t need to move away from photo fraud tests that API, you can make those calls directly on photo flow, okay, you can have like I did here, and then you can handle by Jason paths. But even better is you can grab this, this information and pass it say to that datatype, I said, Okay, it’s going to be food type, food item. And to be more easily used on your app, continuing a bit a bit faster, you can have upload some assets to the app that are used directly in the app or elsewhere. Okay. You can also and here is more technical, of course, if for some reason, there are some business logic that you need to cause. For example, I created a function here to generate an image path I, I created that, okay, leveraging this, it has fools or calculates the total price of a cart in the list. You can call this this, some small snippets of codes and call them in the app itself. Or, if you’re not really proficient, you can create leveraging open AI, of course you had nowadays, there’s something. So for example, what’s a good prompts? filter all my favorites, versus English. Favorite Foods I can run, what will give you is really a snippet of code in the Dart language that then or you edit it yourself, or you wait and wish that it works for you. Maybe it’s not a good point. You’re this. You can copy the function, you can use it directly. But more important is that on the right parts, you need to say what will the app return? What will the app accept? Yes, it’s just to help you out, it will. In my opinion, it’s a good way to start to know you just okay, I don’t know what I’m going to do here and prompt the open AI and work upon the results that gives

us no, no.

That’s a different thing that’s not opening I just generate the code you use the codes

doesn’t matter if where you get the codes. That’s the part the parts maybe that’s a different topic. It’s a way of this because you can use Shut up you can use any other AI tool to improve your code. Or maybe my my opinion is find someone that can build your dysfunction. So when besides this custom functions, you can create also custom widgets. Maybe you can ask flutter developer to code even more precisely widgets for your use case, write custom actions and how to use on your app. This is less use, but it’s important to be aware of. And of course, there’s this theming part of flutter flow, where we can pick if this is based on material and material design. So you can change all the colors you want even generate from Ai extract from an image import colors. And this is going to be the the theme, color theme of today’s use on your app. So anytime you change the primary color, every component that uses that primary color will update accordingly. You can also define your typography, you can add more, if you wish. And here are just create widgets that are really attached to your theme. So that has the background that is primary color. Next is text from the typography and all of those things. Okay. This is the, on my opinion, the best parts of the flow of these connections, and how easy they make it to be used in the photo itself. And opening in the last point, bear with me a bit, I just want to show you that. Besides these integrations, you can of course define the basic components of the app. But here you can live calls in flutter for with your colleagues. This is our specification for Firebase, you can have multiple languages, here setup bills for multiple devices. Of course, given sort of always proprietary, there are some pricing tiers for it. For the free version you can build for Android, iOS, and web. But for other devices, you still have to pay for it. Permissions are assessed. If you’re used to work with iOS, Android or Androids, you need to ask for some permissions. And here is where you set them. But not much. You can work with authentication, we’re supposed to say, Okay, what’s the kind of authentication use Firebase supervised and then what’s the point of entrance, push notifications, you can deploy directly your mobile app using magic, for example, to build for app, the store and even play store. And you can publish your web app easily directly from photophone. Normally, it uses Firebase, but you can configure it otherwise. Now. Besides these integrations, you can integrate with stripe for payments, Braintree revenue, can’t raise a play. It’s not about TV. Streaming, none of this is for you to build your app, if you wish to have a component or sell an item. You can be that or through revenue cuts to have occurred user has by recurrent fee or in app purchase processing purchases, you can leverage this, okay? Just integrations and also other integrations or Algolia, Google Analytics, Firebase config, remote config and all of this, and they are adding them even look mux. Lastly, I haven’t seen this before. So you can have live stream leveraging mux live stream here. So it’s one thing us and answering your question. So maybe flutter cannot implement it. But first of all, already has a way to implemented dabs. Okay, that’s, that was a mouthful. But just to give you a heads up of what’s possible to integrate with flutter flow, it’s and how easy it is to integrate with your app. So just to play around a bit with the screens. What I’m doing here is there’s this fascinating app that has homepage where there’s a list of items, in this case are instances when I’m building the the app itself, okay, I selected to add the list. Okay. And I’m, in fact, I’m going to create a new completely new page and say, Okay, is there any templates ready that’s going to I can use in terms of shots, contents, lists, maybe a list, oh, I have this list of sounds good to me. So I can use with my team, call it, boom, create. I will pick a list from here, this list item, and I’ll say okay, I pick this list item on the left. I go on the right here, I can pick the backend query So add back when query type query collection immediately tells me that Firebase because I have Firebase connected, I can select the menu, list of documents is really what I want and say confirm. Now the list it’s been, it’s making the query to database, I will pick only one item, because the list is just a list of repeated items, right? I will pick the menu item. And I can start saying, Okay, this title is not a title is I will click on this item. And I’ll say, okay, menu documents. So it’s an item with the strat data structure, and it’s going to be the name, confirm, then I pick the subjects, and I’ll do the same menu documents, item. That’s the structure, description. All will go click here, instead of this, I’ll say that is menu item, item. Structure. Price, confirm for the image is a bit more tricky. I might need to use, for example, a custom, a custom function that I created already. And if you so recall, and for that, I can simply go to custom functions, and select immediately. And notice how the other function says the return value doesn’t make sense for what is requested by these widgets. They only make it available due to click the generated image path. That’s what I’m going to pick. Something went wrong type integer, so how to remove it just a good move forward. But this is sort of obvious, even me as a software developer, I find it really nice, because if I make a mistake and try to add widgets on the screen, that makes no sense the need for crashed yet, sort of fall will tell you, if it’s a crashing widget, we’ll say, Wait, you cannot do that, because of this reason that will revert your changes. And even if you have some mistake, it will show you here on top, the issues, some warnings, some errors, and they by clicking on them, you will be forced to the error itself. So it’s quite helpful, really quite helpful. And it lets me let me try to provoke an error by doing. For example, adding a grid view here on top of this is possible. This means I’m trying to add a grid view into the ListView. But it’s changing. They’re asking me Hey, do you want to replace the ListView with the with the grid view, or you want to wrap both of them in a column wrap or in the stack? I can say okay, wrap it in the column. So if we see the Widget Tree whereas the I have this ListView. And then I have where’s my I use a row. So he taught me a column with a row. Nope. My mistake, maybe now, I lost it there, along here. But basically, there is my bad introduction, okay. It’s, I’m trying to make here me some mistakes, and it’s not allowing me. So I tried to add the GridView. But immediately said, Okay, you cannot do that and reverted. So it’s quite helpful. So when you’re building the flutter flow, if there is no errors on top, you can publish with confidence. It works great on runtime, because that’s more more important. You want it to break as fast as possible, and further flow, leverage that. And what else I can show you a bit. Let me switch to a different project.

This job boards, I confess, I built this job boards today, because I wanted to have a more clear example. Then, when you’re ready to run your app, you can simply test it in your device by running this hot or test most. Okay. And since I’m using the free version takes a bit longer, they leverage your time to take the time we want. But with this way you can, okay you can test the flow of your app, you can really test it again against the database. And for that I can even show you the project So I have flutter partial, I have this database running. So now it’s empty without anything inside. Okay? I will open the smells still playing

Let’s wait a bit.

Also know it’s free, there’s a free version. But this happens it’s it’s slower has some limitations of even the number of API’s they have a limit, there are some limitations as soon as you pay it’s much faster and you need to know no and good question. You don’t need to have lots of installs. And that’s a great thing because, well, of course when there’s a new version of software, I have to go to all my projects, update them and see some clashes some conflicts, fix all of them waterflow takes care of it by by for me. Maybe not Google, I don’t know it’s a private company. Maybe we will reply it maybe other competitors. That’s, that’s the business thing that it’s out of my league. If I wish I could predict the future cycle by stock stocks of sorts. So, again, given it’s a free count, we have 11 minutes to use this test mode, that is more than enough time to do use it. Even I already logged in, so I can log in with my accounts.

Again, now, this will show up the screens, I can say okay, so no code job and our hands website, we will not come. There’s this new opportunity for you to create. And this is the app running as soon as and when I go here. Am I correct database. Yep. So it’s immediately added to the Firebase. So immediately added to Firebase Emily’s showing on the screen. And so you can code your app life, see really effects and all of it. And I can tell you already that I have this app published. But I can publish here directly on the app, I can open here. And this is already the web app running. And the no calls job offer. If I long press, I already am deleting the job offer that I can add more like lives happening, happening, happening live. And I didn’t show you. But if I try to create it, it’s really easy to add validations it’s really easy to add forms and inputs and out of those nine yards. So then 80% of the apps we need to build, you can build with further folks, if you need to that extra calls for API extra calls of anything which extra which is specific widgets, you can accomplish that by custom widget custom calls. So it’s quite helpful. And the the website, if I tried to just right, Google, they have validations, too. And here is the message needs to be a valid website. So you can cross that against really foundation. All of this is editable. Of course, this is just me using a simple UI just for demo purposes. Okay, just for demo. Purpose. Create. And it’s always showing here, it’s so easy showing on the demo. This is the Life app deploys, this is the demo than the full look into the into I need to Why is not updating because I deleted just for demo process. Here it is. And even if I delete directly the the documents, it’s not here anymore. Not here. Okay. And that sits five minutes yet. That’s how I wanted to show. And now I have room for we have time for questions should shoot away. Questions. Yep. If you sell more in theater, then you uploaded into the flow. I think that’s a paid version. But what one thing you can do for sure, is you can host your app on GitHub, and always grab ours maintaining the connection between git GitHub and For I think it’s more than $30 per month, once a year, and then there’s the $50 per month. But you need to check on the website itself.

Unknown Speaker 55:17
Finish to

Filipe 55:22
whatever you have finished. Yeah, it’s so you can pay by the years have you better check? Don’t go Don’t take my word. I’m not comfortable in talking about prices. And I’ll because I’m not, I’m not selling this, I’m just showing the tool. And you can check on the footer for website and check out what they have and don’t have this. Big restore. You can release for all of those. Yeah, definitely. And even if, I mean, one thing that caught my eye was really because last year, someone mentioned protocol to me, and they needed some help with the codes. And when they showed me the codes, you can check the code on top right? Always. I mean, you got here you can download, you need to buy this upgrade features. As soon as they show me this code. Okay, it’s not. It’s not. It’s not the best thing ever. Yeah, maybe I’ll write it, but it’s opinionated codes. But one thing’s for sure is the most important thing in code, in my opinion, is it’s readable. Like I mentioned on my talk, during my talk, you know, you could see the center here is the same thing. Okay. You have the scaffold scaffold and the background, floating action button, background color, the app bar, then reactions. Yeah. So this call is quite useful we can. And so what people have been doing is create stack project with such a flow, prepare all the screens, and then you can just pay for one must download the fucose or publish or whatever the time you needs, downloads, share it with, with your developer flirted with development, and go ahead, go. Code is and I haven’t spoke, talk fully with about sort of flow. But it’s, it caught my eye. And it’s something that come.

Well, maybe you can, maybe, maybe, after Yeah, after you download the code, maybe you can. But I haven’t looked into that way. I think it’s if you build an app, that’s my you know, my opinion, if you build an app with flutter flow, stick it to it. If you’re going to pay more, if you have a running app that is on stores and publish everywhere, what is $30 to keep it steady, if as soon as it downloads. Human error is greater because changing the code might lead to errors. It doesn’t have this safe words and elevates. So mic lift wearers. And then you have to deploy build, and the float. And for some reason, there’s a new version, you have to update it yourself. Which photo flow, it’s taking care of my

Sean 58:33
Does it have the capability to support multiple people working in the IDE?

Filipe 58:37
Yes, yes. She must be connected to use the software, when you can do software and settings and work in general. I’m not sure this is the app itself will be on the browser. This is just my web browser. Okay. I haven’t tried it out. Offline. There is. No, as far as I know, there is no offline security. Mode question? That’s a great question. I mean, they this is a web app. Well, I have some ideas of things can be done. But I’m not comfortable in defending for the flow in that regard, saying it’s safer because they use encryption. I cannot tell. But nowadays, I mean, there’s a lot of web apps running thanks to so many tools that the data do you interact with yet stays on your website stays on your browser. So that’s one thing but when it goes out and you publish this topic, because I cannot prove as a kind of security mindset, I cannot tell you that. Flutter flow is not sending analytics or some other data metadata behind the scenes into the data. But of course if you’re not seeing bank using this bank will have money enough to pay for developers software developers property big team to do this. This is supply for Dinoco locals developers people who have no not well proficient in developing and coding to use these kind of tools. So the same thing you say about asked about security PI’s to Bubble applies to any other tool that uses I suppose got the option to get

Sean 1:00:39
elsewhere all your stuff Oh

Filipe 1:00:45
yeah, definitely. I wouldn’t say no to this is

Lucia 1:00:55
so

Filipe 1:01:04
that’s a second. So after effects and all I’m not sure, but it does leverage Rive. What I wanted to show you afterwards, I can show you this one. So you can integrate with the results. Let me just delete this you have besides this custom elements you can have revisits I’ll just look for it right

Sean 1:01:42
reasons

Filipe 1:01:52
for somebody I don’t know if there’s a legal name for it, but the I don’t know missing these days are gonna hurt sec. I’m losing the place here but I know there’s components you can use to leverage rev.com. Is if you know right and you really mentioned Yeah. Yes, this one, so right if you can, so you can leverage Rive download your dimension and use it in in sort of songs about other ways. I’m not sure okay.

You cannot brothers, Africa with Thrive sorry, you can produce epic Apple stores with I’m sorry again this can you produce epic store with APK

no drive is just to develop any machines. Okay. Now, on a sec track they are trying to build a game engine kind of that drive is to build an emotion. This is the pricing of

Sean 1:03:17
all sorts of all

Filipe 1:03:20
just checkouts pro 70 Team 70.

Would question I haven’t tried sounds even bought some haven’t trades with this. You have to give it a try. I haven’t had that. Requirements. Yep.

Unknown Speaker 1:03:48
Now the sense that it’s impossible to record a new machine

Filipe 1:03:56
unfortunately, no way to like push. Well, you can you can clone you can copy. You can try to copy this if you have 50 screens is going to be harder than right. But I didn’t show you this but it also has this kind of storyboards to more visually see all the screens and how they navigate between themselves. Okay, this is cool. While you are going to ask me more questions, I can even start building. We have a bit more time. So just to walk yes, feel free to ask me questions, but I’m going to build in front of us really quickly form for login. Okay, so I’ll simply create an new page. That will be quite feel free to ask me questions.

and go here, I was using this widget tree, it’s easy for me to understand. I’ll show the foundation, the form has a column. The column has a text, then another text input, another text,

Sean 1:05:21
edit text,

Filipe 1:05:24
text fields. So this Hello World is going to be email

Sean 1:05:30
is going to be password, right?

Filipe 1:05:36
I can say this level can be nothing. This level here nothing. I will call this text input on top writes the text fields for email check, we will see it white text feel for us. Save, I will select the column so that I align all the items on the left. Okay, it’s like so I’ll even pick the form say some padding around. Even more on the go, I know there’s a widget called spacer. And in this and the button, the spacer fills up the remaining space so it will push the button here, the button is kind of wonky because I need to scratch the cross axis alignment of the column to be stretch. This button is going to be called login. And since I’m in a form, I select the form first form elements and I can tell Okay, validation on the fields yes automatically validate while the user inputs, there’s going to be something for email. Minimum characters, you can say three and text validator is going to be email for passwords to this requires and no text requires. I forgot about something I can tell that this field is where is it is a password fields, and it will immediately give me that high icon to show or hide the password. Okay, now that I have the form built, here, I can go back I can say this is the login. At all. Login, I will click select Login button. I will go to the actions on top rights with either can add somebody machine here say when the person opens the screen, it will slides rushing for some seconds. In his opposition from here, that sets but the button let’s go to the actions. I just had an animation like like though, I can even add some documentation. This is the button is signing and accessibility in semantics. So and even for SEO purposes, can add two keywords. Okay. More action, no action, I’m sidetracking. But I wanted to show you this, I can add an action that first will validate the form on tap will validate form form one form one I forgot to give the give it the name. This is the form for login. So I forgot the name but no no issues because it has connection with the form save. If I go to the bottom, it already showed me its form login. It won’t break some some local tools I’ve tested before they start breaking when I start changing the name but here is safe. It’s really giving me the confidence to work. But I don’t want my actions I don’t want only to when I click the button to validate the form. No, I want more actions. When I open up this tool, I can Okay validate form. After validating the form show. Just navigate to the landing page again. And besides this, I can add more functions like conditional functions, I can create a lot of more actions around this. I can show you one afterwards. But here I believe it form after it’s ready. I’ll just navigate to the landing page close. And with this, I can run the app again. fix our app some errors merely didn’t allow me to run. Let’s see what’s happening. Routine login page has root login which is already used by login. Interesting. So I’ll click Yeah, I gave it routes in the if you run in a web page, it has those paths. It usually uses this path and CSR already created the page called login. Let me just rename it to Have too. And no more errors. Just one more, which is for configuration login, page shares name login with other more pages. So there’s another page called login and edits.

Sean 1:10:14
In fact, there is. And now I’m

Filipe 1:10:23
I forgot to change the name of the, I will just delete dispatch. Again, this is not the code is you need to know where in the UI to change things that I just deleted the other one. So I can tell you this ready to run, I will just now is okay, when the user clicks on this button, I will simply say, add an action, navigate to and navigate to already shows some pages, and I can select login that sets running. And this was our first I created really a simple login. And this login. Of course, forgot the most important part. I forgot to in the logic to add login to Firebase, I’m just collecting the data. I’m not logging in the user. So login actions validates the form. And then before navigating the user to the not landing page but to the homepage.

are you leveraging Firebase, you can say that the user I’ll show you in a bit, okay. In this way, what I’m doing here is saying that, okay, validate the form, and then do authentication. Firebase authentication, login, there are many options here. Again, using the the mail kind, you can use many other cups types of login, then the email field is going to be that name. I gave the text email fields, he won’t give me other options. Like he knows, by context, what’s the password, so it will give this one and then the password? Let’s close.

Sean 1:12:29
And run. I

Filipe 1:12:33
already have one session running to let me know. And so restaurant app login. I don’t know if I have an account ready. So 123 login, and navigated me to dispatch but I need to isn’t reloads. Meanwhile, I’ll just quickly go to

Sean 1:13:04
a project. Oops, that’s amble.

And I can even say users permissions. I have my I know it’s authentication has clothes. Count, then three as user now I have a user logged in. I can go to my Desmos login. You saw the animation there.

Again, login,

Filipe 1:13:51
validating even show the button immediately with the loading screen. And I mean, if this is the restaurant processing price, I add franzia, it spits out I don’t know this Zenia remove it. I think it’s one plus, I don’t know I didn’t press two, you can have more, more, more and more back pickets, see, and press on the button. And by adding the implemented by the this price is custom function. This is leveraging the state of the app. And I can just edit it at will. Regarding your question about user, you can go to the settings of the app. database. And here this table is the table of users that was generated when I created the project, but you can add one more field saying is Bates is memory. Okay. And the datatype is a Boolean, no. And then in the app or even in Firebase functions, or whatever you want, you can attach it to it. And he can even filter. This is a more powerful way. But when you’re configuring here, the permissions, I’m saying, the menu everyone can read. But you can say, just a specific only authenticated users or no one or only to tag users, and the tag users. This is not the best example. But you can say only show the data to the user that created that elements. So you can really filter out you can make it personal to the user. And only this section of creating the rules for five days for five story itself.

Sean 1:15:52
Yes. Question questions?

Filipe 1:16:01
Never mind I was looking for. Right. Right. And, of course, it’s a we use variables. It auto completed to really sort of flow uses its own state management. one more segment. I’m not going to talk I’m not going to mention state management yet, and that sits I extended that a bit more but I only wanted to show what our to be liquid plugin.

Ines 1:16:32
Think synchronized for a restaurant. I needed the printer right? So that being terminated synchronized. So I think to location and my clients in the restaurant.

Filipe 1:16:48
I don’t know that stuck with it. That’s really broad question. I don’t know how to answer it.

I’ve worked with printers before brother printers. But it’s really specific to the case. It depends if it’s API if it’s connected. Yeah, that’s too specific. Maybe you can just make a POST call to the specific use case. Depends on the software and hardware. Maybe you can connect with us but that’s it.

Sean 0:00
Okay, so the idea here, I mean, I wrote this blog post, I was telling Dylan before he got here, this post actually went viral on Hacker News. I wrote it, maybe two years ago, posted it, and it just was on the front page of Hacker News. And it got retweeted a bunch of times. But basically, this is like the method that I use. It’s a deterministic method. In other words, it’s a playbook that you can run. And it always works. If you follow the steps. It’s just It always works. And I love things that are like, definitive, where it’s just like, follow these steps. And you know, you’re gonna get to like ABCDEFG, you’re gonna get to, like, so. So what this is, it’s really a way of combating when, like blank canvas syndrome was like when you start with nothing, it’s like, Where do I even begin with this process. So this attempts to start at a very high conceptual level that like forget screens, forget interfaces, we get apps, we get all this stuff. And let’s start at the very highest level. So step one, is this idea of the aspirational press release. So this is something that Amazon has, famously has gotten famous for, there’s a book out there called Working backwards, that talks a lot about this. But basically, they do this thing called the PR FAQ. It’s a six page document, they write it up, and it’s a press release within a special format. And so I won’t like go into the details of that. But I can just show you. The here’s an example one. And this is all linked in the blog posts. I’m literally just showing you the blog post right now. But if you look here, this is the one that I wrote about when we were doing charity makeover. And the idea is project yourself forward. So if it’s going to be let’s say, think it’s like a four month Deb project, project yourself forward four months, and write the press release that you want to run at that point, looking backwards and saying, Okay, we’ve just launched this amazing app that we propose to build, you know, here’s who it’s for, here’s why it’s amazing. Here’s why you should go run out and sign up immediately. And what that does is a couple of things, it gets you to really think in terms of the value prop of what you’re offering. And it’s different than like, I don’t know why this works. But it does. The idea of projecting forward and remembering backwards. This is like a famous technique. Actually, I have a friend Luke Coleman, who developed this many years ago, in his book, innovation games, he called it remember the future. And for whatever reason, like if you try to, from today think well, what do we need to do? That doesn’t work. But when you project forward and remember backward, you’re able to somehow like reverse engineer what must have occurred by that point. And so don’t ask me why this works. I’m sure there’s some neuroscience thing to it, but it does work. And so yeah, and so if you want to read this, like, I won’t read the whole thing here. But basically, this is the press release, the one that I wrote up for us short and sweet. And it just says, you know, charity makeover today, unveils honey and hive, mobile app, web applications for enabling knowledge workers, blah, blah, blah. talks a little bit about like, what it’s solving a problem. You know, people crave, what is it we move, we prove the online format was viable, but definitely not ideal. Participants crave the in person collaboration, blah, blah, blah. That’s where the magic is. So it’s just like really like getting your head around, like, what is it we’re actually solving and getting super clear on? Yeah, it’s like an expanded elevator pitch. And having to write it as a press release really makes you think through things more than just being like, Oh, this is what we’re going to do. It’s like no, write the press receipt, like the one you’re gonna run. So okay, so that’s step one, is just like, Forget screens, just write the press release. And the output of that, or the goal of that, again, is clarity, it’s getting very clear on who the stakeholders are, what the value prop is, how do you message this thing, like get all that other way? The Amazon format takes it a little bit further in that they add an FAQ to the end of it. So it’s like a five page press release, and then a one page FAQ. I don’t think you have to go to that extent, I think the press release is sufficient. Okay, so that’s step one. Any question on that? Alright, so step two is now that we got the press release, we have this high level document. The next goal is to convert that into a series of what are called user stories. If you’ve never heard this term before, you can look it up. So user stories are bite sized chunks that kind of do what the press release does only at a more granular level. So imagine if we took that press release, and we were to then write a bunch of little mini press releases that are attempting to do the same thing in terms of like, we have stakeholder that stakeholder needs to achieve something like how do we message that? What is it what’s the value problems? So you’re essentially condensing it like deconstructing the press release into these user stories? Are these little bite sized blocks and I’ll just show you the The example that I used

Unknown Speaker 5:02
here, again, this is all linked. So,

Sean 5:07
so I use Trello. For this, I think it’s a good free tool, I’m sure there’s other ways to do it. But like here’s, they typically follow this format of as a PM, I should have the tools and workflow necessary to recruit screened and approved candidate volunteers for working on my claws. So that’s a good concise statement of as a blank stakeholder, I should be able to accomplish X, Y, and Z, for whatever purpose. And that’s like the formula for writing these things. And then if you want to like go into more detail, you click on it, and you can expand on that, and give a bunch of detail. But really like the idea here is, let’s say we have three different stakeholders in our system, three different types of people. And like, if we can just summarize the big one, like the basic stuff that each one of those needs to accomplish with the most simplest form of our app, then that’s what you’re aiming for with this.

Unknown Speaker 6:00
So yeah. The questions on that one, they’re still going to detail in the cards.

Sean 6:15
Yeah, I mean, so on these I went into, like, Yeah, I’ll go into a little more detail. I’ll break it out. Like they have checklists and stuff. And so you can like express more detail. But you all you’re trying to do here is really capture the essence of what are the main things that people need to accomplish? And you don’t have to think about again, we’re not like thinking about screens at this point. We’re, it’s purely conceptual, like, what are the goals here? What’s the what’s like the testing, when will this app is complete when this person can do X, Y, and Z? You your dice? User? Stories? Sorry? Yeah, yeah, exactly. So you can see how I have it separated out here. So I have MVP is this column, I have like a working now like this is immediately what I’m working on different versions that I already released here, on the right side. And so the goal is, yeah, and basically like, the more left you go, the further in the future we’re looking. So a backlog is just kind of like this catch all when, if you come up with something, it’s like, oh, yeah, we need to remember to like at some point, we got to be able to accomplish this, but it’s not essential, then put it in the backlog.

Unknown Speaker 7:29
So yeah. And

Sean 7:34
ironically, this project is what was the predecessor to problematic. So this whole thing eventually evolved into being problematic. So if we looked at like, today, the user stories, I still use the exact same format. This is the user stories for problematic. And I do it now, like monthly, you can see I started this one in April 2022. So it’s exactly one year into it. And you can basically just see every month, I started a new column. And you can basically see exactly what was accomplished and each month. And what’s what I’m working on. Now. This is everything that needs to happen before our event in two weeks. Like a big kind of catch all for what I want to get done this, you know, it says winter dev push, it’s now spring. But yeah, but same thing you can see it’s all phased out into the you know, like future releases. So anyways, so in summary, user stories, we’re still at a conceptual level, but we’re now breaking it down. And we’re expressing this in kind of a bite sized chunks with stakeholders in mind and like criterion that will satisfy so we can say like, Yes, this is done, because our, you know, whatever are our therapists role needs to be able to book an appointment and make sure no conflicts in their calendar and then deliver that appointment. And, you know, like, whatever it is in your guys’s case, so you haven’t broken out like that a person seeking therapy needs to be able to find a qualified instructor book a time. Right. Okay. All right. So moving on to step three. So now is when we start to think about screens. And this is where you’re going to sketch your first idea of like what the audience to do. Now. I’m like this talks about tatacliq balsalmic is a is a tool for wireframing in a very like low fidelity format. It decidedly looks like a drawing here show you so this is balsamic. It’s probably the very first one that was invented in this space, but it has like this famously, like hand drawn look to it. And the idea is to keep it low phi, you don’t want figma at this stage. You don’t want something that is like Super high fidelity, because there’s an attachment to the outcome, it’s premature to start thinking about, like, colors and styles and like, positioning and all this stuff you really want to keep it’s like very low fi because it keeps you detached and you’re not also invested in a specific,

Unknown Speaker 10:21
like, look.

Sean 10:25
Yeah,

Unknown Speaker 10:26
like before the news story is supposed to show. Yeah.

Sean 10:32
Yeah.

Unknown Speaker 10:35
Either at work?

Sean 10:39
Well, I mean, you guys are already there. So like, I think in your case, because you already have a high fidelity prototype, it could be useful, I would definitely do the press release. Because that takes like, literally, you could do it in an hour and probably have that done and like, well tested and like everyone, it’s it brings a meeting of the minds, especially in a group, when you can all read the same document and be like, do we all believe that this, like, captures everything? Or is there something else that we haven’t thought of, but, you know, let’s get to the point where we can all be happy with this document. And like that does a lot to just bring a meeting of the minds, which is what you want. I wouldn’t go back and like rework it in a low fidelity prototype, given where you guys are at like, you already have a Hi Fi like, pretty nice looking app design. So you just basically skipped over this. Yeah. Yeah, yeah. And I mean, everything we’re looking at could literally be done on paper. And there’s nothing so far that requires tech. But tech, when you use it, it helps. Yeah, like, like Trello is a great tool. I use it all the time. So yeah, so here’s where, like, I used to use balsamic. And frankly, these days, I just use a whiteboard. And I take pictures, I find it easier to stand in front of a whiteboard, even like whiteboard over sketching. For some reason, I find I think better when standing in a whiteboard. But this is where I guess it’s kind of a matter of personal preference, you find what works well for you. But I would suggest not even worrying like there’s other things, there’s this thing called wizard UI, za RD, show you this real quick. So this is another prototyping tool.

So this one actually uses, like, what’s it called OCR or machine learning or something where it’ll it’ll take a drawing and it will try to turn it into a digital representation of it.

Unknown Speaker 12:52
Well, I’m actually I’m

Sean 12:52
not going to go through this one. But this is just something else to be aware of like balsamic, if you want to play with it. It’s well done. But again, I think it’s maybe overkill. Like, you can get mired in tech, I feel like and all we’re trying to come up with at this point is just like sketches of the UI. Okay, so yeah, so output of this one. Let’s see. Look at what I have linked here.

Yeah, so these are literally, you can see my sketches here of the mobile app.

Yeah, so these are literally like whiteboard sketches of what an app could look like.

Unknown Speaker 13:48
So cool.

Sean 13:55
Use whatsoever of light was on my Yeah. Yeah. And it’s like, what’s his name? This Italian guy who’s like a solo founder. He’s still like, a company of one person. I’m pretty sure. Yeah. It’s crazy.

Unknown Speaker 14:10
Okay,

Sean 14:11
alright, so moving on. So let’s say assume that we now have a set of screens. And it’ll basically be like, individual photos of our sketches of what those screens look like. So at this point, here’s where we actually go now and we produce a clickable prototype. And I think this one is gonna blow your mind if you haven’t seen this one. I find this tool so useful. We use it at all our events. I’m gonna see if I can. Yeah, I’m gonna see if I can share my phone screen here

never remember how to do screen mirroring, like

Okay. All right. So this is what the app looks like. It’s called the Marvel.

Unknown Speaker 15:18
Basically,

Sean 15:19
what you do is you use this and you take photos of the screens, and you end up with, you know, a series of these images. And then you just go in and you do this ad link. So you can basically like hotspot anything. And say, I want to link to, you know, that one should link to this.

Unknown Speaker 15:45
Yeah, and let me actually,

Sean 15:47
I guess it doesn’t matter. Like, well, let me just do this. So the Zoom gets it. The recording

Unknown Speaker 16:02
the next slide, right?

Sean 16:05
Yeah, exactly. Exactly. So you guys, the fact that you’re already in figma, like, don’t, don’t retrace to get back to here. But again, if you were to have started at the whiteboard, this is a major jumps and I have to design everything in figma, and then link it all up and whatnot. Like you can do this in literally, the time it takes you to draw the screens, which it took me maybe, I don’t know, 20 minutes to draw the strings, and then borrow them. And then boom, like you can see, in a matter of minutes, we’re like hot like, and these things.

Unknown Speaker 16:39
Make sense? Doesn’t make sense for us as a person.

Unknown Speaker 16:53
Okay, so let’s resolve again, because I feel like I would have thought to the first thing when you think about Yeah,

Sean 17:04
yeah, it’s just premature to jump directly to the user interface, when you haven’t thought through the issues of like, well, who is this for? And what does it really need to do? And like, how do we message this thing? What are those people care about? It? Could it be that we learned something during the course of that conversation and writing that press release that we’re like, you know, oh, wait a minute, our users are blind, like, you know, something random like that, where it’s like, oh, we really need to rethink like, how we’re going to pull this off, given who we’re serving and given these other variables. So it just it honors the process of going through it in this in these series of steps. It unearths the right questions at the right time. And it’s just like the right way to get there.

Unknown Speaker 17:42
Which started there we go.

Sean 17:46
Okay, well, so let me just show you this. So this is what it looks like, once you, you know, you’ve drawn your screens, you take your photos, and now you’ve stitched them together and using the tool. And so then in a matter of minutes, you now have basically this, which is clickable prototype, go through this is literally for a new feature like this is the big thing that I’m working on now for problematic, the bounding the Benefactor model. So it just yeah, it just gives you a very simple way to get to essentially what you got in figment once you’ve done all that work.

Unknown Speaker 18:20
Right. So yeah,

Sean 18:28
yeah, right. So yeah, it’s like high high return low amount of work by reward. Okay, so that is the clickable mock up. And let’s look here. Okay. So high fidelity. So now is when we get to the point where once we’ve got that, and again, the reason for doing this, this in this sequence is we’ve invested very little time we’ve gotten to a clickable prototype, what does the clickable prototype get you? And I’ll just ask them, because if you think you know this, what’s the value of that creating that thing

Unknown Speaker 19:12
that we can share?

Sean 19:17
The thing that I just showed were the screens. And it’s like, it looks like an actual interface. You click on buttons and whatnot, like so I can share that that Marvel app, I give me a link to a URL and I can paste that in WhatsApp and say, Hey, like, send it to five my friends. And so what do you think it was? Like

Unknown Speaker 19:38
not wasting too much time and grading and packing. Getting expensive. Time and recording. Music is pretty hard without like getting invested. Yeah,

Sean 19:52
yeah. But like that is the value of that, right? Like you’re able to solicit input and you’re able to put something in the hands of your users without a lot of energy expended in like patching problems before you go down the wrong rabbit hole is the name of the game. So that is the value of it. Okay, but so now we’ve done that. So now we’re ready, we’ve got something that’s, you know, battle tested, we’ve got some input on it, maybe we’ve changed a few things, we redo the prototype. And now we’ve like gotten to a point where we’re pretty sure like, Okay, this is what needs to be built. So this is where we go to the Hi Fi prototype. And so now this is what you guys are now at is you use a tool like figma. And you’re you’re making like a pixel perfect rendition of what the app is going to look like, at that point. And here’s where there’s like a divergence, and like, this is where I like, so I don’t use fake, like, I’ve used a chosen bubble, like, I’ll show you what bubble looks like. Bubble is the no code platform that I use to build stuff. And what’s neat about it is it’s like, it’s only slightly more difficult than figma to like mock stuff up. And yet, when you mock it up in bubble, you can you can link things together and essentially accomplish the same thing that you can in figma, only when it comes time to then actually build it and put like a database behind it and make workflows and actions and all this stuff, then you’re just layering that in and you’re not having to like go into a brand new system and start from scratch and build it, it’s already kind of built. So you’re then just kind of like, you know, polishing it up and adding those, those features. So yeah, so like, this is the problematic web application here with all the pages here. You can see, this shows you like his article versus know this is this is the no code tool. This is like literally, the live site uses this. If I switch this to live, it’ll it’ll show you like exactly what the website is. But I’m saying like, I can create a clickable like high five prototype in this tool just by dragging all the elements in there and arranging them and making the strings the way I want them to be. But I don’t actually have to do the work of figuring out the data model, like creating the workflows linking all these things like validating data, like doing all the things you have to do to build an app, I don’t have to do any of that to make it a clickable prototype, I can just link in screens together and accomplish that. But the benefit of doing it in this tool instead of doing big money is that I’ve already then done that layout work. And now when it’s time to build it, I just have to wire stuff up.

Unknown Speaker 22:44
Yeah.

Unknown Speaker 22:50
The Peloponnesian

Sean 22:56
War? Well, it depends on how close you are in your first try, right? Like I would say, Don’t timeline with that limited to like, a confidence level. Once you’ve you’ve, you’ve had a lot of the feedback and you see a pattern and everyone’s saying, Yes, I can’t wait to use this. This is perfect. It’s like you’re seeking a level of like product market fit at that point, more than

Unknown Speaker 23:17
anything. Yeah. Raise positive things, and

Sean 23:27
then keep going, at least though you’re having those conversations, and it’s through those conversations. So this is what it’s like, it’s a you need an excuse to have the conversations, it’s almost like everything we’re doing in the low five part is just really an excuse to go get us in front of people to then be able to learn what we need to actually build. So we take our best guess and we save time by not worrying about the high five we do the low phi and then at the point where we’re like pretty confident now it’s like, okay, let’s let’s build a high five because like people, you know, like we’re converging on what we believe to be the right thing, then and only then do we actually switch to making the Hi Fi. But what I’m saying with this kind of tangent here, because this is one way to do it. The other way is to do what you guys didn’t like to do it in figma, which is totally valid as well.

Yeah, exactly like so. So like what I showed with the whiteboard is a conceptual, right, like, you’re not really Yeah, that’s Wi Fi. Anything that’s a sketch or a drawing or a whiteboard. That’s all low five, high five is where we’re like now using buttons and styles and colors and like what it’s going to actually look like

To my knowledge, and maybe this has changed, but like figma is still just a prototyping tool, right? It’s not it doesn’t have like a database behind it. It’s not like Webflow Obama were one of these tools

Unknown Speaker 25:02
in the last, right?

Sean 25:07
It’s still, it’s just a show of what it would look like. Yeah. Yeah. Yeah. And so like, I mean, this is why, like, I was super impressed that you guys as business students took it upon yourselves to actually learn figma and build off prototypes. Like I think that’s really like, laudable that you guys invested that time to learn a tool like that. And Mike was like, my position to you guys is like, well, for not much more work, you could learn something like bubble and then actually be able to deliver the app itself.

Unknown Speaker 25:39
We didn’t know about this, he told us you can finish the PowerPoint, but you can get that far. Right. Yeah.

Unknown Speaker 26:02
I want to do the same again, concise?

Sean 26:06
Yeah, so I’ll do exactly the same thing. I’ll help judge the pitches and get feedback and then do a little talk. And then I think what I’ve learned from this experiment is just in the class, I’ll make the offer to the to everyone the exact same offer will apply. And, you know, we’ll see, we’ll see, hopefully, something, yeah, we can build one or two of these at the next event. That would be amazing. And then it’ll be a good case study, I’ll be able to say, hey, look, here’s what we did it for the last spots. Alright, so we’re on step five, I think. Yeah. Any? Do you have any questions on this? Or good? Okay. Yeah, and by the way, I would just give credit where credit is due, this whole idea of doing it in the no code tool itself, I was using something called $1. Prior to bubble. It’s a little simpler, like, easier learning curve, but less, like more limiting and what you can do with it. And it was literally this forum post where the guy said, Hey, you can just jump right into building, you don’t need to, like prototype it, you can actually prototype it in the NoCo tool, and then just like, like, link it up. So it’s a dummy. It’s not an actual lab, and then like, wire it up once you’re ready. And I just, I just thought that was brilliant. So just want to give credit to this guy, because that’s where I learned it. Okay. All right. So then the last step here is, now we have exactly what like pixel perfect version of what we know needs to be built. We’ve proved that we’ve given that one to the our, our user testing people to confirm that everyone says, Yep, this is it. So now we’re ready to build the actual application. Now, if we’ve done that in figma, like I said, now we need to transfer it to something like a bubble, or you know, or maybe we’re going to build this from scratch and Python or Swift or whatever. But at this point, if you did it, if you did it in bubble, then this is really easy. Now we’re just basically wiring things up to the database. And as far as doing all that, I mean, this is obviously where the bulk of the work is in pulling it off. But then I link to a couple things in here. There’s a good bubble force. See, if it’s not in here, I will link it in the meetup. There was a bubble Udemy course that I found really helpful in just like getting my head around how to do stuff. So but yeah, that’s pretty much the process in a nutshell. As the teacher Yeah.

Unknown Speaker 28:56
Yeah.

Sean 29:00
Good question. I’ve never used it. I know there is or was an import. I’ve seen it actually. Okay, so that document I linked to is no longer there. So that’s not a good sign. But I have seen it in the settings. I think under General. Designing for Here we go. Import from figma. So yeah, so you put in your API key and your figma file ID and then apparently it will import it in at least that way you’re not starting from scratch it will like give you those screens so so yeah, so maybe there is actually no if if that works well then maybe there is no advantage to doing it the way I’m proposing if you guys are already comfortable with figma then just mock it up there and bring it in so cool.

And let’s see anything else? Yeah, I mean, like bubble is a whole thing unto itself. Uh, in terms of developing, I think it’s some point, you just get your hands dirty with it, and like, you guys will definitely figure it out. You know, if you were able to learn figma, like I said, it’s just like a little stretch further to learn this tool. So I’m sure you guys will get it. And if you come to the event, and you win, then you will have most of the work done for you. And then you’ll just be basically like taking over a project that’s already like 80% there. So yeah. So that’s it. For now, if you guys want to look at anything else, while the screen out. I can show you like, the latest thing that I just launched, which I’m super stoked on. This is for problematic. Let me show you this. So like right now I’ve added to these projects. So these two today, food worthy and EchoStar are two of the Nova SB projects. And so you can see these have a video recorded with SDGs. And the problems they attack. Anyone can follow along. It shows you like Project links. So things like the pitch deck, the discord channel that I set up. But this is the newest thing that I added here where it shows the cap table. So it shows who has the tokens. It also shows Well, there’s not going to be any trades here. Let me show you one where there is a trade. So if you look at, for instance, problematic. We look at this one. Yeah.

Yeah. Yep. So you go here, go to Project dash ad. And then you can submit your projects and just like a little wizard, and then you just need to send me like the pitch deck. You can either record the pitch and upload it or like, send me the YouTube URL of it. And then the figma file. And so once I get all those assets, then you just send me or I’ve been with all that you guys

know, ideally, ideally, no, no, you can, I mean, like, literally up until the minute you’re pitching the judges, you guys can change whatever you want. So yeah. But this is also the why like things like Google Slides work really well, or Prezi, where you can just send them the link, and then you can be working and change it all as much as you want. But yeah, but so what I was gonna show you though, is this is what’s really cool. So this is a little widget I made, that will, it will find the trades. So here. So this will show you a history of all the trades in that token. And then if there were any that used like a real currency, which it looks like maybe actually there’s none on the live site here. It’s unversioned test on.

US because what I’m aiming for is at this next event, the way that judging is going to work. That’s really cool. So we proved this concept at the last one where none of this software existed. We use poker chips, and like paper cap tables in the room. And we tracked all that. So we had like people selling services and building logos and doing stuff and they’re getting poker chips, and they’re buying into projects. And so we’re kind of manually doing all this stuff. It now the capability now exists in the app itself to track all this. And the idea is that the judges, instead of picking a winner, we’ll just make silent offers to the projects. And then you guys will have like three different offers, and you’ll just accept the best one, and then that will set a valuation of the stock of that project. And so the person with the highest stock valuation wins. Yeah. Yeah, so their impact investors, five different people, it’s 100 Women Irish, Domingo, schemata, Irish,

Unknown Speaker 34:19
Andrei Marquette, John Gale. And

Sean 34:26
Rita backed out. So I think we got for right now.

Unknown Speaker 34:31
So it’s gonna be days. Right. So I think it’s time to get in great shape here. And then everyone

Sean 34:43
will so you guys are like so far ahead of the curve. The fact that you already have a pitch deck and a figma prototype, like that’s kind of the end state of this event. So user like starting where you kind of already have all that stuff. But what you can use the event to do is like there’s going to be a lot of experts there. So I bring subject matter experts. If you can use those people and like pay him some small amount of tokens in a project and have them give you their input and craft or business model or whatever. So refine things work on the pitch, we have a session from three to 4pm where you’re actually on Zoom calls with people getting like customer feedback interviews. So you’re basically gonna have access to like six people 10 minute 610 minute interviews with different people. And so yeah, it’s just like a way to cram a lot of stuff into a day and surround you with experts and then you get a chance to win capital at the end of it. There are you alright, so I will stop the recording.

Sean 0:01
Okay, yeah. So we will go ahead and get started. I’m assuming people will kind of filter in here. We got to think 32 RSVPs. So, word

I’m sorry. You said your name is Jody, right?

Jodeé 0:20
Sure day, Joe day. Okay, so just let you guys know what this is. This is like a totally free group and participation is free. But these are our friends that has been project they run a nonprofit and so I’m gonna give her the stage like, if you feel so compelled to get value out of this, we recommend just donating like 10 euros or something to their project. So God if I will give you the stage here if you want to tell people what Lisbon project is. Okay. Thank you so much, Sean. And thank you so much for having

us as a project, be able to present who we are and being willing to have a present. Yeah, what the heart is evangelism project. So that my name is Jody, I’m the community life director at the Lisbon project. And we are a very young organization, we are based in Lisbon in Portugal. We’ve been around for five years. And our our main aim is to help build a community for migrants and refugees to integrate into, into the city of Lisbon. We have three main pillars, which help us to reach this goal, which is inclusion, empowerment, and mobilization, we believe that through inclusion, we can, we can help people get together to understand to break barriers of certain stereotypes that we might have across borders of different kinds of cultures and nationalities. And we do this through our community life department, which is all about creating relationships, making awareness, creating awareness about the migration issues that we have, and also about the specific cultures. And so we do that through specific events, where we have, you know, a showcase of the culture, where we have cooking workshops, or where we just get women together from different nationalities who get us together from different nationalities and just opportunities for them to share life together, and get to understand a little bit more about who they are. We also believe in empowerment, and this is done through our programs. Department, we’ve got four main.

Sean 2:34
Sorry to cut you off. I just wanted like a quick elevator pitch. But I think that’s probably a good enough description, and I will give them your leg. So this is like, we actually built their website, initially, like four years ago. So we before they had a website, we put that together for them, and they’re just they do amazing work locally. So just wanted to give you kind of like a quick, you know, one minute elevator pitch, but we don’t need to go too deep. So. So thank you for coming out to represent it and I’ll just send people to your donate page if they want to

Unknown Speaker 3:03
give it okay. All right. Thank you so much. Thank you very much.

Unknown Speaker 3:06
Okay, cheers. Okay.

Sean 3:09
All right. Okay, so joining us now, Tom, I’m gonna make it so you can share your screen. Perfect. So everybody, this is Tom. So I met Tom. Ironically, Matt, I just got off the phone with him about three hours ago. I had it Yeah. Yeah. But yeah, I’ll let you introduce yourself. Tom. You got your full screen now. And if you share your screen, it’ll probably take over.

Tom 3:37
Perfect. So hopefully this comes through. Okay. Yep. Okay, perfect. Well, guys, thank you so much for inviting me along. Just from what Shawn’s told me. Sounds like a brilliant community, you guys have got just one day, I’d love to make it down in person. Have a coffee or a beer with you? Lisbon today just sound unbelievably appealing. It’s two degrees we’ve had on and off snow on love, sleet, and so on. As I did vow today that as a British person, I would not start the conversation by talking about the weather. But I clearly just have so thank you so much for having me along. I promise. That’s the last time I mentioned the weather.

So my name is Tom, and I’m the founder of kilo. So kilo is a travel jobs marketplace. And it’s been built using the wonderful world of no code. So my background previously is BD it’s guys more on the sales side. So I am relatively new to this journey. I’d say I started building kilo in around October. And I’m absolutely loving it. I’m sure. Like a lot of you. It’s taken a long time to find that something where you’re able to enter that flow state. This is definitely for me. But again, as I say I’m relatively new and early to this journey. So for as much as this is me talking to you this evening.

If there’s anything that you know You think, Oh, Tom, that is done terribly. Or I could do that far better, please do jump in and say because I’m as much here to learn from you, as I am to hopefully just share a bit of inspiration this evening and a little bit about a project that I’ve been working on. So guys, please don’t be afraid to jump in. Without further ado, so what I’ll do is I’ll give you a quick run through of kilo. And then basically, there’ll be two main things I’d like to leave you with today, in terms of Kilo, and also webplayer, which is obviously what you’re here for. So the the little bit about Kilo, then Kilo basically is a travel jobs marketplace for those that are fed up and looking for jobs. So as we know, looking for a job is a pretty bloody tedious thing. At the best of times, it’s even worse for travel. If you go on LinkedIn, and you search for a role in airlines, you’re faced with 18 out of 20, unrelated results, genuine insurance, banking, and life is far too short running, to work in insurance. So apologies to anyone who enjoys a lot of insurance or knows anyone who works in the world of insurance.

We’re there to help people who want to go and find that that great travel role. So in a nutshell, sometimes marketplace searching for roles sucks, and we’re out to make that better. So anyone who wants to find a role in head office. So in the creative departments, for example, the pricing or the sales departments of airlines and travel tech. And you can see here the team. So when I say we, it’s pretty much just the two of us. So obviously, it just met me, I’m Tom. And then you have here my very glamorous co founder, chat GPT, which I’m sure for a lot of your little your either your projects or your businesses. Now this has become an absolutely indispensable tool and thinking back to October and November when we didn’t have this. It’s almost like how on earth did we survive without it and the way it’s been built, so as we’ll go through in just a second workflow, obviously is the front end. And then these are the other tools here. So JetBoost, which we’ll go into, which is basically a way of dynamically filtering and taking those results and surfacing them. Zapier, which I’m sure you all know, Process automation and creating those flows, air table for storing all this lovely information that we collect member stack for taking that basically creating those the gated content, but also the user authentication and allowing us to actually personalize what a user is seeing thigma for assets and design. And then I don’t know why I haven’t really just got bloody everything here under the open AI chat GPT site, so but really, primarily JavaScript queries, anything to do with code, to be honest. And then just some general life advice, as I’m sure you can appreciate, when you’re on this journey alone. Something’s very, very interesting. Oh, gosh, I wish I had someone to ask. Thankfully, there is this now, that’s wonderful tool. But I don’t want you thinking if you have seen the film, I think it’s her work in Phoenix. It’s not quite that bad yet where I’m falling in love with chat GPT. But it’s it’s pretty close.

So today’s demo, what I’m going to hoping to leave you with is, for me, there are two big parts to web flow, which make it such a powerful and exciting tool for creating new businesses also bring bring your projects to life. So the first one and number one in nutshell, basically is, I’d like you to think about web flow is imagine you are sat in the middle of a room, and around you is this wonderful, beautiful library. And essentially, you’re able to pull anything off the shelves and any book into the center of the room in a flash. And that’s what we’re gonna have a look at, firstly, with with with the, with the CMS, and our ability to store information, but also filter it, so we’ll get into jet boost as well. And then also, the second part is basically web flow can act as a load of really sexy forms. So users can input information. And then it’s incredibly powerful, what you can do with that information. So user input, we can then send it using Zapier to our back end air table, and then bring it back to web flow and create an app style experience. So these are the two things we’re going to have a look at today. But guys, as I say, please do jump in. I would love this to be almost more of a discussion than anything. So without further ado, we will jump into this first section here just the interest of CMS and filtering and bringing information to life.

So if I just take you to the kilo homepage, absolutely. Absolutely sucker for neon, as you can see here. So So apologies if this is a bit too much pink and purple, but this is this is kilo. And what we can see here is a number of roles on the homepage. And this is the way we can start to think about workflow is it’s basically a lovely blank canvas, in which we can start to bring this information to life. So we can see here, a hot ticket of the week. So hot roll we’ve got at the moment is a product manager for only management and just to bring this to life. I’m just gonna click into it. And what you can start to see here is so firstly where there’s the job actually comes From accompany Why’s the job title and then lots of other attributes that we can start to see here. And this really is workflows, power play. So if we come and have a look at workflow, which is actually sat behind this site, basically what we’re doing got another role here not used yet roles, the hopper one, but what we have here is basically a blank, blank page with lots of fantastic information on it, which will hopefully help a job seeker who is interested in this space. And what we can see here, and the way it works is just simply, if I click on this heading here, this text, which is attributable to the collection, so we can see here, we’re basically saying to Webflow, populate this text with something from this collection. And this is where I’d like to introduce the idea of a CMS.

You might laugh, but I cannot the life of me remember what the acronym actually means. John has anyone who knows actually what the is it content management system? Sorry? What’s the what’s actually the What does CMS mean it is a content management system. Yeah, see, so you can spot a bit of a web balloon web flow, Newbern myself. So basically, what you can see here is all the different ways in which we can actually start to store and store information in web flow. And this is immensely powerful, because not only the the number of ways in which we can cut the data, but also the depth we can go to in each of these sections. So what you can see here, if I just scroll down, is the collection items collection that we’re using to bring these items to life. So if we just click into here, this is where we basically store all of the information about those roles. So you can see here job title, we can see the company, it responds to where that location is the category, the actual job description. And also other information about the role here. And the reason this is so powerful is because this is virtually unlimited. So if we come back for a role here, the amount of information that we can actually bring to life about a role is really, really clever. Not the work I’ve done, it’s all workflow. But as you can see, we can bring lots of active information for the user. And the reason that this is so powerful, is when we start to take on new shows

Unknown Speaker 12:24
that we have here, like what what the scene is showing us.

Unknown Speaker 12:29
I didn’t quite catch that, Sean,

Sean 12:31
Can you show us the data model? So we can get an idea of like, what the structure is of the database. And like what this is actually doing the show showing us data what?

Tom 12:41
Yes, so it might actually just be easier if I just show you the settings on the CMS. Is that helpful? There? Sure.

Unknown Speaker 12:55
Okay, yeah,

Tom 12:56
that’s okay. It’s not probably not not the clearest. But it’s basically just showing that these are the, you can basically capture anything that you’d like in the CMS is in this collection items and bring them to life on the webpage. So what we’re doing here, so if we just look at company, for example, and job location, these are the fields that we’ve actually set to actually collect for this, this collection. And if we come into an item here, which is where we can see that I’ve actually populated these. So we can see that this workplace. Workforce manager responds to kiwi.com, burnout, and it’s a job in HR. What we’re then doing is basically taking our page that we can see here, and we’re saying, If I manage to be helpful, if I just do a quick example. All I’ve done there is I’ve just dragged a collection list items, this wonderful navigator here, we’re going to drag and drop into our page that you can see here. And now it’s really as simple as connecting this to the CMS. And all we’re going to do, let’s say want to find out the country for which this job corresponds with. We’re just gonna click country. Add a header within that collection item, get our text in the country. And we can see that corresponds to a role in Spain. So this is how, basically, just to give you a very quick introduction to collection items and CMS, the wasting about Webflow is it’s one blank canvas, you can start to bring in lots of information and lots of lots of fabrications and those filing cabinets around you, which are those collection items.

Now the question short i Yeah. Was thatokay, sorry. I just thought as a question. Oh, good. Yeah. So, where where this starts to get interesting is thinking about the ways in which we can actually cut this data. So the reason that we haven’t just got one collection item here is just for the jobs is essentially the ways in which we can look Can slicing and dicing that job information. So if we come back into the collection item here, come back to our settings just so we can see what we’re looking at. You’ll notice there’s several fields here that are multi reference. So we’ve got country industry, the mode of working. So that’s looking at hybrid or remote work. And if we then come into the collection here, the beady eyed amongst you will notice that actually, these are colored in purple. And the reason that they’re colored in purple is because they are multi multi reference items. And what this allows us to do is slice and dice the job data. And this becomes really interesting when we start thinking about the needs of a job board. So a job board in its simplest form is a load of jobs just almost on a on a page. But if you think about a user requirement, none of those jobs are small majority of the jobs will actually be applicable to a user.

So let’s say I’m looking for remote work, I want to work for particular sector, I want to work for a particular company size, that sort of information is exactly what we need as job seekers when we’re actually looking for a role. And the CMS helps us essentially, to slice and dice that data in a way we’re about to have a look at now. So one thing you’ll have to forgive me for is there’s loads and loads of aviation jargon in here. US travel geeks, and aviation geeks are a very particular breed. So you will see as we go through, there’s lots of sort of aviation acronyms and things like check in and start with Germany. So it’s a little bit corny, but we are a little bit nerdy. So as we go through the bear that in mind, but all we’re going to do is start to look at the ways in which we can actually cut that job information. And if you think back to our CMS collection here, one of the collections that you’ve actually got is countries, and we’re going to go through the other ones as well. What this allows us to do is basically take this information and slice and dice it. So what we’re going to do is we’re going to pick UK, let’s say we want to work in hybrid work. We want to work in sales, let’s say travel, tech, all sizes of company. And let’s say I really care about status.

So I’m going to pick an industry leader. And let’s say I want a mid level role. So these are the roles that we’re actually left with. So this is where I’d like to introduce another tool, which is basically powering that filter selection. So we can see here. This is This is Jeopardy, guys. So this is basically dynamic filtering, using our CMS items. So basically, for all of these different ways to cut the data, you can actually set a filter. And the way it works is actually incredibly simple. So Jeff is not sure who the founder is, but incredible technology. If we just come and find our job search page here, all we’re basically doing is applying a class to our collection list. So we come here, all we’ve had to do to make this a reality is utilize the class function here. So jet boost filter, W three R seven. So we’re basically saying to Webflow, go and find w three R seven, inject, boost, and then filter our collection items, which you can see here. So this is our big long list of jobs that sits at the bottom of this job search. And on the job list here. This is where we’ve got all of our filter interactions. So we’re basically saying to Jeff boost for each of these filters. Please go and be able to filter the all this big, long list of jobs that sits at the bottom of this page here. So I’m gonna stop there. I realize that’s, that might have been in depth and might have been super, super high level. I’m not sure so sure. And I’ll stop. And if there’s any questions on just basically how is this configured or how it works? Let me know before we jump on to the point of the more fun but

Unknown Speaker 19:00
yeah, do you guys have any questions?

Sean 19:07
Yeah, yeah, it’s using AirTable for the database, right?

Tom 19:11
Yeah, correct. Yeah. And we’ll jump into that in just a sec. as well. I could show a bit more of what that looks like.

Sean 19:17
Can you show it without showing like sensitive data, just like show the structure of the air table database?

Tom 19:23
Yeah, of course. So it might be worth I think, just on the on the next section. There’s like any an easier way of showing the data structure with some signup data, which we can do in just a sec.

Unknown Speaker 19:38
Okay. Alrighty, so,

Sean 19:43
that’s all the questions that people

Tom 19:45
So yeah, basically, that first section, think about yourself, it’s sat in the middle of a room the ability to pull lots of things off shelves and find a page and a book. Is the way I like to think of it that’s my Layman and very Um, gosh, you can tell I come from the world of big company, not very in depth way of looking at things. So what we’re going to do now is have a look at the other side, which is another remarkable thing about web flow is the ability to basically input information, take that into a back end and bring it out and create almost act like experiences, and really make our, our user personalized. So what we’re going to do now is we’ll come back to our homepage, come to our free account section, so naturally with a job board, and thinking about the way that kilo is going to work as a business, we want people to be able to find the jobs that they want to do that we don’t want them really going through that search process every time it’s a little bit cumbersome, and it adds friction.

So what we’ll do, what we want them to do is basically sign up for an account. And as you can see, here, I warned you about the aviation language, we can see here underneath the word check in so what we’re going to do is just jump through this process, and then we are going to have a look at how it works in the backend. So basically, what we’re doing now is we’re taking this user information, we’re inputting it, I’m just going to do a think of a random word on plus London, killer jobs.co. And so really, if we’re a jobs board, we need to know what our users want. So let’s say I made a user, I want to work in UK, I want to work in sales, on my work to be hybrid. Again, I really, really care about status. And I might also want to look at startups. So let’s let’s pick emerging stars, well. Let’s say I want to work for something that’s less than a large company, entry level, mid level roles, and junior roles, want to work in travel tech and want to work for an airline. What we’re basically doing now is we’re telling us everything we need to know in order to make sure that we can get this person really, really clever, and specific jobs, job descriptions.

So what we’re doing, I just hit start your journey. And what’s happening in the background, as we’re about to see is this is creating a member in member stack. So I will take you through just what’s behind the scenes here. You’ve then got a welcome to kilo. And what this will do is it will populate my members only area. So welcome to your flight deck calm. And what you can see here is all the information I just submitted, as well as some other information which we’re about to cover. So if we look at what’s just happened, and we’re going to come to our user onboarding form, the way to think about OAuth flow, as we’ve just said, is loads of sexy forms, taking that information going into the back end and bring it back out. So the very first step that we need to do here is basically creating a signup form. So it’s as simple as just adding a form block here. So this is all I’ve done to start this process. In the form section here. Obviously, I’ve done a little bit of styling, just to make it look a little prettier, but you can see first name, last name, email and password. And now obviously, this information needs somewhere to live. And this is where we can start to introduce Zapier processes tool, which I’m sure you’re all incredibly familiar with.

Basically, what we’re saying is create a member and member stack once this form has been filled in. So what we’ve done is we’ve basically gone in, and we’ve said once this form is full, collect that information. And the way that we’ve done this is member stack utilizes what are called Custom Attributes. So if we come on to this form here, you can see sort of color white a form signup form. What we’ve done is we’ve named this form signup. So using the custom attributes, data, Ms form equal sign up basically says, Hey, member stack, I’m about to send you loads of great information on my user, please collect it and create a profile. And the way that we’ve done this, if we scroll down to the attributes here is in member stack, all we’ve done is just matched these fields to our signup form. So first, then really intuitive member stack says, right, okay, Tom, you want to go and collect first name data, all you need to do is have data ms member, and first name as your field. So you can see, right, that tells me in Webflow, all I need to do is make sure that my custom attributes are reflecting what it says a member stack. So data ms member equals first name. Similarly, last name, data, Ms member equals last name. So as you can see, guys incredibly logical, very intuitive. And basically, once this information has been submitted, it’s the same for all of these here. So every, every country that you can see here, we’ve got a field that’s been created for it. And the way that this works is through is basically a Boolean, so it’s true or false data. So It says write by military values, and map them to what you can see here member stack. So actually incredibly powerful the combination of Webflow and members member stack to start with, you’ve already got the ability to now have members on your on your web flow site. But of course, what we need to do now is have a look at where we can store this information. I want to know how many members I’ve got, for example, what they like so so we can start to send them, let’s say, emails for roles that are relevant. So this is where we start to introduce our table. So what we’re saying is create a member record in a table. So using this information, which we’ve just collected. Again, none of this is private, because it’s, it’s all me. Tom Walsh, here’s my email. And also all that true or false data that we’ve started to collect on the user preferences.

So if we just scroll down here, you can see there’s basically every field a member stack, there’s an equivalent field in air table. And I can show you that here. So all we’ve got is those same fields, all mapped with that same data. So we’re saying to Zapier, everything that goes into member stack, please put that in air table. But then we can start to get a little bit clever with it. So what we need to do with this information is basically start to transform all that true or false data. So yeah, fantastic. It’s a false for Hungary. And it’s a true for UK. But how do we make that kind of actionable and usable. So the first thing that we need to do is start to start to manipulate this data in our table. So you’ll see lots of choices here, then for each of these fields, and guys, I must actually add on this, this might be a totally crap way of doing it. Or it might be a fantastic, well, I have no idea. So if you can think of any, any tips or any help, or any better way of doing it, I’m all ears. But this is the way that’s worth working at the moment, is basically saying to air table, go and find that true value. And where you find it, populate it.

So we all have an if statement from our lovely days deep in Excel spreadsheets, I’m sure go and find that true value and bring that to the surface. So we can see here, United Kingdom, this is the same for each of our sections. And crucially, what we can then do with that information is send that back to Webflow. And actually create that member in Webflow. So we’ve already created a member stack, we’ve taken that information, we’ve put it in our database. And now we’re bringing it back to web flow. So what we can do is create a live item. And just going back to what we discussed in that first half, what we’re doing in our Members section here, we’ve actually got that ability to send that to that collection item. So that member that gets created to send it to web flow, we just come through the process here, we’re sending that key information. Now, what we can also start to do is is manipulate our information. So we’ve got here out of that true or false data that’s gone into air table. And what we’ve done is we’ve said go and find the true value, and then bring that back to my flow. So you can see here, I want to work in the countries that I’d like to work in all that information that we need to understand what that customer actually would like or that user would like. And send that back to to our table. So that’s that. And then the next step, which is just make sure that member stack is updated with a web flow ID in order for any updates to work in the future. And I’m trying to come down.

Sean 28:38
So can you can you speak to the role role, the role of each of these systems? So like Webflow is your front end? It’s like the beautiful UI where people sign up for your table housing specific preferences. It sounds like and then member stack is just the member portal pieces.

Tom 28:54
Yeah, exactly right. Couldn’t said it better myself, Shawn. So yeah, just think about web flow as our most as our front room. And everything that goes on around that, let’s say it’s like a dinner party, right. So people come in the front door, that is member stack. Off to your left, you have the dining room, that’s where that’s where the magic happens, but it’s not where the food is prepared. So the food is prepared using air table which is in the kitchen. So your guest comes in the front door member stack signs up. Food comes in from the kitchen into that dining room, which is Webflow. So what we can start to do and is differentiate a little bit further, just around how member stack actually stands out because I think that’d be quite useful. So we’ve got our database. We’re sending all that information back to web flow. And of course, then, as I’m sure you guys are familiar with, we can then start to integrate other steps as well. If I get a little Slack message every time someone signs up, loops is an email provider without She’s highly recommend much more intuitive than MailChimp, and a bit like a bit like notion basically, for email.

So once we’ve got this user’s information, what we can then start to do is, obviously send marketing material. And also, I’m just going to come back to my homepage. If there’s any roles that are applicable for that particular user, we can then start to dynamically create that content as well. So this is the beauty of a member stack, I would say, is, it’s a nice little addition to Webflow. Just because we can start to create these these gated content and these private user areas. So what we’ve got here through the use of member stack is a private member area, that we’re actually able to just surface content which is relevant to that user. So obviously, we wouldn’t want any, any other users seeing, let’s say, my preferences or any other users preferences, so we’re actually able to bring that to life in a private area.

So yeah, just to bring that example, up, again, Sean, you got Webflow, as your front end member stack allows you to actually hide things from certain communities, from certain members. But also allow them to actually start to have a bit of a hub and a bit of a homepage in which they can actually start to see their stored information. And also what we can do if there’s any roles, let’s say, that are applicable, this button, or we can actually click here, so nothing matches my preferences just yet. But what oh, there is one. So a Category Manager for secret escapes. What’s happening there is we’re basically sending a URL that we’ve created off the back of the member preferences that we can see in our air table section. So what we’re doing here, on our private members page, you’ll see that you’ll see we had a button, which just said, we’ll come back to flight deck, see my bookings. And what we’re actually doing is bringing all this together under one button.

So we’ll come back to the air table document here. And what we’re doing with all this information here is we’re saying please capture it, and please put it into a URL. So country or United Kingdom, because that’s our choice. And what we’re actually doing is taking this and we’re sending it back to Webflow. There’s a separate zap I’ve got which basically sends this back to the workflow CMS, in which there’s a line which says, my URL, and then what we’re doing is we’re hiding that behind a button. So you can see here, see my bookings on their private area. So no one else to be able to see this, no one else would be able to access this particular link. And what we’re doing actually, when we click this is we’re actually linking in with the first part of the presentation today. This is basically just JetBoost. So what we’ve got here is the ability for our jet boost filtering, our dynamic filtering, and RCMs to actually be influenced through the URL. So what we can do is to create an almost at like experience, just through the use of gathering those preferences, then in the mall back to something that storing them on an air table, and then bringing them back in the form of a link. And then using our object based dynamic CMS filtering, we’re actually able to start to create some really personalized stuff. So I suppose this is gonna be a good place to stop for some questions. But hopefully, it is an illustration of how you can start to create these app like experiences and why web flow is such a powerful tool. So I’ll pause there, Shawn, if there’s any, any questions or anything so far.

Sean 33:45
I mean, graphs, how you’re able to cobble all these different systems together, like Webflow has a gorgeous UI. So I understand why you chose to use it. I guess I’m very much coming from the bubble world where it’s like more conducive to building an application. But I’m impressive. Like, I mean, first of all, you’ve been able to cobble together these different solutions to make an application out of something that wasn’t intended to build an application or names.

Tom 34:14
Yeah, I think some of that’s naivety I think it’s not really knowing a better way to do it. But yeah, I think that’s just as I’ve sort of gone along this journey myself that the ability to plug things in, basically to web flow, using JPA and using other tools like that. I think then, I’m just scratching the surface, I think yeah. There’s I’m sure there’s plenty other ways in which we can look at this but yeah, it is surprisingly powerful.

Sean 34:45
I missed it: what is the source? Like what is the source of all these job openings? you’re scraping something for that or where are they coming from?

Tom 34:55
Yeah, where I can, I can scrape to where it’s legally and neatly are apt to do so is great. But otherwise it’s it can be a bit of manual process. But yeah, that’s

Sean 35:08
convenient like so this jet boosts thing basically you’ve got like you’re ingesting all these records that are out there publicly available, but you’re putting them in a much more convenient format. And a lot of people will filter and find them. And so that is the service you’re providing, essentially,

Tom 35:22
yeah, basically, yeah, that’s it. So it’s basically taking all all that information, which is in various places around the internet, putting it in one nice list and then saying, Hey, here’s the nice list. But also, we can tailor it down along these six or seven attributes. So yes, because we all know how crappy it is searching for a job. And I think having that ability to filter is going to be quite powerful.

Sean 35:47
Cool. And then the only other question I had was the that loops thing that you mentioned, what how is that different than Why do you like it?

Tom 35:54
Notion, basically, it feels and looks a little bit like Notion. So I can show you on here. And I promise I’m not on commission for loops, although maybe I should be based on this little demo. So it functions in the same way that you used to with with Zapier. So all I’ve got is my zaps the setup is anytime that someone signs up, assign them a tag, and they’re added to an audience which is, which is welcome to kilo. That’s why you can see here in terms of the signup, and if I just open the I’ll just stop the loop and then I’ll edit my email. So you can start to see here, everything is just really smoothly to say, drag and drop. MailChimp I find a little bit frustrating in terms of the ways in which you interact with it. Everything’s super smooth here. So if I were to just add a line in here, for example.

So it’s not working, but if I just drag and drop PSA, it’s just beautiful to you. So if you use notion of your any of your personal documents or your business notes, documentation that we’re so used to using it. Yeah, it’s fantastic.

Sean 37:17
All right. Okay.

Tom 37:22
No worries. Anything else? Any questions? Any any tips or anything? Anything that buddy feedback?

Sean 37:33
With workflows? Yeah, the question I don’t if you can hear it. He said, How much does it cost with all the subscriptions for the different SAS you’re using? What What are your Are you able to share what your costs are?

Tom 37:44
Yeah, so Webflow is about $40 a month. Zapier is an equivalent JET BOOSTER and member stack together are about 50 euros. So I’m trying to add this up. So probably about 100 and 30 euros for Webflow Zapier member stack and jet boost when you start adding air table 160 170 euros a month. So yeah, to get an idea off the ground. It’s not expensive.

Sean 38:19
How are you? If no one else I think vessels? I’ll just keep asking. How are you acquiring customers? Is it this point kind of word of mouth? Or do you have like a system by which you acquire people?

Tom 38:31
Yeah. So it’s a really good point as the site is for employers anyway. And the monetization is only going to be as good as the users. So it’s pretty happy at the moment, Shawn. So it’s basically reaching out to people who might benefit from from kilos of people who currently work in travel. So I’m actually doing a proper launch tomorrow. So it’s going to be, I guess, lots of little hacky stuff like posting in forums. But yeah, just trying to think of those little go to market ideas. What about get users, the main channel is going to be LinkedIn. So trying to drive traffic to the site through LinkedIn and posts based on my network, which is mostly travel.

Sean 39:18
You should target TAP airlines and other having like a ton of unrest right now. Hahahahah it’s kind of an aggressive move, but maybe run some retargeting.

Tom 39:28
Hey, if I can help you down in Lisbon? That’d be that’d be good.

Sean 39:33
Well, I don’t have any more questions, you guys. I mean, when we got down to… sorry whatthe question was: are you able to share anything about the content scraping of how you acquire stuff? Are you using a tool for that or how are you doing that?

Unknown Speaker 39:52
Yeah, so

Tom 39:53
it’s it’s Python, selenium, and then XPath statement. And so basically gonna go and load load the page in a chrome driver. So just like a user would go and locate these various things on the web page and bring them back. What’s the one thing I would say about web flow is the ability to Upload CSV data is beautiful. So once you’ve got that big bank of data, the ability to then upload, just make sure the columns are matched to what you have in your CMS, and you’re away. So it’s actually really, really quick and efficient. And also, the I’ve just started to try and do this but working with the API as well. So there’s a collections API that Webflow have. So once you actually have that, the ability to get that information, and then connect it straight to the collections API is it’s very smooth. Soanother another plus workflow.

Sean 40:52
Or time Hey, thank you so much. Round of applause for Tom for taking the time.

Tom 40:55
Thank you

Sean 40:59
so much. For did I’ll put this up. It’ll be probably up tomorrow. But for the people who couldn’t make it tonight, so thank you again.

Tom 41:07
No worries. paracentral. Cheers. Thanks, guys.

Sean 41:12
All right, I’m going to do so let’s check now, because we got some time. Let me for the sake of the recording, I’m going to share screen and then I’m going to open the Canny board. Oh, yeah. And then for the people who didn’t actually weren’t in the room and see this, this is the Lisbon project site. So if you feel like you got value, consider making a donation to Lisbon Project, they have this big yellow donate button here. And I think like a 10 euro or whatever you feel comfortable donating, we’re going to always keep this group free. But I figured this is a good way to like support them. So yeah, so let’s look at the meetup. We use Canny to plan the next meetings. So we have this one if you guys are aware of this, but this is what we use.

So the Webflow was the highest ranked one. That’s why we did it. It looks like the next one is this one, which is a blog post I did. Maybe two years ago, I have a design process that I use for how I approach making a new application. And it’s a I don’t know, I just use the Bob Ross, the painter guide, I kind of like how to like build a painting and think about it. So it sounds like that’s the next highest ranked one unless there’s anything that you guys have, like, burning desire to hear about and no good. Want to make it as useful as possible for everyone.

And so, so we’ll plan to do this one next. I do there’s some flyers on the table. So grab one of those if you are interested. This is something we do, I’ll pull up the webpage so people can see it in recording. But this is basically my full time passion project. Right now I organize these hackathons. These are impact hackathons. We’re starting in Lisbon. But this is I’m using no code. And I’m intending to make this like a platform. So other people can bring this to their city. But the next one is April 15, and 22nd. We’re going to do the Ideathon. And then the next Saturday we’ll do the build upon and so what it is, is I have a we have an awesome space 42 is going to host us for that one and then build a farm will actually be here at La Lagaan. This is a chance to work with really smart people, all different skill sets, we have a good mix of like locals, expats and nomads bring them all together.

We have this formula that we take people through to go from concept like zero, nothing to a vetted idea. And you’re going to be basically you end that first day pitching to a panel of legit impact investors. And we have 1k in capital that’s going to be pushed into these projects. So like if no code is of an interest, like this is a perfect environment to actually put your skills to good use and like get surrounded by other people who have adjacent skill sets. There’s a really good video, if you’re interested in learning more, this is like just a three minute video from one of our last events. That gives you a flavor for what it is. But yeah, if this is of interest, just go ahead. You can apply here. It’s open to everyone. We do try to cap it at I think 40 this time. And yeah, it should be a great day. So consider joining that. This is happening April 15. Yeah. And then the April 22, will be that following Saturday for the bill day. So whichever ones when we’re going to actually build those MVPs and know code that and try to like have launched working functional products the next Saturday. Yeah. Cool. All right. Anything else you guys want to cover? Yeah, just go to problematic dot app. Or just scan that QR code on the flyer? Yeah, yeah, that’ll take you to this page. And there’s just like a short checklist. Yeah, I can even show you here. So yeah, this too is free as well. But you got to just complete these onboarding steps. And depending on what role if you intend to lead a team just

Unknown Speaker 45:12
future video. Yeah,

Sean 45:14
this is also a good example. Like this whole application was written in Bubble, I wrote this. It’s underpinned by a trading platform, like it’s, I can go so deep. I just rolled out this message bus system, which I made demo. Actually, I may do like a double show that Bob Ross design philosophy and then show like the the system that I just rolled out for this, it’s super cool. And it’s all everything’s built in level. Yeah, like, literally it supports. It’s a trading platform. You know, it’s, it’s such that like, FTX happened recently, I feel like it’s given a bad name, but like, yeah, it’s there’s a whole bounty system, I have a project library here. So now when people submit projects, they get to like, like, go through this wizard. And then they set this little like slider, and then it generates a cap table.

And, you know, they record a video for it, it can have like, nested unlimited nesting sub projects, each one of these can have a bounty with it. And then so if you come in here, and you want to work on something, you commit to a date by which you can have it finished, it lists you there, people can see who’s working on what, and then when you’re ready to submit it, you go in here, pick the asset that you’re submitting. And then basically review the trade that creates a trade here in exchange for that bounty. And so there’s like, like I said, it’s essentially generating almost like a dowel for each project, like a million tokens, instantiates the wallet for it. And then yeah, like every value exchange attracts it, like so we did this in the room at our last event with poker chips, and like paper cap tables, just to prove it out. And then I turned it into an application using Bumble. And we’re gonna use this at the next events. And I’m super excited, because I think this is like, this is the game changer, right? Like when the when the judges this time, they can actually make silent offers. And the people will accept the obviously the best one for them. And then the winner of the event is actually the the team that has the biggest increase in market cap. And so that allows us then to like, like, it’ll definitely support fresh projects, but people can like the idea here is to like, make a continuous event and people can keep coming back and like so if their project was started retrievers event, they come back and they advance the ball and then like new projects can compete with exhibit like existing projects. And it’s all just like, who increases the market cap the most by the investment so.

Unknown Speaker 47:48
Right, so actually, that’s the moment.

Unknown Speaker 47:58
Valleys opportunity. Simon’s live recently introduced himself. So I guess I’m gonna work on Project pay, but I’m really interested in helping out.

Sean 48:21
Yes, so I deliberately chose this approach to make it so instead of forming teams and saying you must commit this one thing. You can use your kind of why that, like, let’s create an efficient market at the same. So it’s like, multiple things you want to work on. It’s up to you by you spending your time and watch it to getting and all that sort of thing. It could be really cool way to do it. And yeah, it’s really elegant because it’s going to win, they win the judges make their investments, which are essentially just donation, like they’re gonna set the valuation by virtue of doing that. And then now we have like an objective winner. There’s no more voting and like, whatnot. It’s just you can see the market cap of it. So that’s the idea. Cool, all right.

So that was that I think we included if you guys get value out of it tonight. Also, be sure to like, like, just give a rating or whatever, and comment on the meetup because it helps draw new people so Yep. Cool. Thank you for coming, you guys.

Unknown Speaker 49:26
Yeah, absolutely.

Sean 0:01
Don’t worry about trying to like note every little thing because there’s probably gonna minutiae that you miss. 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. So, before we get started, I want to give Chiarra – she’s here, the marketing director for Le Wagon – give her a minute to plug their program.
Chiara 0:34
Today or people’s money, class, I know we are facing someone who may or may not know us 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, Le Wagon is very awesome for letting us use the space.

Oh, no.

Hopefully we have the projector… what 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 here.

Sean 3:37
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.

Sean 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

Sean 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.

Sean 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.

Sean 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

Sean 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.

Sean 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

Sean 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

Sean 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.

Sean 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.

Sean 24:01
Usually what we’re gonna like,

Sean 24:06
when you’re when you’re making a

Sean 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.

Sean 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?

Sean 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,

Sean 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

Sean 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

Sean 32:59
prove successful, especially

Sean 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

Sean 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.

Sean 35:37
Thank you provide me some original question.

Sean 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

Sean 37:23
its Yes.

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

Sean 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.

Sean 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

Sean 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

Sean 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

Sean 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.

Sean 0:05
I think we’re ready to get started. Let’s go around and say where you are from, and what your name is and your interest in Nocode. That helps us tune the talk. I’m going to start and I’m going to demo is a quote for [unintelligible speech], Marla, we can look at balsalmic probably won’t get too deep into it. And then we’ll see [unintelligible speech]. So I can start on Sean, got a degree of deserves a second meeting. So it’s it’s still very young group. The idea is to basically teach no code and the tools that advance the cause it’s such a powerful thing, to not have to hire a developer to build a MVP that,

I think No code is getting to the point like I use Bubble is a full production apps like it used to be a thing of like no code, getting just the first version out there. But like the site that I run automatic, it’s fully built in Bubble for taking signups. And so it’s looked at . Anyways this group is how you guys, you tell me what you need, I’m happy to take this thing direction, I will just make it most useful. So

Lucia 1:40
make sure my name was on the production with no call them kind of using Webflow, which is web development. And basically the design so my my workflow or payment, once again, good design. So that’s my goal, and payment systems. So pretty much I wanted to read more of a service from a playing film us to more remote stuff, because filming therapists all over from Canada, background and finance and non financial publishing. So it’s a couple months ago, and we’re just starting a new SAS project. So I’m looking to see how we can help with that sort of thing. [unintelligible speech]

Sean 2:51
yeah, I mean, I was a developer many years ago, but I haven’t coded you wouldn’t want me to.

Unknown Speaker 2:58
So ya know, it’s it’s very difficult. [unintelligible speech]

Lucia 3:07
And originally from Thailand, I’ve been against him for a while, probably three months or so. And so we’re waiting on us. And I’m here to focus on design. And I want to learn more about other teams. I have a portfolio of webflow like one thing. And then I’m curious of what like Bubble and others. Yeah, I’ve been mainly focused upon using Figma.

Unknown Speaker 3:44
I am from Germany, after living in Lisbon for two years, even though I sit in the dark. I just graduated from a master’s in political science very far from no code. has been there for the past year, like you get a scholarship, that right now I’ve been looking to integrate a grating project of my own. And since I have no background in coding, we’re just talking. It’s yeah, my goal is maybe try and Dallow. I’ve been with Melodyne to try out like for for iOS apps and stuff. So might have questions, some questions about that later. Yeah, I’m just here because I’m curious. And I don’t know too much. And yeah.

Sean 4:27
I haven’t. So Adalo was what I use prior to a whole actually the first version of our app in Adalo. Okay, so I can definitely tell you to get questions about like

Sarah 4:40
I am Sarah. I’m from Portugal. And I have no idea how to coach but I have a lot of ideas for apps and things that I need to use. So no code seems like a really good option. My name is Rosa. Sorry, my English is very simple. I Understand. I am graphic designer. I am lead user interface. I am heren to learn about that. Yeah.

Unknown Speaker 5:12
Hey, I’m Abdullah. I’m from London and I moved here just on Saturday. So just getting around Lisbon so far. Over the past few years, I’ve been working with startups and pretty much mostly on sort of scale ups in a sense, where we’ve had our product team, we’ve had a tech team. So it’s not been somewhere that I’ve been involved in. I’ve been more on the on the business side. And now that I’m remote, I have a bit of time and ideas sort of swirling through my head. And I think this is a great way of taking ideas to to sort of action and seeing if it’s if it works in a rapid way, sort of thing. So let’s begin. So

Sachi 5:48
I am Sachi, I’m from Japan, I used to communicate with the designer and the development team using FEMA and balsamic. And now I’m selling b2b, b2b SaaS products from overseas to Japan. So no, coding is definitely a major genre to be focused on some robotics.

Sean 6:14
So I mean, I think the theme here is that we all see this as a way of kind of short get get to something real quicker than its immediate. So I had, what I find here is, again, I’m open to doing something different, but I was just going to show you kind of how I did, I did this blog post, they got a bunch of traction in a while that I’ll be uploading some really good one. But basically a big summary on Yeah. So this is just kind of a silly analogy, but I just went through and I broke out my design process into various steps and make all the details. But I’ll kind of give you kind of a condensed summary of this and show you just exactly how I design I figure we can just kind of prototype on the fly make up an app right now bring in the bottle app, make a clickable prototype and show you the whole process. So it’s all good. Okay, all right. So let’s do this. I’m gonna change the screen

Lucia 7:29
What’s up everyone I think we can just make a

Sean 7:40
stab at making a prototype Yes,

Lucia 7:47
cheap property

Sean 7:58
property finder site. Okay, so what I do and I’m the single the maintenance to basically wipe my office and I just take a warning and trace it to make some empty strings I’ll do it by hand right now but like basically you know Mason blank screens and can use roughly the size of

Lucia 8:23
the phone let’s just do a portrait and then

Sean 8:30
we got to think through Okay, so the property management app so it’s going to have we’ll just call it I don’t know

this cheap properties.com

and we’re probably going to have like a featured property here one big one when it’s on detailed about it and maybe See More

button and what else

maybe like join our newsletter

map Maybe I’m not actually a baby like yet so let’s do that on the see details maybe takes us to a screen where we got like a main picture of the property maybe some sub pictures a map down here

what else is details? Contact info

right man Yeah, like contact us Do I request a quote or something I always

do this like when I make fun I found that like put a little shadow behind it kind of makes it fun. Okay so then this go to a screen where we’re calling the last name

where we’re from a message and say message and then this would might let’s just say that this is our thank you screen share on social media

Okay, so let’s say that this is just like the fourth grade graphic we want to mock up. So what I’m gonna do this we’ll see if this works here. I’m going to try to mirror my phone to this appears and share during recording there’s training so once again

use the look at my screen right now, while I do this. So, what I’m going to do is open this marvel app. And this is free. And I’m going to create a new

a new design here to the photo lab or call it’s Lisbon cheap property. This is Bubble? This is not Bubble this is Marvel app. This is just the prototype. Okay, so at this point, it wants us to add the design. So we’ll go ahead and take some products. So let’s go here stakeholders vision is

the aspect ratio wrong, but it’s close enough. So this time, let’s have a strong look at how they are. Okay, so now, right? Yeah, cool. So now we’ve got all our designs. And now what we’re going to do is turn this into a clickable prototype. And this is something that we can now give to our friends this simply make them to read the link and get their feedback on the graph and try it. So it’s a really great way to actually go from like nothing to something in power long sticks. So okay, so the next thing we’re going to do though, is add the link. So let’s go back through wind surfing this one. We’ll say let’s add a link, link this button. Oops, this one is the more details.

We’re going to leave that to this screen, which is this one. Okay, we’re gonna go to that screen. And we’re gonna say this. Request a Quote button. Here. Let’s try that. And let’s make it to this and then on that last one

this one let’s learn that one. to the [unintelligible speech] Cool. So now we got

all of our links setup. And let’s see what it looks like. So you hit play, and then this is where you now generally like it’s, and to see what things are click slowly to touch the screen. Oops. Just touch the screen and it highlights the woman’s level. So, yeah, so this slide was saying to go through and say, Okay, any more details, great. Let me request a quote. Sounds great. Let me fill it out and submit it and give you that. And so you can see, as long as there’s now a clickable app in the web based version, as well in the mobile version from here, you can then shares the share buttons, and it gives you your copy that link creates a unique URL, and you did that. And we’ve [unintelligible speech] similarly and that gives you like a link send people to I’ve actually use that we use it as a thing. I’ve showed that we actually made an entire website, and then redirected the domain to that link to be able to basically fake a website and show it to people as if they weren’t real design the whole thing. None of it was real. It was just it was super easy. So any questions on that so far? [unintelligible speech] So this thing is called Marvel app. switchbacks and we’re going to know that now let’s go back to Yeah, so that is all the nuts. Was the model this marble app

Yeah, what do you think about a free app that covers reCAPTCHA hotlinking. The feedback election displaying I mean, it’s pretty, pretty incredible what you can do with that. So

Unknown Speaker 17:38
[unintelligible speech] What about the browser?

Lucia 17:44
websites as well? Yeah, I think

Sean 17:47
I think Marvel Well, I don’t see why you couldn’t use it. I guess you’d have to take a different organization for a website but the same thing should work right if you want to design websites, you’re right. Yeah,

and balsamic which is the other tool which I actually don’t use anymore, I find myself measuring everything so there’s just so much faster balsamic I kind of show you in seven hours on the traveling side, so I was doing surely I did. So I started

out trying to, I was planning basically prototype at the new version of the website that I built, and kind of spell that out all things and then realize this is just I should just draw it out on the whiteboard. It’s way easier. And so I basically give up on this but this is like a way of kind of politicking same thing only sort of drawing that you’re bringing into app and once I received the message Okay, so Alicia can be here any moment. What else so she knows your figma, which this classification of prototyping is just called one file open early. And I think for me the benefit of this is like obviously less time you can do it immediately. But if I implies that you know, a lot more about like the UX and the button colors and all this other stuff. Whereas this is purely conceptual and it lets you kind of leave people’s imagination that like a lead a lot more open to interpretation and a little more compensation. Okay, this this kind of basic functionality we want to go to i Bye

Lucia 20:03
once heard of like a tool is called UI thoughts like wizards. But anyway, it works like a similar thing. But as far as I understood, I never use it. But as we saw, it’s quite new. You can take pictures of like, white writing, but you actually draw that recognize this and translates them I don’t know, in half of Marvel does that to actually think of all kinds of things? What’s sort of the negative is to do? Yeah, but with a UI instead of wi?

[unintelligible speech]

Well, I think that’s it. Yeah. That was like a feature I just stumbled upon like some Yeah, that’s the one. Well, they did pretty much say, Okay, this is supposed to be a picture, there’s supposed to be a button or like a switch on switch off kind of thing. And it will translate that to well, some UI.

Sean 21:02
Interesting. Oh, so you drive out and then it converts it to exactly. Yeah, interesting.

Lucia 21:08
So maybe like a step further than Marvel but I never tried it out because I figured it was quite new. And I don’t know how, how long lasting it is in the world, like Bubble and thing.

Sean 21:18
So it’s its own, like it has its own objects of drawing canvas thing, and it converts your drawings into its thing exactly like that, for example, you take the pictures.

Lucia 21:32
I think you can also click it on someone’s been on this website for longer it just popped up? In my hand, actually, yeah. Well, yeah, I mean,

Sean 21:47
that basically, like, balsamic becomes irrelevant. Because then the quickest way to get input is to ask the guy out, and it converts it to the objects that you can then drag around and use that something that’s very important.

Do you know how far like it’s interchangeable to for example, create a prototype Bubble and then use it for further and figma or these kind of tools. Also be the other way, like figma is the prototyping tool and Bubble’s and functional applications more so Okay, Bubble has a way where you point it at a figma app getting data and turn it into a Bubble I’ve never used it but I’ve seen that but that functionality is seamless yeah. yeah, big file important application

Lucia 23:00
but it’s not that they’re kind of useless that they’re all kind of like it has the same code in the background and production extracted and then put it somewhere else and it’ll pick it up

Sean 23:11
I mean, free will doesn’t have any application code is it’s purely UI layout so we’re all [unintelligible speech] has workflows.

So I’m not sure exactly how that would work. I think this maybe just like brings in the screens and like kind of creates each one as a screen in your application but nothing was wired at that point. Thanks things using ions

[unintelligible speech] everyone this is Lucia by Laura. She’s gonna [unintelligible speech] [unintelligible speech]

Lucia 30:00
okay yeah so if you Want to test an idea? I need to have that. Okay, if you want to test out an idea today at Kunis token

Sean 30:28
your mics on? So yeah, my microphone distributed. Okay. Um,

Lucia 30:36
so today what to say? Somebody else is something that you think, oh, maybe it’s where’s the microphone

Sean 30:49
like this, but we’re just gonna go Yeah. Okay okay.

Lucia 31:12
So we’ll use it daily for things like iterating features really, really quick and people’s comment. So the comment tool is really helpful, you can tag people in there. So yeah, so today, what I’ll show really quickly is the how to prototype some, like design interface really quickly for mobile for the mobile device, and how to prototype a very interaction really quickly. So um, so I already prepared some sort of assets. So these assets are in figma, you can create visual assets, and reuse them later. So they they’re good components. So I already created some components. So we can just drag and drop them in there, because it takes time to create them. So you don’t need to watch that. So the first thing you do is to create an artboard. So an artboard is something that is a canvas, and that can be set to any device size. So for this for this exercise, we’ll set it to iPhone eight, which is a very common size. So as you saw as you come here, you can choose the size. So now you can see that the frame here is set to iPhone eight, you can change that to any device says that you’ll like and so I’m going to drag the common component in which is the status bar into the iPhone. And for this for this app, there’s an app bar at the bottom. So this is the default navigation bar. So plug that in here. So as you can see already have a skeleton, sort of like the canvas now you can put content in there. And so what we’re going to prototype today is something that will look like this. So what we’ll have three screens, we’ll have a timeline has a scrollable, vertical, scroll scrollable content, and we will have a favorite, which has collections of different assets. And then we will have search tab, which is just a search bar. Is that quite easy to do that here. I’ll try to create that in real time. So I already have some ready made content components. So I’ll just make like a header. So making a header is very straightforward. You create blacktop, so you create a rectangle for the header. Make it dark, make the height 60. And then I’ll drag a logo, some searching in the asset list to find my logos with here’s the brand logo I already made. And so for for phones or mobile devices, you want to leave a safe area. So that is the content the edge. So the best practice is something like at least 16 pixels. So you can inspect that by looking at how proficient you are on the ligaments if you press option, you can see how far you are from the edge and how far this Google counted is from the edge. And so now I have the logo. What else do we need? We need a hamburger menu so Oh, come here, search for the hamburger. So this is a oops. So here, this is a navigational component that can be prototyped. So this is going to be a button that can be prototyped. So things down here that are button. So once again, we’ll try to see that it’s 16 pixels. So these are also buttons. So we will add interactions to these buttons, but we add at the bottom. And so the next thing is we are going to rename this according to slate online. And we need some scroll content in here. So I’m going to drag this in here. And I’m going to

actually, I think I want to just show you how to do this. So one thing that’s very neat about figma is you can use a lot of plugins.

Okay, so you have to position everything very carefully to make sure that they show up is in the right order. So just now because the navigation bar was sort of, not at the top, it was covered by the content. So so now we have the skeleton calculate. So you can wireframe stuff like this. And to fill this stuff with content, we can use some plugins, so we can use this plugin here called Content real. And if you click on these things, and say like, I want an avatar, we’ll just fill in avatar for you. Nice, right. And you can fill out the name, their names. The last thing is how to find some images. Okay, so get this. Alright, so we have the content tag on screen. And what’s next, so I should keep a kid the whole thing. Okay, so next up we have

so for this gay bar, I made some different variants of the same thing. So in variant is something of the master component is something like this. So just different buttons being active so they can be reused. So I will just copy this over. So it’s the same thing, but I’m just gonna choose a different active state. Another favorite is active, but it’s still the same component. So if I make any changes, or if I change the background of this, of this thing, everything will change. But it’s not published. So this is published in a library, because they’re linked, everything will change it will change one property of of the same master component. Okay, so now we need to do this. So once again, we can change the content with some placeholder content found the plugin

so I’m just going to click these and use the plugin to swap out different photos.

Unknown Speaker 39:28
Excuse me, all the things that you’re adding now? Are they already linked to the database? Are you going to do that?

Sean 39:35
I’m

Lucia 39:36
sorry, what do you like public content? Okay, it’s in a plugin is kind of pulling these from, like royalty free websites like up slash Unsplash. Yeah, or from Flickr. But you can create if you create some kind of account in here. You can upload your own content. So this what we’re doing inhouse, like we have our own content as kind of ready made, and you can just plug it in. But these are just publicly available content that you’re not, you’re allowed to

Unknown Speaker 40:10
use, oh, what I meant is more like, when you’re ready to publish the app, you would probably link, all these different, I’m gonna call them like, images to, to a database, and that database refreshed with new data or new content.

Lucia 40:29
Right. Um, I think this is a prototype. So we’re not using real content if you have a database. Like, this isn’t to the front end at all. So we’re just giving this to developers to to show them this is what the interaction could look like. And you can also test it on on the user. But to make the app, you have to kind of have a developer to develop everything from your common or backend database, because this isn’t a journey at all, this is just a design tool. Because it looks it looks really nice that you know,

Unknown Speaker 41:06
This lined up, basically where you link everything to the database, and then you publish directly to the different

Lucia 41:14
marketplaces. Oh, yeah. Okay, [unintelligible speech] That does the job. Okay, so those are the conversion. Yeah, I think there are tools that can convert figma prototype into real like coded apps, but not directly in here. Like, this isn’t linked to anything. This is a one time use image. If that’s, if that answers your question. Okay. So just keep populating constantly here.

Just these are randomized things. Just to make the app look real. And then the last thing is to know we’re going to rename this is is to make a search bar. Oh, and these apps have background colors. I forgot about that. So this is not them color.

Okay, so change this to the search component, variant. I’ve already made a search bar salary structure in here. So this is a search. We can also style it a little bit with some legal.

Okay, yeah, that’s good enough for now. And we’re just showing how to protect these different tabs. Okay, so I think that’s everything

Sean 43:45
I have a question so when you make. So was that the data like the Twitter card or whatever you call that like that thing that looks like Instagram, this was that an object was already in your library? Like already pre built? Yeah, yeah. So you can design something, though, and then freeze it as an object and then make it available to others. So yeah,

Lucia 44:05
in a library, where like this is this, this came from an internal library. So if you’re working with a team, multiple designers will have other team members, you can have a shared library. And you can publish the view made something like this, like a reusable component. So this can be used in different pages of the app, or you want to make sure that the styling is consistent, it’s better to publish it. So it becomes a reusable thing that other people will use. And also, they’re not going to override it too much because they like the build where the responsive rules constraints are already set. So in this case, like the title is this color that’s already been set, so they’re not going to override it too much. So that makes sure that you kind of look and behave consistently. Even when you like it You added features were adding content. And so yeah, these things are made beforehand. And so this came from a library. And so what else so this can we can already see something. So here, I’m enabling vertical scrolling. So you can already see that when I’m scrolling this it kind of looks like this is loves to be lots

Okay, fixed position. Okay, so there we go. Oops. This is small exposition Alright, so now it’s scrolling like how it should be, everything should be this also needs to be fixed.

Just some sort of small things about figma is that there’s lots of like quirks that you need to kind of just troubleshoot on the go. You need to make that.

Sean 47:04
Does anyone else used figma?

Lucia 47:07
Yes. What’s your experience with it? Yeah, I think Big Six, when you have persuasion, ready to make [unintelligible speech]. Okay, so now the scrolling is working. So it’s looks like this. Yeah. Um, now the other thing we want to protect is, so when they click on this timeline may go to the right page. So it’s really, it’s really slick that in figma, you can just add an interaction here. So this blue thing appears to drag it to this page. I can also add a bit of animation. Interaction, that’s not really animation. And so the key is to link everything. So they’re all sort of linked. Okay. So the search, there’s going to be a link to this page.

The timeline is gone to the link to this in our favorites. Awesome. Question.

Sean 48:40
If it’s a reusable element, can you use like one of them in the middle of inherit? Or does it get to link to each instance of the?

Lucia 48:49
Yeah, so for this one? Because it isn’t, the content in the tab are separate things. So the content could be dynamic. So you don’t want to lock them into the same thing. Okay. Yeah. In some cases, like, what is example like, if this so that this hamburger menu, like if there is a expanded menu, you can make each of these menu options to like page, so that could be fixed in the master component.

Sean 49:27
So maybe that doesn’t

change can do that. But it’s because you have these active states that need to be separated, treated as like separate.

Lucia 49:34
I tried to do like, link them in the master component. It didn’t work because these are three different components and they have states so it’s like, because they have an active state is kind of hard to make them. Yeah. So now if you do this, it will just work them If you can go to a user with this, and show them and do some basic interactions and and show them, what just ask them to navigate the app, you can validate your app idea very early on. And this actually what we do our company like we predict very kind of complex interactions, and we show them to users to do usability tests before development team will build because building is a lot more expensive and a lot more time consuming than protecting something like this. So yeah, my laptop managed to hold any questions?

Unknown Speaker 50:42
Do started design with figma or you start somewhere else, and then you trasnfer your designs?

Lucia 50:57
Yeah, very good question. So actually, we just have anything from like, a sketch of a pencil sketch to a wireframe, it’s more common for us to use wireframes because you have a bit more content in there that a sketch wouldn’t really do very well, like especially if you’re drawing the button, it’s really hard to to know that that like that’s a button unless you have like an iPad and colored some some elements. So I can show you like what we do, like, on my job, I would do like web based stuff. And we do wireframes of this fidelity. So things like this is not super. This isn’t this has no visual styling, but you can tell that okay, that was like we’ll come to me here, sometimes to screenshots like the sidebars a screenshot. And it’s just really quickly validate some interaction with users. And this is really helpful. And because it’s so quick to change that. Whereas something even like this takes a while. If you want to be like, Oh, we want all the like headers to be a different color, add a new tab, like that takes a way longer to change.

Sean 52:27
You ever work for anything?

Lucia 52:30
Yeah, you can live for me big mouth. And there was something called Big Jam, which is really great. So big jam is was big Jam Jam Session. Like we use big jam to do a lot of weight whiteboarding brainstorming, but you can also use it for prototyping stuff, like we did this whiteboarding the other day, but you can also prototype things in Big Jam. And there are lots of community files. So people are publishing things down here all the time. And you can just go see what’s available.

The cost of something like that. And so then you choose sort of the best way forward. And then the designer would prototype a higher fidelity thing that can be tested with users for usability risks. So after that, that could take a few weeks except that we will consolidate the findings. And we will change the design based on what we’ve handed off on usability tests. Like often that change the our assumptions a lot. Sometimes it changes direction a lot. So yeah, so from that when I was the VM or a project owner would then take the sort of validated design prototype, and then chunk it down into releases or roadmaps, and then and so engineers can like take techniques to develop. And then the whole team would have more confidence that they’re doing the right thing, because it’s been validated.

Yeah, yeah.

Sean 55:46
Yeah, like for anyone who’s built an app, then you’ll know it takes like to be able to do this kind of thing and have the conversation the next day with five people and then just see like an aha moment, like, Oh, we don’t need to build that thing. We need this other thing. Like, it’s invaluable. Like to short circuit, that whole learning process, instead of waiting a couple of weeks, or even months to build it and deploy that app only to learn that later. Like, this is why figma is a $20 billion company.

Lucia 56:12
Yeah, yeah, the earlier you can have the conversation with real people and get, like true insights into what it is that they need. And sometimes people only know it when they look at something, and they’re able to feedback on the real thing. And that’s why a design prototype is so valuable, rather than just talking to them like, Oh, what do you how do you want your recipe book to be made? Like people aren’t able to answer that question, but if you like, design a recipe app for them and be like, Does this help you save time and money every week? They’re in a much better position to answer that.

Sean 56:49
Do you guys go straight to the high fidelity prototype? Or do you ever do like just a low fidelity? Like, draw it out?

Lucia 56:54
Yeah, yeah, we often start with wireframes. And sometimes the ones we can already validate a lot. And it’s it’s better to sometimes validated wireframes because people don’t expect it to be real. They look at something that looks like handdrawn. And they’re like, oh, okay, we understand you’re just testing an idea. But sometimes we prototype like design something so high fidelity that they’re like, oh, but it doesn’t work. We’re like Yes. So something like what I just showed, like, it looks like a real app. Right? And that can be tricky sometimes, because they expect everything to

work. Yeah.

Sean 57:35
Cool. Do you is there anything else you need to show on there?

Lucia 57:38
Um, I can show a bit more advanced interactions, but I don’t know how valuable that is. It’s just like, a bit tips and tricks. So yeah, maybe no,

Sean 57:49
would it? I guess what I was going to show the last thing is if you guys want to see the Envision app, which is another tool, to my knowledge, it doesn’t do what figma does, in terms of like mocking things up. But it’s good at collecting user feedback on an existing mock up. Do you guys use it at all?

Lucia 58:06
Um, I used to use envision, but now figma kind of replace a lot of that. Yeah. Like, the thing with Envision is, yeah, like figma kind of does everything they do now. Yes. Okay. But the standard workflow used to be sketch slash, sketch plus envision, that used to be the standard workflow that you couldn’t have in sketch, and you add interactions envision, and you collect feedback in there. And you hand off the vision as well, because they can inspect developers inspect assets in envision, but now you just do everything.

Sean 58:45
So this is just something like when I mentioned earlier that we redirected a domain at the link to show an envision app. This is the site that I was referring to, I don’t know. So I don’t pay for it. So it looks like maybe they’ve changed the model since then. And you can actually preview it maybe. See [unintelligible speech].

I’m not seeing actually how to preview it anymore. So it might be I take that back, I can’t show you. These are the screens, at least, you can see what it’s in there all linked together, just kind of like we did in Marvel app. What I like about this tool, and I’m sure I’m assuming figma does this as well, but you can actually collect inline feedback. So if you give it to 10 people to do rather than like, like they can inline leave a comment like a post it note on that thing and say hey, I understand this button or whatever. And it’s just like inline relevant feedback, and

Lucia 59:52
then I can show how that’s done. You just click this comment button and [unintelligible speech]

Anyway, yeah, you could just like pinpoint. Like, there’s like a precision tool in the comments you can pinpoint anywhere in interface and leave a comment. That’s yeah, and there are some other tools, I think one of them is called was forget, because we never use, but there was some other tools where you can create a figma or envision or sketch prototype, and send it as a link for evaluation. And at the end, you can ask the user to then answer a few questions like How easy was it to use on a scale of five so they can leave some kind of evaluative feedback. And they can click back and forth on a prototype. I think it was something called and

Sean 1:01:07
I’m just collecting all the links. And I’ll post every all this stuff is just like a little summary as a comment on the meetup. Anyone have questions got access to world class UX designer? And by the way, you guys Lucia does this for free? I just did it completely volunteer. So can we maybe like give her a break? [unintelligible speech]

Lucia 1:01:45
The big, the big differences, like startup, just skip all the research, they will just go straight to build, it’s really hard to convince people. Because startup wants to kind of have something to show to the world and sometimes external investors and stakeholders, so they have way less patience for that researchers results come in. Whereas in like an enterprise company now we have, like way, like longer timeline for anything that’s about to be like, there was no real because we’re b2b. So there’s no real sort of deadline. And so yeah, we have luxury to do more discovery one. Discovery one, um, depends on how. So there are two types of discovery work because valuated just like usability tests type of work. And there is more quantitative. They can do with surveys and stuff, so that quicker, and surveys way quicker to do usability tests or interview the second thing, you have to schedule, the session, so that can take anywhere between one week to a month. Depends on how quickly you can ban people. And we’ve been really lucky that we didn’t have to spend money on recruiting people, because every time we reached out, they were very happy, happy to help us and happy to talk to us, but you’re taking that means an hour of their time, which is, you know, like we’re talking user, so billable hours. So sometimes you also need a bit of budget to do this kind of research. Because you know, people need to be incentivized to spend time with you. So you have to find the right people as well. Like flower software, not everyone can do what they asked them to do. They have to be accountants so but if you’re doing like something in the consumer app, you can go to certain websites and recruit people.

So what would you say is the best startup friendly methodology? You know, to stay lean and not, you know, stay much researching, evaluating?

If you can find anybody like someone, like your neighbor, your friends, family, colleagues, and anyone to validate, like, you can’t skip that ideation,

would you have the founder work directly with like, like a researcher, such as yourself? Or would you have them just mock up something and get coding right away, and then make changes down the line?

I would say that if you can get a designer to design something to design a prototype, and then test the prototype is always better than just coded. Because you can never see like, the risks in development and any any engineer giving you like an estimate, it’s never accurate. So even if even if you think something’s gonna be very simple is always taken, it’s always going to take longer so yeah, I think you should always put it out. Build design test with design as much as you can, even if it’s just like, drawing some action or wireframes, again, even if it’s done by the founder, himself or herself, is still better than just coders.

And then like, like, some

people are like, Oh, we just, you know, like, go live and see how people interact with it. But that’s still, like, a lot riskier than you were saying.

Sean 1:05:35
Yeah, I think it comes down to like your budget and risk profile and all that stuff. I can tell you that, like, what’s worked for me is like, I mocked it up, I built it and Bubble threw it out there. And I’m just iterating week to week like, figuring out what we need adding features removing features. That, to me, this is why this is like why I do a grip on no code. It’s just because I think it’s so powerful to be able to like control your own destiny not be beholden to the developers and have this long dev cycle where you have to communicate your idea and then wait for it to be built and then get in front of users and then find out it’s not the right thing. And then you just short circuit all of that

Lucia 1:06:11
so much. Question figma or envision the pros and cons do they come like uploads downloads functions, we have not natively the maybe there are plugins for that. Yeah, most likely, like there are lots of plugins for figma not so much for Envision, because figma is like an open source community. So there are people building things tools, you can find any tool in figma, really. So I would recommend it. I know we’ve used some plugging for like a traffic light that changes color. So you can tweak something like that and make it work for you.

Sean 1:07:00
Yeah, Bubble’s the Same was just the whole ecosystem of plugins, a lot of which are free, and just being able to like, like I’ve built this feature, I’ll just show it real quick. So this, by the way, is the site that I built in Bubble. It’s called problematic. And the thing that I rolled out two weeks ago was this page. And then last week, so what this is, is like we have these projects that we work on, I deconstructed them into like individual project needs, and then coated them against skill sets. And here, I added this last week. So you can now nominate, it’s open. In other words, like it’s not just me setting the problems and setting projects, I opened it up. So anyone can come in here, search for something, if it’s not in there. Add it, make sure that it complies with all of our rules.

specify which SDGs it addresses. And then if there are any upstream problems, you set those here. So you can do this. This is what I’m sorry, this is why I’m going to show that with the plugin. So when you nominate a project, you specify what problem it’s addressing, give some details. You get at least 100 characters and they’re like 200 characters. So now this is a plugin that I added that in the in the span of like, two hours to set this up. The last for browser based recording, to record a 62nd pitch video right from your webcam or your phone to pitch your idea. It uploads it saves it in the database. I mean, it just blew me away that this is this was a I think it was like $50 plugin, but you know, to have a developer create this for you. I don’t even know how many weeks we’re talking about. And here, I was able to pull that off in two hours and then add it submit it. So I mean, it’s really like the plugin ecosystem is just absolutely incredible with what you can accomplish.

Lucia 1:09:22
Now, I mean, took me around. It’s more like a prototyping sale. So it feels like it feels like for me like, Oh, I’ll build this one, I’ll get more money, but I’ll do it properly. It still feels like it’s not a proper way of building.

Sean 1:09:37
I think it’s a matter of scale and opinion like it’s been perfectly adequate for me. Granted, I don’t have a ton of traffic, but I know they’re serving like a Twitter clone that’s able to do how many hundreds of 1000s of requests per second or whatever. I mean, like you’d be surprised they can actually handle a lot of scale. I think if you get to some point like, should all be so lucky is to get to the point where we’re having scaling issues, because then that means we got traction. And you can go to a VC who will happily write you that check to have it built, you know, natively. So I don’t know I would have agreed with you a few years ago. And I think now it’s totally adequate to deliver production apps. And also things like Zanna, which is a database where you can last meeting Tonya showed us a good primer on Bubble. And she is also teaching a course on Zana, which is like, once you outgrow Bubbles database, you can hot swap out this other thing called Zano. And it wires up really easily. And now you’ve got like a whole production scale database to even handle more transactions. And that’s

cool. Anything else? Did I? Did you want to see? Adalo? I know.

Unknown Speaker 1:10:55
Yeah, I mentioned that I was doing some thinking as well, because I noticed [unintelligible speech] which I kind of understand this this spider app. Yep. Which is kind of a sad thing to talk about before that. Like a database to your prototype that you follow, or maybefigma, or they work together.

Sean 1:11:26
Yeah, I was thinking do something in OCR, you know, that OCR like, yeah.

Lucia 1:11:35
Like when you take a picture and recognize the text, and you can use it with and that was, yeah, not familiar with that some back and open pitch about how to use a dowel to raise something like

Sean 1:11:47
that. So the OCR portion of it would definitely be a plugin. That’s not something natively, you’re not talking about, like either uploading an image and having that processing happen on the server or something in the client, that OCR

Unknown Speaker 1:12:03
[unintelligible speech] OCR services. Okay. So far, I’m connected to them. They sound like they were done by engineers, for engineers. So I understand some technical there.

Sean 1:12:13
Okay. So let’s see.

Lucia 1:12:20
[unintelligible speech] For mobile apps. Yeah, I

Sean 1:12:26
can show you real quick. Let’s see here. This stands for optical character recognition. That’s pretty much what you pay for [unintelligible speech].

Lucia 1:12:44
camera onto like a screen or like a small can reach startup school, I’d say the next step would be okay, like use that kind of data and put it into some sort of database, you like to start on this island. And

Sean 1:13:00
so So zapier and Integramat would be another competitor, which is what I now use more than Zapier. Yeah, both of those are really, I think of them just like glue that can like take data from one app and send it to another and process it and just triggers that automate things like it’s really you can link to other 20 apps that way, if you want. So this is I’ll just show you real quick, while I got it open. So this is Adalo. I built a few dollar apps, the previous version of problemattic I built in here. And I would say it’s definitely more intuitive. And Bubble or it’s easier to get started with like the bar is much lower to be able to just go in here and like it’s kind of nice, just have you have this giant canvas, you can just literally like zoom in and out of two screens, and then make stuff. And then kind of like figma, you link it together. And there’s a database behind it. So when you get into the database part, there’s more to it. But it’s very doable to build an app in here. But I would also say it’s also a lot more limiting, like Bubble, you’re not going to hit the same cul de sac that you will with Adalo. Like I just got to a point where there was things I couldn’t do in it that I was trying to do. Whereas in Bubble, it’s a blinker, but there’s literally nothing you can’t build in Bubble. [unintelligible speech] it’s a steep learning curve, and like,

steep, like, Quick Time to effectiveness, shorter learning, but quicker to hit a wall where you can’t get, you can’t actually do what you’re hoping to do. It’s also very optimized for mobile. And building like desktop apps where I was aiming, I was targeting the desktop more than the mobile first. So you can do it all like Adalo makes it really easy to generate native apps, whereas a Bubble requires some plugins and extra work. So it just it I think you’ll find blog posts out there that compare them. But I think it really depends on what you’re trying to do. And you might get what you need out of Adalo. If you can do it in Adalo, then it’s way faster and easier to get there. But I just found that I couldn’t get what I wanted done. So, but I’ve been very happy with Bubble. Digital, for example, download, just like a Bubble on site from scratch, how to start from scratch. Yeah, I had to start from scratch, but I was planning to re architect it anyways, like, requirements changed. And so I just basically went back to the drawing board, and yeah, thanks. Yeah.

Anything else? Does anyone have any problems they’re struggling with or things they want to, like? Any challenges or anything that we can help you bust through? Like to me building no code, it’s always like, have these like spurts of productivity, and then you’ll hit a wall. And so it’s really helpful to have a group like this where we can like collectively help you get through it? Yeah.

Lucia 1:16:04
Do you have a recommendation for a good community? No code developers. It’s obviously insane. A lot of time, but there’s still a little bit of a learning curve. It saves a lot more time, somebody that’s maybe a little more more experienced. But it’ll still cut down on the time of development, or an MVP?

Sean 1:16:26
Do you mean like to hire or to like a community to surround yourself with and get answers from?

Unknown Speaker 1:16:32
No, maybe like, more of a freelancer, you could hire an employee to focus on one of the local top ones like Bubble, so then you can just feel faster with your new development?

Sean 1:16:44
Yeah, I mean, I recommend Upwork. At this point, it’s what I use for most freelance outsourcing stuff.

Unknown Speaker 1:16:50
That’s been pretty good for Bubble. Yeah, I

Sean 1:16:53
mean, let’s see how many people

Lucia 1:16:56
on Upwork. So if you want to search for like, specialists, when you search for that [unintelligible speech] Elance [unintelligible speech]

Sean 1:17:47
Bubble, depending on what plan you have, you can also in Bubble, invite collaborators. And it’s really good about like having like a development version, a live version, and then you can just very easily clone it and create like, you know, a forked version that you give you say developer good, do your thing. And then we’ll merge it back in to the live version and pull those changes to data. Like it’s very flexible. And you don’t have to like give your developer your login. You can like hire five developers on Upwork given me each access, let them build something take the best one fire the other four like?

Lucia 1:18:27
Do you think it was safe to get familiar with Bubble, you know, far? Anyway? I think like there’s basic functions and all the proper platforms to share. But they go different ways. I think these are handled poorly, I think we’ll take to actually always reinforce you know, some blog or severity. case, my wall right now.

Sean 1:18:58
You guys. Yeah.

So since I am a member of this, which is called pro no coder, so Tonya, last meeting is she’s the founder of this. And this is like essential at this point. Basically, they have office hours every day, I have their this bookmarked. And so this is their calendar, and I’m drilling here every day. Like to know that you’re never gonna go more than 24 hours without an answer to a question you have is fantastic. And it’s just all the it saves all the, like getting bottlenecked for a week at a time and you know, going through forums and getting frustrated and banging your head on it. This is just like literally every evening, I can go join the off South show the problem I’m struggling with and she’ll be like, Oh, this is what you do. And she’s got a few people who work with her. Now, so yeah, so that’s invaluable if you’re doing Bubble. For more umbrella, this is called maker pad. And I’ll put it again I’ll put all these links in the in the comments. But yeah, I would say this community is like, in general, there’s no code. So tool agnostic, you can go here, they have a ton of tutorials. It’s not the same level of access. You don’t have people like taking you individually through your specific problem every day. But this is more like if you’re trying to just go get up to speed. Just it’s invaluable to go and like, say, Okay, how do you build a Airbnb clone? And I guarantee you if we look in here and search for that someone will have there’s a search Oh, yeah. Yeah, there we go.

Airbnb clone, like, so there’s multiple, multiple tutorials that show you how to do this probably in every tool. And so that’s just like such a great way to learn to just shoulder surf, watch someone else develop, see how they do things? It’s. Yeah. Any other questions?

I’m going to show this while we’re here. So

I am a huge fan of Startup Weekend. And we are doing something similar. It’s a hackathon we run periodically. Lucia has been to. So we’re doing our next one on October 15. And this is at 42 Lisboa, it’s a beautiful space. It’s like a giant free code coding Academy. And so they’re letting us use their space and giving us access to students. And if you think you learn a lot today, go through and try to build something real with like for other people. And it’s just like, your mind will explode. Like she learned from like four different people of all different skill sets, building a project that attacks us the societal issue, and yeah, it’s just, it’s a fantastic thing. So do you have any questions? It’s, I’ll leave the link for this as well. But we’ll be there. And yeah, we provide the meals, and it’s all free and meet a lot of interesting people. That was two and a half days. So this one is just a single day. It’ll be a Saturday, all day events. But we also do a dinner on Wednesday night, just like a meet and greet strategy planning, try to form teams and then Saturday, go to town. It’s everything like so they’re their students are all in a coding school. So they’ll have a lot of engineering talent. Hopefully, we do have some note code people too, because we can like accelerate it a lot if we can use that.

Lucia 1:22:51
But the ones that? Neither.

Sean 1:22:59
So yeah, no, we invite like, copywriters, videographers, SEO experts, like we need people of all walks, and there’s just a number, you can if you want to see the projects that are listed, you’ll it’s all coded by like, needed skill skill set. So you might find something on there that that matches your skill set.

I guess well, if there’s no other Yeah. Yep. Agreed, like worksheet showing our list of the bills from [unintelligible speech]

you’d I don’t know of that. I mean, you might find that out there.

Lucia 1:23:55
[unintelligible speech]

Sean 1:24:06
One of the websites. So maker pad has this tools, things you can go in here and see all the tools and quickly get, like a rundown of what it is they got the link to their website. I don’t think that pricing because pricing changes, as we all know frequently. Yeah, GT that’s a good idea.

I don’t think this is specifically no code, but it’s SOS ops, some of which are no code. So yeah, if you find it through maker pad, you could probably go here and get like reviews and whatnot.So yeah. So yeah, all this that in

[unintelligible speech]

yep. Yeah, I can talk to you after it’s Ableton as a music program. So it’s mostly for DJs. I use it for like guitar looping. So it’s just yeah. And I actually used to run a meetup in Arizona on that tool as well. Yeah. Well, alright, well thank you guys for coming. If you enjoyed it, leave a positive review, tell friend, whatever. We’re just doing this, trying to help teach the community no code. So cheers.

Sean 0:27
Hey, Tonya, can you hear me? Hello?

Tonya 0:31
I sure can, how are you? Good. How you doing?

Sean 0:34
Good. Thanks.

People are filtering in will probably give me another minute and then we’ll get going here. Yeah, sure. And I’ll try to give you a view of the room. Everybody this Tonya. For the new people coming in welcome. Bathrooms are around the corner. And there’s more out there. Hey Tonya this is everyone in the room.

Tonya 0:56
Hello everyone.

Sean 1:00
Tonya what is your title there- are you one of the founders at Pronocoders?

Tonya 1:05
I’m THE founder of proto coders.

Sean 1:08
Right? The founder? Awesome. Yeah, so I’m in office hours with their program and it’s been immensely helpful. I use Bubble every day. And you know, it’s, it’s a super powerful tool. But it’s also very frustrating when you run into a stumbling block. So super awesome to have their service. So I figure the way to do this, we can get started. What I was thinking is we just go around the room and do intros, just so you know, who’s in the room, what the level of like Familiarity is, and you can kind of calibrate your talk to that. So I can start just like a quick, you know, 30 seconds on who you are, what you do what you’re interested in Bubble, maybe and we’ll kind of take it from there. And let’s not go in order, let’s actually just point at someone and then they’ll go next. So so I’ll go first. My name is Sean. I, my main thing is Problemattic. And I’m building an all in nocode. And I’ve been using Bubble now for about four months. And my interest in this group was just to advance more people using it. I just think it’s the best thing ever. It reduces the bar to enable anyone to build an app, which is so incredibly powerful. So So yeah, and what I hope to get out of tonight, I just hope that we can make this useful for everyone and see about making it a regular thing. Alright, so I will pick Rebecca.

Rebecca 2:37
Now, but I’m a beginner, so I wanted to try using tools like this. What’s up, Sarah?

Sean 2:48
Can you hear that? It’s on Yeah, I don’t know if you can hear that far away. It’s a little soft. But yeah, Webflow designer, working with some no code tools interested in what Bubble can do?

Nina Simone 3:00
Awesome. My name is Daniela. And you [unintelligible speech]

Sean 3:16
No code, Bubble, Webflow. Okay.

Rebecca 3:21
I’m a full stack developer. I’ve been using Google to cut some corners and dedicate myself to most business logic. I’ve used ?? Adalo and Firebase.

Tolga 3:37
I am Ali. I’m a serial entrepreneur with a degree in interaction design from immersive technology. I hate coding. So we are currently in beta at Atheneum. And we have to create an MVP as prototype so I want to learn about and they here to learn about that

Brian 4:00
book. What do you want to go next?

Sean 4:05
We ended up going in a circle anyways ahahah

Brian 4:12
[unintelligible speech]

Tolga 4:19
thanks. My name is Taleb and I’m pretty new to all this with just under a month. Now. We’ll be living in a month’s time on social media, social media strategists but I’m switching to development, technology and development curves and stuff with some business ideas in mind and I just wanted to kind of do something for myself. So that’s my very first time I had mentioned some tools that may be scary but awesome.

Sean 5:15
And you can point to people on the screen here we’ve got two people that are just joining.

Alex 5:20
I’m Alex. I’ve been in development for about 35 years, I worked in the media business. I’m an ex employee of Microsoft. We are the pioneers in internet internet. We were working with Microsoft technologies internet right in 1994. So I’ve been part of internet players that have been in the media business and record companies sort of trying to put television on the internet pioneers, video compression, etc, moved into logistics. And I left logistics because I was fed up with writing code. So I built my own framework for no code for the logistics sector, DHL DPD global transmission system. And so they took this, and I run a business out of UK economic and business. But I built my own logistics sector for no code, I got tired. I want to understand more about this.

Brian 6:17
[unintelligible] CEO of machine learning engineer by trade, and our product is effectively creating Siri for work in a low-code like, interface database. So hoping to meet more people are interested is a great basis, evolved interfaces and developed my own capabilities, as well as you know, maybe finding other people to work on this with.

Hey guys my name is Brian, I’ve been wanting to Lisbon now for about six months. I work in marketing for a fintech business in Australia. But I’m interested in Bubble because I’m frightened for the productivity of the students. I don’t know how to cope and football was like sort of middle ground for not having to learn how to cope with being able to do complex things. We wanted to meet other people building no code apps. Sick of reading forums and reading comments and thought it might be nice to connect with people in person. Maybe

Tolga 7:37
Hello I’m Tolga. Actually this year and trying to change lots of stuff in my life, I will deliver with my wife will spend some time here. And also I get your own stuff that I’m by profession by. But my idea is to use to build products to help people and entrepreneurs and startups to make people’s lives easier. And also, I love teaching. So at the same time, I want to train my own novel patients and everything to make myself useful. This is my approach.

Nina Simone 8:23
Everyone, I’m Nina Simone. I’m founder of purpose community builder. And I met Sean by quite awhile ago, and I’m seeking to make next steps of my startup. So I’m looking to build a web app. And when Sean told me about Bubble, I was like, Okay, check it out, maybe I can use some of the knowledge and maybe also meet some, some people that I could potentially work with on my project within the next month, like you

Sean 9:02
….and the gentleman who just walked in?

Seb 9:05
Hey everyone I’m Seb in venture investing and aspiring entrepreneur now. So I mean, no code the promise of no code or the potential kind of fits in both spheres. So just wanted to learn more and see what’s and what is what has its final form or where the direction going and and however it could it would face and act according to how it assists. Cool.

Sean 9:38
Cool, and we just finished with intros. Perfect.

Nina Simone 9:44
So introduction. So like wind redundancy, no code.

Sean 9:49
Yeah, this name what you do what you’re interested in.

Nina Simone 9:53
Okay, fine. I have a recruiters background. So previously I created a recruiting agency. So basically nothing at all. And I really wanted to I wanted to go into the product side of things. And so recently I built my own job job board. And in Webflow through for non tech, [unintelligible speech]. And so I learned that subject, basically. So it didn’t use Bubble yet. They already wants to see between the possible next step or the product condition. So yeah, I’m just really learning the basic level. Right.

Brian 10:31
Awesome. Okay.

Sean 10:34
We lost our guy who was on line. So I think that’s it for intros. And then before I turn it over to you, Tonya, I was just going to pull this up. So, guys, if you have questions, during Tonya’s talk, I’ve set this up. And I posted this link on the meetup. So I figured that the most least obtrusive way that we can collect all the questions and then go through them at the end. Or, I guess Tonya, I don’t know if you’re open to being interrupted during your talk, or whatever. But like,

Tonya 11:01
I’m totally open to being interrupted 😉

Sean 11:04
Okay, cool. So yeah, so the link of the meetup if you want to submit it that way, or feel free to interject and interrupt on Yeah, and with that, I will turn it over to you Tonya.

Tonya 11:14
Awesome, so I can barely hear what was going on in terms of the in terms of the introductions. So I heard that we have some coders in the room. And we have some no coders in the room who has experience with web flow. And I think I heard Adollo in there somewhere. And I think some of you have been working in Bubble already. My no code tools at this point. If I were to list them, it would be Bubble and Xano. And if you consider air table, a no-code tool, I don’t personally but other people do. And I’m, I’m familiar with air table. My background, I came from a non technical management position where I was managing a software company. And I was faced with JavaScript developers on my team, and the frustrations of all of the things having to do with organizing development for products that were for sale and having customers who were relying on our products every day. And I just I was I was super frustrated there. And I decided to take a break for a year. And I did and at the end of that one year break, I managed to find a Bubble and I haven’t looked back. Bubble is an incredibly powerful tool. And I think the thing that a lot of no code enthusiast who aren’t Bubblers per se, what they don’t understand is the extensibility of Bubble using code. So if you are familiar with JavaScript, and other languages, but particularly JavaScript, you can always use JavaScript with Bubble to create the app that you want and the functionality that you want. I don’t know that there are very many limitations to what you can do in Bubble. The limitations that do exist that I’m aware of and Bubble can usually be overcome by integrating Bubble with other applications and other services. So what’s the like? Does anyone have the can you build this in, in Bubble question, like have an example of something that you’re wondering if you could build it in Bubble?

Tolga 13:35
I want to ask Tonya. So the prototype we are trying to build is computer vision and artificial intelligence algorithm or software, which is used to study a dog and his behavior? And I don’t know how complex is the software to be made on Bubble or with coding as well. So this is something that I wanted to work on actually know about.

Tonya 14:05
Yeah, so for highly complex logic, especially logic that needs to run fast. Usually, we outsourced that outside of Bubble into say, like lamda, running on AWS, or into Zando for like for database calculations and things like that any kind of bulk data manipulation, and changes and creation, we would probably outsource to an external database. Bubble is very slow on the back end when it comes to making rapid changes. And then it’s perfectly fine to store as much information as you want in Bubble. It’s just getting that information back out from Bubble can be a little tricky because the way they’ve structured the database relationally and the way that they deliver the information back from the server, it’s just it’s too much too To load on the screen very quickly, the way around that is to use Zaino was the back end or even like a, an SQL or MySQL on that’s running on AWS instead. But I have seen, I’ve seen 1000s upon 1000s of workflows run in Bubble using an AWS integration, and it works fine. So using Bubble as a front end is a popular way to go. Anybody else have any questions like, can you build this on Bubble?

Brian 15:40
So what I’m wondering is with Bubbles support, interface elements that can be dragged and connected, let’s say thinking similarly to Microsoft pain, where you can put in shapes and then connect between them to create some sort of logical flow on the screen. Yep,

Tonya 15:58
you can do that Bubble has a plugin, that Bubble created called drag and drop elements. So you can take any element or shape that you can draw it in Bubble can then be dragged to another area on the page. And then you can run logic accordingly.

What else can I tell you about? Bubble? Like? What would be helpful for you to understand? Like, we’re just

Brian 16:28
Can we use Bubble, especially for small MVP. So if you scale your product, maybe you have to switch to another platform because like slack is performed on mobile. So good.

Okay, if you put your own software?

Tonya 16:49
That’s an excellent question. I have the same question. When I started working with Bubble, it was like, am I going to devote all this time to learning Bubble and then I’m going to have to move the whole product off of Bubble later. And at the time, I went, and I listened to like all of the podcasts that I could find where the founders were being interviewed. And they they were up to they said, essentially, you could, you could create a Twitter clone, and have 200,000 users are using it, I’m using Bubble with their current, their current at the time resources, that number has been bumped up to a million since then. So you can scale an app up to a million users on Bubble without having to move off of Bubble. The caveat there is that you can break Bubble with one user if it’s poorly built. So you there’s there’s an infinite number of ways you can break Bubble, you have to be able to build Bubbles in Bubble correctly and optimize that over time to achieve that kind of scalability. The largest the largest app Bubble I know of in terms of users, and it’s not the largest, I’m sure they’re much larger, but the the the only app owner that I know, running the largest, it’s like more than 10,000 users actively using it. And she’s needing to supplement her capacity every month with 43 units of capacity. So if you look at Bubbles pricing, they generally start at like 59 USD for a personal plan 159 usd per month for a professional plan. And then they have the 500 something dollars for a production plan. And after you get to the professional plan, you can start buying capacity units separately, and those run roughly $30 per unit per month. So I think her total cost for running on Bubble with 10,000 users was roughly $1,200 per month. Not bad for 10,000 paying users I don’t think.

Sean 19:03
Yeah, I think what’s interesting is like having done a couple of startups, it’s the idea of worrying about scale first is always like just make something that is you are fortunate enough to have to worry about scale, because most of us make the problem of just like not building the right thing. And Bubble helps you just like eliminate all the dev like headaches and work.

Tonya 19:25
And you can iterate so quickly with the Bubble. Yeah.

Brian 19:29
[unintelligible speech] By yourself in the shoes, okay,

let’s suppose that we have to look at from scratch. And because actually, that’s okay. There are 1000s or millions of users out and always reading or slowing down, and you say let’s do it from scratch again, sometimes we’ll be down to give me six months to make sure

Sean 19:57
we know exactly what to build at that point. And so like thing you can think about the the example she used with Twitter. Like if you build a whatever new app and it gets a million users, you’re pretty guaranteed at that point to have no trouble raising capital for that app versus like, you know, building scratch. I know they made this complaint with Twitter itself. Actually, when they built it in Rails, they’re saying, Oh, it’s not scaling, you get the fail whale like blah, blah, blah, it’s that you should have built it in C from the get go. Well, no, because it couldn’t have been that nimble have been iterated fast enough to build what people want, and

Tolga 20:32
how easy is it to migrate to other platforms to be able to scale?

Sean 20:39
You wanna answer that?

Tonya 20:40
Not easy? No. So you can’t really migrate from Bubble off to another platform without rebuilding from scratch. You can take your like, they’ll give you the like JSON file or whatever, but it’s not really usable anywhere else.

Sean 20:58
I think maybe the caveat is if you decouple and you use zaino for the database, I’m assuming that you can

sign and whatever new tool

Tonya 21:07
I would have if you were to

Sean 21:11
Xano Oh, is the tool that you mentioned, like, more extensible database that if you’re doing something more complex, or with a lot of concurrency, or I don’t know what parameters use best plaid Tanya for when to use Xano. But like anything super, like high power, you want to offload that to Xano, and in that case, you would not have to rebuild the database that would be stolen from Xano, you’d have to build the front end.

Brian 21:37
That’s your back end?

Tonya 21:38
Yeah. I’ve developed like a. Sorry, I keep talking over you. Go ahead. And I

Nina Simone 21:50
am sorry, I would have another question. I don’t know if it’s a stupid question or not, because I’m not technical in that sense. But I have worked with Bubble like once with another startup. And now I’m planning on building something that includes a kind of taxonomy and like ODC classification for the users. So I’m asking myself, How reactive is Bubble, as a, as a platform? Like, if I have to ask users like, very frequently to my clients to say differences in their like behavior? or decision making processes? Like, is Bubble like a good tool for that? Or is it difficult if I have a lot of like feedback loops? And so I don’t know if it’s an understandable question, how are we reactive is Bubble?

Tonya 22:48
Like, how, how fast is it to react to the user?

Nina Simone 22:52
Yeah, I can give you an example because when I was working with the startup, it was a web app. And we had to optimize, like, the process, especially when people opt in. And this took a lot of time. And like there will there were a lot of things that went wrong. So I’m asking myself, like, if it’s the right tool at all, if you have to ask and request a lot of informations on a frequent base volumes are?

Tonya 23:24
Gotcha, yeah, it’s really hard to say without having like a look at that app and how it was built, I audit apps all the time that are not built well, and they’re, and they’re essentially broken, because the, the, the logic is not elegant. They have a lot of different developers working on that sort of thing. But I work in apps all the time that have a lot of users, I manage one that has 4000 users. And it’s the backbone of that business. And it’s an it works fine. And it’s just a matter of of making sure that you’re optimizing for the performance, especially page load speed to start. And then I think perhaps more important, than page load speed is minimizing page loads by building single page apps as much as possible.

The on Page Speed is is normally not a problem unless you’re making extraneous database queries. And if you have a lot of a lot of queries, and you’re trying to return a lot of information that can slow Bubble down another

Nina Simone 24:35
question from the new one and nothing at all, as well. So I know there are no good tools that are quite, you know, low in terms of learning curve. So software for example, like it’s you know, it’s very easy and very simple. And then you have like Webflow for example, which is a bit more of a learning curve from someone who never used that before, and I feel like Bubble is quite intense that you have To have this technology or [unintelligible speech] features, and we need to get it and I just say, feel this the right way, and like elegantly and stuff. And I have my data, which is completely solo. So it’s wondering, is this like a really big learning curve in a way that is gonna be very time consuming for me to learn? [unintelligible speech] for me?

Tonya 25:26
And I would, I would say that yes, Bubble has a large learning curve. I know that’s not how they promote themselves. They’re like, pick a Bubble, you can turn out an app in a weekend and it’s like, Oh, come on, get stopped that that’s, that’s false advertising. And then they’ll they’ll tell you, they’ll be like, Oh, you can get an MVP working in under two weeks for less than $1,000. Like, get out of here, Bubble, stop it already. I think they have to do that. Like I don’t resent Bubble for doing that. Because I think it’s a numbers game for them. They, they like, attract enough people. And enough people see the potential and end up staying. But nobody would probably try them. If they said it’s really hard to learn Bubble. So I called Bubble, my 1000 pound magic wand. If I can lift the 1000 pounds, I can make magic happen with it. It’s about repetition.

Sean 26:25
I can chime in the person that mentioned that dello, I forget who that was. So that was actually what I built the first version of problematic in, it’s easier. So that might be something for you to look at. It was definitely like a lower learning curve. But you also quickly find yourself painted in a corner. And I built the first version. Eventually, I forget what the exact scenario was. But I just felt like my hands were tied. I couldn’t make it do what I wanted. And I’ve been researching Bubble. There’s far more Bubble developers out there. And I just figured out like, I need to take two steps back, start this thing from scratch and actually do it in that tool. Because it’s just literally unbounded. I haven’t found anything that you can’t build with Bubble with

Nina Simone 27:05
Jager. And you’re already at this point where you don’t sick enough to let go and look for another. Yeah, yeah, I guess what I need to reach you before moving to Bubble. But the other thing is, is that although no control like software, for example, very small compared to this just gives you constraints when you’re not other or nothing. Whereas Bubble, I think you need to like some constraints to fill. And it’s much harder when you’re a non tech? Yeah, so I guess you have the experience?

Sean 27:34
I do, I was a developer back in the day. So I have some of the concepts, which is useful. But it’s also like you can do it, you can power through this. And definitely like, if you’re familiar with web flow, this is I think, the next logical transition. web flow is great for websites, but it doesn’t let you build applications. Yeah, and I have, I don’t think I can find anything you could do with web flow that you couldn’t do with Bubble. I don’t know, correct me if I’m wrong, Tonya. But

Tonya 28:01
um, the reason to use web flow might be on the on the page load speed and for like, your ungated pages for SEO. But no, I don’t think you can use web flow in the way of like building an app like you can in Bubble. But I’m not a web flow expert, just so we’re clear. I was not very technical. When I started with Bubble. I had dabbled like, I had tried JavaScript before. And I have this really cheesy pun. Because like, it never stuck with me. And so I say Bubble is sticky like Bubblegum, because I was able to pick it up. And then it just like I kept building on the concepts that I was learning as opposed to picking it up making something work. And then coming back the next day and saying, I don’t understand this. This is like not a real language. What are you talking about with JavaScript? My my closest thing to programming at at the point that I started Bubble was air table. I had been an air table for a couple of years. And I think really understanding how air table works as kind of like this. This user interface friendly database really helped me understand how to structure the database and that translated really well into Bubble. My I do not, I do not put this out there as something like Oh, if you like, if I can do it, you can do it. That sort of thing. I think I was made for Bubble. I really felt like I was a fish out of water until I found it. So but I ticked a Bubble on August 24 2020 and three weeks later, had my first paid Bubble gig as a freelancer and haven’t looked back. So it’s like it took me three weeks to convince somebody that I knew enough Bubble to work for them. And they were happy I built an app for them. I built an MVP they the I think the only reason he hired me was because I was the only one crazy enough to tell them I could do is MVP in one week. cuz I had been listening to Bubble too much. And I said, Okay, I’ll do it and I almost died. I did turn over an MVP in one week. It was like, if I went back and saw that app now I’d probably die of embarrassment of course, because it was my first one, I dedicated a lot of time even after building them up in like, air devas boot camp. And eventually, like a couple months later got hired on as a developer at air does, which is, I would say, probably the most well known and, and one of the biggest Bubble agencies of certainly the oldest Bubble agency that exists. So I was just I heard a rumor, I don’t know if this is true. But I heard Andrew who, who’s the co owner of of air Dev was the number five user at Bubble.

Sean 30:48
Tonya, should we show like, Could you maybe share your screen? And I don’t know if we want to like maybe build a two page app or something? And like, just show people kind of like a feel for the tool? Maybe? Or would that be useful?

Tonya 31:01
Yeah, what should we build?

Sean 31:04
What are you guys gonna build a job board? The app is.

Tonya 31:13
So we want to, we want to build Hang on just one second, I have a fresh app ready to go. So it’s perfect timing. So what do we want to build?

Sean 31:24
We had job board was the first thing suggested

Tonya 31:27
a job board. Okay. Got it. So we’re gonna have two kinds of users, right. So we’ll have, I don’t need this. Okay, we’ll have roles here. And the roles will be a business and a freelancer, then we’ll come back into our data type here, and our user will have a role. That type of field will be this, the roles that we just created here. And then we’ll need jobs. So job post, here, the job post probably needs a title of type text. It will need an owner of type user I’m not going in in any particular order, obviously, then we’ll need a body of type text. And then we will need an application. Our application will be for a jobs specifically, which we just created as job post. And it will need an owner of type user. And let’s see, do we need anything else? Job post, let’s just start there. So then I’m just going to delete this page real quick.

So we’ll have the job board page. So the job board will consist of a repeating group a repeating group is how we short show list of things. So we’re going to need to show the job title and then probably the body which we can put here. And then we’ll need a button so that the applicant can apply.

So we’ll make this repeating group. With that any questions? What we’ll do is search for job postings. All jobs.

Yeah. Bury and loss will be the title. So it’s not going to be pretty. And then when the Apply happens, then we probably need to show that it’s been applied to. So we can probably do that with a How will we do that? We’ll do that with a hidden repeating group.

Nina Simone 34:21
So maybe a stupid question because I remember that for as well. So like you don’t have to use [unintelligible speech]

Sean 34:31
you can be you have the option to but it’s you can use Bubbles native Datastore

Nina Simone 34:37
it’s usually good to do that.

Sean 34:39
I don’t know Tonya when do you recommend people use a external data store versus Bubbles native data store?

Tonya 34:46
That’s a good question. I have. I think I sent it to you. I have a list. I kind of created a set of heuristics to kind of like consolidate my thoughts on on that. I would say that I’m essentially if you’re, if you’re, if you’re cross referencing cross references from data type to data type exceeds probably about 100, that I think it’s probably time to think about moving to an external database. If you I can share that list with you afterwards, I kind of go through it. Cool. So we’re here to search for applications. And then where

Sean 35:31
your questions is the big deal at the same time.

Tonya 35:38
Each items job. And then what we can do here is we’ll conditionally make this button. So when the repeating group that we just made up the empty one listed job post contains current cells job posts, and we want to disable the button. And that’s how they’ll know they’ve already applied to one. And then for the application, right now, we’ll just keep it really simple create a new one. So data create an application. The job will be current cells job post, and the owner will be the current user. And then now, we just need an interface to create the jobs. And so I will do that on. Let’s see, we’ll do that and then pop up just to keep things simple.

So we’ll need the input for the title. And then multi line input for the body. And then we’ll need a button when the button is done, we’ll create a new thing which will be a job post. But it will be multiple line inputs value owner will be current user, and the title will be the inputs value. And now we just need a way to open the pop up, which we can do with a button here. That says job post.

Here, so come here, and I will show pop up and probably clear at first. So we go here. And data pop up. Doesn’t really matter which order I put these these in, they’ll kind of happen at the same time. But I like to do it in the way in the order that I think of things. So now I just need to

Nina Simone 38:16
what was that? I wasn’t sure what was the six words? [unintelligible speech].

Tonya 38:22
So I’m resetting the pop up where I’m going to create the job post and then I’m showing the pop up where I’m going to create the job post. So I’ll create a few job posts and then we’ll show how the application is done. So so this is a very, like a very basic interaction that you can create. And this is what Bubble means when they say that you can create an app and an hour

Nina Simone 38:47
Can you create multiple logics or only one linear. Could I do like two or three processes with like different logics, they and then get linked with each other? Or does it have to be

Tonya 39:04
linear, you can enter Yep, you can interlink them, you can you can make. You can make the workflows as as lengthy as you need to, um, we consider performance. So we try to keep it as simple as possible as elegant as possible. And then anytime that it’s it’s complicated and we need things to run without making the user wait, we send it to the back end workflows to be run server side instead. So here’s our little I’m gonna create a job posts. So Apple developer, two years experience, like can work. Plus, create that. Say, here we’ll go there, no developer or two years experience Bubble a plus. So now we have these two job posts, and I can apply. And I didn’t do the workflow on a poli or I did, let’s see here. But in a play, we create a current source job post and current user. So something’s wrong with the logic on my button. repeating group is probably have the wrong one. We make this repeating group job to find jobs.

Naming conventions are important. repeating group applied jobs This here looks still won’t work. So this is supposed to be a list of the job posts

Nina Simone 41:02
that I’ve applied

Tonya 41:03
for. And it’s supposed to be affecting this button. So this is the work this is where you go in and you debug and figure out why is this button still clickable, even after I’ve told it not to be. So this is search for applications where the owners current users, let’s just check the database. For applications. It didn’t apply. That’s why current job so post, let’s just click the button again.

And now you can see it’s created it because I can’t click this button anymore. So it just didn’t run the first time I clicked it. So you can see I have an application in for the job. If I go, I can make this in addition to not clickable, I can also change its color to make it easier to see. color gray. So you can see which ones I’ve applied to because they turn gray after I apply.

So yeah, that’s it’s the design that gets me I’m pretty fast with logic of making things work. But it’s the design that always throws me off, I have a hard time getting things to look the way that that I want them to

Sean 42:38
seven and a half minutes without using slack.

Tonya 42:43
Yeah, but I. But that’s a good point, because I outsource the design. So when I’m working on an app, I’m never the designer, I find a designer for it. And then I set them to do the design. And after they get the design ready from the scope, then I go in and I just do my thing with the logic.

Sean 43:01
So I have a question like, do you when you’re designing an app? Do you do? Do you just do everything straight away and Bubble? Or do you do like mock up screens and then translate that into Bubble first.

Tonya 43:13
So I don’t design apps. But I I’ve heard it two ways. So I would say an air dev we use, we use figma. For our mock ups before we we create the app. And and it’s faster because we add an errand of we use. We use Canvas which is a template that has a bunch of components that you can mix and match and update to make it exactly what you want. Michael Aparna coaters is a designer and he does every he does the design in Bubble. So he he skips the figma part and just go straight to Bubble. But before I would ever build an app for real, I wouldn’t really just build it on the fly like this. I’d scope it out first.

Brian 44:09
Yeah, that was Bubble work. So we’re in the logistics business. We’ve got warehouse, things like that. A lot of our apps are dedicated to what happens inside a warehouse globally. So they actually treat very custom written for packages involves millions and millions of rows of data. How would it work on handheld devices? I’ll give you an example. To build a Bubble app for the warehouse person in a warehouse and scanning a barcode of a shipment check that it’s going to the right place and run conveyor belts and the work in a [unintelligible speech] continue to grow and build devices would have scanners or hardware and they have to interface with already existing large She basically says that hold on the current things I have. So it’s a corporate kind of question.

Tonya 45:09
So Bubble does very well integrating with rest API’s with the API connector. So as long as the other database has a REST API for Bubble to connect with, it’s generally not a problem. The hardware aspect of scanning, like if you’re if you can just use the handheld devices camera to do the scanning. And that’s fairly simple. I’ve known other apps that do more like that actually, like, the device is not just their, their camera, it’s something like a barcode scanner or something like that. I’ve, I’ve heard about apps, I’ve never worked on one of those apps. Heard about apps that do that. Yeah, I have one that’s doing using the camera right now to take a picture of the user and then running a background check through the API. And he’s like doing that for school security here and in the US. And yeah, he’s he’s managed to make sales of his app to school districts here. So just there’s

Brian 46:18
the suggestion if you build all the logic of the interfaces, and the control mechanisms through Bubble, and you then connect those interesting guys from say, our data sources, excuse GDPR encryption, we’ve got customer information [unintelligible speech]. That how you is sort of connect the elements together.

Tonya 46:42
And I would I instead of like scoping out a full app, I would probably just do like with a prototype to start. Right. So like something just quick, like what I just did. And then just going into the API connector and making sure you can make those calls and just prove prove the concept before you spend time building out the app. Remember,

Brian 47:04
when we talked about an app we without icons, traditionally, that’s what I call an app. How would we run that just through the web browsers on the devices? Tablet? Yep.

Tonya 47:17
So I’ll I’ll Bubble apps or web apps to start. And then if you want them to be like, available to download from Google or from Apple, you would have to have them wrapped is what is the term we use. So it’s not a native app. But it would be a native app that is a browser that doesn’t show the URL bar basically, that pulls up your, your web app within it.

Brian 47:49
Because zones and progressive, [unintelligible speech]?

Sean 48:14
Do you hear that Tonya?

Tonya 48:16
No, I didn’t quite get it.

Sean 48:17
Yes. If it’s a progressive web app that Bubbles generating? Or is it something else?

Tonya 48:22
No, there are some plugins that say that they can make your Bubble app a progressive web app, I don’t, I haven’t, I have yet to see anybody successfully, like come to me and tell me that their app is a progressive web app. Because Bubble is very much online all the time. And it’s interacting online through an internet connection all the time.

Brian 48:44
If we use if there are any templates that explain the idea of well the data model workflows that she just ran for very quickly in a kind of nice way that they can start playing with you know watching tutorials

Tonya 49:07
so the the templates that exist i don’t know i don’t know of any that are meant to teach you other than maybe like I yeah, I don’t know of any that are meant to teach you you can learn from them there. There are a lot of free templates and then in the templates, marketplace, so both to templates. So they have what like hundreds of different templates and you can play around with the free ones at no charge. And you can learn a lot from them. The caveat being is that anybody can place the template on the marketplace and you don’t know if they knew what they were doing or not. Though you just have to be pick one that you from someone maybe who explains their template and you and you trust them. Canvas is the One that I use the most, because I work at Air Dev, and it’s by air dev. And you can learn a lot in Canvas. But it’s it’s also very advanced things that are involved in it. So a lot of times it won’t make sense to a new user. In terms of like tutorials, and, and learning, I think there are lots of different free tutorials, the key words that you’re looking for is the new responsive editor or new responsive engine, I wouldn’t do any tutorials that weren’t built using the new responsive editor or engine, as they might call it. There are a lot of tutorials out there that were built a year or more ago, the new responsive editor came out in November. And so there are fewer tutorials out there that are are based, like our building using that new editor and it makes a big difference in what you will be seeing on your screen and what you can do in Bubble.

Tolga 51:05
[unintelligible speech]

Sean 51:17
any any personalities or like YouTubers who cover new features particularly well?

Tonya 51:23
New features particularly well, that Twitter? Yeah, Twitter, like Bubble’s, Twitter accounts, probably the best or maybe even their YouTube, I don’t know, if they keep up with their YouTube. Um, Eli beachy often will like make a comment on a new feature that he finds I follow him. He used to be a co founder of proto coders. And then you can follow up for new coders. I don’t cover new features, particularly like I’m not trying to stay on top of new features. But I do hold office hours six times per week. And we often explore new features and talk about new features in our office hours. And then I do have no code school that I teach where I teach Bubble from scratch.

Tolga 52:16
So in order to for creating an MVP, if we are short on time, do we have to go through like the Hello World type of beginning tutorials to get to the point? Or can we jump into creating our MVP? Like is, which one is the simpler way of doing this? Regarding Bubble?

Tonya 52:38
So I learned, do you want to take that one?

Sean 52:44
I’m probably just more recent. My trajectory with this was like I said, I did Adolo first so I had exposure with arguably an easier tool with a lower learning curve. And then I found the

Seb 52:59
limit on mute

Sean 53:05
this and so I hit the limitations of that tool and then Bubble basically uncap that and made it a lot. Like once like I had kind of basics from using Adolo. Then I knew where the boundaries were and then learning Bubble. I felt like I kind of like glaze past the initial learning curve. And then I was like, Okay, now what specific to this tool. So I don’t know that there is any one right entryway to all this. Like there’s good Udemy courses, I took one that was helpful and kind of given me the overview of like the IDE and how to use this stuff. You know, Tonya, you should absolutely just like maybe give a little plug for the no code school thing that you’re doing. I’m sure that would be awesome. I haven’t done it

Tonya 53:48
yet. It’s not a rush. It’s like it’s a I have an eight week Bubble foundation. So it’s Bubble foundations one and two that I teach and it’s eight weeks, but it’s two and a half hours every weekday. So it’s not something that you get through super quickly, it does take dedication, and it’s meant more for people who are planning to do Bable full time as like for their work. Although I do have founders in there who who enjoy it, get a lot out of it as well. And then we also have sections where we teach API’s, product management and Zanna

Sean 54:30
if you’re trying to just get the Jump Start maker pad is a really interesting community like I did their program for a while. And what that does is it gives you access to like all these tutorials that people have put together and they put out like you can clone their Bubble app and see how it works. And then walk through the tutorial with them. So that’s like a really good way to get up to speed.

Brian 54:53
Two quick questions, Can you build device for where interfaces specifically You know if you’re working on it if you want a device where for smartphone, tablets, kiosks, and you can build one app then go device to X might need to have different elements and streams at different pages viewport. That’s one question. And the other one is, is there any option for users to be interactive, by dragging and dropping? things rather than having static button like moving an object into wastepaper? Like before any interactivity on the screen?

Nina Simone 55:35
[unintelligible speech] Doing things? Or what are the advantages of upgrading something like device aware and not from the beginning or the response to what

Brian 55:48
happened? Because in the logistics sector, there isn’t a time to scroll up and down and move around very quickly. And certainly information to be completely irrelevant to the operator of a handheld device, to the operator had a tablet, and a lot more information about shipping instructions and things that are going on with one personalities [unintelligible speech]. The only the manager

Nina Simone 56:18
responsive design, at least that’s what I thought is like always adapting to the whatever device or interface we’re using.

Sean 56:29
Tonya, maybe you can show your screen and show like conditional with screen size, when it resizes that you can change the interface?

Brian 56:36
The answer is yes to your first question more about hiding and showing elements. Yeah, let’s

Sean 56:42
scroll down and you can do anything there, I can show you after this.

Tonya 56:48
So I can I can use, we use page width. So when the current page width is say less than 800 N I can I can change the visibility of the element, I can change its color, I can change all sorts of things about it. But I can do that at every level it not just to the individual like this button, but it can do it for the container around the button. I can also take a container like that is meant for a tablet and then switch it out for one that is meant for mobile if the page with this is less than a certain amount.

Sean 57:29
And then your other question,

Brian 57:32
is there any are there any interactivity modes? For example, moving objects using moving object with their finger? Yeah, so like plug in just a static kind of point thing?

Sean 57:42
Yeah, like so he’s asking about like visual controls, sliders, things that may be plugins that give you functionality beyond the traditional just like radio buttons and form, you know, standard form controls.

Tonya 57:56
I think the drag and drop works with the phone I’ve I’m can’t remember testing it. But I know like we there’s a there’s a tinder pile plugin, so you can create like that swiping thing that Tinder as an app would have. So there there are definitely ways that you can create custom plugins for yourself to be able to interact with the screen

Brian 58:18
as well. JIRA Trello does the same thing. You can move things visually into different lanes and [unintelligible speech]

Tolga 58:30
plugins involved as well.

Tonya 58:34
To get going here in just a moment.

Sean 58:36
Okay. Tanya, yeah, whenever you need to drop off, feel free. And thank you so much. Maybe you just leave a screen up for years. Also, people know

Brian 58:47
how to get a hold of you. Sure,

Tonya 58:50
yeah. If you if you go to a promo code, or let me just share my screen again.

Sean 58:59
So you’re asking about

Tonya 59:01
pronouns. So, prontocoders.com is my website, and then you can navigate from there to no Code School. We have API’s coming up. We’re teaching API’s on September 21, starting a new Zana class on October 3, and then we’re doing Bubble foundations on October 17. So thank you, everyone. Nice to meet you.

Sean 59:35
Thank you so much.

So to your question, you build I don’t believe that you can write the plugins themselves used by Bubble in Bubble you write them in like JavaScript or whatever language and then you have to register them

Brian 59:51
as a plugin. They like say kind of a marketplace. There is a really extensive one, and drag documents, Nancy.

Sean 1:00:04
Yep. They have like, there’s someone in the prenup voters academy that I’m a part of who’s built some kind of like photo recognition plugin thing and then put it in the marketplace. So yeah

they’re all different, but we can pull it up here so

plugins, so I don’t actually access it this way normally, like in the editor, I can just show you. So in the editor, the way that you add a plugin, and it’s super quick, you just go here on the sidebar, plug in

Brian 1:00:59
and add plugins.

Sean 1:01:01
And then here, take your pick, like someone said, barcode.

Brian 1:01:07
So here’s a bunch

Sean 1:01:09
of barcode plugins. Generator. Right. So

Brian 1:01:15
there’s a reason. Yeah, reader.

Sean 1:01:19
So yeah, and they’re all pressed differently. Once there’s no my suspicions are different. They’ve all got different models. Yeah. Yep. What? Yeah, so we can go any direction we want with this at this point. We can take a break, we could do a show and tell what’s useful to you guys? I can Yeah, I can show you. Sure. I mean, this is. So I built this. Like I said, it took me four months, or I’ve been doing this for four months. So I’ve been able to build let me show you first. The app looks like you weren’t. I was a developer a long time ago. And I’m terrible. Like I’m a horrible

Nina Simone 1:02:04
[unintelligible speech] wife. People would rather

Tolga 1:02:10
well, like Yeah,

Brian 1:02:11
I mean, it’s pretty much

Sean 1:02:14
I would say quicker, but also like less stuff to maintain. It’s just like, not particularly fun building interfaces, like you, as a developer, you want to focus on like interesting problems. And like, Bubbles, to me is the fastest way to like, build an app. And then it lets developers focus on like, the truly interesting challenges.

Tolga 1:02:34
Is it easier to be involved any problems?

Sean 1:02:40
Well, I would say like 90% of the problems you just never encountered, because this is all like drag and drop visual wired up, you do I mean, there are going to be some issues every now and then they have a really good thing up here that runs like, if I make something that references something that doesn’t exist, it’ll show a little issue, it won’t even let me deploy it. It’ll be like, you’ve got to fix one problem before you can deploy it. And then it does have version control has merged, you can like fork it and then have two different people working on different stuff and then bring it back together and publish. It’s it’s impressive,

Rebecca 1:03:15
most of these no code tools, a lot of the errors are so rare that they don’t keep an eye out their family. Yeah, it’s like magic, the whole thing is pretty simple. I was able to just get so some pages that we’ve gotten it vibrates and the organization left them back they they were so it’s pretty easy to debug. And if you can’t debug you just do like walk to console somewhere where it says I for once I submitted the prototype for six months, and I finish it in three weeks. Yep.

Sean 1:03:53
Yeah, it’s totally possible. I can actually show you this might be useful. I can show you the first version of problematic

Rebecca 1:04:01
that’s the other tool use

Sean 1:04:03
Yeah, so this is Oops, that was an earlier so this it’s it’s more like Apple I would say it’s kind of like you know, they have this whole concept of like a canvas where you can actually zoom out and just like literally just go to whatever screen you want to go to.

Seb 1:04:22
So using this [unintelligible speech]

Rebecca 1:04:27
database which is cool if you want something fast and you can connect it’s

Sean 1:04:32
yeah, it’s it’s not nearly the level of sophistication you can paint yourself in a corner like the data model is not as robust. So I would just say that like this is like training wheels like this would be a great place to you might even be able to pull off when you want to do in Adolo and it would certainly be easier. But if you’re trying to do something like more complex than that you’re gonna want to go to Bubble but you Yeah, I mean, so this is the app that I built the vision here. Like I retired last year, I did 26 year career in tech in sales and whatnot. So my belief is that I think that like, we can take the latent cycles of people, knowledge workers, and then like, people want to contribute, give back and work on interesting projects in their spare time. And I think we can solve a lot of world problems that way. So we pick big gnarly issues, and then interview experts come up with proposed solutions. And then we have like this, like, problem marketplace, essentially, where we deconstruct those into constituent parts, and then code them against different skill sets. And then when you sign up, you basically tell the system what you know how to do. These are all open ended tags. So you can go in here and say, like, I know, sales and marketing and like these computer programs, these languages, whatever, it’s all tag based, and then that matches you to the problems that you can work on. And so this is very like this page I released last week. So this is like brand new. But the idea here is that we’re going to make a whole community of people that can knock out projects and gamify it and eventually, layer in like bounties and price challenges and all that.

Brian 1:06:15
So you build most of that from the ground up, I built

Sean 1:06:19
a pocket. I mean, so the plugins that I’m using, I can show you the app. So these are all the screens and the app right here, there’s only like, some of these are like terms of service and whatnot, too. So there’s only really about like, eight or nine screens total. This is that project screen that we were just looking at, this is what it looks like. So it’s a repeating group with all these things. And I mean it, it gets crazy mind bending, I can show you like the data model, because I did have some development background. And so like I built the first version, and then I took a step back, and I’m like, Okay, what does this thing need to ultimately do? And then I started, like, visualizing like this fairly, you know, in depth data model. But like, this is literally everything this should get us. Like, this is what it’s going to ultimately like there’s this should be every table ever necessary to pull off what I’m doing.

Brian 1:07:17
You get back then into a Bubble.

Sean 1:07:21
You just create. Yeah, you go in. So there’s a data base tab here. And each one of these represents a table. Yeah. Yeah, this is a Google in Google Drive. This is one of the things so it’s draw.io. It’s a free

Brian 1:07:38
I use this as well to design stuff. But yeah, you save that and just import it. Really?

Sean 1:07:43
Not that I know. Yeah, there’s no, there’s no, like, import that I know of for this. But it’s also, it’s not that difficult. Like, in the time it took me to do this, which was probably like half a day to sketch all this out, then you already know what you need. So it’s easy to essentially design it. And now you’re just basically implementing like, go through add tables, add the fields, like come up and you’re done.

Brian 1:08:13
Relationships,

Sean 1:08:14
yeah, so it makes a unique key for every element in there. And then, but that’s obfuscated from you. And then you link it, you can have one too many, many, too many all those relations, scripts that you designate. in there. Yeah. It also has this concept of option sets, which is like, I don’t use them as much. I know Tonya is a big fan of interesting said it’s like a speed performance increase. But I come from more of a like a relational database background. And so I do everything is like a data table typically.

Rebecca 1:08:49
There’s one thing you mentioned, I have a whole workflow that is doing changes. One of the steps failed, does this revert back? Or do I get like a middle broken state? But the question is, does that transaction?

Sean 1:09:06
So obviously, you’re talking about within the application, something involving multiple tables and something fails, does it roll back versus so I think the way to do that would be to like, do some kind of asynchronous thing for that like real writ like, I don’t know a way to do that in a single like, straightforward. I guess, best way of doing it. I think Xano that database that she was talking about would probably be more appropriate for what you’re talking about. And you’ll just be like an API call that call it execute a function that does whatever it needs you need to do. And then within that you have the logic of trycatch, rollback, whatever you need to do. Use these. This is just the UI for it. Yeah. Definitely.

Seb 1:09:50
Can I jump in? Yes. If you use Zeno I wouldn’t use Bubble because it’s the user interface of Bubble is way too. complex compared to using Webflow. Or using we will. So you would use your interview database with zeno and do all the database work in zeno and then you will do the UI into some other more UI friendly. And then you will link the two together. I think, if you use zeno, then Bubble is too complex. The advantage of Bubble is everything is inside the same software. But my experience, it tends to be interesting to me everything inside, but it’s a bit slower.

Brian 1:10:39
With the tools, yeah, it’s I would make a case against that. But I think

Sean 1:10:43
it’s a personal preference with one database [unintelligible speech]

Tolga 1:10:49
SQL, PL SQL? Second question is cms server one, I just gave us some JSON market files. And I basically,

Sean 1:11:04
yeah, so it can both consume and produce like API endpoints. So I guess the answer is, I don’t know, like je, if it’s JSON, it’s a REST API, then you can definitely both consume it and generate JSON and send it to

other endpoints, and

Tolga 1:11:23
integrate and stuff like

Seb 1:11:26
that.

Sean 1:11:26
You can use their table as a back end.

Brian 1:11:29
Instead, it took me four months to do, how much of that was on the data model on the back end? And how much on the front end? And second question, are you happy with the user experience and the performance? Do you notice? Or do users notice as much difference on the web app? No, I

Sean 1:11:43
mean, so first, I started very simply, I like to launch the podcast. So I just none of this stuff existed. So the first thing I built was actually just a simple, like something, nothing you couldn’t do in WordPress by like, you know, making each one of these if it were a post, and then you go in, and you just want to see the details of it. Right, so, so basically just made like a glorified WordPress instance, with custom pieces of it. So if I wanted it to be coated against the United sustainability development goals, I wanted it to have this concept of solutions here that you could get further details on. And I wanted to integrate it with distortion, which is a forum software. And so I built all that it took me probably, like, almost a month to build that. And but then obviously, once you get over the hump, then your learning curve accelerates dramatically, and then being a part of their office hours has been just indispensable, like, knowing that you’re never gonna go more than one day before you get to whatever roadblock it is you’re hitting, that’s a huge level of competence.

Nina Simone 1:12:53
Can you easily rename keys, and it will name all of them automatically? Not?

Sean 1:13:02
Yeah. Because that’s something nice is that it is managing all the connections in the background. So it uses those like, unique identifiers that you never see. And so like I went through Case in point, like, I started out calling things solutions. And then I switched to calling them projects. And all I did was just went through and renamed it and nothing broke. But it was just

Tolga 1:13:23
me with Bubble, something that was AI and configuration.

Sean 1:13:28
So Bubble wouldn’t handle that. But Bubble’s, the interface and then all these other functionality. Like it can be a plugin, or it can be something that you call through an API to handle that. But Bubble doesn’t do like artificial intelligence. There’s nothing like that built into it.

Seb 1:13:43
You might do something like that in the future.

Sean 1:13:45
I don’t know. Let’s check

Tolga 1:14:02
you know, in turn up some of the scenes.

Yeah.

Sean 1:14:07
Yeah. The bids to goldfill.

Brian 1:14:12
Yep, absolutely.

Sean 1:14:24
So what Sorry, what did you specifically want computer visions

Seb 1:14:27
of anything else?

Sean 1:14:32
Okay, I mean, so here’s Google vision, Google Cloud Vision. What is Google vision? Something it’s along those lines. Yeah, I mean, there’s, there’s honestly, there’s plugins for so much stuff in here. And then if there’s another service as long as they expose an API that you can call, then we use they’re very connected. So I’m on their business plan. So I paid like 150 a month, I think. So the feature that I wanted that was not part of the cheaper one, I think it’s like 50 as the first year and then 150. And I don’t know what’s beyond that I haven’t needed anything. But like, I did want the ability to have to give access to my app and like, forget and have users with different permissions and and like that level requires the 150.

Brian 1:15:32
Worried about a Bubble of a lot of money. And

Sean 1:15:36
yeah, you can export, she mentioned it in passing that you can export everything as JSON. So at the very worst case, you can rebuild from that. And you’ve at least got like, they’ve got the UI in JSON.

Yeah, that’s a good question. I don’t know the answer to that. But I am curious as well, like the idea of having locked in always having a fallback and whatnot. That’s, that’s really important with any any SAS basically. So I will find that out. And I’ll post it in the group.

Tolga 1:16:20
The ability to export it. Yeah, you

Sean 1:16:25
can well, you can export the data for sure. And you can export some type of

Brian 1:16:30
income before that app. And you [unintelligible speech]

Sean 1:16:33
know, well, they wouldn’t have a business. So definitely. Right. Storage,

Brian 1:16:40
saying You weren’t logged in, is still in use and return. [unintelligible speech] This description saying when you’ve got 500 in storage?

Sean 1:16:59
Yeah, they have. I know they use a CDN. So they’re using CloudFront. I don’t know, I think, store Amazon. I think it’s like AWS s3 or something.

Brian 1:17:11
I mean, it’s very, very limited.

Sean 1:17:16
I’m not sure. Yeah, I’m not sure. Depending on what you want.

Brian 1:17:24
Yeah. We’ve got an amount of business as well. That’s all based on live events. And.

Sean 1:17:39
Yeah, yeah, to check on that. I don’t know.

Brian 1:17:43
Cool. Any other questions?

Seb 1:17:47
Just to be sure. If I start work on an MVP. And then I hire a developer, you can easily start from my, what I built? Or is

Brian 1:17:56
it better to start from scratch? No, you

Sean 1:17:59
can. So that’s why I got the version that I did, like, I upgraded at the point when I wanted to outsource some stuff to an Upwork person that I didn’t really know. And I didn’t want to just give him my account. So So I upgraded and then I basically gave him access and like, let him clone the app, build it and then merged it back in and

Tolga 1:18:17
deployed it. So instead, we can work on a project simultaneously. Correct? Yeah.

Brian 1:18:28
Do

that. There’s also a version control. It does say you can you can design, test and publish, meaning going back to the version, where design concept goes into. Users don’t like that kind of thing.

Sean 1:18:47
So like we could create a new version. Yeah, I guess I’m not a new start to get into the weeds. And I’m not technical enough to understand how it all works with the different databases and like what is referencing and what is actually cloning it and creating a new one. But I have forked it made a new version. Like when I made this new version of the site where I went away from having the podcast be the homepage, I actually wanted to make what it is now. So I forked it, but I was still able to like maintain add guests do that on the live version while I was developing the next version, and then I just merged it and got ready to go. No, it’s all handled. If they’re using Git. I don’t know. Like it’s masked from you.

Brian 1:19:32
But it’s all in science. Yeah. Yeah. Cool.

Sean 1:19:40
All right. Well, that unless there’s any other question. Yep.

Rebecca 1:19:45
So like I said, Everybody here is like just don’t mine already. But my function is to just develop apps. How can I get gigs?

Sean 1:19:54
How can you get gigs? Yeah, I mean, there’s a gentleman here who wants to hire

Nina Simone 1:19:58
So we do are we right part of the development? As far as development?

Sean 1:20:08
That I don’t know, because I’m not approaching it from that angle. So you have to learn, but I mean, I’m sure you can figure that out, look it Upwork we’ll get to see what the going rate is. You got a bidding, bidding well I’ve ever

Brian 1:20:30
seen, like 150 200?

Nina Simone 1:20:39
Ya know, because as you know, there’s a fight describe the discrepancy. We get our rewrites in Portugal and our rewrites in Belgium or Switzerland.

Brian 1:20:49
But that’s the beauty of development work, you don’t have to be confined with hourly rates. particular jurisdiction.

Rebecca 1:20:59
Yeah, yeah,

Brian 1:21:00
that’s most foreigners haven’t retired from

that actually exist? Unfortunately.

Nina Simone 1:21:10
No, no, I started working remotely wants you to know and 17 and after COVID

Rebecca 1:21:16
Yeah, exactly. The hardest part is the next one.

Sean 1:21:24
Alright. Let’s spend the last three minutes here with feedback: Is this useful? What did everyone think is this? We want to keep doing this? Would you come back? Some nods? Yeah. What would make this more useful? Any topics like just freeform throw anything out? Any anything we can do to make this better? Yeah, I don’t want to constrain it to Bubble. I figure like there’s plenty of stuff I’ve seen. I don’t know if everyone saw the Canny board. But like, definitely vote on topics. If you haven’t, it’s linked from the meetup. I see that it just would like some things that I think having done this now for a while, like what I think would be useful for people, but like, you can add your own topics.

upvote whatever.

Tolga 1:22:06
I think it’s all been it’s always been fun. We are in the process to have some time like community so we can discuss.

Sean 1:22:12
Totally, that’s right. I haven’t made a Discord more related to your Yeah, that was problematic. Yeah. So

Brian 1:22:22
do you think it might be useful to have a discord or slack channel for people trying out tickets? And

Sean 1:22:29
you guys tell me, I mean, if it is, let’s do it.

Rebecca 1:22:33
Especially in this environment, there’s a lot of tooling. And some guy knows those tools. So it will be pretty helpful. Like, I need GPS and maps. Yeah, can I get in terms of doing out there,

Brian 1:22:47
I was gonna say something like, obsession is showing some feature to be globally useful. And then the other half is that the workshop actually misses a very good example of what she built. US, but then we focus on one same bar ends, but you can focus on particular things that you’re interested in and get that group of people,

Nina Simone 1:23:12
I suggest that shows like, his organization, so that you will have like, new commerce is occurring. And then you have like different groups that have like different knowledge levels, so that you can see, okay, I’m one. So I come to the meeting of one. And when I feel that I’m advanced, because people have, like different availability to work on that project. So then I can decide on my now okay, now I go to level two, or two, level three, and then depending on what is the knowledge, like for example, level three could already like more go deep into problems and like making this workshop kind of farming,

Brian 1:23:55
he could potentially look at industries to be given. But I think both cases

Rebecca 1:24:10
feel isolated into a number. I don’t want to be like a take note of the river flow, let me know. Some other people would love to, like do their consulting as like, eventually, like inviting people who actually did this your face or you’re really cool.

Sean 1:24:30
That’s a good idea. For sure.

Nina Simone 1:24:33
Yeah, there’s no code here. It’s not like your JavaScript developer or something else. It’s just I know, I’m from healthcare, and I’ve got the similar

Brian 1:24:44
it’s very fascinating St. Joe’s house built out our people to design and build their

Sean 1:24:51
apps. Yeah, I think show and tell. I think if people start doing stuff with it, I find that super fascinating to just to see how people do what they do? Usually yeah

Tolga 1:25:08
I’ve been trying to build in Bubble for about a month now but it was always like, where do we begin from is too much too many things going on. So it’s kind of like a good starting point to give us an insight on things.

Sean 1:25:22
Yeah, I think the I can post the Udemy course that I took it was it was the thing that got me to get my hands dirty. And then when I discovered promo coders, that was what took me past because you do you get to a point of like, okay, I can actually make like a page like she made. But how useful is that like any then when you try to actually start making it useful? Now you’re hitting like little barriers of like, why doesn’t this query work that it. And it’s demoralizing when you get stuck on those things, but like promo codes like that, that office hours, just like you never got more than 24 hours without getting through it. So every week or so my thinking here like also, I don’t want another job. I’m not trying to create more work. Yeah, no, no, I figure like once a month is about the right frequency to me. And I don’t like maybe the discord. Like there are other ways to get support. So actually, I’m just a little bit leery of creating more work for myself. So I but I think we’re organizing this once a month finding experts bringing in like having something like this, like, I think it’s pretty good.

Tolga 1:26:24
Yeah. Is this a startup? thing or is

Brian 1:26:28
no, so I volunteer for them. I’m the entrepreneur in residence. And so they let me use the space. And I just figured this is a good place to post it. One of the things that we do in our development teams is, especially when I went to medical mellitus is, because we always had sessions once a month, where a developer would say, I can do something really special. And this is why I’ve developed my wife come up with this. Yeah, I want to show you how I built this page, or how I put this together. Yeah. Well, that once a month, hit somebody in the show notes, which you then don’t totally get that knowledge. Understanding. There is provocative

links with what she mentioned, like you need to level a similar group, because effectively, like problem with Meetup is that you get a lot of people who don’t know anything about something, then interested in learning the very basics. And then you have people that spend a significant amount of time to learning and they want to learn about this advanced use cases make an extra hour or so having different levels is beneficial. So I don’t think it’s just a defendant, because this is a visualization tool. I mean, you can be visualizing health care, or you see football, it’s all the same. It’s the elements, how you’re linking to the date. And

Sean 1:27:53
yeah, I think the use case that you meant the like, how is a person you’re using the tool like whether you want to make it your profession or whether you just want to like you don’t want to specialize in Bubble, you just want to like get your idea built. Like that’s a different use case for that.

Rebecca 1:28:10
I think that’s the type of feature

Brian 1:28:12
that you’re supposed to use. It’s ultimately the API calls, which add your colleagues to the secondary to the actual data, traveling from one to another.

Nina Simone 1:28:27
And also show it as different styles of how people use marker. So it’s maybe a little bit misleading. If your people are showing different use cases, like they have different size, I’m doing it and then you have to adapt the specifics side and like managing issues. That’s a big use case.

Sean 1:28:51
Yeah, well, the best thing to do, I’ll just show it while we’re here. Go to the meetup, and then at the very bottom,

Brian 1:28:58
get back one.

Sean 1:29:11
So down here, that’s the only thing that’s linked, this link right here. This will take you to the county board. And then this is where you can add your own or upvote and suggest and that’s how we’ll do and it looks like the next one will plan for October 5. And the most highly voted thing right now is tools for rapid prototyping, I can show you guys the stuff that I use. It’s literally this is one of the coolest things that I know how to do. You can write like on a piece of paper or on a whiteboard. And we use this thing called Marvel app. And it’s like the fastest way to stitch together a clickable prototype, which you can then give to people and like you learn so much by giving them something they can flick on and say, Oh, this is what I needed to do. This is what I don’t understand. So it’s really useful. Yeah. Cool. All right. Well, thank you everyone for Coming in yeah we’ll do this again next month yeah cheers

Transcribed by https://otter.ai