DEV Community: Joseph Petty

OpenAI Assistants with Structured Outputs

Joseph Petty — Fri, 03 Jan 2025 14:13:20 +0000

OpenAI recently added support to their API for structured outputs, which allow you to define the response format using JSON Schema. Prior to this, the JSON response mode was able to reply with JSON, but there was no way to enforce a specific structure, define enum values, and specify required or optional fields. But with Structured Outputs, you can define every detail about the response, to ensure the data is ready to be passed on to your database or workflow.

In this guide, I'll be using OpenAI's Structured Outputs to analyze customer reviews for a hotel chain. The reviews only contain the rating (1-5), and the review text. The Structured Output feature will be used to add new datapoints for sentiment (positive, neutral, negative), offensiveContent (true/false), and tags (cleanliness, service, staff, etc).

This guide will cover:

Creating an OpenAI API key and saving it to an Appsmith datasource
Using the Chat /completions API
Building a UI to select and send reviews to the assistant
Defining a JSON Schema for the response

YOUTUBE: OpenAI Assistants with Structured Outputs

Written tutorial

Enterprises Are Embracing Low-Code 2024, and Fullstack Developers Have an Advantage

Joseph Petty — Mon, 13 May 2024 15:18:07 +0000

Low-Code: New Name, Same Game?

The term low-code is fairly new, but the idea has been around for decades:

Improved efficiency through abstraction

Previous marketing trends used terms like visual programming language (VPL), rapid application development (RAD), GUI builders, etc. But most of these older platforms required installed software, both for the builder and client (end user), like MicroSoft Access, Borland Delphi, and FileMaker Pro.

Then, in the 2000's, platforms like MS SharePoint, Zoho Creator and Mendix started to offer web based builders and clients. This shift increased accessibility and enabled more use cases, allowing businesses to build their own customer facing portals, and dashboards that the team could access from anywhere. Everything was perfect, and the devs had nothing to complain about! That is, until they started thinking about self-hosting, A/B testing, continuous delivery, multiple environments, SSO, version control... and why they ever gave up the fullstack approach.

But in recent years, platforms like Appsmith have begun addressing these concerns with a more comprehensive solution. With features like version control with Git, auto-user provisioning with SCIM, and Granular Access Control, Appsmith brings that improved efficiency to the entire platform and software development life-cycle, instead of just in the app-building process.

THIS is the key factor that enables enterprises to adopt modern low-code solutions, because it means they can operate and maintain them at scale. Low-code is no longer just a tool for building MVPs and side-projects; it's ready for prime-time with the largest enterprises in the world.

What's Driving the Change?

The fact that low-code tools are finally ready to support enterprise use cases is only part of it. The real pressure that's driving the shift to low-code is more financial in nature. In 2023 alone, 191,000 workers were laid off in just the US. Amazon, Alphabet, Microsoft and Meta lead the reductions, each with over 10k workers let go. Businesses have to do more with less, and that means less people and less software expenses.

There has always been financial pressure for enterprises to choose the most cost-effective solution, but until recently, web-based low-code solutions lacked the necessary enterprise features, security compliance, SLAs, and other requirements. Now, enterprises have a viable alternative that saves time and money, while maintaining security, stability and performance.

Easier access = more use cases, but not more devs

Appsmith and other low-code tools enable teams to quickly build apps for any internal process. This means that smaller use cases can be addressed that never would have justified the investment of a fullstack application. Now any team within the company can spin up their own app for HR, Customer Support, PayRoll, etc, instead of only one team trying to serve every department and having to prioritize a backlog of requests.

More use cases means more devs are needed. And while Appsmith makes it easy for anyone to build their first app, what enterprises really need is experienced developers to properly design and build enterprise-grade apps.

Low-Code for Fullstack and Backend Developers

Appsmith is low-code where it makes sense, and full-code when you need it. The UI is drag-n-drop, and requires no frontend experience. But when it comes to connecting to datasources, this is a developer's tool. There's no abstraction getting between you and the data. The API builder is similar to Postman, and the query builder lets you write SQL and interact directly with the database. You can also write JavaScript anywhere to add logic to dynamically control the UI and create workflows. And with custom widgets, you can use any library or framework to build other UI components in addition to our 45+ prebuilt widgets.

This approach means the platform is familiar to fullstack or backend developers, but sometimes harder for non-developers or no-code devs to pick up.

The Fullstack Developer's Advantage

Appsmith can connect to just about any API or database, and that's one of the areas our customers tend to need help. It's not about learning Appsmith, but about having expertise in OAuth2, JavaScript, SQL, self-hosting, and experience working with stakeholders to gather requirement and properly design the backend.

Anyone can use low-code tools to throw together a basic CRUD app, but it takes an experience developer to build, deploy and manage an enterprise-grade solution with performant queries, granular permissions and other best practices in mind.

The New Fullstack

With so many enterprises shifting to low-code, now is the perfect time for fullstack developers to start adding low-code skills to their toolkit, and resumes! Appsmith is open-source and can be self-hosted for free, making it the perfect choice for the frontend in a modern fullstack. Throw in an open-source backend like Supabase, Baserow, or Postgres, and you've got a modern, easy to deploy and maintain fullstack. Enterprise customers are making the switch to low-code, and they need your fullstack experience. It's time for traditional fullstack developers to embrace low-code and the new fullstack!

