From 2c683a0dcdbd85d63941c1dfcfbdbc7cdf18a4a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E5=AD=90?= Date: Mon, 12 Dec 2022 16:28:32 +0800 Subject: [PATCH] Update Readme (#76) --- README.md | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 78a8b7197..deb16959f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,8 @@
-

- Pynecone - Pynecone + Pynecone Logo + Pynecone Logo

**Build performant, customizable web apps in minutes just using Python.** @@ -17,7 +16,7 @@ ## Getting Started -Pynecone is a full-stack Python framework that makes it easy to build and deploy web apps in minutes. All the information for getting started can be found in this README. However, a more detailed explanation of the following topics can be found on our website: +Pynecone is a full-stack Python framework that makes it easy to build and deploy web apps in minutes. All the information for getting started can be found in this README. However, a more detailed explanation of the following topics can be found on our website:
@@ -28,15 +27,17 @@ Pynecone is a full-stack Python framework that makes it easy to build and deploy ## Installation Pynecone requires to following to get started: * Python 3.7+ -* [NodeJS 12.22.0+](https://nodejs.org/en/) +* [Node.js 12.22.0+](https://nodejs.org/en/) (Don't worry, you'll never have to write any Javascript) ``` $ pip install pynecone-io ``` -## Create your first Pynecone app +*NOTE:* Make sure you install the correct package: `pynecone-io`, not `pynecone`. -Installing Pynecone also installs the pc command line tool. Test that the install was successful by creating a new project. +## Create your first Pynecone App + +Installing Pynecone also installs the `pc` command line tool. Test that the install was successful by creating a new project. Replace my_app_name with your project name: @@ -46,13 +47,15 @@ $ cd my_app_name $ pc init ``` -This initializes a template app in your new directory. +When you run this command for the first time, we will download and install `bun` automatically. + +This command initializes a template app in your new directory. You can run this app in development mode: ``` $ pc run ``` -You should see your app running at http://localhost:3000. (Note that the port may be different if you have another app running on port 3000) +You should see your app running at http://localhost:3000. (Note that the port may be different if you have another app running on port 3000, please notice the terminal output) Now you can modify the source code in `my_app_name/my_app_name.py`. Pynecone has fast refreshes so you can see your changes instantly when you save your code. @@ -133,7 +136,8 @@ app.compile() ``` Let's break this down. - ### **UI In Pynecone** +### **UI In Pynecone** + Lets start by talking about the UI this Pynecone App. ```python @@ -143,11 +147,11 @@ def index(): ) ``` This index function defines the frontend of the app. We use different components such as `center`, `vstack`, `input`, and `button` to build the front end. Components can be nested to create complex layouts and styled using CSS's full power. Just pass them in as keyword args. - + Pynecone comes with [50+ built-in components](https://pynecone.io/docs/library) to help you get started. We are actively adding more components, plus it's easy to create your own components. ### **State** - + ``` python class State(pc.State): """The app state.""" @@ -158,8 +162,9 @@ class State(pc.State): ``` The state defines all the variables (called vars) in an app that can change and the functions that change them. Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `image_processing` and `image_made` to indicate when to show the circular progress and image. - + ### **Event Handlers** + ```python def process_image(self): """Set the image processing flag to true and indicate image is not made yet.""" @@ -178,7 +183,7 @@ Within the state, we define functions called event handlers that change the stat Our dalle app has two event handlers, `process_image` to indicate that the image is being generated and `get_image`, which calls the OpenAI API. ### **Routing** - + Finally we define our app and tell it what state to use. ```python app = pc.App(state=State) @@ -191,6 +196,7 @@ app.compile() You can create a multi-page app by adding more routes. ## Status + As of December 2022, Pynecone has just been released publicly and is in the **Alpha Stage**. - :large_orange_diamond: **Public Alpha**: Anyone can install and use Pynecone. There may be issues, but we are working to resolve them activly. @@ -212,10 +218,12 @@ Want to join our Pynecone team or learn more about our framework? Send us an ema We are actively looking for contributors, no matter your skill level or experience. ## More Information + More information about Pynecone can be found on our website: - [Pynecone.io](https://pynecone.io) - + ## License + Pynecone is open-source and licensed under the [Apache License 2.0](LICENSE). ## Contributors