Browse Source

Merge pull request #266 from tomrice/master

@tomrice Apologies for the delay. This looks good. Thank you.
feat/clarity-updates
Moxiegirl 6 years ago
committed by GitHub
parent
commit
2d9365ef98
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 36
      _browser/hello-blockstack.md

36
_browser/hello-blockstack.md

@ -105,7 +105,7 @@ In this section, you build an initial React.js application called `hello-world-t
__'.___.'__ __'.___.'__
´ ` |° ´ Y ` ´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n) ? Are you ready to build a Blockstack app? (Y/n)
``` ```
4. Respond to the prompts to populate the initial app. 4. Respond to the prompts to populate the initial app.
@ -147,12 +147,13 @@ In the `public` folder you find these files:
| app.css | Contains application styles. | | app.css | Contains application styles. |
| app.js | Main application file. | | app.js | Main application file. |
| bootstrap.min.css | Minified css for production. | | bootstrap.min.css | Minified css for production. |
| icon-192x192.png | Application icon | | favicon.ico | Website icon.
| icon-192x192.png | Application icon. |
| index.html | Single page. | | index.html | Single page. |
| manifest.json | Tells the browser about the application and how it should behave.| | manifest.json | Tells the browser about the application and how it should behave.|
| robots.txt | Configures crawling and indexing. | | robots.txt | Configures crawling and indexing. |
The simple static file server in the `server.js`file serves all of the files in 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` 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 and `app.css`. The main file of the application is in the `app.js`. It contains
the majority of the application logic. the majority of the application logic.
@ -174,7 +175,7 @@ and open your browser 'http://localhost:5000'. From the root of your new applic
2. Choose **Allow**. 2. Choose **Allow**.
3. Open your browser to `http://localhost:8080`. 3. Open your browser to `http://localhost:5000`.
You should see a simple application: You should see a simple application:
@ -211,23 +212,26 @@ All of the code in the file is wrapped in an event
listener. listener.
```js ```js
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", event => {
}) })
``` ```
This listener that waits until the DOM content is loaded. Then, it creates an auth request and redirects the user to sign in: This listener that waits until the DOM content is loaded. Then, it creates an auth request and redirects the user to sign in:
```js ```js
document.getElementById('signin-button').addEventListener('click', function() { document.getElementById('signin-button').addEventListener('click', event => {
blockstack.redirectUserToSignIn() event.preventDefault()
userSession.redirectToSignIn()
}) })
``` ```
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: You can find the `redirectToSignIn()` 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 ```js
document.getElementById('signout-button').addEventListener('click', function() { document.getElementById('signout-button').addEventListener('click', event => {
blockstack.signUserOut(window.location.origin) event.preventDefault()
userSession.signUserOut()
window.location = window.location.origin
}) })
``` ```
@ -235,7 +239,7 @@ The handlers are followed by a `showProfile()` function for showing the user's p
```js ```js
function showProfile(profile) { function showProfile(profile) {
var person = new blockstack.Person(profile) let person = new blockstack.Person(profile)
document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person" document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person"
if(person.avatarUrl()) { if(person.avatarUrl()) {
document.getElementById('avatar-image').setAttribute('src', person.avatarUrl()) document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
@ -258,12 +262,14 @@ several states the user can be in:
The application handles these situations as followed: The application handles these situations as followed:
```js ```js
var userSession = new UserSession() const appConfig = new blockstack.AppConfig()
const userSession = new blockstack.UserSession({ appConfig: appConfig })
if (userSession.isUserSignedIn()) { if (userSession.isUserSignedIn()) {
var profile = userSession.loadUserData().profile const { profile } = userSession.loadUserData()
showProfile(profile) showProfile(profile)
} else if (userSession.isSignInPending()) { } else if (userSession.isSignInPending()) {
userSession.handlePendingSignIn().then(function(userData) { userSession.handlePendingSignIn().then(userData => {
window.location = window.location.origin window.location = window.location.origin
}) })
} }

Loading…
Cancel
Save