Usage with VS Code Web
======================

It is possible to user Quantag Studio directly from web browser.

Go to https://cloud.quantag-it.com and perform authentication with Google account 

.. image:: images/doc_web1.png
   :alt: Screenshot 1
   :width: 100%
   :align: center

You will be logged in to home page where you can manage workplaces, see profile information and jobs status.

Create new workplace by pressing "Add New Workspace"

.. image:: images/doc_web2.png
   :alt: Screenshot 2
   :width: 100%
   :align: center

Enter name for new workspace

.. image:: images/doc_web3.png
   :alt: Screenshot 3
   :width: 100%
   :align: center

After creation workspace will be shown on home page

.. image:: images/doc_web4.png
   :alt: Screenshot 4
   :width: 100%
   :align: center

To delete workspace - move mouse over its button. Trash icon will be shown. USe it carefully.

.. image:: images/doc_web5.png
   :alt: Screenshot 5
   :width: 100%
   :align: center

To open workplace click on its button

.. image:: images/doc_web6.png
   :alt: Screenshot 6
   :width: 100%
   :align: center

Press "Yes, I trust the authors"

You will see usual VS Code pretty similar to desktop version.
In your workspace you will see sample code for different frameworks.

Separate virtual python environment created in every workspace.

Before running python code you will need in install required packages

If you will try to Debug or Run python circuit which uses qiskit, you will see error like that:

.. image:: images/doc_web7.png
   :alt: Screenshot 7
   :width: 100%
   :align: center

To install required python packages open Terminal Tab:

.. image:: images/doc_web8.png
   :alt: Screenshot 8
   :width: 100%
   :align: center

First of all you have to activate virtual environment with command ". .venv/bin/activate"

.. image:: images/doc_web9.png
   :alt: Screenshot 9
   :width: 100%
   :align: center

After activtion you should see (.venv) in front of command line prompt

.. image:: images/doc_web10.png
   :alt: Screenshot 10
   :width: 100%
   :align: center

More information about virtual environments: https://docs.python.org/3/library/venv.html

Now you can install required packages. For example recommended minial set is "pip install qiskit matplotlib pylatexenc"

.. image:: images/doc_web11.png
   :alt: Screenshot 11
   :width: 100%
   :align: center

After that you will be able to debug and run python scripts and see disassembled OpenQASM code in Disassembly view

.. image:: images/doc_web12.png
   :alt: Screenshot 12
   :width: 100%
   :align: center