No-code topic

32 articles
77 questions
0 battles
2 posts
4677 members
Post — No-code

Is there a function to strip the spaces from a phone number?

I tried replace but putting a space in there doesn’t seem to work. Am I missing something? Thank you!

Post — No-code

What is the best way to send an automated SMS that will be sent out 60 days after a given date?

Are there any SMS platforms that integrate with Integromat that will allow me to set a date and time (60 days later) to send the SMS? I'd prefer to NOT have to use Integromat's date and time functions to do this

4 answers, 0 articles
Use Google Sheets + Integromat or Zapier
4 answers, 0 articles
Integromat into sendinblue
Load 1 more comments
Post — No-code

Do anyone knows how we can we use tag in zoho mail to trigger scenerio in intrgromat

Do anyone knows how we can use tag in zoho mail to trigger scenerio in integromat as it is possible in zapier. But in integromat there is no such module. Do anyone knows hack for it.

4 answers, 0 articles
Make a suggestion or provide feedback to integromat. They are actually pretty good about adding and updating feature and doesn’t take too long either in my experience. Especially for feature available in zapier. I think they want to make sure they can meet or beat their features
Post — No-code

How do I count the number of operations done by any given module?

I have an iterator that is allowing me to process line items, and I need to compare/(filter) the number of successfully processed items with the original number of items so I can complete an error route

6 answers, 0 articles
run it and view the history - it tells you in the history log
Post — No-code

Can we avoid adding duplicates events in google calendar?

I want to avoid adding duplicate events in google calendar. Thanks

8 answers, 0 articles
Yes you can search event and if it exist then update it or do nothing.
Post — No-code

Integration to get a Webflow form and send into a Discord channel

I created an integration to get a Webflow form and send into a Discord channel. But, on my Webflow website I have 2 forms, one is the newsletter and other is a form to "Book a table" in a restaurant, the thing is that the integration is sending both forms to the discord channel, but I just need the "book a table" one. any idea how I can solve that? Thanks

5 answers, 0 articles
Create a filter to pass entry of form "book a table"
4 answers, 0 articles
You add filter and block other forms data to be send in discord
Post — No-code

Web Design Inspiration & Ideas: 30 Best Resources | 2021

We have compiled a selection of resources where beginners and experienced web designers can find examples of the best work: landing pages, multi-page sats, web, and mobile applications. You will be able to see examples of the best designs, share experiences, get advice from professionals, as well as post your portfolio and find clients.


  1. AWWWARDS: web designers, developers, and agencies from all over the world present their work and the authors of the best ones get awards.
  2. Ecomm.design: over 3000 e-commerce sites with the ability to filter by platform, category, technology, and traffic.
  3. Land-book: many examples of landing pages, portfolios, blogs with a convenient search by tags.
  4. 99designs’ Discover: you can see examples of work, find clients, participate in contests and non-commercial projects
  5. SiteInspire: a collection of over 8,000 examples of web design and interactive design.
  6. Lapa Ninja: landing page examples, free tutorials, templates, illustrations, and UI kits.
  7. Mediaqueri: examples of responsive design, useful when creating layouts.
  8. Houseofbuttons: a site dedicated to the design of buttons.
  9. Sitesee: gallery of the best modern sites created by professionals from different countries with convenient filtering by topic.
  10. One Page Love: a showcase of one-page sites for different areas of business, dozens of templates, including free ones.
  11. Mobbin: library with over 50,000 searchable mobile screenshots
  12. Behance: the base of the designers' portfolio in various fields, you can find inspiration and place your portfolio as well.
  13. Colourlovers: palettes and examples of color combinations.
  14. Dribbble: a platform where you draw inspiration, share experiences and receive feedback from professional web designers.
  15. Graphiclovedesign & Osasto Tumblr blogs with graphic design samples.
  16. CollectUI: a daily updated archive of Dribbble-based user interface examples.
  17. Siiimple: examples of minimalistic web design.
  18. Creative Bloq: a platform with work samples and news for UX designers, illustrators, 3D and VFX artists.
  19. Good Web Design: a high-quality selection of sites with a convenient search by tags, here you can also apply and post your work.
  20. Best Website Gallery: a collection of sites that has been regularly updated since 2008, there is filtering by frameworks, styles, CMS, and color schemes.
  21. Inspired UI: selection of design screenshots for Android, iPhone, and iPad.
  22. Hover States: an archive of custom web projects that experiment with design, interactivity, and content.
  23. Iconfinder: one of the world's largest databases of icons and illustrations.
  24. Designmadeingermany: author's collections of sites of different styles and themes.
  25. Designspiration: websites, landing pages, 3D, UI / UX, mobile design, interface elements, and much more.
  26. The Best Designs: a selection of websites for those who love a balanced, minimalistic design.
  27. Screenlane: examples of high-quality landing pages, mobile and web applications for different platforms.
  28. Landingfolio: a selection of landing pages for inspiration, a collection of templates, and UI elements.
  29. Pttrns: library of mobile UI templates for iOS and Android.
  30. Muz.li: plugin for Google Chrome (desktop and mobile) with collections of ideas and news collected from different platforms.


