lukechilds
/
docs
mirror of https://github.com/lukechilds/docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update collections preview docs 

Removed custom Gaia hub setup steps and added the collections test page for viewing of contacts data.
feat/clarity-updates
Ken Liao 5 years ago
committed by GitHub
parent
a2b32d1a0d
commit
1f38934dcb
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      _develop/collections.md

48
_develop/collections.md
View File

@ -62,27 +62,19 @@ If you have `npm` installed, do the following to run the Contact Manager demo ap
3. Launch the alpha build of the local Blockstack Browser client. 3. Launch the alpha build of the local Blockstack Browser client.
{% include warning.html content="This alpha build interacts with a version of the Gaia Storage hub that supports collections. You cannot use an existing ID to test with, instead, you need to <strong>create a new, test ID using the alpha build</strong>. Additionally, <strong>you must use the <code>https://staging-hub.blockstack.xyz</code> Gaia hub during the Contact Manager onboarding</strong>. For this reason, wait to create a new ID." %} 4. In your Internet browser, visit the <a href="https://github.com/yknl/blockstack-contacts" target="_blank">https://github.com/yknl/blockstack-contacts</a> repository.
4. Go to the local Blockstack Browser and make sure you see this: 5. Download or clone the repository code to you local workstation.
![](images/confirm-local.png) 6. In your workstation terminal, change directory where you downloaded the demo code.
Do not create an ID yet. 7. Install the dependencies using `npm`.
5. In your Internet browser, visit the <a href="https://github.com/yknl/blockstack-contacts" target="_blank">https://github.com/yknl/blockstack-contacts</a> repository.
6. Download or clone the repository code to you local workstation.
7. In your workstation terminal, change directory where you downloaded the demo code.
8. Install the dependencies using `npm`.
```bash ```bash
npm install npm install
``` ```
9. Start the application running. 8. Start the application running.
```bash ```bash
npm run start npm run start
@ -90,19 +82,16 @@ If you have `npm` installed, do the following to run the Contact Manager demo ap
The system starts the application and launches it in your browser at 127.0.0.1:3000 The system starts the application and launches it in your browser at 127.0.0.1:3000
10. Choose **Sign In with Blockstack**. 9. Choose **Sign In with Blockstack**.
This system displays this pop-up The internet browser will display this pop-up
![](images/contacts-manager.png) ![](images/contacts-manager.png)
11. Use the local browser by choosing **Open Blockstack.app**. 10. Use the local browser by choosing **Open Blockstack.app**.
12. Choose **Create new ID** from the pop up.
The onboarding should prompt you to store your data with the `https://staging-hub.blockstack.xyz` provider.
13. Choose **Yes, use the recommended provider** and complete the creation of your test ID. 11. If you are not signed into an ID in the Blockstack Browser, choose **Create new ID** from the pop up.
If you are already signed in, choose an ID to sign in to the Contacts Manager app with.
The system should return you to the Contact Manager demo application. The system should return you to the Contact Manager demo application.
@ -110,6 +99,13 @@ Try adding a contact using the Contact Manager. When you have successfully creat
![](images/added-contact.png) ![](images/added-contact.png)
12. Once you've created a contact, you'll be able to view them in a different app.
Below is a separate test app that allows you to view the contacts data:
https://blockstack.github.io/blockstack-collections/page_test/
Once you click Sign in, choose the same Blockstack ID you used in the Contacts Manager. You will now be able to see all contacts data that was written in the previous steps by the Contacts Manager app.
## How to add the Contact collections to your DApp ## How to add the Contact collections to your DApp
@ -119,7 +115,7 @@ In this section, you learn how to add `Contact` collection functionality to an e
2. Install the preview branch of the `blockstack.js`. 2. Install the preview branch of the `blockstack.js`.
``` ```
npm install blockstack@20.0.0-alpha.4 npm install blockstack@20.0.0-alpha.5
``` ```
3. Add the ``blockstack-collections` package to your app. 3. Add the ``blockstack-collections` package to your app.
@ -145,13 +141,7 @@ In this section, you learn how to add `Contact` collection functionality to an e
const scopes = ['store_write', 'publish_data', Contact.scope] const scopes = ['store_write', 'publish_data', Contact.scope]
const appConfig = new AppConfig(scopes) const appConfig = new AppConfig(scopes)
const userSession = new UserSession({appConfig: appConfig}) const userSession = new UserSession({appConfig: appConfig})
userSession.redirectToSignIn()
const authRequest = makeAuthRequest(undefined, undefined, undefined, scopes, undefined, undefined, {
solicitGaiaHubUrl: true,
recommendedGaiaHubUrl: 'https://staging-hub.blockstack.xyz'
})
userSession.redirectToSignInWithAuthRequest(authRequest)
``` ```
{% include note.html content="This example enables the custom Gaia hub selection prompt to point at the pre-release hub that has collections features enabled." %} {% include note.html content="This example enables the custom Gaia hub selection prompt to point at the pre-release hub that has collections features enabled." %}

Write Preview
Loading…
Cancel
Save