diff --git a/README.md b/README.md index 55b4b296..fc8589f1 100644 --- a/README.md +++ b/README.md @@ -20,16 +20,16 @@ Blockstack is a ecosystem build around a platform. There are several types of us Users who make use of applications built on the Blockstack platform. These users have a Blockstack identity and typically use the Blockstack Browser at some point. - Dapp developers or DApp miners - Users who develop applications on the Blockstack platform. These users may be application miners but are not always. Special content exists for developers that are also miners. + Dapp developers + Users who develop applications on the Blockstack platform. Hub Providers - Users who sell or maintain a Gai services are hub providers. They may also be application miners but need not be. These users may be more devops user types as opposed to developers. + Users who sell or maintain a Gai services are hub providers. These users may be more devops user types as opposed to developers. Core service programmers - These are users that provide Blockstack CORE servers or who write Clarity contracts. These are also users who build wallets or explorers into the Blockstack platform. + These are users that run Stacks node or who write Clarity contracts. These are also users who build wallets or explorers into the Blockstack platform. @@ -77,7 +77,7 @@ Directories that contain information used to build content. _develop - Information for application miners covers using the Javascript library, our mobile SDKs, and the concepts hat support them. Navigation controlled by developer menu + Information for application developers covers using the Javascript library, our mobile SDKs, and the concepts hat support them. Navigation controlled by developer menu This information was never associated with a single repo. Much of it does rely heavily on https://github.com/blockstack/blockstack.js. @@ -260,13 +260,13 @@ As of 8/12/19 Clarity is in the [develop](https://github.com/blockstack/blocksta You can view [the source code](https://github.com/blockstack/blockstack-core/blob/develop/src/clarity.rs). -1. Pull the Blockstack core clarity-developer-preview image from Docker Hub. +1. Pull the Stacks Node clarity-developer-preview image from Docker Hub. ```bash $ docker pull blockstack/blockstack-core:clarity-developer-preview ``` -2. Start the Blockstack Core test environment with a Bash shell. +2. Start the Stacks Node test environment with a Bash shell. ```bash $ docker run -it -v $HOME/blockstack-dev-data:/data/ blockstack/blockstack-core:clarity-developer-preview bash @@ -295,12 +295,11 @@ You can view [the source code](https://github.com/blockstack/blockstack-core/blo ## Understand how the shared FAQs work -The FAQ system servers single-sourced content that support the FAQs that appear in blockstack.org, app.co, and stacks.com site. We have FAQs that fall into these categories: +The FAQ system servers single-sourced content that support the FAQs that appear in blockstack.org, and stackstoken.com site. We have FAQs that fall into these categories: * general * appusers * dappdevs -* appminers * coredevs * opensource * miscquest @@ -331,12 +330,7 @@ FAQs are usually written internally by a team that are unfamiliar with markdown _faqs/allfaqs.json Liquid to generate JSON from theFAQS.json - Serves up the FAQs that are consumed by the blockstack.org and stacks.com sites. - - - _develop/faq-data.json - Liquid to generate JSON from appFAQ.json. - Serves up the FAQs that are consumed by the app.co site.

