What you need to learn to build apps in 2023 without any prior coding knowledge, in a matter of days

‍

It is 100% possible to build apps without any knowledge of programming languages.

Here is roadmap consisting of all the resources and skills you need in your arsenal so you can get cracking!

‍

1. No Code

The first step is to know about No-Code (aka Visual Development)

‍

If you have a non-technical background (i.e. you don't know much about coding), NoCode is ideal for you. (It is also good for techies out there but we'll focus more on non-techies for this post.)

No-code development is a type of development that allows absolutely anyone to create software using a graphical user interface, instead of writing code. The no-code movement rests upon the fundamental belief that technology should enable and facilitate the creation, not be a barrier to entry. You can implement complex functionality in just a few clicks and actually see it working.

Just so you don't go about thinking No-Code is something new, let me clarify. No-code is Excel for databases or Wordpress for websites (hope you've heard of those!)- basically any visual tool that allows you to build something. But it's only recently that there has been a revolutionary shift in the No-Code space with powerful tools popping up providing an end-to-end functionality. An example is bubble.io, which I am going to talk about in greater detail.

We have a detailed article about NoCode here:

https://www.azkytech.com/post/what-is-no-code

‍

Read More:

‍

• 📄 What is No-Code?: https://codebots.com/low-code/what-is-no-code-the-pros-and-cons-of-no-code-for-software-development

• 📄 How No-Code Solutions Let You Build Apps Without Coding Skills?: https://blog.fiverr.com/post/no-code-app-development

• 📄 What Applications you can build without code?: https://www.linkedin.com/posts/zubairlk_10-types-of-applications-you-can-build-without-activity-6945760658533564416-SgEn?utm_source=linkedin_share&utm_medium=member_desktop_web

• 📄 Importance of Low-Code and No-Code Development: https://www.simplilearn.com/tutorials/programming-tutorial/no-code-app-builder

• 📄 Future of No Code: https://www.forbes.com/sites/forbestechcouncil/2022/03/18/no-code-is-the-future-of-software-here-are-five-critical-things-to-drive-success-in-2022-and-beyond/

‍

Have a product idea? Get in touch now!

2. Bubble.io

‍

Bubble.io is a no-code app development framework that lets you design, develop, host, and scale applications without writing any code. Bubble currently hosts hundreds of thousands of web applications with millions of users, ranging from hobby projects and bootstrapped start-ups to Fortune 500 companies and universities. Bubble was named one of Fast Company’s Most Innovative Small and Mighty Companies of 2021.

With Bubble, you can build powerful web-apps like booking systems, job boards, marketplaces, SAAS, social platforms, etc.

Notice that I used the word "web-app". It is not a website. It is not a mobile app that you could download from your app store. Keeping it as brief as possible, a web-app is what you open on your browser and not "install" on your phone. Like Facebook, Airbnb, Twitter running on your browser are all web apps. Web apps are just as good as mobile apps for most use-cases.

A website is like your store front. The main purpose of it is to look pretty and have a clear call-to-action. A web-app, on the other hand, is hooked to your website and offers all other functionality like customer portals, profiles, calculators, etc. A user can't tell when they left the website and entered into the web-app. The transition is seamless.

So now that you have a clearer idea of what's possible with Bubble, you can go through the plethora of content linked below master bubble and truly understand how to build webapps.

Because of the speed of implementation on Bubble, one person can basically build an app ground up within days- something unheard of in the world of code. This is why, as a bubble developer you need high-level thinking and bear in mind the end-to-end design and logical flow of the app. This brings me to the next pillar of Bubble development- user experience (UX).

‍

We have a detailed article about what is bubble here

https://www.azkytech.com/post/what-is-bubble-io

‍

Read More:

• 📄 What is Bubble?: https://bubble.io/blog/what-is-bubble/

• 📄 What You Can Build With Bubble?: https://bubble.io/blog/no-code-app-examples/

• 📄 Get Started With Bubble in 10 Days: https://bubble.io/blog/get-started/

