Merge pull request #20 from theta360developers/tutorial-2

added client_id and private key example to alternate tutorial

Author: codetricity

docs/images/tutorial2/client_id.png

@@ -0,0 +1,70 @@
+# Alternate Tutorial for Minimal Application
+
+The RICOH360 Viewer requires two things to start:
+
+1. token for viewer
+2. contentId for the image you want to show
+
+```javascript linenums="1" hl_lines="4 8" title="index.html snippet"
+// instantiate viewer object
+const viewer = new RICOH360Viewer({
+    divId: "viewer",
+    onFetchToken: () => "{{token}}",
+});
+// start viewer with content
+viewer.start({
+    contentId: "{{contentId}}"
+});
+```
+
+## Setting up a virtual environment on Python
+
+Although not required, I recommend that you set up a virtual
+environment on Python.  This avoids conflicting libraries on your main system
+Python.
+
+```text
+python -m venv venv
+source venv/bin/activate
+```
+
+You should now see a `(venv)` prompt.
+
+```text
+(venv) craig@craigs-air practice %
+```
+
+!!! tip inline end
+    The Private Key and the Client Secret are not the same.  You must
+    get the Client ID, Client Secret, and Private Key from RICOH.  The
+    Private Key is for the Viewer.  The Client Secret is for the content.
+
+## Viewer Token
+
+To generate the viewer token, you need the following:
+
+1. Client ID
+2. Private Key
+
+We will use PyJWT to generate the viewer token with the Private Key.
+
+### install PyJWT
+
+```text
+pip install PyJWT
+```
+
+### Create `server.py` file
+
+Use VSCode or equivalent to create a file, `server.py`.
+
+At the top, include `import jwt`.
+
+Below the import, add your `PRIVATE_KEY` and `CLIENT_ID`.
+The Private Key is long.  Put it in triple quotes.
+
+![private key](images/tutorial2/private_key.png)
+
+The Client ID is shorter.
+
+![client id](images/tutorial2/client_id.png)

docs/images/tutorial2/private_key.png

@@ -4,8 +4,8 @@ site_author: Oppkey
 
 theme:
   name: material
-  # features:
-  #   - navigation.instant
+  features:
+    - content.code.copy
   logo: images/oppkey_logo.jpg
   favicon: images/oppkey_logo.jpg
 repo_name: [email protected]:theta360developers/ricoh-viewer.git
@@ -19,6 +19,7 @@ nav:
   - Contact: contact.md
   - Python Flask: python.md
   - Tutorial: tutorial.md
+  - Alternative Tutorial: tutorial2.md
   - RICOH360 Cloud API: cloudapi.md
 
 plugins:
@@ -32,3 +33,5 @@ markdown_extensions:
   - pymdownx.inlinehilite
   - pymdownx.snippets
   - pymdownx.superfences
+  - admonition
+  - pymdownx.details