NOTE: App.co was never changed to pull from the same file as blockstack.org. + Serves up the FAQs that are consumed by the blockstack.org and stackstoken.com sites. _faqs/allFAQs.md @@ -348,16 +342,6 @@ FAQs are usually written internally by a team that are unfamiliar with markdown JSON for the FAQS. Source file for all the FAQs. - - _data/appFAQ.json - JSON for the app mining FAQs. - Source file for the application mining FAQs. - - - _develop/appMiningFAQ.md - Liquid to extract the app mining FAQs from the allFAQs.json file. - Display just the app mining FAQs in the docs. - diff --git a/_android/tutorial.md b/_android/tutorial.md index 376c5eef..1cc57501 100644 --- a/_android/tutorial.md +++ b/_android/tutorial.md @@ -3,7 +3,7 @@ layout: learn description: Learn about the Android SDK permalink: /:collection/:path.html --- -# Android SDK Tutorial (Pre-release) +# Android DApps {:.no_toc} This tutorial is written for readers who are new to either or both Blockstack @@ -701,9 +701,6 @@ Now that you have created your initial project and verified it running in an emu ## Where to go next -Congratulations, you've completed your Android app using the new, pre-release -Blockstack Android SDK. Thank you for trying this pre-release. Please let us -know about your experience by tweeting to -[@blockstack](https://twitter.com/blockstack). +Congratulations, you've completed your Android app using the Blockstack Android SDK. Learn more about Blockstack by [trying another tutorial](https://blockstack.org/tutorials). diff --git a/_browser/.svn/entries b/_browser/.svn/entries deleted file mode 100644 index 48082f72..00000000 --- a/_browser/.svn/entries +++ /dev/null @@ -1 +0,0 @@ -12 diff --git a/_browser/.svn/format b/_browser/.svn/format deleted file mode 100644 index 48082f72..00000000 --- a/_browser/.svn/format +++ /dev/null @@ -1 +0,0 @@ -12 diff --git a/_browser/.svn/pristine/04/04f3a32b0bc311047a20e12c72428e50812cdbd9.svn-base b/_browser/.svn/pristine/04/04f3a32b0bc311047a20e12c72428e50812cdbd9.svn-base deleted file mode 100644 index 829f7c1f..00000000 Binary files a/_browser/.svn/pristine/04/04f3a32b0bc311047a20e12c72428e50812cdbd9.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/07/0760488b80dc376bd96b4dd0ec94f4e79292cf9b.svn-base b/_browser/.svn/pristine/07/0760488b80dc376bd96b4dd0ec94f4e79292cf9b.svn-base deleted file mode 100644 index 36684bff..00000000 --- a/_browser/.svn/pristine/07/0760488b80dc376bd96b4dd0ec94f4e79292cf9b.svn-base +++ /dev/null @@ -1,330 +0,0 @@ ---- -layout: learn -permalink: /:collection/:path.html ---- -# Hello, Blockstack Tutorial - -In this tutorial, you generate a simple application on Blockstack. The application -is a single-page application (SPA) that runs completely client-side. The -application has no backend API to talk to, other than the identity and storage -API that the user provides. In this sense, the application is a completely -decentralized, server-less application. You work through the following sections: - -* TOC -{:toc} - -## About this tutorial and the prerequisites you need - -For this tutorial, we will use the following tools: - -- `npm` to manage dependencies and scripts -- `browserify` to compile node code into browser-ready code -- `blockstack.js` to authenticate the user and work with the user's identity/profile information - -At minimum, Blockstack requires macOS High Sierra. This tutorial was written for -a user running macOS High Sierra 10.13.4. The application you build is a -React.js application that is completely decentralized and server-less. While -not strictly required to follow along, basic familiarity with React.js is -helpful. - -When complete, the app is capable of the following: - -- authenticating users using Blockstack -- posting new statuses -- displaying statuses in the user profile -- looking up the profiles and statuses of other users - -The basic identity and storage services are provided by `blockstack.js`. To test -the application, you need to have already registered a Blockstack ID. - -The tutorial relies on the `npm` dependency manager. Before you begin, verify -you have installed `npm` using the `which` command to verify. - -```bash -$ which npm -/usr/local/bin/npm -``` - -If you don't find `npm` in your system, [install -it](https://www.npmjs.com/get-npm). - -Finally, make sure you have [created at least one Blockstack ID]({{ site.baseurl }}/browser/ids-introduction.html#create-an-initial-blockstack-id). You'll use this ID to interat with the application. - -## Use npm to install Yeoman and the Blockstack App Generator - -You use `npm` to install Yeoman. Yeoman is a generic scaffolding system that -helps users rapidly start new projects and streamline the maintenance of -existing projects. - - -1. Install Yeoman. - - ```bash - npm install -g yo - ``` -2. Install the Blockstack application generator. - - ```bash - npm install -g generator-blockstack - ``` - -## Generate an initial Blockstack application - -In this section, you build an initial React.js application called `hello-world-tutorial`. - -1. Create the `hello-world-tutorial` directory. - - ```bash - mkdir hello-world-tutorial - ``` - -2. Change into your new directory. - - ```bash - cd hello-world-tutorial - ``` - -3. Use Yeoman and the Blockstack application generator to create your initial `hello-world-tutorial` application. - - ```bash - yo blockstack - ``` - - You should see several interactive prompts. - - ```bash - $ yo blockstack - - _-----_ ╭──────────────────────────╮ - | | │ Welcome to the │ - |--(o)--| │ Blockstack app │ - `---------´ │ generator! │ - ( _´U`_ ) ╰──────────────────────────╯ - /___A___\ / - | ~ | - __'.___.'__ - ´ ` |° ´ Y ` - - ? Are you ready to build a Blockstack app in React? (Y/n) - ``` - -4. Respond to the prompts to populate the initial app. - - After the process completes successfully, you see a prompt similar to the following: - - ```bash - ... - create public/icon-192x192.png - create public/index.html - create public/robots.txt - create public/manifest.json - - - I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself. - ``` - -Depending on your environment you may have some problems with the `npm` packages. Go ahead and fix these before continuing to the next section. - -## Review the basic application structure - -The initial application you create is a generic Javascript application you run -with a local express node. Before you continue, take a moment to examine the -structure of this generic application structure: - -| File | Description | -|------------------|-----------------------------------| -| .editorconfig | Sets universal values for editor. | -| .gitignore | Git configuration file. | -| firebase.json | Configuragion for mobile application.| -| package.json | Specifies required packages. | -| requires.js | A Javascript module loader. | -| server.js | Simple static server configuration.| - -In the `public` folder you find these files: - -| File | Description | -|------------------|-----------------------------------| -| app.css | Contains application styles. | -| app.js | Main application file. | -| boostrap.min.css | Minifield css for production. | -| icon-192x192.png | Application icon | -| index.html | Single page. | -| manifest.json | Tells the browser about the application and how it should behave.| -| robots.txt | Configures crawling and indexing. | - -The simple static file server in the `server.js`file serves all of the files in -the `/public` directory, including `index.html`, `app.js`, `bootstrap.min.css` -and `app.css`. The main file of the application is in the `app.js`. It contains -the majority of the application logic. - -## Start the server and view the application - -When you start the server, it will create a Node.js server, start it locally, -and open your browser 'http://localhost:5000'. From the root of your new application directory: - -1. Start the application server. - - ```bash - npm start - ``` - - The first time you run it, your system prompts you to accept incoming connections. - - ![Network Connection](images/network-connections.gif) - -2. Choose **Allow**. - -3. Open your browser to `http://localhost:8080`. - - You should see a simple application: - - ![](images/initial-app.gif) - -4. Choose **Sign In with Blockstack**. - - The application detects whether the user has the Blockstack client edition installed or - not. This is done automatically by the Blockstack API, more about this later. - What the browser displays depends on the users' current state. - - | Using web app | Has client edition installed | - |------------------|-----------------------------------| - | ![](images/login-choice.png) | ![](images/login.gif) | - - If the user logged into the Blockstack Browser but not reset it, the user can - simply use the exiting identity. - - ![](images/login-no-auth.png) - - If the user chooses **Deny**, the Blockstack Browser displays its - **Home** page but the user is not logged into the sample application. - -5. Leave your new application running and move onto the next section. - -## Understand the generated application code - -In this section, you look at the basic application generated with the `yo -blockstack` command. The generated code contains simple authentication methods -that allow a user to log into the browser. The main application code is located -in the `public/app.css` file. Open this file now. - -All of the code in the file is wrapped in an event -listener. - -```js -document.addEventListener("DOMContentLoaded", function(event) { -}) -``` - -This listener that waits until the DOM content is loaded. Then, it creates an auth request and redirects the user to sign in: - -```js -document.getElementById('signin-button').addEventListener('click', function() { - blockstack.redirectUserToSignIn() -}) -``` - -You can find the `redirectUserToSignIn()` function is part of the [Blockstack Javascript documentation](https://blockstack.github.io/blockstack.js/). There is also a sign out button handler. This handler deletes the local user data and signs the user out: - -```js -document.getElementById('signout-button').addEventListener('click', function() { - blockstack.signUserOut(window.location.origin) -}) -``` - -The handlers are followed by a `showProfile()` function for showing the user's profile: - -```js -function showProfile(profile) { - var person = new blockstack.Person(profile) - document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person" - if(person.avatarUrl()) { - document.getElementById('avatar-image').setAttribute('src', person.avatarUrl()) - } - document.getElementById('section-1').style.display = 'none' - document.getElementById('section-2').style.display = 'block' -} -``` - -Each `getElementById()` function refers to elemments in the `index.html` file. - -Once a user is successfully signed in, there is logic for loading the user -profile and displaying the application. As illustrated earlier, there are -several states the user can be in: - -- The user is already signed in -- The user has a pending sign in request -- The user is signed out - -The application handles these situtations as followed: - -```js -if (blockstack.isUserSignedIn()) { - var profile = blockstack.loadUserData().profile - showProfile(profile) -} else if (blockstack.isSignInPending()) { - blockstack.handlePendingSignIn().then(function(userData) { - window.location = window.location.origin - }) -} -``` - -When the user is signed in, Blockstack loads the user data from local storage -and displays the profile with the `showProfile()` function. When the user has a -pending sign in request, the appplication signs the user in and redirects the -user back to the home page. - -### Application manifest - -The application's `/public/manifest.json` file configures your app. The -configurations dictate how the application is displayed in auth views and on -user home screens. The contents are very simple: - -```json -{ - "name": "Hello, Blockstack", - "start_url": "localhost:5000", - "description": "A simple demo of Blockstack Auth", - "icons": [{ - "src": "https://helloblockstack.com/icon-192x192.png", - "sizes": "192x192", - "type": "image/png" - }] -} -``` - -Keep it as is or fill it in with new information that describes your app. - -### Save your application code - -Complete the tutorial by storing your app code on GitHub. Before you begin, make sure you have a GitHub account and have configured your environment to use it. - -1. Initialize the application code as a Git repo. - - ```bash - git init - ``` - -2. Add and commit all of the files: - - ```bash - git add . && git commit -m "first commit" - ``` - -3. In GitHub, create a `hello-blockstack` repository. - -4. Back in your termininal window, add a remote for GitHub. - - Make sure to fill in your username: - - ```bash - git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git - ``` - -5. Push your new code to the master branch of the remote repo: - - ``` - git push origin master - ``` - -You're done! You just built your first Blockstack app and shipped the code. -You're well on your way to becoming a Blockstack app legend. diff --git a/_browser/.svn/pristine/08/085c1a3260d4d04fcd82252787ba093d06446210.svn-base b/_browser/.svn/pristine/08/085c1a3260d4d04fcd82252787ba093d06446210.svn-base deleted file mode 100644 index bf6c096a..00000000 Binary files a/_browser/.svn/pristine/08/085c1a3260d4d04fcd82252787ba093d06446210.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/12/1284f902d27c0fdb01787c315fa61ee525538d65.svn-base b/_browser/.svn/pristine/12/1284f902d27c0fdb01787c315fa61ee525538d65.svn-base deleted file mode 100644 index 5352b913..00000000 Binary files a/_browser/.svn/pristine/12/1284f902d27c0fdb01787c315fa61ee525538d65.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/28/28885ce546124804666f1c735f1fb916582a1a98.svn-base b/_browser/.svn/pristine/28/28885ce546124804666f1c735f1fb916582a1a98.svn-base deleted file mode 100644 index 9fef9de2..00000000 Binary files a/_browser/.svn/pristine/28/28885ce546124804666f1c735f1fb916582a1a98.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/2c/2cb66479d94646ba1c3c651f26dbd9683e929114.svn-base b/_browser/.svn/pristine/2c/2cb66479d94646ba1c3c651f26dbd9683e929114.svn-base deleted file mode 100644 index 006eeca5..00000000 Binary files a/_browser/.svn/pristine/2c/2cb66479d94646ba1c3c651f26dbd9683e929114.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/2e/2e837afccc4a402a90dc0b7e580109e49e3252e2.svn-base b/_browser/.svn/pristine/2e/2e837afccc4a402a90dc0b7e580109e49e3252e2.svn-base deleted file mode 100644 index a5f0c27f..00000000 Binary files a/_browser/.svn/pristine/2e/2e837afccc4a402a90dc0b7e580109e49e3252e2.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/2f/2f00af279deecacd5b47bdc32a0106e23b2a2f64.svn-base b/_browser/.svn/pristine/2f/2f00af279deecacd5b47bdc32a0106e23b2a2f64.svn-base deleted file mode 100644 index 019c67db..00000000 Binary files a/_browser/.svn/pristine/2f/2f00af279deecacd5b47bdc32a0106e23b2a2f64.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/30/30473db14d0ed5ac772c32ab2e89375faa2b0133.svn-base b/_browser/.svn/pristine/30/30473db14d0ed5ac772c32ab2e89375faa2b0133.svn-base deleted file mode 100644 index c2626b50..00000000 Binary files a/_browser/.svn/pristine/30/30473db14d0ed5ac772c32ab2e89375faa2b0133.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/30/30e89a5d274e5137e687939f31ca471aea7462a3.svn-base b/_browser/.svn/pristine/30/30e89a5d274e5137e687939f31ca471aea7462a3.svn-base deleted file mode 100644 index 787392e1..00000000 --- a/_browser/.svn/pristine/30/30e89a5d274e5137e687939f31ca471aea7462a3.svn-base +++ /dev/null @@ -1,27 +0,0 @@ -# Tutorials - -**Note: This data is being digested by blockstack.org. Do not change the formatting of this list unless you first make an adjustment to the code on blockstack.org.** - -### Multi-player Storage - -- urlSlug: multi-player-storage -- image: /images/tutorials/multi-player-storage.png -- description: Build a decentralized micro-blogging app using multi-player Gaia storage. - -### Managing Data with Gaia - -- urlSlug: managing-data-with-gaia -- image: /images/tutorials/managing-data-with-gaia.png -- description: This series will focus on teaching you to think like a Blockstack developer working with Gaia. - -### Blockstack Todo - -- urlSlug: todo-list -- image: /images/tutorials/todo-list.png -- description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage. - -### Hello Blockstack - -- urlSlug: hello-blockstack -- image: /images/tutorials/hello-blockstack.jpg -- description: Build a simple single-page JavaScript application that runs completely client-side without any servers. diff --git a/_browser/.svn/pristine/33/33f4fbc3c99fe5df9c5eb23cc4aaf25165722419.svn-base b/_browser/.svn/pristine/33/33f4fbc3c99fe5df9c5eb23cc4aaf25165722419.svn-base deleted file mode 100644 index 433ef3d5..00000000 Binary files a/_browser/.svn/pristine/33/33f4fbc3c99fe5df9c5eb23cc4aaf25165722419.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/37/373b7d67a3d5c2de4723fcd45470854cf0c5ca6e.svn-base b/_browser/.svn/pristine/37/373b7d67a3d5c2de4723fcd45470854cf0c5ca6e.svn-base deleted file mode 100644 index 26d88672..00000000 Binary files a/_browser/.svn/pristine/37/373b7d67a3d5c2de4723fcd45470854cf0c5ca6e.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/3f/3f89163556affc6e77a6630136bf6897bc9ae8f6.svn-base b/_browser/.svn/pristine/3f/3f89163556affc6e77a6630136bf6897bc9ae8f6.svn-base deleted file mode 100644 index 1d95fee1..00000000 Binary files a/_browser/.svn/pristine/3f/3f89163556affc6e77a6630136bf6897bc9ae8f6.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/42/423c91a747d0f3570fb0d63199c9adcbe6baef1d.svn-base b/_browser/.svn/pristine/42/423c91a747d0f3570fb0d63199c9adcbe6baef1d.svn-base deleted file mode 100644 index d2c2dda2..00000000 Binary files a/_browser/.svn/pristine/42/423c91a747d0f3570fb0d63199c9adcbe6baef1d.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/49/49a137f4f026b72e9ba4af3fd546fe8baff34c09.svn-base b/_browser/.svn/pristine/49/49a137f4f026b72e9ba4af3fd546fe8baff34c09.svn-base deleted file mode 100644 index 75c17f14..00000000 --- a/_browser/.svn/pristine/49/49a137f4f026b72e9ba4af3fd546fe8baff34c09.svn-base +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Tour of a Blockstack application -description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage. -image: /images/article-photos/chalkboard.jpg -youtube: https://www.youtube.com/embed/oyvg-h0obFw ---- - -In this tutorial, you build the code for and run a single-page application (SPA) -with Blockstack and Vue.js. Once the application is running, you take a tour -through the applications' Blockstack functionality. You'll learn how it manages -authentiation using a Blockstack ID and how it stores information associated -with that ID using Blockstack Storage (Gaia). - -## Prerequisites - -Make sure you have [created at least one Blockstack ID](ids-introduction#create-an-initial-blockstack-id). You'll use this ID to Finteract with the Todo application. - -The applicaton code relies on both the `npm` and the `yarn` package managers. -Before you begin, verify you have these tools `npm` using the `which` command to -verify. - -```bash -$ which npm -/usr/local/bin/npm -$ which yarn -/usr/local/bin/yarn -``` - -[Install npm](https://www.npmjs.com/get-npm), [install -yarn](https://yarnpkg.com/lang/en/docs/install/#mac-stable), or both as needed. You - -While it stands alone, this tour does on the information from the [Hello -Blockstack tutorial](hello-blockstack). If you haven't worked through that -tutorial, you may want to do that before continuing. - - -## Install the applicaton code and retrieve the dependencies - -You can clone the source code with `git` or [download and unzip the code from -the -repository](https://github.com/blockstack/blockstack-todos/archive/master.zip). -These instructions assume you are cloning. - - -1. Install the code by cloning it. - - ``` - $ git clone git@github.com:blockstack/blockstack-todos.git - ``` - -2. Change to directory to the root of the code. - - ``` - $ cd blockstack-todos - ``` - -2. Use yarn to install the dependencies. - - - ``` - $ yarn install - yarn install v1.9.2 - info No lockfile found. - ... - [4/5] 🔗 Linking dependencies... - [5/5] 📃 Building fresh packages... - success Saved lockfile. - ✨ Done in 19.90s. - ``` - -## Understand the important application files - -The Todo application has a basic Vue.js structure. There are several configuration files but the central programming files are in the `src` directory: - -| File | Description | -|-----------------|-------------| -| `main.js` | Application initialization. | -| `App.vue ` | Code for handling the `authResponse`. | -| `Landing.vue ` | Code for the initial sign on page. | -| `Dashboard.vue` | Application data storage and user sign out. | - -The example application runs in a node server on your local host. In the next section, you start the application and interact with it. - -1. Start the application. - - ``` - $ npm run start - ``` - - You should see a simple application: - - ![](images/todo-sign-in.png) - - 2. Choose **Sign In with Blockstack**. - - -## Understand the sign in process - -At startup, the Todo application detects whether the user has the Blockstack client edition -installed or not. This is done automatically by the Blockstack API, more -about this later. What the authenticator displays depends on which whether the user has installed the Blockstack Authenticator client edition or not. - -| Client edition installed | Not installed | -|------------------|-----------------------------------| -| ![](images/login.gif) | ![](images/login-choice.png)| - -If the user was logged into the Blockstack authenticator (web or client) but -did not reset it, the web application to use the current identity: - -![](images/login-no-auth.png) - -If the user chooses **Deny**, the Blockstack authenticator opens but the user -is not logged into the sample application. - -![](images/windows-browser.png) - -If the login to the application is successful, the user is presented with the application: - -![](images/todo-app.png) - -Clicking the **Sign In With Blockstack** button brings up a modal that prompts -you to use an existing ID's session, create a new ID, or reset the browser with -another ID. When Blockstack is provided an ID, it generates an _ephemeral key_ -within the application. An ephemeral key is generated for each execution of a -key establishment process. This key is just used for the particular instance of -the application, in this case to sign a **Sign In** request. - -Blockstack also generates a public key token which is sent to the authenticator -as an `authRequest` from the authenticator to your local blockstack-core node. -The signed authentication request is sent to Blockstack through a JSON Web -Token. The JWT is passed in via a URL query string in the `authRequest` -parameter: -`https://browser.blockstack.org/auth?authRequest=j902120cn829n1jnvoa...`. To -decode the token and see what information it holds: - -1. Copy the `authRequest` string from the URL. -2. Navigate to [jwt.io](http://jwt.io/). -3. Paste the full token there. - - The output should look similar to below: - - ```json - { - "jti": "3i96e3ad-0626-4e32-a316-b243154212e2", - "iat": 1533136622, - "exp": 1533140228, - "iss": "did:btc-addr:1Nh8oQTunbEQWjrL666HBx2qMc81puLmMt", - "public_keys": [ - "0362173da080c6e1dec0653fa9a3eff5f5660546e387ce6c24u04a90c2fe1fdu73" - ], - "domain_name": "http://localhost:8080", - "manifest_uri": "http://localhost:8080/manifest.json", - "redirect_uri": "http://localhost:8080/", - "version": "1.2.0", - "do_not_include_profile": true, - "supports_hub_url": true, - "scopes": [ - "store_write" - ] - } - ``` - ->**Note**: -> 1. The `iss` property is a decentralized identifier or `did`. This identifies you and your name to the application. The specific `did` is a `btc-addr`. -> 2. The Blockstack JWT implementation is different from other implementations because of the underlying cryptography we employ. There are libraries in [Javascript](https://github.com/blockstack/jsontokens-js) and [Ruby](https://github.com/blockstack/ruby-jwt-blockstack) available on the Blockstack Github to allow you to work with these tokens. - -When the blockstack-core receives the `authRequest`, it generates a session token and -returns an authentication response to the application. This response is similar -to the `authRequest` above in that the `authResponse` includes a private key -intended only for the application. This allows the application to encrypt data -on your personal Blockstack storage. - -You are now logged into the Todo application! - -## Undder the covers in the sign in code - -Now, go to the underlying `blockstack-todo` code you cloned or downloaded. Sign -in and sign out is handled in each of these files: - -| File | Description | -|-----------------|-------------| -| `App.vue ` | Handles the `authResponse`. | -| `Landing.vue ` | Generates the `authRequest`. | -| `Dashboard.vue` | Handles sign out. | - -The `src/components/Landing.vue` code calls a [`redirectToSignIn()`](https://blockstack.github.io/blockstack.js#redirectToSignIn) function which generates the `authRequest` and redirects the user to the Blockstack authenticator: - -```js -signIn () { - const blockstack = this.blockstack - blockstack.redirectToSignIn() -} -``` - -Once the user authenticates, the application handles the `authResponse` in the `src/App.vue` file. : - -```js -if (blockstack.isUserSignedIn()) { - this.user = blockstack.loadUserData().profile -} else if (blockstack.isSignInPending()) { - blockstack.handlePendingSignIn() - .then((userData) => { - window.location = window.location.origin - }) -} -``` - -If [`blockstack.isUserSignedIn()`](https://blockstack.github.io/blockstack.js/#isusersignedin) is true, the user was previously signed in so Blockstack pulls the data from the browser and uses it in our application. If the check on [`blockstack.isSignInPending()`](https://blockstack.github.io/blockstack.js/#issigninpending) is true, a previous `authResponse` was sent to the application but hasn't been processed yet. The `handlePendingSignIn()` function processes any pending sign in. - -Signout is handled in `src/components/Dashboard.vue`. -```js -signOut () { - this.blockstack.signUserOut(window.location.href) -} -``` - -The method allows the application creator to decide where to redirect the user upon Sign Out: - - -## Working with the application - -Now trying adding a few todos using the application. For example, try making a list of applications you want to see built on top of Blockstack: - -![](images/make-a-list.png) - -Each list is immediately stored in the Gaia Hub linked to your Blockstack ID. -For more information about the Gaia hub, see the [hub -repository](https://github.com/blockstack/gaia). You can fetch the `todos.json` -file you just added by opening the Javascript console and running the following -command: - -```Javascript -blockstack.getFile("todos.json", { decrypt: true }).then((file) => {console.log(file)}) -``` - -You should see a JSON with the todos you just added: - -```json -[ - { - "id":2, - "text":"Software package manager secured by the blockchain", - "completed":false - }, - { - "id":1, - "text":"Mutable torrents with human readable names", - "completed":false - }, - { - "id":0, - "text":"Decentralized twitter", - "completed":false - } -] -``` - - -Now, add another todo and check it off. When you fetch the newly generated file -using the Javascript console it will reflect the change look for `"completed":true`: - -```json -[ - { - "id":3, - "text":"Blockstack Todo", - "completed":true - }, - { - "id":2, - "text":"Software package manager secured by the blockchain", - "completed":false - }, - ... -] -``` - -Now that you have seen the application in action, dig into how it works. - - -## Implementing storage - -Now, go to the underlying `blockstack-todo` code you cloned or downloaded. The -application interactions with your Gaia Hub originate in the -`src/components/Dashboard.vue` file. First lets see where the changes to the -Todos are processed: - -```js -todos: { - handler: function (todos) { - const blockstack = this.blockstack - - // encryption is now enabled by default - return blockstack.putFile(STORAGE_FILE, JSON.stringify(todos)) - }, - deep: true -} -``` - -Tje `todos` JSON object is passed in and the [`blockstack.putFile()`](https://blockstack.github.io/blockstack.js/#putfile) method to store it in our Gaia Hub. - -The code needs to read the Todo items from the storage with the [`blockstack.getFile()`](https://blockstack.github.io/blockstack.js/#getfile) method which returns a promise: - -```js -fetchData () { - const blockstack = this.blockstack - blockstack.getFile(STORAGE_FILE) // decryption is enabled by default - .then((todosText) => { - var todos = JSON.parse(todosText || '[]') - todos.forEach(function (todo, index) { - todo.id = index - }) - this.uidCount = todos.length - this.todos = todos - }) -}, -``` - -The `todos` data is retrieved from the promise. - - -## Summary - -You now have everything you need to construct complex applications complete with authentication and storage on the Decentralized Internet. Why not try coding [a sample application that accesses multiple profiles](multi-player-storage.md). - -If you would like to explore the Blockstack APIs, you can visit the [Blockstack Core API](https://core.blockstack.org/) documentation or the [Blockstack JS API](https://blockstack.github.io/blockstack.js). - - Go forth and build! diff --git a/_browser/.svn/pristine/55/5500a797259a620714f1c576c579f117982590db.svn-base b/_browser/.svn/pristine/55/5500a797259a620714f1c576c579f117982590db.svn-base deleted file mode 100644 index aa136ba1..00000000 Binary files a/_browser/.svn/pristine/55/5500a797259a620714f1c576c579f117982590db.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/63/630ab4b5cbd3ff99dde5761ac5f475eb39dc3c9b.svn-base b/_browser/.svn/pristine/63/630ab4b5cbd3ff99dde5761ac5f475eb39dc3c9b.svn-base deleted file mode 100644 index 738bb384..00000000 --- a/_browser/.svn/pristine/63/630ab4b5cbd3ff99dde5761ac5f475eb39dc3c9b.svn-base +++ /dev/null @@ -1,288 +0,0 @@ ---- -layout: usenew -permalink: /:collection/:path.html ---- -# Use the Blockstack Browser -{:.no_toc} - -The Blockstack Browser gives users the ability to explore and use the -decentralized applications (dapps). The decentralized applications are a new way -to interact with the internet. Dapps give users control of their data. Data -about them personally, name, birthdate, phone number and data about what they do -such as visiting a website or buying an item. - -* TOC -{:toc} - -## Understand the Blockstack Browser - -Through the Blockstack browser application you can create an identity. An identity -represents you as you interact with others through Dapps. The Blockstack -Browser is itself, a simple Dapp. It allows you to: - -* create one or more identities -* send and receive bitcoin -* manage the storage of your profile and application data -* find and launch Dapps - -There are editorions of the Blockstack Browser, the web edition is an -application you access through your web browser by simply [visit the -applications' address](https://browser.blockstack.org/) in your computer's -browser. You can also install the browser as a client application on your -computer. - -If all you want to do is create, manage, and fund an identity and then interact -with Dapps, you can simply use the web edition. If you have concerns about net -censorship, hightened security concerns, or develop a Dapp yourself, you may -want to download and install the browser's client edition. - -## Using the Browser on public computers - -Before you use the web application, it is important to note that once you log -into the application with the brower, your session does not expire until you -choose **Settings > RESET BROWSER**. For this reason, you should be careful -when using the browser on public computers. - -If you are in a library, for example, and log into the browser, simply -closing the tab or even rebooting the computer does not log you out. Instead, -you should be sure to choose **Settings > RESET BROWSER** before leaving the web -application. - -For more informatin about your identity and the browser, see [Get and use a Blockstack IDs](ids-introduction). - -## Install the client edition - -Remember, for most users the Blockstack Browser web application should -suffice. You only need to install the client if you have additional, advanced -concerns about Internet or identity. Though not required, some Dapp developrs -may find it useful to install the client edition. - -The Blockstack Browser installer is a _multiple-context_ installer. If you -run it as a user, the installation is avalable only for that user. If you -install as administrator, the installation installs for all users. To find an -installer for your operating system, visit [the Blockstack install -page](https://blockstack.org/install). - -### On Mac - -Installation requires that you have macOS High Sierra 10.12 or higher. Do the following to install: - -1. Download the OSX installer from [the browser installation page](https://blockstack.org/install). -2. Double-click the downloaded DMG file to launch the installer. - - ![](images/ubuntu-browser.png) - -3. Drag the Blockstack.app to the `Applications` folder. -4. Double-click the Blockstack.app to launch it. - - The system displays a notice about opening the file: - - ![](images/dmg-notice.png) - -5. Choose **Open**. - - The system opens your default browser with the Blockstack Browser - application, running from your machine (localhost). You'll also see the - Blockstack icon in your machine's - - ![](images/browser-on-mac.png) - - If you have loaded an identity already via the Blockstack web application, - you are already logged into the local application: - - ![](images/browser-on-mac-1.png) - - -### On Windows - -Installation requires that you have Windows 10 or higher. Do the following to -install: - -1. Download the Windows installer from from [the browser installation page](https://blockstack.org/install). -2. Double-click the installer package to launch it. - - ![](images/windows-installer.png) - -3. Open the Wiindows **Start** menu and click on the recently added **Blockstack Browser**. - - ![](images/windows-start.png) - - The system displays a Windows Security Alert. - - ![](images/windows-security.png) - -4. Choose to **Allow access**. - - The system opens in the Blockstack Browser application. - - ![](images/windows-browser.png) - - -### On Linux - -The Blockstack installation on Linux requires Docker. Before installing -Blockstack, [install the version of Docker appropriate for your operating system](https://docs.docker.com/install/). - ->**Note**: The Blockstack script used in this procedure runs `docker` commands. Depending on how you installed and configure Dockered on your system, it may or may not be necessary to have `root` or `sudo` privileges. For this reason, the commands below show the use of `sudo` when interacting with the script or the `docker` executable. If your installation allows running Docker with lower privileges, you can omit it. - - -1. Download the Linux installer from from [the browser installation page](https://blockstack.org/install). - - This downloads a `Blockstack-for-Linux-v0.30.0.sh` script to your local drive. - -2. Open a terminal and navigate to the directory containing the downloaded script. - - When the script downloads, it is not executable. - -3. Set the executable bit on the file. - - ```bash - $ chmod u+x Blockstack-for-Linux-v0.309.0.0.sh - ``` - -4. Enter the command without any arguments to see the available subcommands. - - ```bash - $ sudo ./Blockstack-for-Linux-v0.309.0.0.sh - blockstack docker launcher commands: - Install-protocol-handler -> install a protocol handler for blockstack:// links - ... - ``` - -5. Use the script to `pull` the Blockstack Docker images you need. - - - ```bash - $ sudo ./Blockstack-for-Linux-v0.309.0.0.sh pull - ``` - - Depending on your network speed, this can take some time. - -7. Use the `docker image ls` command to confirm you have the image. - - ```bash - $ sudo docker image Is - REPOSITORY TAG IMAGE ID CREATED - quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 2 days ago - ``` - -8. Install the protocol handler - - ```bash - $ sudo ./Blockstack-for-Linux-vO.30.0.sh install-protocol-handler
 - Registering protocol handler - ``` - -9. Start the Blockstack containers. - - ```bash - $ sudo ./Blockstack-for-Linux-vO.30.0.sh start - c3092592e59abe3559fdb49d070a7aa5e99165c7d9f2flla20ecaf4e0dfc2f46
 - cd92f61ae473d54398da987f5023f5462b29c03f08584ebb3c9fIbb4cd790c69
 - Registering protocol handler - ``` - - The system launches the Blockstack Browser application for you. - - ![](images/ubuntu-browser.png) - -Until you stop the Blockstack containers, the application will continue to run -on your system. To display the status of the Blockstack containers, you can use -the `docker container ls` command. - -{% raw %} -```bash -$ sudo docker container ls --format '{{.ID}}\t{{.Image}}\t{{.Status}}\t{{.Ports}}\t{{.Names}}' -``` -{% endraw %} - -Use `./Blockstack-for-Linux-vO.30.0.sh stop` to stop the Blockstack Browser and its containers. - - -## Uninstall the browser - -If you installed the browser using an installer, follow the instructions for -your operating system. - -### On Mac - -1. Quit the Blockstack application if it is running. - - ![](images/quit-blockstack.png) - -2. Check if you have a Blockstack device and eject it if you do. - - ![](images/eject-blockstack.png) - -3. Use the Finder to open the **Applications** folder. -4. Locate the Blockstack application. -5. Open your `Applications` folder and locate the **Blockstack.app**. -6. Drag the appliation to the trash. -7. Delete the `/Users/USERNAME/Library/Application Support/Blockstack` folder. - - From the command line: - - ```bash - $ rm -r /Users/moxiegirl/Library/Application\ Support/Blockstack - ``` - -### On Windows - -1. Open the **Start** menu. -2. Click **Settings > System**. -3. Open for the **Apps & features** item. - - ![](images/eject-blockstack.png) - -4. Locate the **Blockstack Browser** and choose **Uninstall**. - - ![](images/browser-uninstall.png) - - -### On Linux - -Your Blockstack instalaltion relies on Docker containers and their associated -images. It also includes a supporting protocol handler you must remove. If you -installed Docker so that you can run Blockstack, you can uninstall Docker as well, -but that is not explained here. - -Do the following to uninstall Blockstack: - -1. Stop and remove the Docker containers if they are running. - - ```bash - $ sudo ./Blockstack-for-Linux-vO.30.0.sh stop - stopping the running blockstack-browser containers - 69a686799d4f - 56fc6189ff97 - 69a686799d4f - 56fc6189ff97 - ``` - -2. Remove the associated Blockstack images. - - ```bash - $ sudo docker image ls - REPOSITORY TAG IMAGE ID CREATED - quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 3 days ago - $ sudo docker image rm ad05fd844f59
 - Untagged : quay.io/blockstack/blockstack- browser :vO.30.0 - Untagged: quay.io/blockstack/blockstack-browser@sha256:b20c9514c56b99398fd4946af39e7537b807e85694943ac3b8807dlb3625833b - Deleted: Sha256:ad05fd844f5948blee06a0a09228df946478393c0a7588cbc65dlb8817f5b34e - Deleted: Sha256:7c3d0043f2ba01cf285f3fe09701b086c349b6380c2e42f25b31ac65c6626ec8 - Deleted: sha256:54ea2aa7d7d000e7483f299eeca9e5466fa86231f4cd4cld3c3096d97e61c5df - Deleted: sha256:38e61054355adefc3c2de031462114a9946cfc0e44444a38a27d0f115aba0da2 - .... - ``` - -3. Use the script to remove the protocol handler - - ```bash - $ sudo ./Blockstack-for-Linux-vO.30.0.sh remove-protocol-handler - ``` - -4. Delete the script. - - ```bash - $ rm Blockstack-for-Linux-vO.30.0.sh - ``` diff --git a/_browser/.svn/pristine/63/6326880dd17c45162090e3bb4902adefbccfcb15.svn-base b/_browser/.svn/pristine/63/6326880dd17c45162090e3bb4902adefbccfcb15.svn-base deleted file mode 100644 index cd6b3b6a..00000000 Binary files a/_browser/.svn/pristine/63/6326880dd17c45162090e3bb4902adefbccfcb15.svn-base and /dev/null differ diff --git a/_browser/.svn/pristine/64/6462fdc5109daa02e29fbf38f8602f7425387275.svn-base b/_browser/.svn/pristine/64/6462fdc5109daa02e29fbf38f8602f7425387275.svn-base deleted file mode 100644 index 8fa411cb..00000000 --- a/_browser/.svn/pristine/64/6462fdc5109daa02e29fbf38f8602f7425387275.svn-base +++ /dev/null @@ -1,812 +0,0 @@ ---- -layout: learn -permalink: /:collection/:path.html ---- -# Blockstack Storage Tutorial -{:.no_toc} - -In this tutorial, you build a micro-blogging application using multi-player Gaia -storage. Gaia is Blockstack's [decentralized high-performance storage -system](https://github.com/blockstack/gaia). The tutorial contains the following -topics: - -* TOC -{:toc} - -This tutorial does not teach you about authentication. That is covered in depth [in the hello-blockstack tutorial](hello-blockstack). - - - - -## About this tutorial and the prerequisites you need - -At minimum, Blockstack requires macOS High Sierra. This tutorial was written for -a user running macOS High Sierra 10.13.4. The application you build is a -React.js application that is completely decentralized and server-less. While -not strictly required to follow along, basic familiarity with React.js is -helpful. - -When complete, the app is capable of the following: - -- authenticating users using Blockstack -- posting new statuses -- displaying statuses in the user profile -- looking up the profiles and statuses of other users - -The basic identity and storage services are provided by `blockstack.js`. To test -the application, you need to have already [registered a Blockstack ID](ids-introduction). - -The tutorial relies on the `npm` dependency manager. Before you begin, verify -you have installed `npm` using the `which` command. - -```bash -$ which npm -/usr/local/bin/npm -``` - -If you don't find `npm` in your system, [install -it](https://www.npmjs.com/get-npm). Finally, if you get stuck at any point -while working on the tutorial, the completed [source code is available for -you](https://github.com/larrysalibra/publik) to check your work against. - -## Use npm to install Yeoman and the Blockstack App Generator - -You use `npm` to install Yeoman. Yeoman is a generic scaffolding system that -helps users rapidly start new projects and streamline the maintenance of -existing projects. - - -1. Install Yeoman. - - ```bash - npm install -g yo - ``` -2. Install the Blockstack application generator. - - ```bash - npm install -g generator-blockstack - ``` - - - -## Generate and launch the public application - -In this section, you build an initial React.js application called Publik. - -1. Create a the `publik` directory. - - ```bash - mkdir publik - ``` - -2. Change into your new directory. - - ```bash - cd publik - ``` - -3. Use Yeoman and the Blockstack application generator to create your initial `publik` application. - - ```bash - yo blockstack:react - ``` - - You should see several interactive prompts. - - ```bash - $ yo blockstack:react - ? ========================================================================== - We're constantly looking for ways to make yo better! - May we anonymously report usage statistics to improve the tool over time? - More info: https://github.com/yeoman/insight & http://yeoman.io - ========================================================================== No - - _-----_ ╭──────────────────────────╮ - | | │ Welcome to the │ - |--(o)--| │ Blockstack app │ - `---------´ │ generator! │ - ( _´U`_ ) ╰──────────────────────────╯ - /___A___\ / - | ~ | - __'.___.'__ - ´ ` |° ´ Y ` - - ? Are you ready to build a Blockstack app in React? (Y/n) - ``` - -4. Respond to the prompts to populate the initial app. - - After the process completes successfully, you see a prompt similar to the following: - - ```bash - [fsevents] Success: - "/Users/theuser/repos/publik/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" - is installed via remote npm notice created a lockfile as package-lock.json. - You should commit this file. added 1060 packages in 26.901s - ``` - -5. Run the initial application. - - ```bash - npm start - ``` - - The system prompts you to accept incoming connections. - - ![Network Connection](./images/network-connections.gif) - -6. Choose **Allow**. - -7. Open your browser to `http://localhost:8080`. - - You should see a simple React app. - - ![](images/initial-app.gif) - -8. Choose **Sign In with Blockstack**. - - The application tells you it will **Read your basic info**. - - ![](images/login.png) - -Leave your new application running and move onto the next section. - -## Add the `publish_data` scope to sign in requests - -Every app that uses Gaia storage must add itself to the user's `profile.json` -file. The Blockstack browser does this automatically when the `publish_data` -scope is requested during authentication. For this application, the user files -stored on Gaia are made visible to others via the `apps` property in the user's -`profile.json` file. - -Modify your authentication request to include the `publish_data` scope. - -1. Open `src/components/App.jsx` file. - -2. Locate the `handleSignIn` handler method. - - ```javascript - handleSignIn(e) { - e.preventDefault(); - redirectToSignIn(); - } - ``` - -2. Modify the method to this: - - ```javascript - handleSignIn(e) { - e.preventDefault(); - const origin = window.location.origin - redirectToSignIn(origin, origin + '/manifest.json', ['store_write', 'publish_data']) - } - ``` - - By default, authentication requests include the `store_write` scope which - enables storage. This is what allows you to store information to Gaia. - -3. Save your changes. -4. Go back to your app at `http://localhost:8080/`. -5. Log out and sign in again. - - The authentication request now prompts the user for permission to **Publish - data stored for the app**. - - ![](images/publish-data-perm.png) - -## Understand Gaia storage methods - -Once you authenticate a user with `store_write` and `publish_data`, you can -begin to manage data for your users. Blockstack JS provides two methods -`getFile()` and `putFile()` for interacting with Gaia storage. The storage -methods support all file types. This means you can store SQL, Markdown, JSON, or -even a custom format. - -You can create a meaningful and complex data layer using these two methods. -Before creating an application, consider fundamental data architecture and make -some decisions about how you’re modeling data. For example, consider building a -simple grocery list app. A user should be able to create, read, update, and -delete grocery lists. - -A single file collection stores items as an array nested inside each grocery -list: - -```js -// grocerylists.json -{ - "3255": { - "items": [ - "1 Head of Lettuce", - "Haralson apples" - ] - }, - // ...more lists with items -} -``` - -This is conceptually the simplest way to manage grocery lists. When you read a -`/grocerylists.json` file with `getFile()`, you get back one or more grocery -lists and their items. When you write a single list, the `putFile()` method -overwrites the entire list. So, a write operation for a new or updated grocery -list must submit all existings lists as well. - -Further, because this runs on the client where anything can go wrong. If the -client-side code encounters a parsing error with a user-input value and you -could overwrite the entire file with: - -`line 6: Parsing Error: Unexpected token.` - -Further, a single file makes pagination impossible and if your app stores a -single file for all list you have less control over file permissions. To avoid -these issues, you can create an index file that stores an array of IDs. These -IDs point to a name of another file in a `grocerylists` folder. - -![](images/multiple-lists.png) - -This design allows you to get only the files you need and avoid accidentally -overwriting all lists. Further, you’re only updating the index file when you add -or remove a grocery list; updating a list has no impact. - - -## Add support for user status submission and lookup - -In this step, you add three `blockstack.js` methods that support posting of "statuses". These are the `putFile()`, `getFile()`, and `lookupProfile()` methods. - -1. Open the `src/components/Profile.jsx` file. - -2. Expand the `import from blockstack` statement with data methods. - - The `Person` object holds a Blockstack profile. Add `putFile`, `getFile`, - and `lookupProfile` after `Person`. - - When you are done, the import statement should look like the following: - - ```javascript - import { - isSignInPending, - loadUserData, - Person, - getFile, - putFile, - lookupProfile - } from 'blockstack'; - ``` - -3. Replace the `constructor()` initial state so that it holds the key properties required by the app. - - This code constructs a Blockstack `Person` object to hold the profile. Your constructor should look like this: - - ```javascript - constructor(props) { - super(props); - - this.state = { - person: { - name() { - return 'Anonymous'; - }, - avatarUrl() { - return avatarFallbackImage; - }, - }, - username: "", - newStatus: "", - statuses: [], - statusIndex: 0, - isLoading: false - }; - } - ``` - - -4. Locate the `render()` method. -5. Modify the `render()` method to add a text input and submit button to the application. - - The following code echos the `person.name` and `person.avatarURL` - properties from the profile on the display: - - ```javascript - render() { - const { handleSignOut } = this.props; - const { person } = this.state; - const { username } = this.state; - - return ( - !isSignInPending() && person ? -
-
-
-
-
- -
-

- { person.name() ? person.name() - : 'Nameless Person' } -

- {username} - -  |  - (Logout) - -
-
-
- -
-
-