mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
162
docs/getting-started/ai-assisted-dev/chat-gpt.md
Normal file
162
docs/getting-started/ai-assisted-dev/chat-gpt.md
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Develop with ChatGPT
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Develop with ChatGPT
|
||||
|
||||
ChatGPT is a great tool that is used daily to generate code by developers all over the world. However (being a language model and not a programming engine) it does come with its own set of quirks and limitations. In this guide we will look at tips, tricks and strategies for how to get around them, and see why ChatGPT is a great pairing with Noodl.
|
||||
|
||||
> This guide is about how to use [http://chat.openai.com](http://chat.openai.com) as part of the development process.<br/><br/>To use OpenAI as part of your application, check out the [OpenAI prefab](/library/prefabs/openai/).
|
||||
|
||||
## When to ChatGPT
|
||||
|
||||
One of the lesser known limitations of ChatGPT is that it works with a tiny token memory. The details are technical, and not too interesting in the context of this guide, so we won't go in on it too much. Really, the only thing you need to know is that ChatGPT has the memory of a goldfish, and will start forgetting things (including its own train of thought) pretty quickly if you feed it too much information.
|
||||
|
||||
This makes ChatGPT bad at handling large scale application code with many different moving parts. Using ChatGPT to code an application from scratch requires you to know how to program an application from scratch so that you can make up for all the mistakes the AI makes.
|
||||
|
||||
Another implication of the tiny memory is that it limits the amount of instructions we can provide. ChatGPT gives the best solutions when you are very descriptive with what you want to achieve, and a full application requires a lot of describing.
|
||||
|
||||
The best way to get good code from ChatGPT is really to break up your application into smaller modular pieces, generating those with AI, and gluing them together yourself.
|
||||
|
||||
This is where Noodl shines. Since one of the base concepts of Noodl is to break your application into smaller reusable components, we dont have to ask ChatGPT to generate a whole app for us. We can just ask it to do the boring, tedious or more complicated functions. This still requires a little bit of programming know-how, but thanks to Noodls seamless combination of visual and text-based programming you don't have to know how to write complex apps at scale and can instead focus on understanding the functionality at hand.
|
||||
|
||||
:::note
|
||||
|
||||
While this guide is generally about ChatGPT you will get a lot more out of it if you already have some experience with Noodl. It might be a good idea to check out the [Fundamentals](/docs/getting-started/fundamentals) guide, or do the interactive tutorials in the Noodl editor first.
|
||||
|
||||
:::
|
||||
|
||||
### TL;DR:
|
||||
|
||||
ChatGPT is great at generating code for Function and Script nodes, helping you connect to API's, work with external libraries, aggregating data or figuring out chunks of your app.
|
||||
|
||||
It's a good idea to modularize your functions into separate Function nodes, or combine multiple Function nodes in series in a component. This allows ChatGPT to shine in a smaller scope while allowing for great reusability within Noodl.
|
||||
|
||||
ChatGPT is also great as a search engine that you can have a conversation with. The ChatGPT model is trained on data up until 2021, so while it's not good for researching current events, it is very powerful with more general development patterns that can easily be translated into Noodl graphs.
|
||||
|
||||
Sidenote: We have been experimenting with generating full Noodl Node graphs, but due to the limited memory it's not too good at memorizing current documentation.
|
||||
|
||||
## Priming for code generation
|
||||
|
||||
If we want to use ChatGPT for code generation we have to be prepared to modify the code it gives us. That is just the current state of the AI. However, we can minimize the need for modifications if we start the chat with some instructions, giving ChatGPT a bit of context so that it understands what a Noodl function looks like, some rules for what it can/can't do and how to create inputs and outputs to the node. This is called a _primer_, and here is one that we have been experimenting with:
|
||||
|
||||
````markdown
|
||||
Hi ChatGPT. Here are your instructions. You must follow all of them.
|
||||
|
||||
- You will be writing Noodl functions.
|
||||
- An input in a Noodl function must follow the format "Inputs.InputName".
|
||||
- An input in a Noodl function is only read, never written to.
|
||||
- An output in a Noodl function must follow the format "Outputs.OutputName = value".
|
||||
- A variable in a Noodl function never stores an output.
|
||||
- Sending a signal from a Noodl function must follow the format "Outputs.SignalName()".
|
||||
- Signals can not be passed values. All output values must be set as a Noodl function output.
|
||||
- Inputs and Outputs in a Noodl function are global.
|
||||
- Noodl functions do not use import statements.
|
||||
- Noodl functions do not use export statements.
|
||||
- Noodl functions can use recources from a CDN.
|
||||
- Noodl functions can access API endpoints with "fetch".
|
||||
- Define constants as Noodl function inputs.
|
||||
- A Noodl function follows this format:
|
||||
|
||||
```js
|
||||
const inputName = Inputs.InputName;
|
||||
|
||||
// Check if the input has a value, otherwise return
|
||||
if (!inputName) return;
|
||||
|
||||
// Perform the function logic
|
||||
```
|
||||
|
||||
Reply "Okidoki" if the instructions are clear, otherwise ask me to clarify
|
||||
````
|
||||
|
||||
This primer has given us great results so far - in many cases the snippets have worked with no modifications at all. Don't shy away from modifying it or trying a different approach though. ChatGPT is a complex technology, and new techniques and strategies are constantly being discovered. If you find something interesting, please don't shy away from sharing it with the community over at our [Discord server](https://discord.com/invite/23xU2hYrSJ).
|
||||
|
||||
## Tips and tricks for prompting code
|
||||
|
||||
### Benefits of a primer
|
||||
|
||||
Using the primer above lets us use very sloppy prompts, while still getting a useful result:
|
||||
|
||||
|
||||
|
||||
Due to the primer, this result can be copied stright into a Function node without any modifications. Here is how it looks in a node graph with all the inputs and outputs:
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
All we needed to provide was an API key. Amazing!
|
||||
|
||||
### Adding detail
|
||||
|
||||
The example above is very simple. The more complex functionality we want, the more specific we need to be. ChatGPT has a lot of imagination, and it's a good idea to leave it as little room for interpretation as possible.
|
||||
|
||||
|
||||
|
||||
This was my third attempt. In the first one I asked it to _prompt the user for their location_. It then gave me a soultion using the `Window.prompt()` method. This opens up a system dialog with a text input where the user can type in the `latitude` and `longitude` themselves. It bears noting that the last time `Window.prompt()` was used in a serious project, the smartphone was still a new and revolutionary invention.
|
||||
|
||||
In the second attempt I asked it to _get the users location_. Then it just assumed that the `latitude` and `longitude` was a part of the `user` object. Not specific enough.
|
||||
|
||||
The third attempt looks perfect, at least at a first glance. The users location is now gotten automatically.
|
||||
|
||||
The location was not the only issue though. If we take a closer look at the code we see that there are some places where ChatGPT didn't follow the prompt. We asked it to send an `Outputs.UserFailed()` if `user.firstName` or `user.lastName` where missing. Instead it sends the `UserFailed` signal if it cant find a user of the right ID. It also sends `MapboxData` and `FullName` separately. It _almost_ does what we told it. Discrepancies like this can happen anywhere in the generated code, so it's always a good idea to look over the code you get.
|
||||
|
||||
These off-prompt moments are not only a bad thing though. As an example, we didn't ask ChatGPT to exit the function using `return` when after sending the `UserFailed` signal, but it was clever enough to assume that we didn't want the function to continue running without a user.
|
||||
|
||||
### Partial rewrites
|
||||
|
||||
If we find that parts of the code doesn't fit us, we can always ask ChatGPT to iterate on it.
|
||||
|
||||
|
||||
|
||||
It now exits the function when it should, and outputs the data properly. There are still unnecessary checks made for `firstName` and `lastName` when building the `fullName`. They will not throw any errors, or mess up the function in any other way, and the performance hit is so small that it can be ignored, but if we want to keep the code clean we can just manually remove those two lines.
|
||||
|
||||
### Iterative prompting
|
||||
|
||||
If we want even more control we can prompt our function in smaller steps. Let's generate a function that does a device generalisation based on the viewport width.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Note that I asked for `widths` but it gave me heights as well! Let's clear that up.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Here I realize that I made two mistakes. First of all, I was hoping for ChatGPT to be a bit clever and assume that I meant to check for a value inside of the desktop range. Instead it tries to match an exact width, which will fail if the browser is resized. The second error was to output a `IsDesktop` boolean. If we check for ranges with the given sizes, there will be a gap between desktop and mobile. Let's make a lazy fix.
|
||||
|
||||
|
||||
|
||||
Now, this is not a perfect function by far. Good thing is that this prompting could go on and on, until we have a function that gives us perfect detection. Just remember the goldfish token memory, and that you might need to reprime the AI after a while.
|
||||
|
||||
## Refreshing ChatGPT's memory
|
||||
|
||||
If you notice that you start getting answers that stray too far off from things you have told ChatGPT earlier, it is a good idea to reprime the memory. This can be easily done by starting a new chat and sending the primer again. After that you can paste in the function you are working with, together with new instructions on how how you want the function to be modified.
|
||||
|
||||
## Research assistant
|
||||
|
||||
Another interesting use apart from generating code is to use it for research. Finding relevant information can be complicated, especially for more abstract concepts. ChatGPT is great for giving you a kickstart:
|
||||
|
||||
|
||||
|
||||
In the same way we can easily ask follow-up questions:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
(This might not be the best example if there are any newer API's than 2021, or if anyone of them updated ther pricing, etc. It works for the most part though!)
|
||||
|
||||
## 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.
|
||||
7
docs/getting-started/ai-assisted-dev/overview.md
Normal file
7
docs/getting-started/ai-assisted-dev/overview.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
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.
|
||||
194
docs/getting-started/ai-assisted-dev/rest.md
Normal file
194
docs/getting-started/ai-assisted-dev/rest.md
Normal file
@@ -0,0 +1,194 @@
|
||||
---
|
||||
title: REST API calls
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Create REST API calls with Chat GPT
|
||||
|
||||
In Noodl you typically use the [REST](/nodes/data/rest) node to make REST API requests to access external services. This requires a little bit of coding to set up the request and to parse the response. It also requires a bit of knowlege to figure out how the API you want to use work and to read the documentaion.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The example above is a non-trival REST API request. It takes the name of a wikipedia page and retrieves the main image of that page in a given size. This would certainly take me a few minutes to figure out how to do and it's quite tedious and non-interesting work. A [REST](/nodes/data/rest) node requires four important parts:
|
||||
|
||||
* **Endpoint** The HTTP endpoint of the REST API.
|
||||
* **Method** The method of the API call, e.g. `POST` or `GET`.
|
||||
* **Request script** This is a piece of javascript code that, given the node inputs, sets up all the parameters and content to be passed to the REST API call.
|
||||
* **Response script** This is another javascript snippet that parses the received response and turns it into node outputs.
|
||||
|
||||
<div class="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Let's see how we can use AI assisted development in Noodl to achieve this.
|
||||
|
||||
## Priming for REST node scripts
|
||||
|
||||
We will be using ChatGPT with GPT-4. The key is getting it to generate all the content we need for the REST node to work from just a single prompt. To do this we need to first provide the AI with the context, this is really the key to get it to work nicely with Noodl. This is called a _primer_, and here is one that we have been experimenting with for [REST](/nodes/data/rest) nodes:
|
||||
|
||||
````markdown
|
||||
Hi ChatGPT. Here are your instructions. You must follow all of them.
|
||||
|
||||
- You will be writing Noodl in javascript functions for Noodl REST API calls.
|
||||
- An input in a Noodl function must follow the format "Inputs.InputName".
|
||||
- An input in a Noodl function is only read, never written to.
|
||||
- An output in a Noodl function must follow the format "Outputs.OutputName = value".
|
||||
- A variable in a Noodl function never stores an output.
|
||||
- Inputs and Outputs in a Noodl function are global.
|
||||
- Noodl functions do not use import statements.
|
||||
- Noodl functions do not use export statements.
|
||||
- Define constants as Noodl function inputs.
|
||||
- You need to create two functions, one to prepare the REST API request and one to process the response.
|
||||
- The function to prepare the request have the following format. It is called the "Request script". You don't need to wrap it in a function, just the javascript code.
|
||||
|
||||
```js
|
||||
// All REST options should be set on the Request object as follows
|
||||
// Put the headers needed for the API call in the headers object
|
||||
// You don't need to set the content-type to application/json this is done automatically
|
||||
Request.headers['authorization'] = "Bearer " + Inputs.APIKey;
|
||||
|
||||
// Put any query parameters needed for the API call in the parameters object
|
||||
Request.parameters['limit'] = Inputs.NumberOfItems;
|
||||
|
||||
// If you are doing a POST method request, but the content in the content object
|
||||
// No need to stringify, only a standard JSON object
|
||||
Request.content = {
|
||||
'param' : 'something'
|
||||
}
|
||||
```
|
||||
|
||||
- The function to parse the result of the REST API request have the following format. It is called the "Response script". You don't need to wrap it in a function, just the javascript code.
|
||||
|
||||
```js
|
||||
// The content of the response is in the Response.content object
|
||||
Outputs.Results = Response.content.results;
|
||||
|
||||
```
|
||||
|
||||
- Finally list the endpoint and the HTTP method in the following format. The endpoint can contain parameters using the {paramName} syntax.
|
||||
|
||||
Endpoint: https://example-endpoint.com/{userId}/fetch
|
||||
Method: POST
|
||||
|
||||
Reply "Okidoki" if the instructions are clear, otherwise ask me to clarify
|
||||
````
|
||||
|
||||
Copy and pasting this primer into ChatGPT GPT-4 and then following up with this prompt:
|
||||
|
||||
```
|
||||
given a wikipedia page name, get the main image of that page
|
||||
```
|
||||
|
||||
The nice little robot now gives us everything we need to prepare the REST node. After a quick description we get the request and response scripts we need:
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can simply copy and paste those into the corresponding properties of the REST node. Next we get the **Endpoint** and **Method** nicely listed for us. We also copy these parameters into REST node properties. It even provides us with a little bit of explaination of how to set up the inputs and how to use the outputs of the node.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
We can now hook up the REST node as shown in the example above and simply put in a Wikipedia page name and provide a size of the image and we get the resulting URL back that we can connect to an image node.
|
||||
|
||||
## Refining your answer
|
||||
|
||||
Sometimes you will get an answer back that may be correct but you don't know exactly what the result is. You can always hook it up in Noodl and just test it, view the outputs and see if the result matches your expectations. Or you can simply ask Chat GPT. In this example I asked it to create a spotify API integration, the prompt was:
|
||||
|
||||
```
|
||||
get the songs of a playlist using the spotify API
|
||||
```
|
||||
|
||||
It provided me with everything I needed to copy and paste into the REST node.
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
But I wasn't sure about what the content of the output was, so I asked:
|
||||
|
||||
```
|
||||
What is the format of an object in the songs output?
|
||||
```
|
||||
|
||||
And it give me a rought outline of the object along with a few examples.
|
||||
|
||||
If you find that the inputs and outputs are not to your liking, or that it did not exactly do what you were asking for simply try providing it more context and ask it to change the code.
|
||||
|
||||
## Providing context
|
||||
|
||||
The ChatGPT models were trained on data up to 2021 so it's clearly missing some more recent APIs, such as actually it's own API. But you can provide context when asking it to generate code for you.
|
||||
|
||||
```
|
||||
using this api https://platform.openai.com/docs/api-reference/chat/create I want to provide messages as an array of string and get the response back
|
||||
```
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
It gives you a nice piece of code, but after copy&pasting it into my REST node and testing it on an exampt, it does not give the expected result. In this case I just get an array of `undefined`, thats weird. Lets see what ChatGPT thinks about that.
|
||||
|
||||
```
|
||||
I just got an array of undefined back
|
||||
```
|
||||
|
||||
It fixes the problem and gives you a new updated function. This works much better. That is pretty astounding!
|
||||
|
||||
<div class="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Sometimes the REST call will fail and generate an HTTP error. If the error is not shown on the REST node you can find the error in the web debugger. If you are on the frontend click on the debug icon at the top bar:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
If you are in a cloud function, open the debugger for the cloud function runtime:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
In the debugger look for the **Network** tab:
|
||||
|
||||
<div class="ndl-image-with-background m">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Any failed calls will generally be highlighted in red, you can find your endpoint and look at the response from the request. See if you can find an error message and let ChatGPT know about the error and try to have it fix it.
|
||||
|
||||
Have fun playing with Noodl and AI assisted development and let us know of your discoveries in the Discord community!
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
17
docs/getting-started/editor-tour.md
Normal file
17
docs/getting-started/editor-tour.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Editor Tour
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# The Complete Editor Tour
|
||||
|
||||
<div style={{padding:'62.5% 0 0 0',position:'relative'}}><iframe width="100%" height="100%" src="https://www.youtube.com/embed/gbEKSQKocHc" style={{position:'absolute',top:0,left:0}} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
:::note
|
||||
|
||||
Please note that this video was recorded for the earlier 2.3 version of Noodl. It features a few minor visual inconsistencies with newer versions, but no big changes for the purposes of this video.
|
||||
|
||||
:::
|
||||
64
docs/getting-started/fundamentals.md
Normal file
64
docs/getting-started/fundamentals.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Fundamentals
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
# Fundamentals
|
||||
|
||||
Here you will learn about a few fundamental concepts in Noodl that are important to get a grasp on before continuing. You can view the video below or review the short guide.
|
||||
|
||||
<div style={{padding:'62.5% 0 0 0',position:'relative'}}><iframe width="100%" height="100%" src="https://www.youtube.com/embed/kD-Oz_M-IS4" style={{position:'absolute',top:0,left:0}} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
||||
|
||||
Most properties in Noodl can be connected, that's what makes it so powerful and easy to be creative with.
|
||||
|
||||
### Connection types
|
||||
|
||||
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-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.
|
||||
|
||||
### Type conversion
|
||||
|
||||
You can not connect <span className="ndl-data">Data</span> and <span className="ndl-signal">Signals</span> directly to one another, but there are nodes that can convert the connection types, for example if you want to trigger a signal whenever a value changes.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
### 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.
|
||||
|
||||
- `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.
|
||||
|
||||
- `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.
|
||||
|
||||
### Update everywhere
|
||||
|
||||
One very practical thing with Components is that they are global, meaning that whenever you update a component's internals, these changes will be updated everywhere this component is used in the app.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/always-live.mp4")}/>
|
||||
</div>
|
||||
204
docs/getting-started/noodl-ai.md
Normal file
204
docs/getting-started/noodl-ai.md
Normal file
@@ -0,0 +1,204 @@
|
||||
---
|
||||
title: Noodl AI
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Noodl AI
|
||||
|
||||
Noodl AI presents a unique way of leveraging the power of Large Language Models (LLM) for app development. It allows you to generate custom building blocks from simple text prompts, simplifying the development process. By playing on, and amplifying, the strengths of current LLM models, Noodl AI goes beyond experiment and novelty, becoming truly valuable in real-world applications.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
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:
|
||||
|
||||
**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.
|
||||
|
||||
**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.
|
||||
|
||||
:::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.
|
||||
:::
|
||||
|
||||
### 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.
|
||||
|
||||
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.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
Noodl AI has the following commands:
|
||||
|
||||
- `/Function`
|
||||
- `/Read from database`
|
||||
- `/Write to database`
|
||||
- `/UI`
|
||||
- `/Image`
|
||||
|
||||
### `/Function`
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The `/Function` command is specialized in generating custom JavaScript functions. This is the most flexible and general purpose command. Noodl AI makes sure the generated code follow Noodl best practices, such as creating Inputs/Outputs on the node, checking the data sent to it, and sending Success and Failure signals. It also names the function, which is not necessary, but a nice touch for automatic self-documentation.
|
||||
|
||||
After the initial prompt, an AI Function node will be created in the currently active node graph. In its Property Panel you can find two tabs: **AI Chat** and **Properties**.
|
||||
|
||||
In the **AI Chat** tab you get an explanation of the generated code. You can also continue prompting the AI to refine your results. The chat history is saved so you can come back to it at any time to pick up where you left off or simply to remember what the function does in more detail.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The **Properties** tab is the same as the Property Panel for a regular Function node. Here you can inspect the generated code, and modify it by hand if you want to. The AI will take your modifications into account in future follow-up prompting.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Here are some examples of prompting the `/Function` command:
|
||||
|
||||
- https://youtu.be/-9bd5AVo9o8
|
||||
- https://youtu.be/8eOEhphQz6k
|
||||
|
||||
:::note
|
||||
Due to GPTs limited token memory the AI can start hallucinating if the code becomes too long. This can lower the generated code quality. Consider splitting your big function into smaller functions that handle one task each. <br/><br/>
|
||||
This also has the benefit of making it easier to prompt, minimizing the risk of the AI misunderstanding your instructions.
|
||||
:::
|
||||
|
||||
### `/Read from database`
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The `/Read from database` command is used to make queries to the connected Noodl database. It’s primed with your database schema, and can therefore create complex queries from simple text prompts. It can also go beyond a regular database query, allowing you to do calculations and process the returned data if needed.
|
||||
|
||||
After the initial prompt, an AI Query node will be created in the currently active node graph. Technically, it’s built on top of the AI Function node created with the `/Function` command, but with different internal rules. From a user perspective it works in the same way though, having identical features in the [**AI Chat** and **Properties** tabs](#function).
|
||||
|
||||
Here are some examples of prompting the `/Read from database` command:
|
||||
|
||||
- https://youtu.be/CxdyIqMq8gE
|
||||
- https://youtu.be/nr4BI_pvoFA
|
||||
|
||||
### `/Write to database`
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The `/Write do database` command is used to create or update data in the connected Noodl database. It is primed with your database schema, and can therefore do complex updates to the database from simple text prompts. It can also go beyond a regular database modification, allowing you to process the data before it is saved if needed.
|
||||
|
||||
After the initial prompt, an AI Query node will be created in the currently active node graph. Technically, it’s built on top of the AI Function node created with the `/Function` command, but with different internal rules. From a user perspective it works in the same way though, having identical features in the [**AI Chat** and **Properties** tabs](#function).
|
||||
|
||||
Here are some examples of prompting the `/Write to database` command:
|
||||
|
||||
- https://youtu.be/nr4BI_pvoFA
|
||||
|
||||
### `/UI`
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
:::
|
||||
|
||||
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.
|
||||
|
||||
After the initial prompt you will see nodes start to generate at the bottom of the visual tree. They are placed in a Group node with the dimension mode set to `Explicit width & content height`.
|
||||
|
||||
#### Annotating your components for AI use
|
||||
|
||||
You can help the `/UI` command generate more useful results by adding AI metadata to your visual components. As the `/UI` command is still in an experimental phase this is done manually with Noodls comment feature. Both the UX and the command performance will change in the future, but we still want to share our current progress to get feedback from the community.
|
||||
|
||||
AI metadata can be added to any visual component by following these steps, if you already have a design system in place, you can skip steps 1 and 2:
|
||||
|
||||
1. Create a visual component and open its node graph. Build and design it the way you see fit for your use case. You could use the `/UI` command for a quick boilerplate to start from.
|
||||
2. Add a Component Inputs node with connections to the properties that should be changeable from outside of the component.
|
||||
3. Open the Node Picker and create a new comment. Start with the text `AI:`.
|
||||
4. Add a description of how the component should be used
|
||||
5. Add a list of attributes to the comment. These represent all the Component Inputs that the AI should know about, and be able to change. Each attribute should exactly match the name of the Component Inputs property, followed by any possible options and values it can have. The AI will only touch properties listed here, and ignore the rest.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The `/UI` command will now consider your component when generating prompted layouts. This works by injecting your annotation into the command primer, so (as with most things GPT) you might find that you need to tweak the description for optimal results.
|
||||
|
||||
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">
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
:::
|
||||
|
||||
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!
|
||||
25
docs/getting-started/overview.mdx
Normal file
25
docs/getting-started/overview.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import { LinkButtonGrid } from '../../src/blocks/LinkButtonGrid.tsx'
|
||||
|
||||
# How Noodl works
|
||||
|
||||
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)).
|
||||
|
||||
## 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.
|
||||
|
||||
- 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!
|
||||
|
||||
Happy Noodling!
|
||||
155
docs/getting-started/workflow.md
Normal file
155
docs/getting-started/workflow.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
title: Workflow overview
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||||
|
||||
# Workflow Overview
|
||||
|
||||
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
|
||||
|
||||
Any app needs a great **User Interface**. In Noodl it's easy and fast to build dynamic, reactive, beautiful user interfaces using the built in UI Controls. These controls are then arranged and layed out appropriately. Noodl contains a library of highly customizable core UI controls. It's also possible to extend Noodl with your own UI Controls, if needed.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/ui-1.mp4")}/>
|
||||
</div>
|
||||
|
||||
### Customizing UI Controls
|
||||
|
||||
Each UI Control have properties that use can be used for fine grained customization. Here is a short overview of concepts important for building user interfaces:
|
||||
|
||||
- **Visual States** Each UI Control have a set of visual states, e.g. 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.
|
||||
|
||||
- **Variants** Define re-usable variants for your UI controls including properties, visual states and transitions. Build your own design systems and become super productive. 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 Component**s, or they can be a smaller part of your UI that you want to re-use in many places, these are called **Visual Component**s. 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 certain 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).
|
||||
|
||||
- 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, that was briefly shown above, is **action nodes**. These nodes perform some sort of action when they are triggered by a signal, e.g. from a UI control (such as a button click) or from another action node (such as when the action has completed successfully or failed). Noodl contains a wide variety of action nodes for most common basic tasks such as **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.
|
||||
|
||||
## Working with data
|
||||
|
||||
When you have built some of your frontend, added pages, components and navigation it is time to connect dynamic data to your user interfaces. This is what makes your application come alive, and in Noodl you have a neat visual way to build modern reactive user interfaces.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/data-1.mp4")}/>
|
||||
</div>
|
||||
|
||||
There are three basic concepts for data in Noodl, the **Variable**, **Object** and **Array** nodes. You can learn more about how to work with these [here](/docs/guides/data/overview).
|
||||
|
||||
A very common pattern in web applications frontends are different types of lists or other dynamic repeating content. Learn how to do that in Noodl [here](/docs/guides/data/list-basics)
|
||||
|
||||
## Business Logic
|
||||
|
||||
As mentioned above you use **action nodes** to perform some sort of business logic action in Noodl. There are a wide variety of action nodes built in for most basic tasks such as navigating between pages, or storing data in the database. Data and signals from your UI controls are connected to your action nodes, and you can connect them together to make flows.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/actions-1.mp4")}/>
|
||||
</div>
|
||||
|
||||
But most applications require some sort of more advanced business logic, for instance processing data from the database or maybe logic to create more advanced UI components. You can build most basic logic with the built in action nodes, but when you require more complex actions it is very easy and fast to add code to your projects.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/edit-code.mp4")}/>
|
||||
</div>
|
||||
|
||||
Not a skilled software developer? Don't worry, the philosofy of Noodl is to focus on the code that matters and remove much of the unncessecary complexities of developing software. If you have basic knowledge of Javascript, you will get very far with Noodl.
|
||||
|
||||
## The cloud services
|
||||
|
||||
Now it's time to take a look at the second part of the Noodl platform, the cloud services. This is an important piece of any web application. You can create and manage cloud databases, or cloud services as they are refered to as, from within your Noodl project.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/cloud-1.mp4")}/>
|
||||
</div>
|
||||
|
||||
The Noodl cloud services will provide your applications with a couple of important functions:
|
||||
|
||||
- **Reading and writing data**. You can create **Class**es where you store **Record**s, these 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.
|
||||
|
||||
- **Access Control**. When you have users and data, you need to control which users can access what data. This can be done trough **Role**s in your cloud servies. Learn more [here](/docs/guides/cloud-data/access-control)
|
||||
|
||||
- **Cloud Functions**. You are not just limited to creating logic on the frontend, you can also create cloud functions that peform tasks that run in the cloud. This is super useful for things like database operations that should have admin access and background jobs.
|
||||
|
||||
## 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**.
|
||||
|
||||
<div className="ndl-video">
|
||||
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/getting-started/basic-concepts/cloud-2.mp4")}/>
|
||||
</div>
|
||||
|
||||
This is very useful for many different functions such as:
|
||||
|
||||
- Access the database in admin mode, do things that should not be possible from the client for security reasons such as resetting passwords and verifying emails.
|
||||
|
||||
- Connection to external services using e.g. OAuth or webhooks need to logic to run in the cloud, here cloud functions can be super helpful.
|
||||
|
||||
- Performing queries is much faster in the cloud, so if you need to make many database queries and compound the result you can achieve high performance by doing this in the cloud.
|
||||
|
||||
|
||||
## Collaboration
|
||||
|
||||
Finally, when your applications is growing you will want to work with your colleagues and friends. Thankfully, Noodl has a solid collaboration system with version control built in. You can work together on a project, you can each work on your own branches and merge. We try to bring really powerful concepts from the software development world into Noodl to make sure that you will never hit a wall.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Learn more about the collaboration and version control capabilities [here](/docs/guides/collaboration/version-control).
|
||||
|
||||
## Modules and Prefabs
|
||||
|
||||
In Noodl you can also import modules developed by others or develop your own modules. You can find a list of current modules provided by Noodl [here](/library/modules/overview). You can also build your own modules and extensions, for example wrapping existing Javascript libraries. You can read more about it [here](/javascript/extending/overview).
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
An important concept in Noodl that will take your productivity to the next step are **prefabs**, these are pre-built components that can be cloned into your project. You can use them as is, or as a starting point to modify and extend. It's also a great way to learn some of the good development patterns in Noodl.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user