Look for inspiration, learn from the best, and don't be afraid to experiment! And when the time comes to create your application, we will be there to help you bring your ideas to life!


Go to AppMaster.io designer and join our Telegram community chat.

Post — No-code

New AppMaster.io modules: API integration and more

Integration with popular map services


Add custom maps to your mobile and web applications.


Universal Map Module


The module allows you to automatically change the default map service depending on the platform: Google Maps for web and Android applications, Apple Maps for IOS applications.


Google Maps and MapBox Map modules


Add API settings for integration with corresponding map services.



Integration with mailing list services


We are expanding the list of marketing tools to make your business even more effective. The Mail Chimp and GetResponse modules will add API settings to allow you to send e-mail messages through these popular services.



Integration with Zoom API


Now you can conduct video conferencing and webinars right in your application.



ICalendar


It will be easier to schedule events - your application can create events in ICalendar format and share them with other users.



IP Filter


Now you can allow and deny access to endpoints from specified IP addresses. For more information about the IP Filter module and its settings, we have told in this article.



Nearest plans


Currently, there are 10 new modules, which we plan to add to the platform soon.


API settings for Google services:


  • Gmail API
  • Google AdMob
  • Google Sheets
  • Google Translate


Intercom communication platform compatibility:


  • Intercom API
  • Intercom Messenger


Data Models for Countries and Cities.

User data validation module Validators.

Youtube Player video player widget.

Barcode Scanner.



Want to ask questions or suggest module ideas that we don't have yet? Write to the

telegram community chat to connect with developers and other AppMaster.io no coders.

Post — No-code

Business logic in no-code: what it is and how to build it

What data do you need to request? Does the entered data match the specified format? What happens after the user clicks the "Confirm" button? Does he even have access rights to this operation? All these and many other questions can be answered by examining how the business logic of a particular application is built.


The simplest example: an airline administrator (user) registers a passenger for a flight (enters information into the database).



What the user does:


1.Opens information about the selected flight, goes to the list of already registered passengers, clicks "Register passenger".


2.Fills in the registration form: enters the flight number, selects a passenger, indicates the place and status of check-in.


3.Presses the "Confirm" button


4.Sees a new passenger in the general list.



How it looks from the point of view of the application's business logic:


1.The application checks if the user is authorized and has access rights to the selected page, as well as registration operations.


2.Waits for the user to fill out the form.


3.Processes the entered data:


a. Checks if the entered data meets the requirements of the application (these requirements are predefined by the programmer): for example, the field "Flight number" must contain an integer.

b. Receives information from the database: for example, about a flight and related registrations (to make changes), a passenger (to check if this passenger is actually in the database).

c. Shows error messages if the fields are filled incorrectly.

d. Sends information to the database, giving commands to create new records in it or update existing ones.


4.Displays updated information on the screen.



The general logic of the application is being built by business processes - diagrams describing specific operations in the system: creating a passenger record, adding to the system new flight, editing registration information.


When it comes to classical programming, blocks of code are used to describe all processes. Many of them are written according to templates - they are simply used in a different sequence and to work with different data.


Because of this "template" nature in no-code development, it became possible to use visual programming tools - business logic designers. They help to select the necessary blocks, set up and arrange them in the desired sequence and even create some blocks automatically, depending on the settings of other components of the application. The bottom line is ready-made business logic without having to spend hours and hours over lines of code.


You can learn how to set up business logic on the Appmaster.io platform in the business process video.

Post — No-code

What Pipedrive keyboard shortcuts exists?

Is there a way to use Pipedrive keyboard shortcuts? Add on, or any other solution that can work

Post — No-code

How no-code can improve the lives of programmers

What's next for traditional programming? Will salaries go down? Will the attitudes of employers and customers change? Maybe programmers won't be needed at all? But who will create and maintain no-code platforms if everyone becomes a no-coder?


Today we propose to confront these concerns and talk about how no-code helps programmers in their work.



Accelerated development speed


No-code accelerates development not only by automating it but also by reducing the number of errors and the time to fix them.


