web & mobile app design for non-coders with bubble.is

49

Upload: james-eckhardt

Post on 16-Apr-2017

109 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Web & Mobile App Design for Non-Coders with Bubble.is
Page 2: Web & Mobile App Design for Non-Coders with Bubble.is

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

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

Students interviewing #PeaceHackLDN teams about their apps.

Page 5: Web & Mobile App Design for Non-Coders with Bubble.is

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
Page 7: Web & Mobile App Design for Non-Coders with Bubble.is

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

He was the runner-up! Competing against 10 teams of experienced developers.

Page 9: Web & Mobile App Design for Non-Coders with Bubble.is
Page 10: Web & Mobile App Design for Non-Coders with Bubble.is

Lots of people have App ideas…

With no one to build them

Page 11: Web & Mobile App Design for Non-Coders with Bubble.is

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

You don’t need to be a coder

Page 13: Web & Mobile App Design for Non-Coders with Bubble.is

“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

Designed to replace programming languages

Back-End

Front-End

Page 15: Web & Mobile App Design for Non-Coders with Bubble.is

Key Features

Drag & Drop

Design

Workflow based

Programming

API Integratio

ns

Page 16: Web & Mobile App Design for Non-Coders with Bubble.is

Drag & Drop

Design

Page 17: Web & Mobile App Design for Non-Coders with Bubble.is
Page 18: Web & Mobile App Design for Non-Coders with Bubble.is

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

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

Workflow based

Programming

Page 21: Web & Mobile App Design for Non-Coders with Bubble.is
Page 22: Web & Mobile App Design for Non-Coders with Bubble.is
Page 23: Web & Mobile App Design for Non-Coders with Bubble.is
Page 24: Web & Mobile App Design for Non-Coders with Bubble.is

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

API Integration

s

Page 26: Web & Mobile App Design for Non-Coders with Bubble.is

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

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
Page 29: Web & Mobile App Design for Non-Coders with Bubble.is
Page 30: Web & Mobile App Design for Non-Coders with Bubble.is
Page 31: Web & Mobile App Design for Non-Coders with Bubble.is

API DemoClarifai API can provide data on the content of an image.Demo

Page 32: Web & Mobile App Design for Non-Coders with Bubble.is

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

Mobile App Developme

nt

Page 34: Web & Mobile App Design for Non-Coders with Bubble.is

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

Apps built with

Bubble

Page 36: Web & Mobile App Design for Non-Coders with Bubble.is

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

Lean Startup

Methodology

Page 38: Web & Mobile App Design for Non-Coders with Bubble.is

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

Pricing

Page 40: Web & Mobile App Design for Non-Coders with Bubble.is

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
Page 42: Web & Mobile App Design for Non-Coders with Bubble.is

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

Learning Resources

Page 44: Web & Mobile App Design for Non-Coders with Bubble.is

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

Summary

Page 46: Web & Mobile App Design for Non-Coders with Bubble.is

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

If you were limited only by your imagination, what would you build?

Page 48: Web & Mobile App Design for Non-Coders with Bubble.is

Questions & Answers

Page 49: Web & Mobile App Design for Non-Coders with Bubble.is

Thank You