diff --git a/docs/images/tutorial/file_structure_1.png b/docs/images/tutorial/file_structure_1.png index f89bcc7..efb98ab 100644 Binary files a/docs/images/tutorial/file_structure_1.png and b/docs/images/tutorial/file_structure_1.png differ diff --git a/docs/tutorial.md b/docs/tutorial.md index 9ccb4b7..7b62764 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -14,7 +14,7 @@ Tutorial [code on GitHub](https://github.com/theta360developers/oppkey-ricoh-vie ## front-end HTML File -Create a barebones HTML file called `index.html`. Move the file to a sub-folder called, `views`. +Create a barebones HTML file called `index.html`. ```html @@ -61,7 +61,7 @@ Flask. ``` -At this stage, the `views/index.html` file looks like this. +At this stage, the `index.html` file looks like this. ```html @@ -108,15 +108,20 @@ a `secrets.env` file. ## back-end Python file Create a new python file in the same directory called `server.py` in the -same directory as the `views` folder. It is one level higher than -the `index.html` file. - -![file structure](images/tutorial/file_structure_1.png) +same directory as the `index.html` file. Create virtual environment. `python -m venv venv` +Activate virtual environment. + +`source venv/bin/activate` + +The file structure will look like this. + +![file structure](images/tutorial/file_structure_1.png) + Install dependencies. `pip install PyJWT Flask python-dotenv requests` @@ -132,8 +137,7 @@ from dotenv import load_dotenv load_dotenv("secrets.env") app = Flask(__name__) -app.template_folder = "views" -app.static_folder = "public" +app.template_folder = "." # Retrieve environment variables PRIVATE_KEY = os.getenv("PRIVATE_KEY") @@ -155,6 +159,17 @@ if __name__ == "__main__": At this stage, if you open the browser, you will just have a black screen. You won't be able to see the image because you still need to pass the viewer the `token` and the `contentId` +You can test the server with: + +```text +python server.py +* Serving Flask app 'server' + * Debug mode: on +WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. + * Running on http://127.0.0.1:3000 +Press CTRL+C to quit +``` + ![bare web page](images/tutorial/bare_web_page.png) ### creating the token for the RICOH360 Viewer @@ -184,6 +199,12 @@ def index(): return render_template("index.html", token=token) ``` +Run the server and test it again to make sure the token is being created. + +### token display challenge + +As a challenge, display the token on your HTML page using this syntax `{{name_of_token_variable}}` + ### accessing content To get the content, you first need to generate a token