• 📺 Bubble’s Introduction Series: Welcome to Bubble: Introduction [1/10]

• 📺 Bubble Fundamentals Series: What You Can Build With No Code - Bubble Fundamentals: Lesson 1

• 📄 Bubble’s How to Build Series: https://bubble.io/how-to-build

‍

‍

‍

3. UX and Product Design

‍

A software product is built to solve problems for a 'user'. Learning a little bit about User Experience will enable you to build the right thing.

So what is UX?

User experience (UX) refers to any interaction a user has with a product or service. UX design considers each and every element that shapes this experience, how it makes the user feel, and how easy it is for the user to accomplish their desired tasks. Here's a break-down of the key UX components of your web-app.

Read More:

• 📄 What Is User Experience (UX) Design?: https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-design-everything-you-need-to-know-to-get-started/

‍

1. Personas

Personas act as stand-ins for real users and help guide decisions about functionality, design and ultimately marketing. As a design tool, they are a powerful way to communicate behaviours, goals, wants, needs, and frustrations. Consider Craiglist as an example. There is a buyer and a seller persona. A seller should be able to add listings while a buyer should be able to view listings. Having a clear idea of the personas involved and who is using the app for what is key in building a functioning app.

‍

Read More:

• 📄 Using Personas in Web Design: https://adpearance.com/blog/using-personas-in-web-design/

• 📄 Putting Personas to Work in UX Design: https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/

‍

2. User Stories

The purpose of a user story is to articulate how a software feature will provide value to the customer. Continuing with the Craiglist example, a buyer should be able to view all listings, choose a geographic region and be able to access contact details of the seller. The seller on the other hand should be able to add listings, view listings, promote and view analytics on their current listings. The user journeys give you, as a bubble developer, exact information about what features to implement from the end-user perspective on your app.

Read More:

• 📄 User stories with examples: https://www.atlassian.com/agile/project-management/user-stories

• 📄 A Guide to User Story Mapping: https://plan.io/blog/user-story-mapping/

‍

3. Wireframing

A picture is worth a thousand words. A wireframe is just that, a pictorial representation of your app without the bells and whistles. The click-able wireframes will give you an idea of the app's flow and functionality before considering visual design elements, like content, colour schemes and complex workflows. You can see the foundation of your app and map out the main features and navigation of your app for all personas.

Just to give you a very simple example, a login page has two text boxes for username and password and a submit button. A new user however, requires an additional "confirm password" box to re-type their password. Wireframing is essential to contextualize your app especially as your scope becomes bigger.

Once you have the wireframe mapped out, you are ready to build it in bubble.

Here at AZKY Tech Labs, we use Figma extensively for wireframing.

Read More:

• 📄 Website Wireframe Beginner's Guide: https://blog.hubspot.com/website/website-wireframe

• 📄 Low Fidelity Wireframes: https://uxdesign.cc/why-low-fidelity-wireframe-curious-in-product-design-c7bea87bc23d

• 📄 Low Fidelity Wireframes vs High Fidelity Wireframes: https://www.justinmind.com/wireframe/low-fidelity-vs-high-fidelity-wireframing-is-paper-dead

• 📺 Wireframing in Bubble: https://www.youtube.com/watch?v=eaIdxpri4B0

• 🔨 Wireframing Tools: 

• Balsamiq: https://balsamiq.com/
• Figma: https://www.figma.com/wireframe-tool/
• Adobe XD: https://www.adobe.com/products/xd.html
• InVision: https://www.invisionapp.com/home

4. UI

‍

Things would have been a lot simpler if all websites and apps were just black and white. But that's unfortunately not the case. Your app needs an aesthetic design of all visual elements. It needs to be presentable and interactive with consistent fonts, colour schemes, icons, buttons. If something sticks out or doesn't fit right then it ultimately affects the use-ability of your app. I've linked a number of resources to help you understand clean UI design.

‍

Read More:

