Low-Code Development with Appsmith: Building Internal Tools and Business Applications

This book will show you how to harness the power of Appsmith, an open-source low-code platform with a large set of integration tools and an active community. The book begins with an introduction to Appsmith and its features. As you explore the platform, you will learn about widgets, UI Canvas, and data stores, among other things. Authors Rahul Sharma and Rajat Arora then show you how to build customizations and navigation workflows, as well as how to handle error handling, debugging, and troubleshooting with Appsmith. You will also learn efficient monitoring and authentication for deploying production-ready systems. Low-Code Development with AppSmith provides examples, realistic scenarios, and explanations of the tools you'll need to build successful low-code apps, helping you gain practical skills. Upon completing this book, you will be able to use Appsmith to build low-code solutions that suit your business requirements. What You Will Learn Understand low-code development and the factors driving its adoption Solve your business's most pressing issues with Appsmith Gain an understanding of the key concepts of app development, such as data management, APIs, troubleshooting, and debugging Model different design patterns for low-code development Who This Book Is For Anyone interested in designing technical solutions with minimal programming. This book assumes a basic understanding of object-oriented programming and JavaScript. Table of Contents About the Authors About the Technical Reviewer Acknowledgments Introduction Chapter 1: Introduction to Appsmith Low-code Movement Ease of Use Speed of Delivery Flexibility Cloud-First Citizen Developers Appsmith Low-code Platform Graphical Console Data Sources Dataflow Versioning GraphQL and REST Support White Labeling Access Control SOC Compliant Limitations Customer-engaged Applications Enterprise Integration Complex Business Process Appsmith Setup Access Appsmith Console Appsmith Editions Summary Chapter 2: Working with the Canvas Editor Running Appsmith for the First Time Introducing the Canvas Editor Application Settings Application Components The Greetings Application Text Widget Controlling a Widget’s Look and Feel For the Greetings Application Input Widget Data Section Label Section Validation Section Global Validations Data Type-Specific Validations Regex vs. Valid General Section For the Greetings Application The Button Widget Controlling a Button’s Behavior Multiple Actions on a Button For the Greetings Application Running the Greetings Application Other Appsmith Widgets Input-Based Widgets Select Lists Non-Text Inputs Interaction-Based Widgets Forms Output-Based Widgets Summary Chapter 3: Working with Datasources Datasource Principles Data Binding Native Query Data Callbacks Pagination Search and Filter Datasource Connectors Hands-on: Movie Rental Scenario MySQL Connector Connection Mode Connection Pools Data Queries Prepared Statements Hands-on: Movie Rental Dashboard Bookings Data Chart Widget Revenue Data Films Data Server-Side Pagination Server-Side Search Add Film Data Callbacks Update Data MongoDB Connector Import Collections Configure Connector Data Queries Summary Chapter 4: Creating Application Flows Adding Interactivity The Mustache Syntax Immediately Invoked Function Expressions JavaScript Objects Creating JS Objects Significance of Export Default Named Exports Default Exports Appsmith JavaScript Framework The Context Object The Query Object Parameters for the Query Object Synchronous and Asynchronous JavaScript Three Ways to Write Asynchronous JavaScript Callbacks Promises async / await Programmatically Controlling Appsmith Widgets Store Value Navigate To pageNameOrUrl params (optional) target (optional) Show Alert Show / Close Modals Download Introducing RetroReels High level design The Login Page Adding the Login Functionality The Customer Dashboard Fetching Data Getting the currently rented films Getting the films available to rent Renting and Returning films The Staff Dashboard Summary Chapter 5: Integration with Web Services Working with GraphQL Hands-on: Reminder Notification App GraphQL Setup GraphQL Queries GraphQL Pagination Working with REST Hands-on: Sending Notifications Notifications Service Authenticated API Datasource Authenticated API Query Plumbing Code Working with JS Objects Hands-on: Customer Multi-selection JS Object State Management Add Variables Update Variables Session State Management Embed Appsmith Applications Summary Chapter 6: Access Control Application Authentication Set Up Firebase Enable Authentication Firebase API Configure Authentication Hands-on Login Page Login Query Plumbing Appsmith Platform Authentication Appsmith Roles Summary Chapter 7: Error Handling and Troubleshooting A Framework for Effective Bug Investigation The Console Object Using the Browser’s Debugger Breakpoints Using Console and Debugger Together Types of Errors in AppSmith Datasource Errors Incorrect Endpoints Connection Failures / Timeouts Incorrect Credentials Issues with Data Retrieval REST API Errors Client-Side Errors (4xx) 404 (Not Found) 400 (Bad Request) 401 (Unauthorized) 403 (Forbidden) Server-Side Errors (5xx) 500 (Internal Server Error) 503 (Service Unavailable) JavaScript Errors Syntax Errors Reference Errors Type Errors Logical Errors Query Errors Syntax Errors Incorrect Query Logic Mismatches between Query Parameters and Database Schemas Data Integrity Violations Summary Chapter 8: Monitoring Appsmith Monitoring Principles Overview of Appsmith Architecture Core Components Communication Flow The Appsmith Monitoring Stack cAdvisor (Container Advisor) Prometheus Grafana How They Work Together Installing the Monitoring Stack Explanation of Major Parts of the Docker Compose File Why Use External Networks and Volumes? Running Docker Compose Configuring Grafana Working with Appsmith Cloud Appsmith Cloud Benefits Challenges Summary Chapter 9: Implementation Patterns with Appsmith UI Patterns Multi-page Application Information Passing Dynamic Rendering Dynamic Forms Query Patterns Use Prepared Statements Security Efficiency Batch Inserts Transactions JS Patterns Update Value of Input Fields Asynchronous Callback Chains Promise Async and Await Summary Index