Freelancing and Building an Online Presence

Whether working in a full-time developer role for one company, or as a solo freelancer, all fullstack devs can benefit from adding low-code tools to their stack. But fullstack freelancers in particular will gain even more of an advantage.

Low-code tools are generally much easier to use, and most users can build a simple CRUD app with no problem. But for those more advanced use cases, fullstack experience goes a long way. When it comes time to build a custom widget, transform data for a chart, or integrate with an OAuth2 API, traditional devs will excel where no-code devs and non-developers would struggle.

If you're interested freelancing with low-code tools, one of the most important things you can do is to start building an online presence in the low-code space. This means asking and answering questions on forums, starting a blog and posting tutorials, and building an online portfolio. Get yourself out there in the community and make a name for yourself as someone who understands the product and wants to help others. This could apply to a specific tool like Appsmith or Supabase, or in a certain domain of tech, like JavaScript or Postgres forums.

It takes time to build, but a solid online presence can drive tons of leads to your UpWork or Fiverr profile, personal website, or wherever else you want to direct them. Additionally, your tutorial or community profile on a forum can be included in proposals, as a way to build confidence in potential clients and show them that you are invested in building quality solutions with that particular product.

Advertising on the Appsmith Community Portal

Appsmith is a BYOD (Bring your own datasource) platform, so building an Appsmith app often involves other skills like SQL, JavaScript, API integrations, etc. Therefore, we've designed our community directory to allow anyone to advertise these services, in addition to Appsmith development. In other words, you don't have to be an Appsmith expert to make a profile and use the community portal to find work! There are tags for other skills you can add to your profile, like JavaScript, SQL, Google Sheets, etc.

Here's how you can get started:

Create a profile on the community portal
Ensure your profile is 100% complete
Include a link or email for the Contact Me button
Request to have your account verified (ask Appsmith staff on Discord)

Conclusion

Low-code tools have advanced from being installed programs that are locked to a desktop, to web-based, self-hostable platforms with enterprise features like SSO, multiple environments, version control with git, and role based access control. And now the advantages of low-code are finally accessible to large enterprises that were previously blocked by security and regulatory compliance. This shift is creating increased demand for low-code developers, and fullstack developers have a clear advantage.

Finding Work As A Low-Code Freelancer

Building a Mermaid.js Gantt Chart in a FileMaker Web Viewer

Joseph Petty — Mon, 08 Apr 2024 17:54:02 +0000

I’ve used a lot of low-code tools over the years, and one thing I’ve always enjoyed is pushing the limits of each platform and building things that aren’t supported out of the box. The first tool I really dove into was Claris FileMaker Pro. At the time (2010ish), I had no programming experience, so I really had no idea what to do with a web viewer in FileMaker (iframes in Appsmith), other than display a site from some external url. It didn’t seem all that useful to me.

Fast forward to today- I’ve spent the last few years pushing the limits of Appsmith, using iframes and custom widget with external libraries to create all sorts of new UI components and features. I now understand how powerful an iframe can be in a low-code tool. It’s an escape hatch for when you hit platform limits. It’s like punching a hole in the ceiling, making the sky the limit.

I’ve been out of FileMaker development for years, but recently I started thinking about all the cool stuff I could have done back then if I had known a little more about JavaScript and using libraries in an iframe. So I’ve decided to revisit my first ‘go-to’ platform, and rebuild some of the recent experiments I’ve been doing in Appsmith.

Today, I’ll be working with the Mermaid JS library to generate flow charts from records stored in FileMaker. This post was inspired by an Appsmith community template from Paul Chambless. Thanks Paul!

Mermaid.JS Intro

Mermaid JS is a powerful JavaScript library that allows developers to create complex diagrams and visualizations using simple text and code syntax. It’s a lot like markdown, but for charts instead of plain text.

For instance, just a few lines of text can be used to create a pie chart:

pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10

This works by placing the Mermaid code inside a div, and giving it the class of mermaid. The Mermaid library parses the doc and replaces all the mermaid divs with the rendered chart or graph, based on the text content of the div. Here's a full HTML doc, showing how to import the library.

<!DOCTYPE html>
<html>
<head>
    <title>Mermaid Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>
</head>
<body>
<!-- Mermaid diagram container -->
<div class="mermaid">
sequenceDiagram
    participant Research
    participant Design
    participant Development
    participant Testing
    participant Deployment
    Research->>Design: Completed
    Design->>Development: In Progress
    Development->>Testing: Pending
    Testing->>Deployment: Pending
</div>
</body>
</html>

…which renders as

Using Mermaid in FileMaker

Create a template for the web viewer

First, create a template for the web viewer and insert a MERMAID_CODE placeholder for where the Mermaid code would go.

<!DOCTYPE html>
<html>
<head>
    <title>Mermaid Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>
</head>
<body>
<!-- Mermaid diagram container -->
<div class="mermaid">
MERMAID_CODE
</div>
</body>
</html>

Then save this to a field in a new table. For mine, I used webviewer::html.

Set up web viewer