This means more successful projects in the programmers' portfolio - and greater demand in the market. Additionally, working on the same task for a long time is simply not interesting. This can create the illusion of a lack of development and reduce motivation - after all, the result is not visible.


It would seem that with the use of no-code, programmers will have less work to do. However, let's be honest, most often you can automate exactly the work that no one wants to do anyway. There will definitely be enough non-standard tasks for everyone. Of course, this does not mean that you should practice a superficial approach to work or not cultivate perseverance in yourself, but it's important to keep moving forward.



More clients


One of the big, though not always obvious, development challenges: Lots of companies run their own programs but can't afford them. Not only in terms of finances, but also in terms of time. It turns out that developers simply lose customers who are ready to order and pay.


Moreover, many tasks are quite standard, often requiring minimal revision. They can be implemented relatively quickly. Of course, if you don't write an application from scratch, but use constructors of no-code platforms.



Easier to assemble a team


Do you want to build a team and take on more serious projects? Finding people to use no-code is much easier than for a specific programming language. The eternal search for a balance of hard and soft skills in one person will cease to be a problem. You will be able to hire those who fit better with the team and are genuinely interested in what you are doing.


It is easier to teach the skills of working with a specific no-code platform than traditional programming tools. Therefore, both professionals and promising beginners will be able to quickly get involved in your project and benefit from it.



More embodied ideas


There is no shortage of ideas on the market. But there is a lack of time and budget. Each test of the next hypothesis slows down the product's entry into the market. On the one hand, if you leave an interesting idea, you can say that you are giving it to your competitors. On the other hand, the potential of the idea is unknown and illusory. The time spent on testing is quite understandable and tangible. However, the less this time is needed, the higher the probability that you will find exactly what will “hook” your users and “shoot” in the market.


It is also obvious that with no-code, team members who are not involved in development will be able to contribute more to the project production process. After all, no-code is intuitive. The very feeling that everyone speaks the same language and understands each other encourages more active involvement in the work. The eternal problem of misunderstanding with the customer, if it does not disappear altogether, will become less global and insoluble.



Less of documentation


No-code is also good in that many functions are already documented - this excludes a huge layer of work on creating documentation for your application. A clear understanding of the principles of work, limitations, and potential opportunities are already at the start. There is no need to answer the question “How to describe it?” because there are already pre-made descriptions.


Another promising feature of no-code platforms is the automatic generation of documentation. For example, for our team, this is one of the priority tasks. We want to make the technical documentation for your application write itself. Intuitively it seems impossible, but our platform already has this feature and we plan to improve it.



Easier to predict deadlines


The joke about the fact that "the deadlines given by the programmers should be multiplied by two" has long become a truth for all managers.


Why does it happen? Certainly not because that "developers are lazy and unnecessary." Often it is really impossible to calculate the exact timing because you need to take into account a lot of factors, including the human factor, which is the most unpredictable one. However, the more tasks are automated, the easier it is to understand how long they will take to complete.


By using no-code, you will have a better understanding of not only how to do it, but also how to test it. Estimated timelines will become more realistic. It will become possible to multiply not by two, but a maximum of one and a half, but even this will greatly simplify business planning and reduce the number of deadlines. This means it will make your life a little easier.


No-code is a trend that will definitely not give up its grounds. The market demands more products and at a faster pace. This applies not only to programming but to many other areas as well. Time will tell how it will affect the development of the entire sphere.




Join the AppMaster.io community. Let's test the possibilities of no-code together!


Get started with AppMaster.iohttps://appmaster.io/

Telegram community channel ENG: https://t.me/appmasterio_en

Telegram community channel RU: https://t.me/appmasterio_russian

Post — No-code

IP Filter Module: IP Adress Filtering

IP Filter Middleware


Middleware IP Filter extends the endpoint settings in your application. With it, you can set access to endpoints only from specific IP addresses or prohibit it for certain IPs.

This will increase the security level of your application and be able to better control the processes occurring in it.



Configuring IP Access


In Appmaster Studio, go to the Endpoints tab and find the endpoint for which you want to configure access.


1.Click on the gear icon next to its name.



2.Go to the Middleware tab (1), find IP Filter in the list, and open its settings (2).



3.In the Mode field, select one of the options:


a. Allow all, except - access to the endpoint will be allowed from all IP addresses except the specified ones.

b. Forbidden all, except - access to the endpoint will be allowed only from the specified IP addresses.



4.In the IP list field, enter an address or a list of addresses separated by commas.



Thus, configure all the endpoints to which you want to restrict access.



Examples 


Here are some examples of using IP Filter.


