Web & Mobile App Design for Non-Coders with Bubble.is
Download as PPTX, PDF3 likes852 views
James, a hackathon participant without coding experience, developed a web app in two days to help schools report cyberbullying incidents. He utilized 'Bubble', a no-code platform that allows users to create apps through a visual programming environment. Bubble offers features like API integrations, responsive design, and tools for mobile app development, empowering those without coding skills to build functional applications.
Web & Mobile App Design for Non-Coders with Bubble.is
- 2. Meet James. He knows no code. None! He recently competed in a hackathon at Google Campus #PeaceHack.
- 3. 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.
- 4. Students interviewing #PeaceHackLDN teams about their apps.
- 5. 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.
- 7. 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.
- 8. He was the runner-up! Competing against 10 teams of experienced developers.
- 10. Lots of people have App ideas… With no one to build them
- 11. 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
- 12. You don’t need to be a coder
- 13. “Bubble is a powerful visual programming tool that lets you build web & mobile applications without code”
- 14. Designed to replace programming languages Back-EndFront-End
- 15. Key Features Drag & Drop Design Workflow based Programming API Integrations
- 18. Drag & Drop Design The drag and drop builder makes it simple to design apps. ➔ Elements Images, icons, buttons, maps, videos, calendars, text input fields, date pickers, sliders and much more... ➔ Dynamic Content Text and images can be automatically updated based on user- generated data or APIs. ➔ Responsive Design Control responsive design & submit apps to the Apple App Store ➔ Fonts Includes Google Fonts & libraries such as Ionic & FontAwesome
- 19. If you don’t want to start from scratch you can get free and premium TEMPLATES from the Bubble community
- 24. Workflow Programming Get total control of your app, as if you were programming. ➔ IFTTT logic Use drop-down menus to define logic. If this, then that. ➔ User Management Sign-up, login, save user data, social network authentication. ➔ Data Create own databases. Bubble scales automatically. ➔ Search Find, filter and sort data in real time. ➔ Export Export user generated content to Excel (csv).
- 25. API Integrations
- 26. Data-based APIs Connect to data provided by other companies and organisations. These are a few of the data-based APIs already integrated into Bubble.
- 27. Tool-based APIs Connect to tools provided by other companies and organisations. There are many more APIs already integrated into Bubble.
- 31. API Demo Clarifai API can provide data on the content of an image. Demo
- 32. Connected Services Get total control of your app, as if you were programming. ➔ Email Automatically email users in response to actions. ➔ API Connectivity Bring in data from all over the web.. ➔ Payment Integrates with Stripe & others. Supports subs & deferred pmts. ➔ Analytics Integrates with Google Analytics & Mixpanel. ➔ SEO Control how Google displays your pages in search results.
- 34. Mobile App Development Can 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)
- 36. Web and Mobile Apps build with Bubble Web Apps Mobile Apps Source: notrealtwitter.com builtwithoutcode.com Source: qoins.io simplegrocerylistapp.com zap style app
- 38. Lean Startup Methodology Can use Bubble to quickly build Minimum Viable Products. ➔ Startup = Series of Experiments Who are our market(s) and how do we serve them profitably? ➔ Create a business model based on assumptions Estimate traffic, conversion rates, revenue & costs ➔ Build a MVP to test assumptions Confirm conversion,, renewal rates, referral & engagement rates ➔ Analytics Measure performance with Google Analytics & Mixpanel.
- 39. Pricing
- 40. Bubble is completely free to build with! Subscribe when your app has traffic
- 42. Hosting & Version Control ➔ Hosting Fully hosted. No need to worry about maintaining or scaling your app ➔ Domain names Host on Bubble or your own domain. Your users won’t know your app is build on Bubble. ➔ Version control Test changes safely on a private version, then launch them with one click. Return to previous versions in a second.
- 44. 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
- 45. Summary
- 46. Summary To get familiar with Bubble: ➔ Go to Hackathons Experience the fun of development…. under pressure! ➔ Start testing a MVP Confirm the key assumptions of your business model. ➔ Quickly and easily iterate Update your app yourself, without delay or cost.
- 47. If you were limited only by your imagination, what would you build?
- 49. Thank You