Tableland 🛠 An Introduction to Tableland Studio

Hello everyone, this is the Tableland team, and we're going to show you how to work with the work with the Tableland Studio web application. Studio allows you to easily manage projects and deploy spreadsheets through a web spreadsheets through a web interface. We also have a CLI for Studio, which we will talk about later, but today we will focus on working with the interface. So, we'll log in and connect the wallet. We will create a team, create a table, import it, and show you how to use Studio.

We will also briefly touch on the CLI, but you can use the SDK or smart contracts to create tables, and we will show the import process. For example, if you already have a table created that you want to add to your project and manage through Studio, you can import it. Overall, it allows you to create, deploy tables, and manage projects through a user -friendly interface. Let's start by visiting the visiting the Studio web app. This is studio.

tableland.xyz. In the upper right corner we will connect our wallet. Let's go through this process of connecting a wallet. Once connected, you will see your address displayed in the upper right corner.

Next, we will log in. The login process leads to the creation of a username and the association of an email address with that username. This will allow you to log back into the app, preserving all projects associated with your username. By default, your username will appear in the top left corner as a unique team identifier. But if necessary, you can always create multiple teams.

Currently, teams consist of a single user, but in the future we will add support for multiple users multiple users . Now let's create a new project. Let's call it "starter" and add a description of what kind of project it is. This will create a top-level framework for managing all tables within a single project. Let's create a project, and the first step will be to create and deploy a table in Studio.

You see the “blueprint” section—that’s where we’ll start. You define tables by creating a new table. The first table we will create will be called " will create will be called " users". It will be quite simple. This will be the users table users table , where we will track the ID and username values .

So, we name the table. We add a description. Now we select the columns and constraints for our table. So, we have an ID, an integer, a primary key. We have meaning.

We set it as a text type and make sure it is not null it is not null . And now you see the actual table creation instruction that will be executed "under the hood" after deployment. So, you see the same SQL see the same SQL query being executed later. If we click on this table template, we will see all the information we just configured. Here is the description configured.

Here is the description . This is a table that tracks users. You have columns and constraints adding IDs and values ​​with a primary key and a not null attribute. And after we expand the table, you'll see that the expansion section will populate with additional information. So let's return to the main page of this project.

Click on the deployments tab. And the deployment tab allows you to actually, with these templates, you can choose exactly where these tables should exist. And this red icon means it's not deployed yet. So we'll click on it and select the network we want to deploy to. In this case, we will use local tableland.

So, a local node for demonstration purposes. After clicking "deploy", the wallet window should appear . All table creations and queries require payment for gas. So we'll create a table. The process will continue.

We sign it. The transaction is complete. We are waiting for the completion. Okay, we're ready to go. And now we have metadata for this users table users table .

We have a network where it was deployed. Again , in this case it was a local tableland, but it could be any mainnet or testnet. We have a unique table name with a prefix, a network ID, and a table ID, also known as a token ID. As well as other information like the transaction hash and block number. If the table data exists, it will fill the bottom, but we have n't written anything there yet .

Steeply. Now on the templates screen we see that the table has been expanded. Now let's look at the process of importing an existing table. This is something you could create using the smart using the smart contracts SDK. We will use the standard Tableland CLI.

This is the tableland/CLI NPM package. We will run the tableland shell command. This will open a shell where you can write SQL queries directly. So, here we write the instruction to create a table. We will create a table called messages with columns ID and message, similar to the users table.

It's pretty simple. And we'll expand this table. So, once the table is created, you will see a unique table name. These are the prefix, chain ID, and table ID. We'll need them in a moment.

So remember these numbers remember these numbers . Now in the studio user interface we will enter the chain ID 31337, the table ID 14, and the name of our table— the name of our table— messages, we will also add a description for this table description for this table . Note that when creating the table in the CLI, we used the same address as when logging into the studio. The same account creates the same tables, and this allows us to easily import them into our project. Since it has already been deployed and created, you can see that it already has a deployment binding, as well as all of the information we just entered into the CLI.

One last point that is especially useful for hackathons or if you are just sharing information about your project: click the "share" button and you will get a link that you can copy and send to anyone. Again, we only have one user interaction with the project at the moment, but this allows you to at least share information about your project for visibility, and later we will allow other users to interact with the project as well . This was a quick overview of Tableland Studio, learn more at tableland.xyz or on our documentation site.