Next, add a code field to the same table, and add it to a layout, along with a web viewer.

Set the web viwer contents to:

Substitute ( html ; “MERMAID_CODE” ; code )

Load in a Mermaid Example

Now just paste any example from the Mermaid docs into the code field, and you should have a working chart or graph. This is hard-coded though. We want to insert data from FileMaker! That’s going to require some calculations and/or scripting. But before we shift gears, there’s one more thing we can do while we’re here.

You may want to add some custom styling, or even use other JavaScript libraries in the same web viewer. To make this easier, I suggest adding two more fields for css and javascript. Then update the template and the web viewer accordingly.

<!DOCTYPE html>
<html>
<head>
    <title>Mermaid Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>

<style>CSS_CODE</style>
<script>JS_CODE</script>

</head>
<body>
<!-- Mermaid diagram container -->
<div class="mermaid">
MERMAID_CODE
</div>
</body>
</html>

And this for the calculation in the web viewer:

Substitute ( html ; 

  ["JS_CODE" ; js ];  

  ["CSS_CODE" ; css ] ;

  ["MERMAID_CODE" ; mermaid ]

)

You may also want to add a Tab Control with Panels to edit each field.

Generating Text for Mermaid Charts

Ok, now that the basics are working, on to the fun part! Generating Mermaid charts dynamically from FileMaker data.

I have a Tasks table with the following data:

And I need to turn it into this format for a Gantt chart:

gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
Project Task 1: Task 1, 2024-04-04, 2024-04-07
Project Task 2: Task 2, 2024-04-06, 2024-04-09
Project Task 3: Task 3, 2024-04-08, 2024-04-11
Project Task 4: Task 4, 2024-04-10, 2024-04-13
Project Task 5: Task 5, 2024-04-12, 2024-04-15

Years ago I would have approached this with a script, but now we have the WHILE function in FileMaker. No looping scripts needed!

First, I used ExecuteSQL to get the data as comma separated values. But one of my column names is an SQL reserved word, so I had to use escape quotes. Then I used SUBSTITUTE to break each row into a new list item to iterate through. From there, a used a WHILE loop to build each task entry, then return the final list, along with the extra header info needed for this chart type.

Let([
    ganttHeader = "gantt" & ¶ &
    "title A Gantt Diagram"  & ¶ &
    "dateFormat  YYYY-MM-DD";

    data = ExecuteSQL("SELECT name, start, \"end\", id FROM Tasks"; ""; "¶");
    rows = Substitute(data; "¶"; ¶);
    maxIndex = ValueCount(rows)
];
    ganttHeader & ¶ & 
    While([
        index = 1;
        ganttBody = ""
    ];
        index <= maxIndex;
        [
            row = GetValue(rows; index);
            fields = Substitute(row; ","; ¶);
            taskName = GetValue(fields; 1);
            startDate = GetValue(fields; 2);
            endDate = GetValue(fields; 3);
            id = GetValue(fields; 4);

            // Construct the Gantt chart entry for this task
            ganttEntry = taskName & ": " & id & ", " & startDate & ", " & endDate;

            // Append this task's entry to the ganttBody
            ganttBody = ganttBody & ganttEntry & ¶;
            index = index + 1
        ];
Substitute(ganttBody; "¶"; ¶)    )
)

Using this in a calculation field with the ‘do not store result’ option will enable realtime charts based on your data!

Conclusion

This was a fun, first-try at using a web viewer in FileMaker for something besides displaying an external website. There are a ton of other use cases and JavaScript libraries that could be used to extend FileMaker Pro, Appsmith, or any other low-code platform that supports iframes or custom widgets.

I hope this helps other get started with 'punching holes in the ceiling' of platform limitations! Got an idea for a new integration? Drop a comment below.

FileMaker API Connector: A Free and Open-Source Starter Solution for Integrating FileMaker with Any API Or Database

Joseph Petty — Tue, 02 Apr 2024 22:00:00 +0000

Hey, I'm Joseph, an engineer at Appsmith, and a long-time FileMaker Pro consultant and developer. I freelanced in FileMaker Pro for years, integrating APIs like Shopify, BigCommerce, eBay and other services, using the insert from URL script step, curl requests, and roughly a terabyte of \"escaped quotes\" 😖

FileMaker is a powerful low-code platform that can build some pretty amazing apps, but the developer experience isn’t always as… let’s just say — modern. And while curl requests still have their uses, these days, I’d much rather use a Postman-like interface for making API calls. So I built one! And I wanted to share it with the FileMaker community.

This app, built on Appsmith, provides a starting point for connecting your FileMaker data to almost any API or Database using one of Appsmith’s many integrations, and a Postman-like API builder.

Getting started

The app handles the FileMaker login flow and query building, using a UI to select fields and enter search terms without coding—just like a Find Request in FileMaker. It generates the actual JSON query object for you and runs the API request, returning any matching records.

To get started, click the Fork App button in the top right to copy the app to your Appsmith account. Then, follow the instructions in the app to connect to your FileMaker server.

FileMaker API Connection Settings

Click the Test Connection button to verify if the API is working, and then close the setup window.