Example 1: Access only from specified IPs


Let's imagine that your application provides an API for communicating within a specific network. Most likely, in this case, you do not need authorization (so as not to complicate access to the API), but at the same time, you need to restrict the list of IP addresses (allow strictly defined services to access your application). Use the "Forbidden all, except" mode.


Example 2: Restricting Access from Specified IPs


Let's imagine that you need to restrict access to your application for attackers who send spam, try to guess passwords, or carry out DDoS attacks. Information about their IP addresses will be displayed in the logs. Add these IP addresses to the list of prohibited endpoints for enabled endpoints by setting the "Allow all, except" mode in the IP Filter settings. For example, if there are many unsuccessful authorization requests from a specific IP, most likely someone is trying to guess the password. Deny him authorization by setting access restrictions to the POST/auth endpoint (Auth group).




Learn more about what endpoints are and how to use them in our documentation.


For more how-tos and helpful materials, visit the AppMaster.io blog.


Subscribe to the AppMaster.io telegram channel and join our community chat - here you can find out the latest platform news and communicate directly with our developers.

Post — No-code

How AppMaster.io Data Models Work

By starting a user account or typing a message, you create new data. By clicking on the "save" button, you show that they need to be processed now and saved to use in the future. Choosing "edit account" or "send a message" - give commands to deal with them in a certain way.


All information for your application is stored in databases. They are ordered structures that clearly define the place for each element, indicating the relationships between them and how you can work with them. Databases can be built on different principles, AppMaster.io uses classic relational databases, fully compatible with PostgreSQL.


To be able to fill your application with information, you need to create its database:


  • create data models - that is, "explain" to AppMaster Studio what your data will be;
  • establish links between these models.


For this, AppMaster Studio has a Data Design data model designer. In it, you, like ordinary programmers, will design a database. But instead of lines of code, you will use visual programming tools.


Create your first project in AppMaster Studio and go to the Data Design Designer to get a glimpse of what this article is about.



Building data models


Data models describe the information you add to your application that is “understandable” for AppMaster Studio. They can be compared to shapes or drawings: they determine how your data will look, with what other data it will be associated with, and how it is stored and processed.


  • For example, when you create a new project in AppMaster Studio, the User model is automatically added to it - from which you will create user accounts.


By creating and customizing models, you design your application's database.



An object


A unit of data that is generated in your application based on a specific model will be called an object.


  • For example, your employee Jenny Smith's account (created by you or by Jenny herself through the registration form) will be an object of the User class (created by the User model).


In the AppMaster Studio designer, you will only describe and plan future objects, but you can create them only in the finished application.


To create an object from a data model, you need to add a special element to your application page - for example, a registration form. You will be adding elements in the application designers: Web Apps (for web applications) and Mobile Apps (for mobile applications). To obtain information about objects, other elements are used - tables, cards - which are also added in designers.


  • For example, as soon as Jenny fills out the registration form (this form is generated automatically when creating a project) and clicks Sign UP, her account will be created and saved in your application. That is, a new object will appear, user Jenny Smith. You can view information about it in the Users table, which is also generated automatically in the Admin Panel application.


Each object is assigned an ID - an identifier with a unique number by which your application will "recognize" it.



Fields


Each data model has fields that contain the characteristics of future objects and basic instructions for your application on how to work with them.


  • For example, in the User model, some of the fields are created by default. Jenny filled in during registration including - Login, Password, First Name, First Name, and Last Name. There is a Groups field, which will indicate which user group Jenny's account belongs to - by the value of this field, the application will determine which functions she has access to. You can also create additional fields, such as Address, to add Jenny's address to her account.


The fields define what characteristics the object can have. While creating it, you do not need to fill in all of them - you can do it later or not do it at all. You can also set up auto-complete or set some fields as required.



Connections


Relationships can be established between two data models - to determine how objects created from them will relate to each other and interact. There are three types of such links:


  • has_one - 1 object created from data model A, can only be associated with 1 object created from data model B.
  • has_many - 1 object created from data model A, can be associated with multiple objects created from data model B.
  • many_to_many - a set of objects created from data model A can be associated with many objects created from data model B.


Linked Data Models gain additional capabilities for collaborative processing in your application. One data model can be associated with an infinite number of others - the main thing is not to complicate the logic of connections so much that you yourself cannot figure it out.


For example: if your application allows employees to create internal orders (for example, for the purchase of stationery), then you create an Order model and associate an existing User with it through has_many - then Jenny can create many orders (for example, every month or quarter). If you establish thehas_one relationship, Jenny will only be able to create one ticket.



