The [Stacks Blockchain API](/understand-stacks/stacks-blockchain-api) is an API that helps app developers to view and use the state of the Stacks blockchain.
In this tutorial you will extend [the todos app](/build-app/tutorial/todos) to share individual lists publicly using the Stacks blockchain.
In this tutorial you will extend [the to-dos app](/build-app/tutorial/todos) to share individual lists publicly using the Stacks blockchain.
The registry of shared todos lists is implemented by a Clarity smart contract named [`todo-registry`](https://github.com/friedger/blockstack-todos/blob/tut/public-registry/contracts/todo-registry.clar). Data from this contract will be shown in the todos app.
The registry of shared to-dos lists is implemented by a Clarity smart contract named [`todo-registry`](https://github.com/friedger/blockstack-todos/blob/tut/public-registry/contracts/todo-registry.clar). Data from this contract will be shown in the to-dos app.
The final app will look like this:
@ -35,7 +35,7 @@ By the end of this tutorial, you will have:
To make sure you're not running into any challenges related to our network, please open up the [Status Checker](https://stacks-status.com/)
and confirm that all systems are operational. If some systems seem to have issues, it is best to wait until they are back up before you proceed with the next steps.
Furthermore, the todos app will interact with a smart contract deployed as `ST1234....todo-registry`. The contract source code is available at [GitHub](https://github.com/friedger/blockstack-todos/blob/tut/step1/contracts/todo-registry.clar).
Furthermore, the to-dos app will interact with a smart contract deployed as `ST1234....todo-registry`. The contract source code is available at [GitHub](https://github.com/friedger/blockstack-todos/blob/tut/step1/contracts/todo-registry.clar).
There may already be a deployed version available on the testnet; the [Stacks Explorer](https://explorer.stacks.co/) can be used to search for it.
@ -43,25 +43,25 @@ Alternatively, the contract can be deployed as described in the [hello world tut
### Tutorials
You should have followed the instructions of the todos app tutorial. You should have the code ready on your local machine. It is also helpful to have a basic understanding of Clarity as explained in the counter tutorial. If you are using mocknet or a new, empty testnet you can create transactions following the tutorial about signing transactions.
You should have followed the instructions of the to-dos app tutorial. You should have the code ready on your local machine. It is also helpful to have a basic understanding of Clarity as explained in the counter tutorial. If you are using mocknet or a new, empty testnet you can create transactions following the tutorial about signing transactions.
In your code repository of the todos app, launch the app by running the `start` command.
In your code repository of the to-dos app, launch the app by running the `start` command.
```
npm run start
```
In your browser, you should see the todos app.
In your browser, you should see the to-dos app.
## Registering a public URL
The Connect library (that is already used for authentication in the todos app) provides also methods to create, sign and broadcast transactions to the Stacks blockchain as explained in the signing transaction tutorial.
The Connect library (that is already used for authentication in the to-dos app) provides also methods to create, sign and broadcast transactions to the Stacks blockchain as explained in the signing transaction tutorial.
### Step 1: Define contract
@ -141,9 +141,9 @@ To use the `PublicUrlRegistrar` component, open `Sharer.jsx` and add the followi
<PublicUrlRegistraruserSession={userSession}/>
```
Now, you should be able to register your public todos list on the blockchain when you click on "Register on-chain."
Now, you should be able to register your public to-dos list on the blockchain when you click on "Register on-chain."
## Waiting for transactions
@ -151,7 +151,7 @@ The method `doContractCall` has a callback `finished` that is called after the u
### Step 1: Add dependency
Add the Stacks Blockchain API client library to `package.json` in the root folder of the todos list app:
Add the Stacks Blockchain API client library to `package.json` in the root folder of the to-dos list app:
```bash
npm add @stacks/blockchain-api-client
@ -307,7 +307,7 @@ You should now be able to see an update in the UI if the transaction was success
## Show recent activities
Similar to the `TransactionApi`, the `AccountsApi` provides easy access to account-related information. The api will be used in this section to show recent activities for the todos list registry.
Similar to the `TransactionApi`, the `AccountsApi` provides easy access to account-related information. The api will be used in this section to show recent activities for the to-dos list registry.
### Step 1: Create recent activities component
@ -457,7 +457,7 @@ In addition to `tx_result`, the transaction object also contains a timestamp (`b
There are two other ways to get state information from the blockchain: read-only functions and data map entries. Read-only functions were already discussed in the [Clarity counter tutorial](/write-smart-contracts/counter-tutorial). They do not require a transaction to complete. Data maps in Clarity are maps that can be read by any user. See the [Clarity reference](/references/language-functions#define-map) for more details.
@ -475,7 +475,7 @@ The `todo-registry` contract defines a read-only function `owner-of?` that retur
)
```
Let's add the owner information and the details for the first ever registered todos list (with `registry-id` 1) to the `RecentActivities` component. The `SmartContractsApi` of the client library provides methods to read these data from the blockchain.
Let's add the owner information and the details for the first ever registered to-dos list (with `registry-id` 1) to the `RecentActivities` component. The `SmartContractsApi` of the client library provides methods to read these data from the blockchain.
### Step 1: Add state variable for first registration
@ -501,7 +501,7 @@ useEffect(() => {
}, [fetchActivities, fetchRegistration]);
```
### Step 2: Query owner of the first todos list
### Step 2: Query owner of the first to-dos list
To query the read-only functions of the smart contract, a `SmartContractsApi` object needs to be created, in the same way as the `AccountsApi` object.
@ -122,7 +122,7 @@ Note how the `userSession` object is created at the beginning of this module by
The [`UserSession`](https://blockstack.github.io/stacks.js/classes/usersession.html) and [`AppConfig`](https://blockstack.github.io/stacks.js/classes/appconfig.html) classes are themselves imported from the `@stacks/auth` library.
In the separate `src/components/App.jsx` component, we see how
In the separate `src/components/App.jsx` component, you can see how
`componentDidMount` loads the user's data into the app's state, whether upon redirect post-authentication with `userSession.handlePendingSignIn()` or upon detection of an existing session with `userSession.isUserSignedIn()`:
```jsx
@ -168,7 +168,7 @@ As such, it's paramount that users handle them with great care.
### Step 5: Enter a username value and choose **Continue**
The username will be used by the app to generate a URL for sharing your todos, should you choose to make them public.
The username will be used by the app to generate a URL for sharing your to-dos, should you choose to make them public.
It is registered on the Stacks blockchain with [BNS](/technology/naming-system) and associated with your _Secret Key_.
@ -176,14 +176,14 @@ It is registered on the Stacks blockchain with [BNS](/technology/naming-system)
### Done: You've now completed onboarding into the app
## Add, edit and delete todos privately
## Add, edit and delete to-dos privately
Once you've authenticated the app, you can start adding todos by entering values into the "Write your to do"
Once you've authenticated the app, you can start adding to-dos by entering values into the "Write your to do"
field and hitting "Enter."
The data for all todos are saved as JSON to the Gaia hub linked to your Secret Key using the [`putFile`](http://blockstack.github.io/stacks.js/classes/storage.html#putfile) method of the `storage` object in the `src/storage.js` module, which manages all data storage for the app:
The data for all to-dos are saved as JSON to the Gaia hub linked to your Secret Key using the [`putFile`](http://blockstack.github.io/stacks.js/classes/storage.html#putfile) method of the `storage` object in the `src/storage.js` module, which manages all data storage for the app:
@ -14,7 +14,7 @@ Authentication provides a way for users to identify themselves to an app while r
Users who register for your app can subsequently authenticate to any other app with support for the [Blockchain Naming System](/build-apps/references/bns) and vice versa.
See the Todos app tutorial for a concrete example of this functionality in practice.
See the To-dos app tutorial for a concrete example of this feature in practice.
@ -14,7 +14,7 @@ Data storage provides a way for users to save both public and private data off-c
Storing data off the Stacks blockchain ensures that apps can provide users with high performance and high availability for data reads and writes without the involvement of centralized parties that could compromise their privacy or accessibility.
See the Todos app tutorial for a concrete example of this functionality in practice.
See the To-dos app tutorial for a concrete example of this feature in practice.
@ -20,7 +20,7 @@ Three main integrations are available:
- **Transaction signing**: Prompt users to sign and broadcast transactions to the Stacks blockchain
- **Data storage**: Save and retrieve data for users with [Gaia](/build-apps/references/gaia)
All three of these integrations can be used together to create powerful new user experiences that rival or exceed those of traditional apps – all while protecting your users' digital rights.
All three of these integrations can be used together to create powerful new user experiences that rival or exceed those of traditional apps—all while protecting your users' digital rights.
While integration is possible for any type of app, most of the resources available here are for web developers experienced with JavaScript.
Patrick Gray
4 years ago
Patrick Gray