Enter the layout name you want to query, and the app will pull in the table name, field names, and total record count. This populates the Select widgets in the query builder so you can easily build complex AND/OR queries with multiple conditions.

Click FIND to run the query and the table should populate with the first 100 records from your FileMaker database. This query builder uses Appsmith's JSON Form widget, which dynamically generates a form from a JSON object.

Next, try entering a few search terms using the query builder, and set a Query Type: AND or OR. See how the query-body preview updates and the JSON structure changes? Awesome! Now let's check out the API requests.

FileMaker API Query Type

GET or POST?

The FileMaker API uses a GET method to retrieve records from a layout if no specific filter is used. However, to perform a find request, a POST method is used to send the query conditions in the POST body.

The search works the same as FileMaker's native find requests, using the same operators for wildcards *, exact matches ==, and others.

AND requests group the conditions as multiple properties of the same object:

{
  "query": [
    {
      "address_state": "FL",
      "first_name": "J*"
    }
  ]
}

OR requests separate each condition into a separate object:

{
  "query": [
    {
      "address_state": "FL"
    },
    {
      "first_name": "J*"
    }
  ]
}

Pagination

Feel free to skip to the next section if your table has <=100 records. Still here? Ok, well it sounds like you might need to paginate your data. But do you? 🤨

If possible, try to request only the records needed client-side and limit the results to less than 100 records, the limit per request for the FileMaker API. If you really need more than 100 records pulled, check out this guide on pagination.

Low-code: Integrate with another database or API

There's a lot you can do without coding in Appsmith, but you can do even more with JavaScript, like controlling widgets’ behaviors and appearances, transforming data, or chaining together multiple actions. This app was built using a few JavaScript nuggets to make the query builder, but it can easily be extended to send data to another API or database without additional coding.

Just add a new column to the table widget and set the type to Button. Then add a new API or database query to send data from the current row to another system.

Building the query body with JavaScript

The JSONForm widget supports Array and Object type fields, and allows the user to add additional objects—sets of fields and values—to an array. In this case, you are adding new query objects with inputs for the field_name and search_term. The data can be accessed inside the JSONForm widget by referencing JSONForm1.formData.

{
  "query": [
    {
      "field_name": "address_state",
      "search_term": "FL"
    },
    {
      "field_name": "first_name",
      "search_term": "J*"
    }
  ],
  "query_type": "AND"
}

Then, this data is transformed using a map() function, or forEach() function, depending on the query_type—AND or OR.

if (!JSONForm1.formData?.query) {
  return ''
}
let queryBody = {
  query: [{}]
};
let conditions = JSONForm1.formData.query;
let queryType = JSONForm1.formData.query_type;
if (queryType == 'OR') {
  let body = conditions.map(c => ({[c.field_name]: c.search_term}));
  queryBody['query'] = body;
} else {
  conditions.forEach(c => queryBody['query'][0][c.field_name] = c.search_term)
};
return queryBody
}

Server credentials and security

For easy setup and demo, this public Appsmith app was built using a client-side form to input the FileMaker API credentials as an app user. Appsmith also offer a secure datasource feature that saves the credentials on your Appsmith server as an admin, without exposing them to the user. Check out our Authenticated API docs for more info.

What’s next?

I started this app as a fun experiment to learn the FileMaker API and query structure, but it quickly evolved into the perfect starting point to connect FileMaker to any API or database. Hope this helps you get started on your own integrations!

I would love to hear back from you on your experience using the app, or if you would like to collaborate on adding additional features. I may even open-source this app as its own project if others are interested in contributing.

Update: April 2024

I got my start with FileMaker Pro in 2010 while working at a national laboratory that used it for data collection. The database needed some updates so I taught myself, and I ended up becoming the main dev for any FMP work at the lab. That lead to some side work, and more work, and then in 2016 I left the lab to start my own company and freelance full time.

After a few years of FMP, I switched to Google AppSheet for about 4 years, then found Appsmith in 2020 and made it my main tool for freelance work. I joined the Appsmith team about 1.5 years later as a senior developer advocate, and now I lead our freelancer program. It's been an amazing journey, and I couldn't have done it without the communities around each one of the platforms I used along the way. So now I want to help other low-code freelancers in their journeys by building our developer community with freelancers in mind.

If you're a freelancer in Appsmith, AppSheet, or FileMaker Pro, or any other low-code platform, I'd love to hear from you. And if you want to start freelancing but don't know where to start, feel free to reach out on Discord (joseph_appsmith).

Understanding 'Single' vs "Double" Quotation Marks in PostgreSQL

Joseph Petty — Fri, 19 Jan 2024 08:00:00 +0000

Single Quotes: Representing Textual Values

In PostgreSQL, single quotation marks are used to indicate textual values, often referred to as string literals. These string literals are essential for expressing information like names, descriptions, or any other form of textual data within SQL statements.

Using Single Quotes for String Values

When inserting data into a database, the string should be encased in single quotes. For instance, if you're adding a new entry to a products table, and you want to specify the product name as "Sparkling Water," you would use single quotes as follows:

INSERT INTO products (product_name, price) VALUES ('Sparkling Water', 1.99);

By enclosing the product name in single quotes, you're indicating that "Sparkling Water" is a string literal, allowing PostgreSQL to interpret and store it correctly. Notice how there are no quotes on the price, because the data is a number, not a string.