• 📄 What is UI Design: https://www.uxdesigninstitute.com/blog/what-is-ui-design/

‍

1. Generic UI Resources

The following are the links to some generic UI resources that any web developer must know:

• 🧰 UI Resources: https://www.uigoodies.com/
• 🧰 Refactoring UI: https://www.refactoringui.com/
• 🧰 Learn UI Design: https://learnui.design/

2. Bubble Specific Resources

The following are the links to some Bubble specific UI resources that a bubble developer must know:

• 📺 Buildcamp: https://www.youtube.com/c/Buildcamp

3. Pre-Built Chrome Extensions

The following are the links to a few Pre-Built Chrome Extensions for Bubble’s UI:

1. 🧩 Made with Frames: https://madewithframes.com/
2. 🧩 Airdev Build Hub: https://build.airdev.co/
3. 🧩 OpenBuild: https://www.openbuild.io/
4. 🧩 Atomic Fusion: https://atomicfusion.io/

‍

5. Responsive Web Design

‍

We use a number of different devices to access the same app. Phones, tablets, laptops, desktops- all with different resolutions and screen sizes. Responsive web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform, and orientation. I'm sure you've experienced the frustration when your phone goes from landscape to portrait mode and some of the text is just inaccessible. That's the example of bad responsive design and we definitely don't want that.

Read More:

• 📄 What is Responsive Web Design: https://www.bluecorona.com/faq/what-is-a-responsive-website-design/

‍‍

1. Flexbox

• 📄 A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

‍

2. Grid Layout

• 📄 Grid Layout: https://www.w3schools.com/css/css_grid.asp

‍

3. Bubble’s Responsive Engine

• 📄 Bubble’s Responsive Design: https://bubble.io/responsive-design

• 📄 Under the hood with Bubble’s responsive engine: https://medium.com/@mneary/understanding-responsiveness-in-bubble-421fb7ed402c

• 📺 Bubble’s New Responsive Tutorial: https://www.youtube.com/watch?v=2wLjFmKEZ3M

• 📄 New Responsive Tutorials Mega Thread: https://forum.bubble.io/t/new-responsive-tutorials-mega-thread/178081

‍

6. Database

As the name suggests, database is a collection of data that is organized so the information within can be easily accessed later. Databases power everything from banking software to scientific research to government records, as well as the websites you use every day, like Amazon, YouTube, Netflix, and Wikipedia. In fact, if you found this page through an Internet search engine, your search was powered by a (very, very large) database.

Read More:

• 📄 What is a Database?: https://blog.airtable.com/what-is-a-database/

• 📄 What is a Relational Database?: https://blog.airtable.com/what-is-a-relational-database/

• 📄 Understanding Bubble’s Data Type Fields: https://www.amliesolutions.com/bubble/basic-features/understanding-bubbles-data-type-fields/

• 📺 How to structure your bubble database?: https://www.youtube.com/watch?v=hofWkAFqCwU

• 📺 How to set up a custom database in Bubble?: https://www.youtube.com/watch?v=Z_ueGppnjBY

• 📺 How to configure Database in Bubble?: https://www.youtube.com/watch?v=F5NImOedcdw

• 📺 Good Database Design in Bubble: https://www.youtube.com/watch?v=CJjN84YESJE

• 📺 How does data move through your app?: https://www.youtube.com/watch?v=brMdG6y8CSc

• 🧩 Prebuilt Database Models Chrome Extension: https://nocodedatabases.com/

Paid Courses:

• 📚 JJ Englert: https://nocodealliance.org/bubble-databases-course

‍

7. Logic/Workflow

‍

Bubble is built around a workflow-based programming system. A workflow is composed of an event, which is what triggers the workflow and the series of actions that run. The combination of the event and the series of actions is what defines a workflow.

‍

Read More:

• 📺 Workflow logic for beginners: https://www.youtube.com/watch?v=onUTDrOoJNg

• 📄 Building Workflows: https://manual.bubble.io/help-guides/building-workflows/the-basics

