Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] How to Get Started With Python Dash on PyCharm [Absolute Beginners]

#1
How to Get Started With Python Dash on PyCharm [Absolute Beginners]

<div><p><em>This is a chapter draft for our upcoming book “Python Dash” with NoStarch—to appear in 2021. <a href="https://blog.finxter.com/subscribe/" target="_blank" rel="noreferrer noopener" title="Subscribe">Stay tuned!</a></em></p>
<h2>Why an IDE</h2>
<p>Using an integrated development environment (IDE) has the potential to significantly accelerate your programming productivity. Many programmers do not unlock their full potential until they finally decide to switch from a simple code editor to an IDE—and mastering the advanced functionality provided by the IDE. Some advantages of IDEs over simple text editors are code highlighting, tooltips, syntax checker, code linters that check for style issues, version control to safeguard the history of programming edits, debugging with the help of breakpoints, visual aids such as flowcharts and block diagrams, performance optimization tools and profilers—just to name a few.</p>
<h2>PyCharm for Dash Apps</h2>
<p>In this book about dashboard applications, we recommend that you also take your time to switch to an IDE, if you haven’t already. In particular, we recommend that you use the PyCharm IDE to follow along with the provided code examples. Apart from the benefits of using IDEs, you’ll also develop web applications that can quickly grow by adding more and more features. As your Python dashboard applications grow, so will your need to aggregate all source code at a single spot and in a single development environment. Increasing complexity quickly demands the use of an IDE.</p>
<p>In the following, we’ll describe how to download and install PyCharm, and create your first simple dashboard application that you can view in your browser. After you’ve completed those steps, you’re well-prepared to duplicate the increasingly advanced applications in the upcoming chapters.</p>
<h2>Download PyCharm</h2>
<p>First, let’s start with downloading the latest PyCharm version. We assume you have a Windows PC, but the steps are very similar on a macOS and Linux computer. As soon as you’ve launched the PyCharm application, the similarity of usage increases even more across the different operating systems.</p>
<p><a href="https://www.jetbrains.com/pycharm/download" target="_blank" rel="noreferrer noopener" title="https://www.jetbrains.com/pycharm/download">You can download the PyCharm app from the official website.</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="290" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-22.png" alt="" class="wp-image-20268" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-22.png 636w, https://blog.finxter.com/wp-content/uplo...00x137.png 300w, https://blog.finxter.com/wp-content/uplo...150x68.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<p>Click the download button of the free community version and wait for the download to complete. </p>
<h2>Install PyCharm on Your Computer</h2>
<p>Now, run the executable installer and follow the steps of the installation application. A sensible approach is to accept the default settings suggested by the PyCharm installer.</p>
<p>Congratulations, you’ve installed PyCharm on your system! </p>
<h2>Open PyCharm</h2>
<p>Now type “PyCharm” into the search bar of your operating system and run the IDE! </p>
<h2>Create a New Dash Project in PyCharm</h2>
<p>After choosing “New Project”, you should see a window similar to this one:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="500" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-24.png" alt="" class="wp-image-20271" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-24.png 636w, https://blog.finxter.com/wp-content/uplo...00x236.png 300w, https://blog.finxter.com/wp-content/uplo...50x118.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<p>This user interface asks you to provide a project name, a virtual environment, and a Python interpreter. We call our project <code>firstDashProject</code>, use a virtual environment with the standard Python installation, and don’t create a <code>main.py</code> welcome script:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="500" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-26.png" alt="" class="wp-image-20274" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-26.png 636w, https://blog.finxter.com/wp-content/uplo...00x236.png 300w, https://blog.finxter.com/wp-content/uplo...50x118.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<p>Create the project and you should see your first PyCharm dashboard project!</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="349" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-27.png" alt="" class="wp-image-20276" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-27.png 636w, https://blog.finxter.com/wp-content/uplo...00x165.png 300w, https://blog.finxter.com/wp-content/uplo...150x82.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<h2>Create Your Dash File app.py in Your PyCharm Project</h2>
<p>Let’s create a new file <code>app.py</code> in your project and copy&amp;paste the code from the official documentation into your app.py file:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""># -*- coding: utf-8 -*- # Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser. import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) # assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({ "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], "Amount": [4, 1, 2, 2, 4, 5], "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
}) fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group") app.layout = html.Div(children=[ html.H1(children='Hello Dash'), html.Div(children=''' Dash: A web application framework for Python. '''), dcc.Graph( id='example-graph', figure=fig )
]) if __name__ == '__main__': app.run_server(debug=True)
</pre>
<p>You can get the code from the official Dash tutorial: <a href="https://dash.plotly.com/layout" target="_blank" rel="noreferrer noopener">https://dash.plotly.com/layout</a></p>
<p>Your PyCharm dashboard project should now look like this:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="349" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-29.png" alt="" class="wp-image-20279" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-29.png 636w, https://blog.finxter.com/wp-content/uplo...00x165.png 300w, https://blog.finxter.com/wp-content/uplo...150x82.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<h2>Debug Your Dash App Using PyCharm’s Tooltips</h2>
<p>Now, let’s try to run our project by using the top menu and select <code>Run > app.py</code>. Unfortunately, it doesn’t already work—PyCharm doesn’t recognize dash!</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="636" height="347" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-31.png" alt="" class="wp-image-20282" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-31.png 636w, https://blog.finxter.com/wp-content/uplo...00x164.png 300w, https://blog.finxter.com/wp-content/uplo...150x82.png 150w" sizes="(max-width: 636px) 100vw, 636px" /></figure>
</div>
<p>You can easily fix this by hovering over the red underlined “dash” library import in your app and choosing the <em>“install package dash”</em> option.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="624" height="218" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-32.png" alt="" class="wp-image-20284" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-32.png 624w, https://blog.finxter.com/wp-content/uplo...00x105.png 300w, https://blog.finxter.com/wp-content/uplo...150x52.png 150w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>This is one great advantage of an IDE is that installing dependencies in your Python projects is as simple as accepting the tooltips provided by your intelligent development environment.</p>
<h2>Install Dash in Your Virtual Environment</h2>
<p>Installing the dash library will take a few moments. Note that the library will be installed only in a <a href="https://blog.finxter.com/python-virtual-environments-with-venv-a-step-by-step-guide/" title="Python Virtual Environments with “venv” — A Step-By-Step Guide" target="_blank" rel="noreferrer noopener">virtual environment</a> which means that it’ll install it not on your global operating system but only on a project level. For a different project, you may have to install dash again. While this may sound tedious, it’s actually the most Pythonic way because it keeps dependency management simple and decentralized. There won’t be any version issues because your first project needs version 1 and your second project needs version 2 of a given library. Instead, each project installs exactly the version it needs.</p>
<h2>Install Pandas in Your Virtual Environment</h2>
<p><a href="https://blog.finxter.com/pycharm-extended/" title="PyCharm Extended" target="_blank" rel="noreferrer noopener">PyCharm </a>will tell you when it is done with installing the dash library in the virtual environment. Now repeat the same procedure for all red-underlined libraries in the project. If you used the code given above, you’ll have to install the <a href="https://blog.finxter.com/pandas-quickstart/" title="10 Minutes to Pandas (in 5 Minutes)" target="_blank" rel="noreferrer noopener">pandas library</a> (see Chapter 3) as well in your local environment. A few moments later, the pandas installation will also successfully complete. The red underlined error messages in your code will disappear and you’re ready to restart the project again by clicking “Run”.</p>
<h2>Exploring Your First Dash App in Your Browser</h2>
<p>On my machine, the output after running the <code>app.py</code> file in PyCharm is:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">C:\Users\xcent\Desktop\Python\firstDashProject\venv\Scripts\python.exe C:/Users/xcent/Desktop/Python/firstDashProject/app.py
Dash is running on http://127.0.0.1:8050/ * Serving Flask app "app" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on
</pre>
<p>Note the highlighted line (in bold). You can now copy the URL <strong><a href="http://127.0.0.1:8050/" target="_blank" rel="noreferrer noopener">http://127.0.0.1:8050/</a></strong> and paste it into your browser—the dashboard app runs on a local server that is hosted on your machine with IP address 127.0.0.1 and port 8050. <strong> </strong></p>
<p>When you visit this URL in your browser, you should see your first Dash application!</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="624" height="269" src="https://blog.finxter.com/wp-content/uploads/2021/01/image-33.png" alt="" class="wp-image-20286" srcset="https://blog.finxter.com/wp-content/uploads/2021/01/image-33.png 624w, https://blog.finxter.com/wp-content/uplo...00x129.png 300w, https://blog.finxter.com/wp-content/uplo...150x65.png 150w" sizes="(max-width: 624px) 100vw, 624px" /></figure>
</div>
<p>Congratulations, you’re now well-prepared to run all dashboard apps in this book—and beyond it as well—using similar steps. For further reading on PyCharm, feel free to check out our multi-site blog tutorial on <a href="https://academy.finxter.com/course/introduction-to-pycharm/">https://academy.finxter.com/course/introduction-to-pycharm/</a></p>
<p>The post <a href="https://blog.finxter.com/how-to-get-started-with-python-dash-on-pycharm-absolute-beginners/">How to Get Started With Python Dash on PyCharm [Absolute Beginners]</a> first appeared on <a href="https://blog.finxter.com">Finxter</a>. </p>
</div>


https://www.sickgaming.net/blog/2021/01/...beginners/
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016