************************************************************************ ? Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Learn to create and deploy your Dash Plotly app to the web with a step-by-step downloadable guide in Python. Together we will create a new URL for the app that you can expand and change to make your own. In the process, we will review the file structure necessary for a multipage app, how to connect the files to each other and see how to share information between pages.
Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Deploy_App_to_Web/Multipage_App
Data:
https://drive.google.com/file/d/1MBwS3h6QEGCbVWsQ2OygUQIcPRFIn3_N/view?usp=sharing
https://drive.google.com/file/d/1j8TuttJEkx47LySk5EPgf00cye8_2VJh/view?usp=sharing
Multipage App Documentation:
https://dash.plotly.com/urls
App link:
https://productsold.herokuapp.com/apps/vgames
Supporting Document:
https://drive.google.com/file/d/1QX4qyRcxtj0mCSITYZWVbmnZQDK8TeMB/view?usp=sharing
Video layout:
00:00 - App demo and what you will learn
06:00 - Part 1: File structure
10:03 - Part 2: Connect app files to each other
24:02 - Part 3: Deploy app to the internet
40:49 - Part3a: Re-deploy app to the internet
47:35 - Part 4: Save data between app pages
51:39 - Closing remarks
************************************************************************
? If you appreciate these tutorials and can support their existence while getting some perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
...
https://www.youtube.com/watch?v=RMBSQ6leonU
Review to the app's layout to understand everything displayed on the page. In this tutorial series we'll create the front end interface in Python using Dash. We will use a pre-built smart contract, written in solidity, to create and deploy a decentralized application on top of it. There will be a little bit of javascript used for inserting data into the blockchain, but most of the app will be in Python.
dApp in Python code:
https://github.com/charmingdata/dApp-animal-shelter-python/tree/main
Smart Contract:
https://github.com/charmingdata/all-smart-contracts/blob/main/ShelterDB.sol
Polygon zkEVM testnet:
https://testnet-zkevm.polygonscan.com/address/0x1245dBd38a1FF2371436245A9D7eF7AE4A9a1A26
DBC Alert component:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/
DBC Radio Buttons component:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/input/
DMC Loading-spinner component:
https://www.dash-mantine-components.com/components/loadingoverlay
Video layout:
00:00 - What you will learn
00:31 - Contrainer and Titles
01:18 - Alert Component
03:18 - First Row & Col components
04:31 - Input Field Component
06:05 - Radio Buttons
07:46 - Submit Button
09:25 - Second Row
11:02 - Get Shelter Information
*****************************************************************************************
Join my channel to support its existence and access perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ
GitHub tutorials code:
https://github.com/charmingdata?tab=repositories&q=&type=&language=&sort=name
Connect with me on LinkedIn:
https://www.linkedin.com/in/charmingdata/
...
https://www.youtube.com/watch?v=c67dq7ADWHw
Closing out 2020. Thank you for 2020 and for having acompanied with me on this journey. Gracias a todos por haberme acompañado sobre este lindo camino de programación en Youtube.
...
https://www.youtube.com/watch?v=18RAGGMu9Vk
Learn how to put your Dash Plotly app onto Google Colab and Kaggle, using Jupyter Dash. This will allow you to share your app with others via a shared public or private link.
GitHub Repository:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Deploy_App_to_Web/Kaggle-GGL-Collab
Shared Google Colab link:
https://colab.research.google.com/drive/1_IhLerSP2sC_2pMhj3HpriU7lJatC1Kj?usp=sharing
Shared Kaggle link:
https://www.kaggle.com/adamschroeder/notebookf2b6c91056
What is Ngrok:
https://www.pubnub.com/learn/glossary/what-is-ngrok/
Video layout:
00:00 - What you will learn
01:01 - GitHub code for you
01:39 - Google Colab with Dash App
06:37 - Kaggle with Dash App
09:59 - Upload code to Kaggle
15:06 - Kaggle Dash App Caveat
******************************************************************************
? If you appreciate these tutorials and would like to support my work and get some perks:
Patreon: https://www.patreon.com/charmingdata
YouTube: https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
******************************************************************************
...
https://www.youtube.com/watch?v=FxEY1NOyhYQ
All you need to know to build and deploy your first dApp on the Ethereum blockchain.
Live Smart Contract:
https://dapp-simple-storage-two.vercel.app/
SimpleStorage Smart Contract:
https://raw.githubusercontent.com/charmingdata/dApp-simple-storage/main/backend/contracts/SimpleStorage.sol
Remix:
https://remix.ethereum.org/
Video layout:
00:00 - What we'll build together
00:26 - Interact with application
02:50 - Smart contract intro
05:00 - Remix: compile and deploy contract
05:49 - getSentence function
06:38 - setSentence function
07:24 - Your next Video
*****************************************************************************************
Join my channel to support its existence and access perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
GitHub tutorials code:
https://github.com/charmingdata?tab=repositories&q=&type=&language=&sort=name
Connect with me on LinkedIn:
https://www.linkedin.com/in/charmingdata/
...
https://www.youtube.com/watch?v=U4GursnbBGY
Learn to style your Dash app, using Dash Bootstrap and CSS. We will explore different Bootstrap themes and components to shape the design and layout of our interactive web app.
Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Bootstrap/bootstrap_intro.py
Data:
https://drive.google.com/file/d/1iugeiq5WUDB4cue5tJbex8q_HXLRXcNE/view?usp=sharing
Dash Bootstrap Components:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/
Dash Bootstrap Themes:
https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/
Supportive Docs:
https://drive.google.com/file/d/1Mmbw915FOL_oZ08b1ayEpHDHFnmnx8SM/view?usp=sharing
Video Layout:
00:00 - What you will learn
01:25 - Python libraries required
02:06 - Bootstrap theme
04:14 - Cyborg theme
05:41 - Local themes
08:54 - Row/Column rule
10:41 - Page Layout and basic Width
13:15 - Width as dictionary {size, offset, order}
16:00 - Offset
18:38 - Order
20:09 - Layout by screen size
************************************************************************
? If you appreciate these tutorials and would like to support their existence and get some perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
...
https://www.youtube.com/watch?v=vqVwpL4bGKY
Together, we will deploy your Dash Flask App to the web, using PythonAnywhere. Along the way, you will learn to create a project-app in PyCharm, build a local Git repository, push to GitHub, and clone the repository to PythonAnywhere. As a bonus, we'll search for bugs and add a username and password to the app, so you can share it privately with others.
Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Deploy_App_to_Web/PythonAnyWhere
Supporting documentation:
https://drive.google.com/file/d/1HtJcu3ZWsDYEIv8srod16z4jD4HEeHuH/view?usp=sharing
PythonAnyWhere Forum:
https://www.pythonanywhere.com/forums/
Video layout:
00:00 - What you will learn & download files
01:56 - Create a PyCharm Project
06:54 - Freeze libraries for later
07:44 - Create local Git repository
10:00 - Push your repository to GitHub
12:25 - Clone GitHub repository to PythonAnyWhere
14:49 - Build a PythonAnyWhere Virtual Environment
19:20 - Final PythonAnyWhere configurations
22:30 - Debugging
24:33 - Bonus: Secure HTTPS & username-password
************************************************************************
? If you appreciate these tutorials and would like to support their existence and get some perks: https://www.patreon.com/charmingdata
...
https://www.youtube.com/watch?v=WOWVat5BgM4
Discover the power behind Dash Ag Grid, and learn to connect it to a Plotly histogram and a scatter plot.
My GitHub Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Ag-Grid
Dash Ag Grid Docs:
https://dashaggrid.pythonanywhere.com/getting-started/quickstart
Plotly Community Forum:
https://community.plotly.com/
Checkout my book - The Book of Dash:
https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly/dp/1718502222
https://github.com/DashBookProject/Plotly-Dash
Video layout:
00:00 - Introduction and code
01:50 - App 1 - virtualRowData
09:46 - App 2 - cellClicked
15:18 - Final remarks
************************************************************************
? Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: https://www.patreon.com/charmingdata
GitHub: https://github.com/sponsors/Coding-with-Adam
YouTube: https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
...
https://www.youtube.com/watch?v=LSLNt6PFgIM
Learn to add custom components to your Dash Ag Grid table. Components like buttons, graphs, images and checkboxes are just some of the components that can be added.
The Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Ag-Grid/custom-components
Dash Ag Grid Cell Renderer:
https://dashaggrid.pythonanywhere.com/components/cell-renderer
Plotly Forum:
https://community.plotly.com/
View my book - The Book of Dash:
https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly/dp/1718502222
https://github.com/DashBookProject/Plotly-Dash
************************************************************************
? Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: https://www.patreon.com/charmingdata
GitHub: https://github.com/sponsors/Coding-with-Adam
YouTube: https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
...
https://www.youtube.com/watch?v=ExRFHt5n8SQ