• 📄 Scheduled Workflow: https://manual.bubble.io/help-guides/the-bubble-api/scheduled-workflows

• 📄 Recursive Workflow: https://manual.bubble.io/help-guides/the-bubble-api/recursive-scheduled-workflows

• 📄 Backend Workflow for beginners: https://nocodeassistant.com/bubble-backend-workflows/

• 📄 5 Ways To Use Backend Workflows: https://www.amliesolutions.com/bubble/basic-features/what-are-backend-workflows/

• 📺 Backend Workflow: https://www.youtube.com/watch?v=Kd9pLy4ob8I

‍

8. Debugging

‍

Debugging is the process of detecting and removing existing and potential errors (also called as ‘bugs’) in a software code that can cause it to behave unexpectedly or crash.

‍

Read More:

• 📄 Introduction to Bubble’s Debugger: https://bubble.io/video/intro-to-the-debugger

• 📺 Debugging a Bubble App: https://www.youtube.com/watch?v=abL4iwiyZOE

‍

Have a product idea?
We can build it for you. Get in touch now!

‍

9. Security and Privacy

‍

Web application security is a central component of any web-based business. The global nature of the Internet exposes web properties to attack from different locations and various levels of scale and complexity. Web application security deals specifically with the security surrounding websites, web applications, and web services such as APIs.

‍

Read More:

• 📄 Bubble’s Security: https://bubble.io/security

• 📺 Introduction to Security and Privacy in Bubble: https://bubble.io/video/security-and-privacy

• 📄 Audit your Bubble App: https://forum.bubble.io/t/micro-app-audit-your-bubble-app-and-keep-it-safe/160117

• 📺 What are Privacy Rules and How to set them?: How to Setup Privacy Rules | Bubble Tutorial

• 📕 Ultimate Guide to Bubble Security: https://www.amliesolutions.com/books/the-ultimate-guide-to-bubble-security/

10. Heading to Production

‍

The next step is to learn about taking your application to Production.

The Web application needs to be deployed after finishing the development process. In the deployment process, the application goes through a sort of checklist that includes acquiring a domain name, using branded emails for all the communication in the application and deploying you application live.

Read More:

• 📄 Version control (Test vs Live): https://manual.bubble.io/help-guides/maintaining-an-application/version-control

• 📄 Domain and DNS: https://manual.bubble.io/help-guides/customizing-an-application/domain-and-dns

• 📄 Sending Branded Emails: https://manual.bubble.io/help-guides/customizing-an-application/email

• 📺 Deploying your Bubble App: https://bubble.io/video/deploying-your-bubble-app

• 📺 Deploying and Scaling: https://bubble.io/video/deploying-and-scaling

11. Other/Misc

‍

As you can imagine, bubble is a vast platform and ecosystem.

Now that we have covered the basics about bubble, there are many other features and resources available for a bubble developer that do not come under any other category. These include the following:

1. Bubble Community

• Bubble Forum: https://forum.bubble.io/
• Bubble Blog: https://bubble.io/blog/

2. Bubble Academy

• Bubble Academy: https://bubble.io/academy

3. Bubble Coaching

• Bubble’s coaching: https://bubble.io/coaching
• Nocodeminute: https://www.nocodeminute.com/

4. Bubble Bootcamps

• Bubble: https://bubble.io/bootcamps
• Airdev: https://build.airdev.co/bootcamp

5. Bubble Free Courses

• 📺 Bubble Crash Course for Beginners: https://www.youtube.com/watch?v=CSMx0cTa6Ls
• 📺 The Complete Bubble.io Crash Course For Beginners:  https://www.youtube.com/watch?v=IWdDr54qE4A
• 📺 Free Bubble Bootcamp Course: https://www.youtube.com/watch?v=HgIvRPqqRaA&list=PLbfYTV6dL4yyO-LJqnBXuknGLVXNPPdSL

6. Bubble Paid Courses