Escaping Single Quotes

Suppose you need to include an actual single quote within your string. In that case, you can't directly use a single quote, as it would prematurely terminate the string. To handle this situation, you use two consecutive single quotes to represent a single quote character within the string. For example, if you want to insert the string "It's a sunny day," you would do it like this:

INSERT INTO weather_reports (report) VALUES ('It''s a sunny day');

By using two consecutive single quotes (''), you're escaping the single quote character and ensuring it's treated as part of the string value.

Double Quotes: Identifying Delimited Identifiers

Unlike single quotes, which deal with string values, double quotes are utilized to mark delimited identifiers. These identifiers are names of database objects such as tables, columns, or even roles. The use of double quotes helps distinguish these identifiers and allows for special characters or case sensitivity.

Quoting for Delimited Identifiers

Suppose you're creating a table named Employee Records. Since this name contains a space, which is not a standard character for identifiers, you would use double quotes to define it as a delimited identifier:

CREATE TABLE "Employee Records" (
    employee_id serial PRIMARY KEY,
    employee_name text
);

By enclosing the table name in double quotes, you're indicating that it's a delimited identifier, allowing PostgreSQL to treat the space as part of the name.

Case Sensitivity with Double Quotes

Double quotes introduce case sensitivity to identifiers. For instance, if you create a column named "TotalSales" with double quotes, you must always reference it with the same case and double quotes:

SELECT "TotalSales" FROM sales_data;

Without the double quotes, PostgreSQL would interpret the column name in a case-insensitive manner.

Additional Examples

Creating a New Table

Imagine you're creating a new table to store customer reviews. Let's call it "Product Reviews." To ensure the table name is recognized as a single identifier and that the casing is preserved, you can use double quotes:

CREATE TABLE "Product Reviews" (
    review_id serial PRIMARY KEY,
    product_id integer,
    review_text text
);

In this scenario, the double quotes are utilized to create a delimited identifier for the table name "Product Reviews," allowing the use of spaces and upper casing within the name.

Querying Data with Delimited Identifiers

Suppose you want to retrieve reviews from the "Product Reviews" table where the product name is "Sparkling Water". Since the table name contains capitalization and spaces, you would need to use double quotes:

SELECT review_text
FROM "Product Reviews"
WHERE product_name = 'Sparkling Water';

Here, the double quotes ensure that PostgreSQL correctly interprets the capitalized table name "Product Reviews.", and the single quotes are used to encase the string used as a search term in the WHERE clause.

Using Single Quotes for String Values

Let's insert a new review into the "Product Reviews" table. The review text is "Great product, highly recommended!":

INSERT INTO "Product Reviews" (product_id, review_text)
VALUES (1001, 'Great product, highly recommended!');

In this case, the single quotes are used to enclose the review text, indicating that it's a string value to be inserted into the table.

Escaping Single Quotes in String Values

Suppose you receive a review with an apostrophe within the text. For example, "It's the best choice." To insert this review accurately, you need to escape the apostrophe using two consecutive single quotes:

INSERT INTO "Product Reviews" (product_id, review_text)
VALUES (1002, 'It''s the best choice.');

By doubling the single quotes (''), you're correctly inserting the review without prematurely ending the string.

Conclusion

Understanding the use of single and double quotation marks in PostgreSQL is critical for effective database manipulation. Single quotes represent textual values, while double quotes denote delimited identifiers, such as table and column names.

Getting Started As a Low-Code Freelancer: 5 Tips to Kickstart Your Career in 2024

Joseph Petty — Sat, 16 Dec 2023 15:25:21 +0000

With tons of new no-code/low-code platforms, a wide range of new AI tools, and massive changes in freelancing sites, 2023 has led to significant changes in the freelancer landscape. Freelancing in 2024 will be completely different game, which will come with new challenges, and even more new tools to learn to help solve them.

To be successful in this market as a freelancer, you must adapt and learn to take advantage of change instead of be disrupted by it. But despite all the change, there are some tried and true freelancing techniques that still apply. After working full-time as a freelancer in the no-code/low-code space for almost a decade, and mentoring several other freelancers along the way, I've seen what works and what doesn't, what used to work, and what has changed. Below are my top 5 tips for freelancing in this new landscape.

Tip #1 - Create Your Own Niche

Combine a personal skill, hobby or other area of expertise with a specific platform or language. You might not be the best freelancer available for a certain platform, but when combined with that extra skill or hobby, you could quickly become one of the top choices for clients who want that specialty.

Examples: Healthcare + Bubble.io, Finance + Airtable, ecommerce APIs + Appsmith, Construction/Manufacturing + AppSheet, etc

This creates a combo of search terms with much fewer results, allowing your profile and content to rise to the top when you specialize in both. It will also help close the deal when the client knows you understand the platform AND the processes and data structure specific to their use case.

Tip #2 - Learn in Public

Document and share your learning journey. Now that you've learned How to do X in Y Platform, go write a post on their community forums! This is something I have done from the very beginning of my freelancer career. I figured, why not make my notes public and save others the trouble I went through to learn it.

