How to Accelerate Interface Development with Skuid’s No-Code Studio on AWS

By Mike Kaastra, Product Director – NLX
By Clark Cregg, Manager of Software Engineering – Skuid
By Sumitha AP, Sr. Solutions Architect – AWS
By Div Shekhar, Partner Solutions Architect – AWS

Skuid

Skuid by Nintex is a low-code web application development platform that allows you to rapidly create branded, enterprise-ready applications which combine data from one or more data sources into an elegant, unified experience.

Whether your data resides in a proprietary system like Amazon Web Services (AWS), Salesforce, or Peoplesoft, or is exposed via common interfaces like SQL, ODATA, or REST, you can bring them together into web-based experiences.

In this post, we show how easily you can use Skuid to interact with Amazon Simple Storage Service (Amazon S3). We’ll create a simple web-based file explorer for files stored in Amazon S3 using the Skuid table component. We’ll also add interactive support for uploading, downloading, and deleting files—all in a matter of minutes and with zero code.

Skuid is an AWS Specialization Partner and AWS Marketplace Seller that provides a leading cloud-based no-code platform which frees humans to thrive in the digital world.

Prerequisites

In order to complete this activity, you’ll require the ability to create/configure an Amazon S3 bucket and its security settings, as well as have access to a Skuid NLX site (available for free through AWS Marketplace).

Figure 1 – Skuid NLX architecture diagram.

Creating Your Skuid Site

If you already have a Skuid NLX site available to work with, you’re welcome to use that. If not, you can sign up for a free developer site through AWS Marketplace.

After registering, you’ll have access to the NLX Site Manager where you can create your first NLX development site.

Note that you’ll need the URL for your site so you can configure your S3 bucket for cross-origin resource sharing (CORS).

Setting Up Your Amazon S3 Infrastructure

Step 1: Create an S3 Bucket

If you require support creating your S3 bucket, refer to the documentation.
Click Permissions to configure CORS for the S3 bucket.
Beside the CORS header, click Edit.
Paste the following JSON into the field (adjusting for your site):

[

    {

        "AllowedHeaders": [

            "*"

        ],

        "AllowedMethods": [

            "GET",

            "PUT",

            "POST",

            "DELETE"

        ],

        "AllowedOrigins": [

            "https://example.skuidsite.com"

        ],

        "ExposeHeaders": []

    }

]

Click Save changes.

Step 2: Create an IAM User to Connect to the S3 Bucket

Add access permissions for the user.
Add each of these permissions to the user (or to their role):
- s3:DeleteObject
- s3:GetObject
- s3:GetObjectAcl
- s3:ListAllMyBuckets
- s3:ListBucket
- s3:PutObject

Step 3: Creating an Access Key

Create an access key for the user you’ll use to connect to your S3 bucket. Keep track of the key Id and secret for the next steps.
Note that you can also use AWS Assume Role to enable access to your S3 bucket, but we’re using access keys for the purpose of this posts.

Creating Your Application in Skuid

Once you’ve logged into your Skuid NLX site, follow these steps to create a page that interacts with the S3 bucket.

Step 1: Configure an Authentication Provider

Go to Data Sources and open the Authentication Providers tab.
Click the Create button and name it S3_Authentication.
Choose AWS: Access Keys as the authentication method.
Enter your Access Key Id and Secret Access Key, and then choose Save.

Figure 2 – Configure an authentication provider

Step 2: Create the S3 Data Source

Go to Data Sources and click the Create button.
Choose Amazon S3 as the Type and name it S3, then click Next.
Choose S3_Authentication as the authentication provider.
Set the AWS Region for your bucket, and then Save.

Figure 3 – Create the Amazon S3 data source.

Creating the Page

Step 1: Create a New Page

Go to Pages and click the Create button.
Name the page S3 File Explorer and leave the rest default, and then click Create.

Figure 4 – Creating a new Skuid page.

Step 2: Add the S3 Bucket to the Page as a Model.

Go to Models and click the + button to add a New Model.
Set the Model ID to File and the Data Source Type to Amazon S3.
Set the Data Source to S3 and Model Entity to Object.
Select the Object Name, Size, and Last Modified fields.
Set the value of the Bucket Condition to your S3 bucket name, and then Save.

Figure 5 – Add the S3 bucket to the page as a model.

Step 3: Add a Table to List the Files in the S3 Bucket

Go to Components and search for Table, and then drag it onto the Skuid page Canvas.
In the table, click Add Fields to add Object Name, Size, and Last Modified.
Save and preview; you should get an empty table (if your bucket was originally empty).

Figure 6 – Add a table to list the files in the S3 bucket.

Step 4: Add a File Upload Component to Upload Files

Go to Components and search for File Upload, and then drag it onto the Skuid page Canvas above the table.
In Properties, choose File as the parent model.
Go to the On-upload actions tab and add an On-upload success action:
- Action Type: Query Models
- Models to Query: File”
Save and preview; you should now be able to upload a file and see it added to the table.

Step 5: Add a Download Action

Back in the Composer, click on the Table and choose ADD for Row Actions.
Set the Action Label to Download.
In the Actions tab, choose Run data source action for Action Type.
Choose Download Row Object for Action.

Figure 7 – Add a download action.

Step 6: Add a Delete Action

Click on the Table and choose ADD for Row Actions.
Set the Action Label to Delete.
In the Actions tab, add a New Action.
Choose Mark rows for deletion for Action Type.
Save and preview; you can now download and delete files.

Figure 8 – Add a delete action.

Bonus Activities to Try

Add support for folders.
Add an image preview.
Use the Design System to give it some flair.

Cleanup

Sign in to the AWS Management Console and open the Amazon S3 console.
In the Buckets list, select the option next to the name of the bucket you want to delete, and then choose Delete at the top of the page.
On the Delete Bucket page, confirm you want to delete the bucket by entering the bucket name into the text field, and then choose Delete bucket.
Note that if the bucket contains any objects, empty the bucket before deleting it by selecting the empty bucket configuration link in the This bucket is not empty error alert and following the instructions on the Empty bucket page. Then return to the Delete bucket page and delete the bucket.
To verify you’ve deleted the bucket, open the Buckets list and enter the name of the bucket you deleted. If the bucket can’t be found, your deletion was successful.
You can also delete the bucket through the AWS Command Line Interface (CLI) using this command aws s3 rb s3://bucket-name --force

Conclusion

This concise guide for leveraging Skuid by Nintex in web application development, particularly for integrating with Amazon S3, highlights its efficiency and innovation in a no-code environment.

We demonstrated the power of Skuid to create web applications that integrate data from various sources like Amazon S3. This post guides users in building a Skuid NLX site, establishing an authentication provider, and constructing a page for S3 bucket interaction.

Skuid is an AWS Specialization Partner, and you can start building today with a free trial on AWS Marketplace.

Reference Materials:

Skuid School: Take a deeper dive and learn on your own time with Skuid Skool. Includes step-by-step lessons to help you build apps with Skuid.
Skuid Composer: Learn more about every part of the Skuid Composer using the Skuid docs reference material.

.

.

Skuid – AWS Partner Spotlight

Skuid is an AWS Specialization Partner that provides a leading cloud-based no-code platform which frees humans to thrive in the digital world.

Contact Skuid | Partner Overview | AWS Marketplace

AWS Partner Network (APN) Blog