• 📚 Building with Bubble: https://buildingwithbubble.com/courses/
• 📚 Matt Neary: https://www.thinkitbuildit.co/course
• 📚 Gregory John: https://www.udemy.com/course/the-bubble-beginners-bootcamp-course/
• 📚 Jordan Richardson https://nocodeadvantage.com/
• 📚 100DaysOfNoCode https://www.100daysofnocode.com/
• 📚 WeAreNoCode; https://www.wearenocode.com/

7. Books on Bubble

• 📕 Ultimate Guide to Bubble Performance: https://www.amliesolutions.com/books/the-ultimate-guide-to-bubble-performance/
• 📕 Ultimate Guide to Bubble Security: https://www.amliesolutions.com/books/the-ultimate-guide-to-bubble-security/

8. Templates

• Bubble Templates: https://bubble.io/templates
• Zeroqode: https://zeroqode.com/templates
• Eazycode: https://ezcode.co/templates
• Airdev: https://bubble.io/contributor/airdev-1510790559301x589864989742636700

9. Plugins

• Bubble: https://bubble.io/plugins
• Zeroqode: https://zeroqode.com/plugins
• Techblocks: https://www.techblocksco.com/#plugins
• Eazycode: https://ezcode.co/plugins

‍

12. Advanced areas

Now at this stage, you are ready to enter the advanced areas of bubble in your bubble developer's journey. 

1. API Integration

An API is a set of programming code that enables data transmission between one software product and another.

‍

• 📄 What is API: https://www.altexsoft.com/blog/engineering/what-is-api-definition-types-specifications-documentation/ or https://www.guru99.com/what-is-api.html

• 📺 How to use API connector in Bubble?: https://www.youtube.com/watch?v=YW7pA9c3tG8

• 📺 How to Connect APIs to Bubble?: https://youtu.be/dBThnxIvCRc 

‍

2. Webhooks

Webhooks are automated messages sent from apps when something happens. They have a message—or payload—and are sent to a unique URL—essentially the app's phone number or address. It's how PayPal tells your accounting app when your clients pay you, how Twilio routes phone calls to your number, and how WooCommerce can notify you about new orders in Slack.

‍

• 📄 What are Webhooks?: https://zapier.com/blog/what-are-webhooks/

• 📺 Integrate Your Bubble.io App w/Webhooks: https://www.youtube.com/watch?v=K505zdwc3qo

‍

3. Sub-apps

Sub applications are a powerful feature available in the Production plan. The feature sets up a relationship between a “main app” and one or more “sub-applications” and makes it easier to push any changes from the main app to its sub-apps, while all main and sub-apps have their own database. 

‍

• 📄 Sub-Apps: https://manual.bubble.io/help-guides/customizing-an-application/sub-apps

‍

4. Patterns

At the last step of your becoming a bubble developer, you will learn about the set patterns of apps that you will be most probably building as a bubble developer. These App patterns are the following:

‍

• 📄 Marketplace Apps: https://manual.bubble.io/help-guides/working-with-data/guides-setting-up-your-database-by-app-type/marketplace-apps

• 📄 Directory & Listings Apps: https://manual.bubble.io/help-guides/working-with-data/guides-setting-up-your-database-by-app-type/directory-and-listings-apps

• 📄 SaaS Apps: https://manual.bubble.io/help-guides/working-with-data/guides-setting-up-your-database-by-app-type/saas-apps

• 📄 CRM Apps: https://manual.bubble.io/help-guides/working-with-data/guides-setting-up-your-database-by-app-type/crm-apps

• 📄 Online Store / Ecommerce Apps: https://manual.bubble.io/help-guides/working-with-data/guides-setting-up-your-database-by-app-type/online-store-ecommerce-apps

‍

Consequently, if you have completed all the steps mentioned above, you are now ready to kickstart your career as a full-fledge Bubble developer.

‍

If you know of more resources, please feel free to share them at roadmap@azkytech.com and we'll add them here.

‍

If you are overwhelmed by this and would like us to build your product, get in touch!

‍

Good Luck!

‍