Also be sure to fill out your profile on these forums, and add links to your blog and freelancer profiles. Get involved in the community, answer questions, comment on other posts, etc. If you want to be successful with a particular tool, it really helps to be tuned in to their community. It also helps you keep up with new feature releases and any technical issues you should be aware of.

And lastly, this all goes back to adding credibility to your work in this particular platform, and will help you generate leads and close more deals. I've often had leads contact me based on forum posts I wrote. Your previous posts can also be used as example work when applying to jobs.

Tip #3 - Create a Highly Specific Blog

Now that you have that niche chosen and forum profile setup, it's time to start working on your own blog. There's no need to build your own site from scratch, but if that's your niche, then by all means, go for it! For mine, I just used Hashnode, because I'm not a frontend dev, and not trying to land frontend work.

Whatever you use, don't worry so much about page views or distributing the posts on social. Try to think of the blog as more of a credential to show to existing leads to help close a deal, as opposed to it being a way to generate new leads.

For me, once I had a decent library of posts built up, I started using them in proposals as a way to show a specific example of my work that was related to the job. At that point, I barely had to write more than a quick intro and closing, then drop in a link to the most relevant blog post. This worked wonders for me on UpWork proposals.

Tip #4 - Build a Personal, or Company Brand

Ok, you're blog is set up and you're active on related forums to start getting your name out there. Now it's time to start developing your brand. This can be as simple as using your own name and headshot, or it could mean picking a business name, domain, logo, etc. Either way, make your content easy to recognize across various forums, freelancer profiles, blogs, social, etc, by standardizing on the profile pic, name bio, etc.

Next, cross-link all of those profiles! Make sure every one has a link back to your blog and freelancer profiles.

Tip #5 - Partner Programs & Vendor Listings

Getting listed as a partner or vendor is another great way to generate leads. And it looks good on your profile, and will instill confidence in your prospective clients.

Partner/Affiliate Programs: Lots of platforms have partner programs where you can apply to be listed as a service provider from their community. Some are as easy as filling out a form, while others have interviews or exams involved. See what's available for the platforms and services you plan to use, and apply to be a partner or affiliate.

Vendor Listings: Government and educational institutions tend to have systems where contractors can apply to be listed as a vendor. See if you can get listed for your local university, or county or city municipality. Even if you never bid on a job, being listed as a vendor is both free advertising, and a credential you can show off.

Thoughts on Freelancer Sites for 2024

UpWork and Fiverr have changed a LOT over the last few years, and even more so with the release of ChatGPT. Between the spam and scams on both sides of the job posts, and all the fees involved, these platforms aren't nearly as useful as they once were. However, I still encourage you to create a profile, upload a portfolio, and link to your profiles on your blog and socials. More web presence is better, and it's good to have the profile set up ahead of time in case you find a client who prefers to use it for payment.

Try, but Don't Buy: Although I wouldn't recommend putting much effort (or money!) into applying to jobs on freelancer sites in 2024, you still need contracts and payment processing.

Instead of applying to jobs, focus on building your web presence and establish yourself as an expert in your chosen niche. Then, bring your leads to a freelancer site to manage the contract, payment, and to collect a review. There's still value in those services, so don't write these freelancer sites completely off, just yet.

2024, and Beyond!

Freelancing has been an amazing journey for me, and I encourage everyone else who is interested to give it a try. Whether you're already freelancing and looking for ways to expand, or just getting ready to take the first step, I wish you all the best of luck in 2024 and beyond! Feel free to reach out with any questions or comment below to share your freelancer story.

Building a signature capture widget with an Appsmith Iframe and SignaturePad.js

Joseph Petty — Thu, 14 Dec 2023 15:22:28 +0000

Goal

Build a signature capture widget using custom code in an Appsmith Iframe widget srcDoc field
Capture signatures as images, then access the image outside of the iframe

Prerequisites

An Appsmith Account
A new or existing app - where you want to add the signature capture widget

Overview

The iframe widget is like an escape hatch that leaves the low-code environment of Appsmith and allows you to write full web apps using any framework of your choice. If there's something you can't do with one of our 45+ widgets, you can probably do it in an iframe.

For instance, although we don't have a native signature capture widget (yet), you can easily build one with just a few lines of JavaScript, and the signaturePad.js library.

Add an Iframe Widget

Add an iframe where you want the signature capture, and paste the following code in the srcDoc field:

<canvas id="signature-pad" width="auto" height="auto"></canvas>
<button id="clear">Clear</button>
<button id="save">Save</button>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
  var canvas = document.getElementById("signature-pad");
  var signaturePad = new SignaturePad(canvas, {backgroundColor: 'rgb(250,250,250)'});
  document.getElementById("clear").addEventListener('click', function () {
    signaturePad.clear();
  });
  document.getElementById("save").addEventListener('click', function () {
    var dataURL = signaturePad.toDataURL();
    window.parent.postMessage({
      type: 'signature',
      data: dataURL
    }, '*');
  });
</script>

Note the event listener on the SAVE button that posts a message to the parent window.

Access the Signature Image

Once the SAVE button is clicked, the image will be accessible at Iframe1.message.data. You can view it in a regular Image widget, or view the raw data in a Text widget.