What's next?


So you've learned the basics of working with data models in AppMaster Studio. Now create your first model using this instruction.


To customize the logic of your application, use business processes and endpoints.


To customize the visual component - editors Web Apps (creating web applications) and Mobile Apps (creating mobile applications).

You can add additional functions using modules.

Post — No-code

The AppMaster.io video course is already on Youtube!

This will help you to get introduced to the architecture of the platform, its capabilities, and the main functions that are already available.


Language: EN voice + EN and RU subtitles.


Video list:


1. Introduction 

2. Projects 

3. Data Design 

4. Business Logic 

5. Endpoints 

6. Web Apps 

7. Mobile Apps 

8. Deployment 


Subscribe so you don't miss our new videos!



Post — No-code

5 reasons to turn to no-code development

Visual Aspect


In traditional programming, you won't see what your application looks like until you compile it. You will have to imagine how it will look to the end-user - and work with this visualization.


With no-code visual tools, you will immediately see how the application will look in the end. And you can easily change its design without rewriting kilometers of code.



Fast results


To become a junior in any, even the most "easy" programming language, and start looking for your first job, you will need 4 months or more. This is assuming you already have minimal experience and that you will spend several hours a day studying.


You will create your first application in a week on the no-code platform, even if you start from scratch. In a month, you will work with your first customers.



Low entry threshold


"The market needs more programmers!" - HR specialists of IT companies confidently say. “Yes, only we are talking about the middle and seniors ...” - the juniors sadly answer. Indeed, when a junior developer vacancy appears in a company, its competition is several hundred people. Therefore, the requirements for newbies are constantly growing.


No-code development is a relatively young direction. Many programmers do not even look in this direction, considering it "frivolous". Of course, there are fewer vacancies - but it is easier to get them.



Democratic


Not every company can afford an application that will fully cover its needs. Building from scratch is long and expensive since traditional development takes months and programmers' salaries are constantly growing. You either have to buy a complex solution (overpaying for "extra" functions) or use several software products (inventing "crutches" to dock them).


But often a business, especially a small one, does not need something super complicated - only a minimum of functions, convenience for employees, and the ability to integrate with the necessary services. This is where fast and democratic no-code comes to the rescue.



Interesting!


Traditional programming scares a lot of people away by being "boring". We strongly disagree with this! But we understand that you need to have a certain mindset and character to find interest (and even excitement!) In lines of code endlessly running across the screen.


No-code in this regard will suit more people. After all, in essence, this is programming in a game form. For adults only. Making money by playing - which of us has not dreamed about it?




If you want to learn more about no-code development, check out the Appmaster.io platform, read our blog and telegram channel. Join the telegram chat community to chat directly with our programmers and other no coders!

Post — No-code

Telegram module: creating a chatbot and a channel

Create a bot


To create and manage your bots you need to use BotFather, a bot developed by the Telegram team.


Enter the username "botfather" in the search field - most likely, it will be the first in the list (1). Please note that the official bot has a blue confirmation icon with a checkmark next to its name (2). Below in the "search", there will be many others, with the same names and similar usernames - just ignore them, you do not need them.



Click on the bot to open a chat with it (1), and click Start (2).




After that, the bot will start and display a list of commands in the message. To create a new bot, enter sequentially:


  • the /newbot (1) command;
  • the name of your bot, it can be anything (2);
  • a unique username by which it can be easily found (3).


The bot has been created. BotFather will inform you about this in the message, it will indicate the username (4) and the authorization token (5).



The token is needed to connect to various services and programs - it is used for Telegram to be able to identify your bot and determine what permissions it has.




Do not disclose the bot authorization token to outsiders and do not post it to the public. If a token has been declassified, you can revoke it (command /revoke) and generate a new one (command /token).



To integrate with Appmaster.io, you just need to add the bot to the telegram channel. You can also customize it to add additional functionality. More information about what a bot is, what it can do and how to set it up can be found on the official Telegram website. It contains both general information and instructions for developers.



Create a telegram channel


To create a channel, go to your account menu and click "New Channel".



Enter the name of the channel, if you want - add a description (1). Click Create (2).



Choose whether your channel will be public-public or closed-private (1). Enter a unique link where you can find it (2). Save changes (3).




Add the bot to a channel


Immediately after creating a channel, Telegram will offer to add new users to it. Start entering your bot's username - it will appear in the search (1). Click on it (2).



Your bot will appear in the list of users to add (1). Click Add to complete the configuration (2).



A message pops up that bots can only be added to channels as administrators. Agree to make the bot an administrator by clicking Make Admin.



