web & mobile app design for non-coders with bubble.is
TRANSCRIPT
![Page 1: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/1.jpg)
![Page 2: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/2.jpg)
Meet James.He knows no code. None!
He recently competed in a hackathon at Google Campus #PeaceHack.
![Page 3: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/3.jpg)
The Hackathon was organised by the charity International Alert to build app concepts to deal with CYBERBULLYING and was attended by students from a school that had a no-cyberbullying policy but it was still happening.
![Page 4: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/4.jpg)
Students interviewing #PeaceHackLDN teams about their apps.
![Page 5: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/5.jpg)
Created Web App in 2 Days!Without knowing any code, I created a demo Web Application for Schools to submit instances of Cyber-Bullying to Social Media Networks.
To give schools evidence as to whether a student’s Social Media account had been hacked.
![Page 6: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/6.jpg)
![Page 7: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/7.jpg)
Features
❏ Secure logins for Schools & Social Media Networks.❏ List of Information Requests for Social Media Network to
accept or deny.❏ Email notification to School when request is accepted or
denied.
![Page 8: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/8.jpg)
He was the runner-up! Competing against 10 teams of experienced developers.
![Page 9: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/9.jpg)
![Page 10: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/10.jpg)
Lots of people have App ideas…
With no one to build them
![Page 11: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/11.jpg)
Why not?Most people:● can’t code (& no time to learn)● can’t tell a good developer from a bad one!● don’t have the budget● don’t know how to manage the development
process
![Page 12: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/12.jpg)
You don’t need to be a coder
![Page 13: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/13.jpg)
“Bubble is a powerful visual programming tool that lets you build web & mobile applications without code”
![Page 14: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/14.jpg)
Designed to replace programming languages
Back-End
Front-End
![Page 15: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/15.jpg)
Key Features
Drag & Drop
Design
Workflow based
Programming
API Integratio
ns
![Page 16: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/16.jpg)
Drag & Drop
Design
![Page 17: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/17.jpg)
![Page 18: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/18.jpg)
Drag & Drop DesignThe drag and drop builder makes it simple to design apps.
➔ ElementsImages, icons, buttons, maps, videos, calendars, text input fields, date pickers, sliders and much more...
➔ Dynamic ContentText and images can be automatically updated based on user-generated data or APIs.
➔ Responsive DesignControl responsive design & submit apps to the Apple App Store
➔ FontsIncludes Google Fonts & libraries such as Ionic & FontAwesome
![Page 19: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/19.jpg)
If you don’t want to start from scratch you can get free and premium TEMPLATES from the Bubble community
![Page 20: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/20.jpg)
Workflow based
Programming
![Page 21: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/21.jpg)
![Page 22: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/22.jpg)
![Page 23: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/23.jpg)
![Page 24: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/24.jpg)
Workflow ProgrammingGet total control of your app, as if you were programming.
➔ IFTTT logicUse drop-down menus to define logic. If this, then that.
➔ User ManagementSign-up, login, save user data, social network authentication.
➔ DataCreate own databases. Bubble scales automatically.
➔ SearchFind, filter and sort data in real time.
➔ ExportExport user generated content to Excel (csv).
![Page 25: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/25.jpg)
API Integration
s
![Page 26: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/26.jpg)
Data-based APIsConnect to data provided by other companies and organisations.
These are a few of the data-based APIs already integrated into Bubble.
![Page 27: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/27.jpg)
Tool-based APIsConnect to tools provided by other companies and organisations.
There are many more APIs already integrated into Bubble.
![Page 28: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/28.jpg)
![Page 29: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/29.jpg)
![Page 30: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/30.jpg)
![Page 32: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/32.jpg)
Connected ServicesGet total control of your app, as if you were programming.
➔ EmailAutomatically email users in response to actions.
➔ API ConnectivityBring in data from all over the web..
➔ PaymentIntegrates with Stripe & others. Supports subs & deferred pmts.
➔ AnalyticsIntegrates with Google Analytics & Mixpanel.
➔ SEOControl how Google displays your pages in search results.
![Page 33: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/33.jpg)
Mobile App Developme
nt
![Page 34: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/34.jpg)
Mobile App DevelopmentCan build mobile apps to upload to the Android & Apple Apps stores.
➔ Build mobile version in Bubble
➔ Export to app file
➔ Submit to app stores Require a developer account (iOS: $99 pa, Android: $25 one-off)
![Page 35: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/35.jpg)
Apps built with
Bubble
![Page 36: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/36.jpg)
Web and Mobile Apps build with Bubble
Web Apps Mobile Apps
Source: notrealtwitter.com builtwithoutcode.com
Source: qoins.io simplegrocerylistapp.com zap style app
![Page 37: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/37.jpg)
Lean Startup
Methodology
![Page 38: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/38.jpg)
Lean Startup MethodologyCan use Bubble to quickly build Minimum Viable Products.
➔ Startup = Series of ExperimentsWho are our market(s) and how do we serve them profitably?
➔ Create a business model based on assumptionsEstimate traffic, conversion rates, revenue & costs
➔ Build a MVP to test assumptionsConfirm conversion,, renewal rates, referral & engagement rates
➔ AnalyticsMeasure performance with Google Analytics & Mixpanel.
![Page 39: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/39.jpg)
Pricing
![Page 40: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/40.jpg)
Bubble is completely free to build with! Subscribe when your app has traffic
![Page 41: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/41.jpg)
![Page 42: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/42.jpg)
Hosting & Version Control
➔ HostingFully hosted. No need to worry about maintaining or scaling your app
➔ Domain namesHost on Bubble or your own domain. Your users won’t know your app is build on Bubble.
➔ Version controlTest changes safely on a private version, then launch them with one click. Return to previous versions in a second.
![Page 43: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/43.jpg)
Learning Resources
![Page 44: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/44.jpg)
Teach yourself Bubble… Free Paid
Source: Bubble User Manual Bubble Learning Centre YouTube Playlist
Source: Udemy Course 1 Udemy Course 2 Codeless Academy The Code Free Startup Coaching Bubble
![Page 45: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/45.jpg)
Summary
![Page 46: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/46.jpg)
SummaryTo get familiar with Bubble:
➔ Go to HackathonsExperience the fun of development…. under pressure!
➔ Start testing a MVPConfirm the key assumptions of your business model.
➔ Quickly and easily iterateUpdate your app yourself, without delay or cost.
![Page 47: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/47.jpg)
If you were limited only by your imagination, what would you build?
![Page 48: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/48.jpg)
Questions & Answers
![Page 49: Web & Mobile App Design for Non-Coders with Bubble.is](https://reader030.vdocuments.us/reader030/viewer/2022033109/58f2b5861a28ab703c8b45bf/html5/thumbnails/49.jpg)
Thank You