No-code full-stack tools,

Bubble (Bubble)

There are various no-code tools in the world, such as ImeWeb, Cafe24, and WordPress. Recently, however, many no-coders have started looking for bubbles rather than the tools they use. Why are so many people interested in bubbles?

Bubbles Replace both front and back endsDoing

Full-stack no-code toolsThis is because

Unlike other no-code tools, Bubbles can perform both front-end and back-end tasks without coding. Thanks to the overwhelming degree of freedom and variety of functions called a full-stack no-code tool, all functions that are difficult to implement with traditional no-code tools can be implemented in a bubble.

1 ️ * You can implement the service screen as you thought by manipulating the UI in pixels.

2 ️ ︎ You can create responsive services that are compatible with both PC, tablet, and mobile.

3 ️ ︎ You can build a database with a few clicks and check the saved data directly in the editor

4 ️ ︎ Complex and diverse functions can be implemented without a single line of code.

5 ️ ︎ Plugins made by people around the world can be installed and used immediately at any time (ex. Kakao login, Naver Maps, Tospaces payment, etc.)

Prepared by a self-certified bubble expert

Bubble beginner course

Korea's first and only bubble author joins us

Bubble is an overseas service, and since it has recently become known in Korea, there are still not many domestic study materials. NoCoders is an authorized bubble agency and bubble specialized education company. We are running various online courses to let more people know about the bubble, and we have partnered with various organizations and organizations to inform about the bubble. Above all Published the first and only bubble tutorial in Korea, <Full Stack No Code Tool with Bubble>It is loved by many people. The experience and know-how of various educational activities were collected and captured in this class 101 lesson.

Launched more than 30 services in 3 months

I captured the know-how.

In just 3 months since its establishment, NoCoders has created more than 30 services. Many customers use services produced by Nocoders Preliminary Startup Package Selection, Admission to Youth Entrepreneurship Academy, Asan Sharing Foundation Grand Prize It has won awards at various startup contests and events, etc. Although it has launched various services and had successful experiences, there was a moment when Norcoders first started a bubble. I prepared the course while thinking about the past time about what would be the best course from a beginner's point of view.

I will tell you the whole process of creating a “real service”

Service planningSteadily from

“I have to make what the customer wants, not me”, is the most important principle when creating services. though Those who have no experience in service planningIf so, Where to start and how to plan It's bound to be overwhelming. However, if services are developed without planning, services that have been painstakingly created over a long period of time may not be effective. We will guide you step by step from planning so that people with no IT experience and those who are not planners can create their own services.

1 ️ ︎ Identify the problems faced by your target customers

2 ️ ︎ Deriving a solution from the real cause of the problem

3 ️ ︎ Plan the overall structure of a service with an information structure diagram (IA)

4 ️ ︎ Plan individual pages with wireframes

5 ️ ︎ Designing a database

With style Service identityDefinitely until

To properly create services with bubbles, you must make proper use of the style function. The style function is a function that registers design settings in advance and immediately loads and uses them whenever necessary. If you use this, The brand tone and identity of the serviceYou can take it consistently. Also, instead of setting a new one every time you do development, the registered style is loaded directly Dramatically reduce development timeYou can do it.

1 ️ ︎ Registering font styles

2 ️ ECT Registering a color style

3 ️ ︎ Registering element styles

While creating various functions Bubble development masterdoing

The fastest way to learn about bubbles is to create various functions yourself. Implement various functions such as community, AI, and payment togetherLearn how to properly use bubbles while doing so.

1 ️ ︎ Sign up and log in

2 ️ ︎ Write a post and leave a comment on a shared post

3 ️ ︎ Request multi-language translation, email drafting, and copywriting recommendations from AI

4 ️ ︎ Link Tospements to allow users to make payments and recharge points

5 ️ ︎ Use charged points to deduct every time you use an AI function

Service deploymentSince maintenanceAll at once until

Creating a service and advertising it are separate areas. The completed service Higher click-through rates for search impressions or link sharingWe will also tell you the detailed settings to create it. Also, Link to a custom domainI'll also show you how to finally distribute your own service.

From the time the service is launched, users are given the task of providing a stable service without bugs or issues. To be able to manage released services without problems (1) Efficient debugging methods and (2) maintenance and workload management methods that reduce costsI will explain it together.

With No-Code Tools + OpenAI

Launching AI services without code

Use ChatGPT, which anyone in Korea would have used at least once My own AI service for non-developersYou can also create. OpenAI not only generates text, but also provides various APIs such as image generation and voice generation

How to create various AI functions by linking the OpenAI API to a bubbleI'll let you know. Even non-developers can complete various services by linking more APIs if they watch the course and follow it as it is.

1 ️ ︎ Implementing English, Japanese, and Chinese translation functions using AI

2 ️ ︎ Enter the recipient, information to be included in the email, and AI will draft the email for you

3 ️ ︎ Communicate key keywords and AI will write for you instead of copywriting

For intensive learning

Study aids

While looking directly at the instructor's bubble editor

Compare to my work

Provides a link to check the editor used in the course. If you get stuck or have any questions during the exercises, you can check out the instructor's work directly through the attached editor link.

Looking at the Pygma UI file

Develop as if you were collaborating with a designer

Provides the original Pygma UI file used in the course. You can check the design for each page by running this file. Try developing a bubble by looking directly at the font size of the text, the color code used, and the margin and padding between elements! Bubble development can be carried out as if collaborating with a designer.

While taking notes on the planning PPT

Mastering IT planning

The original PPT file described in the planning part lesson is provided. If you download this PPT and study it while taking notes, you can learn planning concepts and processes intensively and in depth.

Notes before taking the course

✅ The bubble editor is difficult to use on mobile. We recommend that you practice together in a bubble while listening to this course on a PC.

✅ You can create a service with a free plan, but you must use a paid plan to actually deploy it.

✅ Credit charging may be required when implementing functions in conjunction with OpenAI.

✅ The UI of the bubble editor may differ from the day the lecture was taken.