Now select the channel management permissions you want to give your bot. Choose whichever you prefer, but be sure to allow the bot to send messages by enabling the Post messages selector (1). Click Save (2).



You can add a bot after creating a channel. To add a bot to an already created channel, open the settings (1) and click Add Users (2). Further - the same actions as in the previous paragraph.




Find data to configure


To add a bot to your application and send messages to a telegram channel, you need a bot authorization token and a channel address.


You can find out the bot token from BotFather: enter the command /mybots to get a list of all your bots (1) and select the one you need. A menu will appear, select the API token (2) item in it. BotFather will send you a message with a token.



The channel address is in the general information about it - Channel Info. To open a window with information, go to the settings or just click on the name of the channel.



Great, you are now ready to connect the bot to your application. Go to Appmaster Studio.



Configure Appmaster Studio


Install the Telegram module. Read more about what modules are and how to connect them here.



In the module settings, specify the token of your bot (1) and save the changes (2).



Go to the Business Logic designer (1) create a new business process (2). Read more about business logic in this section of the Docs.



Include the Send Message block in the business process, which adds the Telegram module (1). Please note that in the Start block you need to create two variables of the string type (the first is the channel address, the second is the text of your message) and connect them to the variables of the Send Message (2,3) block. This is needed to create a form for sending a message. Don't forget to save the scheme (4).



In the Endpoints tab (1) add a new endpoint (2). Enter the name and group in which it will be displayed (3). Set the request type to POST (4). In the Business Process field, select the business process you just created (5).


Read more about endpoints.



On the Middleware tab, you can allow only administrators to access the endpoint - so that regular users won’t be able to send messages through the bot.



In the Web Apps designer (1), open your application and go to the page from which the users will send messages to Telegram (2). Create a form in it to send a message by dragging the Form element to the selected area of the page (3).


More information about the Web Apps Designer can be found here.



While creating the form, select the Create Record type (1) and the endpoint you created (2).



Add a button to send messages to the field below the form.



Enter the name that will be displayed on the button (1) and a unique name by which you will search for it in the settings (2). Change its design if desired.



On the Triggers tab (1) add an action for the onClick trigger - on click (2).



The settings window will open up. Specify in the Target component field the form you created (1) and select the Submit form (2) action for it.



Now save all changes (1) and publish the project (2). Click on the button to go to the published web application (3).




If you have set a restriction for sending messages only for users of the Admins group, you will need to log into the application with an administrator account.




Open the bot sending page, enter your message text and the name of your channel.



Make sure everything works - your message should appear in Telegram.



Write to the chat of our community if you have any questions - we will be happy to answer them!


Subscribe to us in messengers and social networks so as not to miss important and interesting things!



Post — No-code

Setting up Appmaster.io. Web Application Editor: Buttons

Let's make a short quiz based on the book Alice's Adventures in Wonderland. Let's find out if users remember where Alice first meets the Cheshire Cat.


Our application will have:


  1. Question text: Where did Alice first meet the Cheshire Cat?
  2. Choice buttons: Mad-Tea Party, Duchess' House, Wood, Croquet-Ground. If the user chose the wrong answer - the button with it disappears, if the user chose the correct one - all buttons with the wrong answers disappear at once.
  3. Pop-up messages that tell you whether the answer was correct or not.


By the way, do you remember which option is correct?


How to create a button


Drag the "Button" element with the mouse pointer (by clicking and holding the left key) to the area where you want to place the button.



You need to add four buttons - according to the number of possible answers.



Customizing button appearance 


Click on the first button once — the settings window will open up. You will find yourself on the "Look&Feel" tab, which is responsible for the appearance of the buttons.


1.Edit the following fields:

  • Label: button text - enter the first answer: "Mad-Tea Party";
  • Icon: button icon - click on the "Pick icon" and choose the one you like (now there are more than 2500 of them);
  • Size: button size - set to “Large” to make the button large;
  • Name: This is the name by which the button is "seen" by other elements in your application; each button needs a unique name - name the button "btn-mad_tea".


When you edit the fields, the image at the top of the window will change to show how the button will look after the settings have been applied.


2.When you fill in all the fields - click "Save".



  1. Configure the rest of the buttons by analogy with the first, using the names: btn-duchess_h, btn-wood, btn-croquet_g.
  2. Click "Save changes" to save changes to your application - otherwise, the buttons will disappear once you refresh the page or close the editor.




Setting up triggers and events


Now you need to set the actions of the buttons. Let's start with the one with the correct answer - "Duchess' House". Your task is to "explain" to the Web Apps editor:


  • what is the trigger of the button - means, what exactly it should react to: on pressing;
  • what event occurs in this case: the buttons disappear;
  • where this event happens, what elements changes: other buttons.