Trigger an Event when saving

You may want to save the image back to a database, or send it in an email after signing. The Iframe widget has an onMessageReceived property, where you can select which Actions to run when a message is posted from the iframe. The Action selector also allows you to add callback functions, so you can chain together Actions, and do things like saving the image to Amazon S3, then saving the new URL back to a record in MySQL.

Conclusion

The Iframe widget can easily be used to create custom widgets, and new interfaces to capture and display data. By adding just a few lines of code, a Signature Capture widget can be built and integrated with the rest of your app.

Additional Resources

Building a CRUD app with Google Sheets

Joseph Petty — Thu, 07 Dec 2023 14:33:58 +0000

Goal

This tutorial covers the basics for creating a CRUD (Create, Read, Update, Delete) app using Google Sheets as the datasource.

Prerequisites

An Appsmith account
A Google account

Overview

Google Sheets is actually our most used datasource in Appsmith! It's great for quickly prototyping an app, or building a PoC (proof of concept) or MVP (minimum viable product).

For this tutorial, we'll be using a mock dataset for an events app at a software company. Start out by copying the sample sheet to your Google account, and give it a unique name so it's easy to find from Appsmith.

Sample Events sheet <= Make a copy

Next, we'll create a Google Sheets datasource in Appsmith, and then add APIs and a table widget to display and edit the sheet data.

Create a Google Sheets Datasource

Start out by creating a new app, and then add a Google Sheets datasource.
1. In the Appsmith editor, click the Datasources [+] button and choose Google Sheets
2. Name the datasource
3. Set the Permissions to: Read / Write / Delete | Selected google sheets
4. Click Save and authorize, then choose your Google account and authorize Appsmith to connect
5. In the next screen, find and select your new copy of the Events sheet
Note: Best practice is to create a new datasource for each sheet, instead of using the Read / Write / Delete | ALL google sheets option.

Keep in mind, if you choose ALL Google Sheets, and you share the workspace with someone else as a developer or admin, they will be able to access all of your Google Sheets!
Get data from Google Sheets

Next, we'll add an API to get data from the sheet. Make sure to create the new API under the Google Sheets datasource you just created. You can use the [+] New query button on the Google Sheets datasource, or the [+] Query/JS button, then select the Google Sheets datasource.

Pro Tip: You can also use the keyboard shortcut cmd-shift-+ to add a new API. More keyboard shortcuts here.
1. Add a new Google Sheets API and name it getRows
2. Configure as follows:\ Operation: Fetch Many\ Entity: Sheet Row(s)\ Spreadsheet: The Events sheet you just copied\ Sheet: events
3. Click RUN
You should get back a response with data from the spreadsheet. Now, on the right panel under Add new widget, click the Table binding shortcut. This will add a table widget to the canvas and automatically connect it to the getRows API. Alternatively, you can drag in a table widget, then set the Table Data property to {{getRows.data}}.

Notice the toast message about the getRows API running on page load now? Appsmith automatically sets a query to run on page load if it's connected to a widget. This way the widget will have data to display when the app first opens. You can also set a query to run on page load in the Settings tab for that query.
Add a row to Google Sheets

The table widget has an awesome new feature for adding a row directly from the table, instead of using a form widget. First, we'll enable adding a row, then we'll create the new API, and lastly, we'll connect the new API to the table widget.

To get started, select the table widget and find the Adding a row section at the bottom of the property pane:
1. Table Widget > Adding a row >
  1. Allow adding a row => ON
Then go up to the column settings for the table widget:
1. Table Widget > Data > Columns >
  1. Click the checkbox to mark all columns as editable
2. On the top of the table widget, click the + Add new row button
  1. Enter some dummy data in the new row, but don't click Save row yet!\ This will give us a draft row object to use in the addRow API.
Next, create a new API under the Google Sheets datasource.
1. Add new API: Insert One > Sheet row
2. Name the API addRow
3. Set the Row object to: {{Table1.newRow}}
You should see the data you entered for the new row in the evaluated value pane. Now, head back to the table widget properties to connect the API to the SAVE button. Once the addRow API runs, you'll want to run the getRows API again to update the data in the table widget. This can easily be done using the callback option in the action selector.
1. Table Widget > Adding a row >
  1. On Save => addRow API
    1. Callbacks: On Success => getRows
Now, head back to the new row you started to add on the table widget and click Save row. You should see the new row added to the sheet, and the table widget updated with the new data.
Updating a row in Google Sheets

Next, we'll add a new API for updating a row and use the table widget's row editing feature. This will be similar to the addRow API, but now we must also specify the rowIndex of the row to update. Start out by creating the new API.
1. Add new API: Update One > Sheet Row
2. Name the API updateRow
3. Set body to {{Table1.updatedRow}}
Notice how there's a new SAVE/DISCARD column in the table widget now? That gets added when you enable row editing, but you have to configure which action to run when the user clicks save.
1. Table Widget > Columns > Save/Discard (click the gear icon)
2. Set the On Save to updateRow
  1. Callback: On Success => getRows
Now you should be able to edit a row, then click SAVE to update the sheet and refresh the table widget.
Deleting a row in Google Sheets

