mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Chore/cleanup before open source (#55)
* Chore: Cleanup * Updated some urls to images and removed parts of documentation that is no longer valid * Removal of some documentation that is no longer valid * Removed PDF Export module --------- Co-authored-by: Johan Olsson <johan@noodl.net>
This commit is contained in:
kotte
GitHub
@@ -159,4 +159,4 @@ In the same way we can easily ask follow-up questions:
|
||||
|
||||
## Age of exploration
|
||||
|
||||
While a lot is known about ChatGPT, there are still a lot of dark spots on the AI-map. New strategies, primers, tips and tricks are invented and uncovered every day. If you have found something that we havent touched upon here and feel like sharing it, please hop on in to the #chat-gpt channel on our [Discord server](https://discord.com/invite/23xU2hYrSJ). Exploration is more fun together, and we all stand on the shoulders of each other in this exciting new step within technology.
|
||||
While a lot is known about ChatGPT, there are still a lot of dark spots on the AI-map. New strategies, primers, tips and tricks are invented and uncovered every day. If you have found something that we havent touched upon here and feel like sharing it, please hop on in to the #chat-gpt channel on the [Discord server](https://discord.com/invite/23xU2hYrSJ). Exploration is more fun together, and we all stand on the shoulders of each other in this exciting new step within technology.
|
||||
|
||||
@@ -4,4 +4,4 @@ hide_title: true
|
||||
|
||||
# AI Assisted Development
|
||||
|
||||
Noodl is a low code web app builder that will have you creating applications faster and smarter. Even though Noodl is technically a low code tool you can reduce the majority of coding using ChatGPT, making it much more accessible to no coders. Here we collect guides that target the different parts of Noodl where code is required and show you how to use ChatGPT to fill in the blanks. We are comitted to making Noodl accessible to no-coders without reducing the power and capabilities.
|
||||
Noodl is a low code web app builder that will have you creating applications faster and smarter. Even though Noodl is technically a low code tool you can reduce the majority of coding using ChatGPT, making it much more accessible to no coders. Here is a collection of guides that target the different parts of Noodl where code is required and shows you how to use ChatGPT to fill in the blanks.
|
||||
@@ -13,13 +13,13 @@ Here you will learn about a few fundamental concepts in Noodl that are important
|
||||
|
||||
## Nodes
|
||||
|
||||
The main building blocks of Noodl are nodes. Every node has its own specific purpose and is very simple in itself, but together they become really powerful. There are a number of types of nodes, indicated by its color. **Blue** nodes are visual elements, such as buttons, or not immediately visible but related, such as groups. **Green** nodes are generally related to reading, writing and manipulating data. **Grey** nodes are utilities, and **Pink** nodes are related to business logic and Javascript.
|
||||
The main building blocks of Noodl are nodes. Every node has its own specific purpose and is very simple in itself, but together they become really powerful. There are a number of types of nodes, indicated by its color. **Blue** nodes are visual elements, such as buttons, or not immediately visible but related, such as groups. **Green** nodes are generally related to reading, writing and manipulating data. **Grey** nodes are utilities, and **Pink** nodes are related to custom code.
|
||||
|
||||
|
||||
|
||||
### Inputs and outputs
|
||||
|
||||
All nodes have inputs and outputs. Connecting two nodes is as easy as clicking one node, dragging the connection to another node and selecting what output should be connected to what input. You can visually see the data flow in the Node Editor, and clicking a connection allows you to see what data is being passed.
|
||||
All nodes have inputs and outputs. Connecting two nodes is as easy as clicking one node, dragging the connection to another node and selecting what output should be connected to what input. You can visually see the data flow in the Node Graph, and clicking a connection allows you to see what data is being passed.
|
||||
|
||||
|
||||
|
||||
@@ -29,9 +29,9 @@ Most properties in Noodl can be connected, that's what makes it so powerful and
|
||||
|
||||
Noodl has two different connection types, <span className="ndl-data">Data</span> and <span className="ndl-signal">Signals</span>.
|
||||
|
||||
- <span className="ndl-data">Data</span>: This connects an output value from one node, such as the content of a Text Input or a Variable, to an input of another node. This is typically used to present data in your user interface. When data is passed over a connection you will see it light up in the node graph editor.
|
||||
- <span className="ndl-data">Data</span>: This connects an output value from one node, such as the content of a Text Input or a Variable, to an input of another node. This is typically used to present data in your user interface. When data is passed over a connection you will see it light up in the Node Graph.
|
||||
|
||||
- <span className="ndl-signal">Signal</span>: Whenever we want our app to perform some kind of action we use a Signal connection. This connects a signal output, a node can have several signal outputs that each will trigger on a specific event, e.g. Click on a button, to a signal input on another node. The receiving node will typically be some kind of action that is peformed when the signal is received. When a signal is triggered you will see it light up in the node grap editor.
|
||||
- <span className="ndl-signal">Signal</span>: Whenever we want our app to perform some kind of action we use a Signal connection. A node can have several signal outputs that each will trigger on a specific event, e.g. Click on a button, to a signal input on another node. The receiving node will typically be some kind of action that is peformed when the signal is received. When a signal is triggered you will see it light up in the Node Graph.
|
||||
|
||||
### Type conversion
|
||||
|
||||
@@ -39,21 +39,21 @@ You can not connect <span className="ndl-data">Data</span> and <span className="
|
||||
|
||||
## Components
|
||||
|
||||
A clusters of nodes and connections, "node graph", and make up a component. These components can then be combined in new node graphs and be part of even larger components. For a larger app, you typically create many different components to keep your application organised. These components can have their own inputs and outputs, just like the built in nodes. This is a great way of reusing UI or logic across your application.
|
||||
You can group your clusters of nodes and connections into components. These components can then be combined in new node graphs and be part of even larger components. For a larger app, you typically create many different components to keep your application organised. These components can have their own inputs and outputs, just like the built in nodes. This is a great way of reusing UI or logic across your application.
|
||||
|
||||
Component is also a great way to abstract and encapsulate complex functionality. You can decide what properties a component has and that are exposed the outer world, sort of like an API.
|
||||
Components are also a great way to abstract and encapsulate complex functionality. You can decide what properties a component has and that are exposed the outer world, sort of like an API.
|
||||
|
||||
### Component types
|
||||
|
||||
There are four types of components: Page, Visual, Logic and Cloud Function.
|
||||
|
||||
- `Page`: Page components are your app’s screens and can be navigated to using Page Router nodes.
|
||||
- `Page`: Page components are your app’s screens and can be navigated to using Page Router nodes.
|
||||
|
||||
- `Visual`: Visual components are made to group and render your UI elements on the screen. They can contain logic, but the main output is always something visible.
|
||||
- `Visual`: Visual components are made to group and render your UI elements on the screen. They can contain logic, but the main output is always something visible.
|
||||
|
||||
- `Logic`: Logic components are the brains of your app. They are used to group nodes that don’t render anything on screen. It can be as simple as a couple of nodes that do data transformation to something more complex, like routing signals to different outputs based on passed values.
|
||||
- `Logic`: Logic components are the brains of your app. They are used to group nodes that don’t render anything on the screen. It can be as simple as a couple of nodes that do data transformation to something more complex, like routing signals to different outputs based on passed values.
|
||||
|
||||
- `Cloud Function`: A cloud function component is a logic component that run in the cloud. It can do tasks that cannot be done on the frontend and may contain other logic components.
|
||||
- `Cloud Function`: A cloud function component is a logic component that run in the cloud, and work with data. It can do tasks that cannot be done on the frontend and may contain other logic components.
|
||||
|
||||
### Update everywhere
|
||||
|
||||
|
||||
@@ -15,31 +15,23 @@ Noodl AI presents a unique way of leveraging the power of Large Language Models
|
||||
|
||||
Easily create JavaScript logic, handle API calls, interact with databases, and generate UI elements. Our goal is to make the development process more inclusive and accessible for a bigger range of skill sets. Whether you're an experienced developer or a beginner, Noodl AI is here to support you throughout your app development journey.
|
||||
|
||||
> In the ever-evolving field of generative AI, Noodl AI keeps pace with the latest developments as well as the valuable feedback from the Noodl community. Please don’t hesitate to reach out with your thoughts on our [Discord](https://discord.com/invite/23xU2hYrSJ) or [Twitter](https://twitter.com/getnoodl).
|
||||
|
||||
## Noodl AI access
|
||||
|
||||
All Noodl users have access to the beta version of Noodl AI, which includes generative features powered by OpenAIs GPT. However, as these models come with associated costs, we have divided the Noodl AI beta into two modes:
|
||||
Noodl AI is built on top of OpenAIs GPT models, and requires you to input an OpenAI API key. It currently supports two modes:
|
||||
|
||||
**Limited Beta** is free for all users and is based on GPT-3.5. As this model is not as advanced as GPT-4, this mode only supports very limited AI features.
|
||||
- **GPT-3.5**: As this model is not as advanced as GPT-4, this mode only supports very limited AI features.
|
||||
|
||||
**Full Beta** is based on GPT-4 and requires you to input a GPT-4 API key from OpenAI. This AI mode includes all generative features, and provides significantly better results.
|
||||
- **GPT-4**: This AI mode includes all generative features, and provides significantly better results.
|
||||
|
||||
:::note
|
||||
Please note that the performance of the same AI command varies between the two modes due to the different capabilities of the GPT versions. For the best results, we recommend using the Full Beta mode, as it gives you a better output.
|
||||
Please note that the performance of the same AI command varies between the two modes due to the different capabilities of the GPT versions. For the best results, we recommend using the GPT-4 mode, as it gives you a better output.
|
||||
:::
|
||||
|
||||
### LLM agnostic
|
||||
|
||||
To streamline the beta phase, the public version of Noodl AI is limited to GPT-3.5/4. However, Noodl is built to leverage custom LLM endpoints, and even different models for compliance, regulations, performance, or price concerns.
|
||||
|
||||
> We are currently looking for teams willing to test custom solutions. Please contact us of you are interested in using another LLM, custom endpoint, or your own knowledge base.
|
||||
|
||||
## Setup Instructions
|
||||
|
||||
Any version of the editor that is version 2.9 or higher comes with the generative features enabled. You can see your current version during login, or in the top right corner of the editor. If your editor has not automatically updated to the latest version, visit the [Noodl Console](https://console.noodl.net) to download it manually.
|
||||
Any version of the editor that is version 2.9 or higher comes with the generative features enabled. You can see your current version during login, or in the top right corner of the editor.
|
||||
|
||||
When opening a project you should see the AI bar in the top left corner of the node canvas. In the Editor Settings (in the Sidepanel) you can find options for changing the beta mode, or disabling all AI features.
|
||||
When opening a project you should see the AI bar in the top left corner of the node canvas. In the Editor Settings (in the Sidepanel) you can find options for changing the AI model, or disabling all AI features.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
@@ -47,16 +39,6 @@ When opening a project you should see the AI bar in the top left corner of the n
|
||||
|
||||
</div>
|
||||
|
||||
### Limited Beta
|
||||
|
||||
The Limited Beta mode is activated by default and is free to use for everyone. It is built on top of OpenAIs GPT-3.5 model. Due to the limitations of GPT-3.5 we only support the `/Function` command in this mode.
|
||||
|
||||
### Full Beta
|
||||
|
||||
The Full Beta mode requires an GPT-4 API key from OpenAI. If you don’t have a GPT-4 API key you can request one from OpenAI (but there might be a waiting list). Noodl will not charge you for using the Full Beta, but Open AI will bill you their regular amount based on your API usage.
|
||||
|
||||
To activate the Full Beta, open the Editor Settings, find the **Noodl AI (Beta)** settings, and change the mode to `Full beta (gpt-4)`. Enter the API key and click **Verify** to activate.
|
||||
|
||||
## AI commands
|
||||
|
||||
When using Noodl AI, start by choosing the type of command you want to work with. This helps the AI generate the best possible result. Behind the scenes, the command sets up the AI with the relevant context and project information, allowing it to perform its task effectively.
|
||||
@@ -149,7 +131,7 @@ Here are some examples of prompting the `/Write to database` command:
|
||||
</div>
|
||||
|
||||
:::note
|
||||
This is an experimental command and is still both limited and unpolished. Please reach out to us if you have any thoughts on future developments.
|
||||
This is an experimental command and is still both limited and unpolished.
|
||||
:::
|
||||
|
||||
The `/UI` command is used to generate visual nodes from a text prompt. Currently it supports the Group, Columns, Button, Text Input, Checkbox, Image and Dropdown nodes, with some limited styling. It can also generate components from your design system, if they are AI annotated.
|
||||
@@ -178,8 +160,6 @@ The `/UI` command will now consider your component when generating prompted layo
|
||||
|
||||
This method allows you fine grained control over your design system, while still leveraging the capabilities of LLMs for the bigger picture, giving you useful (and reusable) results in a real world setting.
|
||||
|
||||
> We are currently looking for teams willing to test AI annotations on their design systems. Please contact us of you are interested in UI generation with your medium/large component library.
|
||||
|
||||
### `/Image`
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
@@ -189,16 +169,10 @@ This method allows you fine grained control over your design system, while still
|
||||
</div>
|
||||
|
||||
:::note
|
||||
This is an experimental command and is still both limited and unpolished. Please reach out to us if you have any thoughts on future developments.
|
||||
This is an experimental command and is still both limited and unpolished.
|
||||
:::
|
||||
|
||||
The `/Image` command creates a single Image node and populates it with a Dall-E generated image. The images are saved in the project folder.
|
||||
|
||||
> All your prompts will be sent to OpenAI. This includes any AI annotations in your components, as well as your data models (but not any of the data in your database). However, this will not be used to train OpenAIs models.<br/><br/>
|
||||
> You can read more about OpenAIs data usage policy [here](https://openai.com/policies/api-data-usage-policies).
|
||||
|
||||
## Make your voice heard!
|
||||
|
||||
We strongly believe that our community is one of our greatest assets, and we value all the input and feedback that we get, as it helps us shape and steer our development efforts. That's why we have opened up our beta to invite the community to actively participate in the journey. We encourage you to share your thoughts, ideas, and suggestions with us on [Discord](https://discord.com/invite/23xU2hYrSJ) or [Twitter](https://twitter.com/getnoodl).
|
||||
|
||||
Thank you for trying out the new features, and happy noodling!
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import { LinkButtonGrid } from '../../src/blocks/LinkButtonGrid.tsx'
|
||||
import { LinkButtonGrid } from '../../src/blocks/LinkButtonGrid.tsx';
|
||||
|
||||
# How Noodl works
|
||||
|
||||
@@ -10,15 +10,15 @@ Noodl has two fundamental parts:
|
||||
|
||||
1. **A visual builder for modern web application frontends.** You compose frontends from a library of UI Controls that are highly customizable, down to fine grained animations and transitions. A versatile navigation system that supports both simple and more complex nested navigation and popups. Re-usable components to support dynamic, reactive interfaces. And you build logic either visually or with simple Javascript functions.
|
||||
|
||||
2. **Integrated cloud services.** A solid easy to learn database where you manage classes and records. You can of course also query data and create record relations. The cloud database also includes user management (sign up, log in/out) and Access Control. You can create cloud functions, just like building logic on the client, that run in the cloud for background jobs, compound queries, security etc. Noodl can host the cloud services for you or you can host it on your own. It is based on a popular open source project ([Parse](http://parseplatform.org)).
|
||||
2. **Integrated cloud services.** A solid easy to learn database where you manage classes and records. You can of course also query data and create record relations. The cloud database also includes user management (sign up, log in/out) and Access Control. You can create cloud functions, just like building logic on the client, that run in the cloud for background jobs, compound queries, security etc. It is based on a popular open source project ([Parse](http://parseplatform.org)), and is fully open source and self-hostable.
|
||||
|
||||
## Getting started
|
||||
|
||||
Getting started with Noodl is easy. There are interactive lessons built into the tool that are a great starting point. In the documentation we recommend the following articles to get started.
|
||||
|
||||
- First we recommend reviewing the [Workflow overview](workflow) page and then the [Fundamentals](fundamentals) page to get some more meat the bones in terms of what Noodl can do for you.
|
||||
- First we recommend reviewing the [Workflow overview](workflow) page and then the [Fundamentals](fundamentals) page to get some more meat the bones in terms of what Noodl can do for you.
|
||||
|
||||
- Then dive into the [Guides](/docs/learn) section and start digging into the wonderful world on Noodl.
|
||||
- Then dive into the [Guides](/docs/learn) section and start digging into the wonderful world on Noodl.
|
||||
|
||||
Also don't forget to check out our [Community channels](https://www.noodl.net/community) - great ways to learn and make new friends!
|
||||
|
||||
|
||||
@@ -9,15 +9,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
Let's take a look at the different concepts of the Noodl workflow when building your applications, namely
|
||||
|
||||
* Building User Interfaces
|
||||
* Page Navigation & Components
|
||||
* Actions
|
||||
* Working with Data
|
||||
* The Cloud Database
|
||||
* Business Logic
|
||||
* Cloud Functions
|
||||
* Collaboration
|
||||
* Modules and Prefabs
|
||||
- Building User Interfaces
|
||||
- Page Navigation & Components
|
||||
- Actions
|
||||
- Working with Data
|
||||
- The Cloud Database
|
||||
- Business Logic
|
||||
- Cloud Functions
|
||||
- Collaboration
|
||||
- Modules and Prefabs
|
||||
|
||||
## Building user interfaces
|
||||
|
||||
@@ -31,35 +31,33 @@ Any app needs a great **User Interface**. In Noodl it's easy and fast to build d
|
||||
|
||||
Each UI control has properties that can be used for fine-grained customization. Here is a short overview of concepts important for building user interfaces:
|
||||
|
||||
- **Visual States** Each UI control has a set of visual states, such as Hover, Pressed, etc., and the control properties can be set for each state individually. Learn more [here](/docs/guides/user-interfaces/visual-states).
|
||||
- **Visual States** Each UI control has a set of visual states, such as Hover, Pressed, etc., and the control properties can be set for each state individually. Learn more [here](/docs/guides/user-interfaces/visual-states).
|
||||
|
||||
- **Transitions** You can control transition animations between each visual state using the animation editor.
|
||||
- **Transitions** You can control transition animations between each visual state using the animation editor.
|
||||
|
||||
- **Variants** Define reusable variants for your UI controls, including properties, visual states, and transitions. Build your own design systems to enhance productivity. Learn more [here](/docs/guides/user-interfaces/style-variants)
|
||||
- **Variants** Define reusable variants for your UI controls, including properties, visual states, and transitions. Build your own design systems to enhance productivity. Learn more [here](/docs/guides/user-interfaces/style-variants)
|
||||
|
||||
## Page Navigation & Components
|
||||
|
||||
When you start building more complete frontends, you will be working with **components**. A component can be an entire page in your application; these are called **Page Components**, or they can be a smaller part of your UI that you want to reuse in many places; these are called **Visual Components**. Pages can be found in the top navigation bar, and visual components are found in the component panel in the sidebar. You can also use the preview in design mode to quickly locate a specific visual element in your app.
|
||||
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/nav-1.mp4")}/>
|
||||
</div>
|
||||
|
||||
It's simple to create page navigation but the system is also flexible enough to build more complex navigation flows, such as nested navigation. Noodl supports state of the art web app navigation, with permalinks and encoding of data in URLs. Here is a short overview of concepts important for building pages and navigation:
|
||||
|
||||
- The **Page**, **Page Router** and **Navigate** nodes are the essence of the navigation system. Learn how to build basic page navigation in this [guide](/docs/guides/navigation/basic-navigation) and more advanced multi level navigation [here](/docs/guides/navigation/multi-level-navigation).
|
||||
- The **Page**, **Page Router** and **Navigate** nodes are the essence of the navigation system. Learn how to build basic page navigation in this [guide](/docs/guides/navigation/basic-navigation) and more advanced multi level navigation [here](/docs/guides/navigation/multi-level-navigation).
|
||||
|
||||
- Another feature of the navigation is **Popups**, these can be used to show or collect transient information. Learn more about popups [here](/docs/guides/navigation/popups)
|
||||
- Another feature of the navigation is **Popups**, these can be used to show or collect transient information. Learn more about popups [here](/docs/guides/navigation/popups)
|
||||
|
||||
## Actions
|
||||
|
||||
An important concept in Noodl, as briefly shown above, is **action nodes**. These nodes perform some sort of action when triggered by a signal, for example, from a UI control (such as a button click) or from another action node (such as when an action has completed successfully or failed). Noodl contains a wide variety of action nodes for most common basic tasks, including **Navigation** and **Reading and Writing Data**.
|
||||
|
||||
|
||||
|
||||
|
||||
Connections between nodes is a core concept in Noodl, this is how you connect your user interface to data and actions.
|
||||
Connections between nodes is a core concept in Noodl, this is how you connect your user interface to data and actions.
|
||||
|
||||
## Working with data
|
||||
|
||||
@@ -101,7 +99,7 @@ The Noodl cloud services will provide your applications with several important f
|
||||
|
||||
- **Reading and Writing Data**: You can create **classes** to store **records**, which can then be read, filtered, and presented in your application. Dive in [here](/docs/guides/cloud-data/overview) to start learning about cloud services.
|
||||
|
||||
- **User Management**. Most applications need users, you can sign up users, log in, manage passwords etc.
|
||||
- **User Management**. Most applications need users, you can sign up users, log in, manage passwords etc.
|
||||
|
||||
- **Access Control**: When you have users and data, you need to control which users can access what data. This can be done through **roles** in your cloud services. Learn more [here](/docs/guides/cloud-data/access-control).
|
||||
|
||||
@@ -109,7 +107,7 @@ The Noodl cloud services will provide your applications with several important f
|
||||
|
||||
## Cloud Functions
|
||||
|
||||
Using the same techniques to build logic as described above you can build logic that runs in the cloud, this is called a **Cloud Function**.
|
||||
Using the same techniques to build logic as described above you can build logic that runs in the cloud, this is called a **Cloud Function**.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/cloud-2.mp4")}/>
|
||||
@@ -125,7 +123,7 @@ This is very useful for many different functions such as:
|
||||
|
||||
## Collaboration
|
||||
|
||||
Finally, as your application grows, you'll want to collaborate with colleagues and friends. Thankfully, Noodl offers a robust collaboration system with built-in version control. You can collaborate on a project, work on your individual branches, and merge changes. We aim to incorporate powerful concepts from the software development world into Noodl to ensure you never encounter any limitations.
|
||||
Finally, as your application grows, you'll want to collaborate with colleagues and friends. Thankfully, Noodl is compatible with version control through Git and will give you a built in Version Control panel after the Project Folder has been pushed to a repo at your preferred Git provider. You can collaborate on a project, work on your individual branches, and merge changes. We aim to incorporate powerful concepts from the software development world into Noodl to ensure you never encounter any limitations.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
@@ -153,4 +151,4 @@ An important concept in Noodl that will take your productivity to the next level
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Any components that you build can also be turned into prefabs, and submitted to the Noodl Docs repo for the whole community to use. Read more about it [here](/library/prefab-contributions).
|
||||
|
||||
Reference in New Issue
Block a user