Go back to the “Duchess' House” button settings and go to the Triggers tab. All triggers that have been added for it will be displayed:


  1. Now there is only one - "OnClick". It is added automatically and means that the button will act when you click on it (which is exactly what you need).
  2. In addition to "OnClick", other triggers are possible for the button. A complete list with a description is in the platform documentation.



Now you need to specify information about the event (you will have three of them - one for each button). Click the "+" next to "OnClick". The event settings window will open.



In the "Target component" field, you need to indicate where the event will occur, in the "Action" field - what kind of event it will be.


Hide all wrong answers


Add an event that will hide the Mad-Tea Party button:


  1. Click on the "Target component" field and find it by the unique name btn-mad_tea. In the Action field, select the appropriate event, in this case - “Hide Button”.
  2. Click “Save”.



Configure the rest of the buttons to be hidden in the same way.

  1. This is how the list of triggers for the “Duchess' House” button should look like when you're done.
  2. Click “Save” to save your changes.



Now you need to make sure everything works.

  1. Save your changes.
  2. Press the button for publishing the application (placing it on the Internet), select "Development".
  3. Click on the go to your app icon - it will open in a new tab.



Go to the app and make sure that when you select the correct option, the rest of the buttons disappear.



Hide incorrect answers on click


Now let's make the button with the wrong answer "Mad-Tea Party" disappear when the user clicks on it. In this case, both the trigger (pressing) and the event (disappearing) belong to the same button - you only need to work with it.


Open the button settings, go to the “Triggers” tab, add a new event to the “onClick” trigger. In the “Target component” field, select “This component (self)” to indicate that the button activates an event for itself. The value of the "Action" field is the same as in the previous example - "Hide Button".



Save all changes and publish the app, switch to the app tab, and refresh it. Check that everything works as intended:



Now adjust the Wood and Croquet-Ground. Save, publish and test it again.


Types of buttons


Great, the answers work. It's time to add a question. Of course, Appmaster.io has special elements for this, but you remember our task - buttons and nothing else. So let's add one more. This time - not to the main canvas, but the top of the page:



To make it more fun, fill out the question as on this screenshot:



Now "colorize" using color schemes for different types of buttons: go to the settings and switch the value in the "Type" field to any other.



We got it like this, but you can choose your option, the color scheme of the button does not affect its operation:



Now let's move on to the last task - setting up a message for the user.


More difficult task


You can display a message on the screen in different ways. We've picked one of the most unusual ones:


- First, let's make sure that the buttons containing the question are automatically deactivated when the user has given the correct answer. They will turn gray and stop responding to clicks. To do this, we use the Enable (Disable) function, which we have not yet considered, and the already familiar "onClick".

- Then we will consider a new trigger - onStateChange, which is triggered when the state of the button changes. Let's assign this trigger to the "?" - and the message will be displayed on it.


Deactivating buttons


You can enable or disable the button manually in its settings by toggling the "Enable" field selector:



To set up automatic switching, open the “Duchess' House” button preferences and add an “onClick” trigger. In the field "Target component" select one of the question buttons, in the fields "Action" - "Disable Button". Repeat for all buttons that contain a question. It should look like this:



Remember to save all changes, publish and check if the application is working correctly.



Now, let's bind the start of the message to the button "?" (we named it "btn_qqq"). Let's add the trigger "onStateChange" to it. It activates when the state of the button changes - for example, when it turns off.


In the “Target component” field, select “Application” (the message will pop up in the application window), in the “Action” field - “Show UI Message” (show a message to the user).


  1. In the "Message style" field, choose the one that best suits your situation. In our case, this is "Sucess" - a message about successful completion.
  2. Fill in the "Title" and "Content" fields - inform the user that the answer is correct or just write something nice.



Save, publish and test.


Result


Choosing the correct option, buttons with incorrect answers should be hidden, the text of the question should fade and a confirmation message should pop up.




Of course, it was possible to customize the message more easily by binding it to the correct answer button. Although today we are not looking for easy ways. Moreover, you already know enough to do this without our instructions. Try to customize the error message that will pop up when you choose the wrong answer. It should look like this:



We are sure that this instruction helped you to get to know Appmaster.io better. But if it was not clear (or maybe, on the contrary, too simple), write to the telegram channel of our technical support about instructions you need. We will write them!


If you are looking for more detailed information about Studio.appmaster.io, please refer to our documentation

Post — No-code

Working with modules: the basics