Lastly, we'll add an API for deleting a row, then connect it to a new button in the table widget. Start out by adding a new button column to the table widget, then create an API and link it to the new button.
1. Table Widget > Columns > [+] Add new column
2. Set the column name to Delete
3. Click the gear icon to open the column settings
4. Set Column type to Icon Button, and select the trash icon
Now, add the deleteRow API.
1. Add new API: Delete One > Sheet Row
2. Name the API deleteRow
3. Set the rowIndex to {{Table1.triggeredRow.rowIndex}}
Lastly, connect the API to the new delete button.
1. Table Widget > Columns > Delete (click the gear icon)
2. OnClick => deleteRow
  1. Callback: On Success => getRows
And that's it! You now have APIs for Creating, Reading, Updating, and Deleting data in Google Sheets; a complete CRUD app without writing a single line of code.

Conclusion

Google Sheets is a great choice for a backend when you need to quickly throw together an app, build a PoC or test out an idea. And Appsmith's native Google Sheets connector makes it easy to quickly build a full CRUD app on top of your sheets data.

Additional Resources

Slack Workflow Builder: Send Messages in 2 Simple Steps

Joseph Petty — Thu, 12 Oct 2023 12:49:11 +0000

Goal

This guide will cover:

how to create a new workflow in Slack using a webhook trigger
how to trigger that workflow from Appsmith and send a message to a channel

Prerequisites

An Appsmith account
A Slack account, and a workspace you own or have permission to install workflows on

Overview

Slack has been rolling out some new updates recently, and the UI changes have many users upset and looking for ways to re-enable the old UI.

But last week, after the whiplash from the UI changes wore off, I noticed this new Automation tool. It's a workflow builder that allows you to chain together different actions and automate tasks in Slack and other connected platforms, like a basic version of Zapier or n8n.

Slack already had support for sending a message to a channel using a webhook, but now you can send webhooks to a workflow. This means you can trigger a series of actions, including channel messages, adding a row to Google Sheets, creating a Notion doc, and all kinds of other actions.

Create a New Workflow in Slack
First, create a new workflow in Slack, and set it up to send a message to a specific channel.
Create the Webhook API in Appsmith
Next, create a new POST API in Appsmith, and sent a test message.

That's it!

Just 2 simple steps to create the workflow and trigger it from Appsmith.

Conclusion

Slack workflows also have integrations with SalesForce, Notion, Google Sheets, and a bunch of other services. With the workflow published and a POST API set up, you can now integrate Slack with Appsmith, and automate your team's business tasks more seamlessly. We'd love to hear how you're using Slack and Appsmith at work! Or if you have ideas for a tutorial, feel free to post below and request.

DEV Community: Joseph Petty

OpenAI Assistants with Structured Outputs

Enterprises Are Embracing Low-Code 2024, and Fullstack Developers Have an Advantage

Low-Code: New Name, Same Game?

What's Driving the Change?

Easier access = more use cases, but not more devs

Low-Code for Fullstack and Backend Developers

The Fullstack Developer's Advantage

The New Fullstack

Freelancing and Building an Online Presence

Advertising on the Appsmith Community Portal

Conclusion

Building a Mermaid.js Gantt Chart in a FileMaker Web Viewer

Mermaid.JS Intro

Using Mermaid in FileMaker

Create a template for the web viewer

Set up web viewer

Load in a Mermaid Example

Generating Text for Mermaid Charts

Conclusion

FileMaker API Connector: A Free and Open-Source Starter Solution for Integrating FileMaker with Any API Or Database

Getting started

FileMaker API Connection Settings

FileMaker API Query Type

Pagination

Low-code: Integrate with another database or API

Building the query body with JavaScript

Server credentials and security

What’s next?

Update: April 2024

Understanding 'Single' vs "Double" Quotation Marks in PostgreSQL

Single Quotes: Representing Textual Values

Using Single Quotes for String Values

Escaping Single Quotes

Double Quotes: Identifying Delimited Identifiers

Quoting for Delimited Identifiers

Case Sensitivity with Double Quotes

Additional Examples

Creating a New Table

Querying Data with Delimited Identifiers

Using Single Quotes for String Values

Escaping Single Quotes in String Values

Conclusion

Getting Started As a Low-Code Freelancer: 5 Tips to Kickstart Your Career in 2024

Tip #1 - Create Your Own Niche

Tip #2 - Learn in Public

Tip #3 - Create a Highly Specific Blog

Tip #4 - Build a Personal, or Company Brand

Tip #5 - Partner Programs & Vendor Listings

Thoughts on Freelancer Sites for 2024

2024, and Beyond!

Building a signature capture widget with an Appsmith Iframe and SignaturePad.js

Goal

Prerequisites

Overview

Add an Iframe Widget

Access the Signature Image

Trigger an Event when saving

Conclusion

Additional Resources

Building a CRUD app with Google Sheets

Goal

Prerequisites

Overview

Create a Google Sheets Datasource

Get data from Google Sheets

Add a row to Google Sheets

Updating a row in Google Sheets

Deleting a row in Google Sheets

Conclusion

Additional Resources

Slack Workflow Builder: Send Messages in 2 Simple Steps

Goal

Prerequisites

Overview

Conclusion