web and app design
TRANSCRIPT
Meet James.He knows no code. None!
He recently competed in a hackathon at Google Campus #PeaceHack.
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.
Students interviewing #PeaceHackLDN teams about their apps.
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.
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.
He was the runner-up! Competing against 10 teams of experienced developers.
Lots of people have App ideas…
With no one to build them
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
You don’t need to be a coder
“Bubble is a powerful visual programming tool that lets you build web & mobile applications without code”
Designed to replace programming languages
Back-End
Front-End
Key Features
Drag & Drop
Design
Workflow based
Programming
API Integratio
ns
Drag & Drop
Design
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
If you don’t want to start from scratch you can get free and premium TEMPLATES from the Bubble community
Workflow based
Programming
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).
API Integration
s
Data-based APIsConnect to data provided by other companies and organisations.
These are a few of the data-based APIs already integrated into Bubble.
Tool-based APIsConnect to tools provided by other companies and organisations.
There are many more APIs already integrated into Bubble.
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.
Mobile App Developme
nt
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)
Apps built with
Bubble
Web and Mobile Apps build with Bubble
Web Apps Mobile Apps
Source: notrealtwitter.com builtwithoutcode.com
Source: qoins.io simplegrocerylistapp.com zap style app
Lean Startup
Methodology
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.
Pricing
Bubble is completely free to build with! Subscribe when your app has traffic
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.
Learning Resources
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
Summary
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.
If you were limited only by your imagination, what would you build?
Questions & Answers
Thank You