The content of each module depends on what kind of functionality it adds. These can be separate blocks of code, user interface components, ready-made data models, business processes, endpoints, etc.


After you connect the module, AppMaster.io will automatically import its files into your project and set up the initial configuration. After that, you just have to configure the new components to a minimum - and they will be ready to go.


You can find out which modules we have already added to this article. More information is in the Documentation.


To get started with modules, open the Modules section in Appmaster Studio.



Your modules


All installed modules are located on the Installed tab. For example, some of them, Auth and Universal Map are installed automatically, right after the project is created.




Module preview


The preview displays basic information about the module: the current version (1), the icons of the components that it adds to the application (2), and a link to the Documents page with its description (3). If you need to configure the module (or it is configured incorrectly), a warning icon (4) will be displayed in the corner. To open the information and settings window, click once on the preview (5).




Module window


In addition to basic information, it contains a description of module (1) and its settings field (2). The settings are individual for each specific module. If it interacts with other services and programs, most likely they will also need to be configured. Read more about this on the modules pages in the Documentation.


When finished, click the Save button to save your changes (3).




Removing modules


To uninstall a module, click the Uninstall button on the preview or in the settings window (1) and confirm the action in the pop-up window (2).




When deleting a module, all added settings, files, and data will be deleted or disabled. This also applies to all objects that you created from its data models. We recommend that you backup your application or database before uninstalling.




You may lose data!


If the module has added data models to your project, all their data will be deleted along with it. Please check everything carefully and make backups before deleting them.




Connecting modules


All other modules available for installation are located on the Marketplace tab (1). Here you can sort the components by category (2) or find the one you need by name (3).



Click the Install button (1) and confirm the action in the pop-up window (2) to install the selected module. Once installed, it will move to the Installed tab.



You can also configure the module before installation: click on it (1), in the window that opens, fill in the required fields (2) and click Install (3).





It makes no difference when configuring a module - before installation (in the Marketplace) or after it (in Installed). Use the method that works best for you.




Tips and useful information


We recommend that you start creating your application by connecting modules. Ready-made data models, business logic, predefined settings, interface elements, custom code, and automation scripts - all of this will significantly speed up development.


Of course, it is not easy to understand the functionality and select all the necessary components at the beginning of the project. But if you find the time for this now, you will save hundreds of design hours in the future because the modules already have everything you need to work.


The list of modules is regularly updated: we release new and updated versions of existing ones, add new functions and change individual settings. Some modules become the basic tools of Appmaster Studio. For example, the Auth authorization module can no longer be disabled or removed, as it used to be - after all, the operation of many other components depends on it.


Soon we will have updated functionality - Appmaster.io will inform you about the release of new modules and their compatibility with those that you already have installed.



We are always in touch


Subscribe to us in messengers and social networks so as not to miss important and interesting things!


Important news and updates can be found in the Appmaster.io telegram channel, on FacebookTwitter, and LinkedIn.


Check out our blog for step-by-step instructions, tutorials, and ideas for building apps.


If you have any questions or suggestions, write to the telegram chat of our community or through the bot on the website.


We are always glad to receive feedback from you!

Post — No-code

Airtable presented new features

On July 19 Airtable published a monthly post on their blog presenting four new features they have added to their software. 

“Favorite views” - allows users to mark the most interesting views to find them easily in a new separate section.

image1.gif

The "Create view" section of the sidebar became collapsible to keep it personalized and well-organized. 

image2.gif

 

New mobile app features for IOS and Android make it possible to duplicate records in-app. Also, Android owners now are provided with the support for summary functions, @mentioning others in comments, as well as adding colors to records.

And finally, Salesforce sync has finished closed beta and now is available to integrate data with.

SFDC-External-Source-Sync--1---1-.gif

 

Bubble raised $100 mln by Insight Partners

According to a Reuters post, on 27 July, Bubble, a New York-based startup for non-coders, that allows to designing and creating web apps, informed that it raised $100 million in a funding round led by Insight Partners.

During the pandemic, no-code or low-code tools became extremely popular, as they provide businessmen an opportunity to create web applications without relying on engineers. 

Bubble co-founder, Emmanuel Straschnov, and his partner started the company in New York in 2012, and nowadays it is used by 1 million people worldwide and has increased its revenue three times last year.

Straschnov said he plans to use the funding for hiring more engineers and educating students and others to use Bubble.

+ New post

Leaderboard

41 answers, 6 articles
0 answers, 26 articles
24 answers, 1 articles
24 answers, 0 articles
23 answers, 1 articles
24 answers, 0 articles
22 answers, 1 articles