durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-10 14:22:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Chore/cleanup before open source (#55)

Browse Source 
* 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
2024-01-15 10:28:53 +01:00
committed by GitHub
parent 656e5fc8d2
commit 05a7b2b290
36 changed files with 144 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/getting-started/ai-assisted-dev/chat-gpt.md
View File

@@ -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.

2
docs/getting-started/ai-assisted-dev/overview.md
View File

@@ -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.

20
docs/getting-started/fundamentals.md
View File

@@ -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.
![](/docs/getting-started/basic-concepts/nodes.png)
### 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.
![](/docs/getting-started/basic-concepts/connecting-nodes.gif)
@@ -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

42
docs/getting-started/noodl-ai.md
View File

@@ -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!

8
docs/getting-started/overview.mdx
View File

@@ -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!

40
docs/getting-started/workflow.md
View File

@@ -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**.
![](/docs/getting-started/basic-concepts/connecting-nodes.gif)
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).

23
docs/guides/cloud-data/creating-a-backend.md
View File

@@ -2,6 +2,7 @@
title: Creating a Cloud Service
hide_title: true
---
# Creating a Cloud Service for your project
<div className="ndl-image-with-background xl">
@@ -18,22 +19,20 @@ This guide will take you through the process of creating a **Cloud Service** for
We will go through the following steps in this guide:
- Creating a Cloud Services
- Selecting a Cloud Services for you project
- Inspect the **Cloud Services Database** using the **Dashboard**
- Create and switch to a new **Cloud Service**
- Creating a Cloud Services
- Selecting a Cloud Services for you project
- Inspect the **Cloud Services Database** using the **Dashboard**
- Create and switch to a new **Cloud Service**
## What is a Cloud Service and when do you need it?
A **Cloud Service** is a piece of software running in the cloud that helps serving your Noodl app with data and cloud functionality. The main reason for using a **Cloud Service** in your project is to use its **Database**. For example the nodes [Record](/nodes/data/cloud-data/record) and [Query Records](/nodes/data/cloud-data/query-records) can only be used if you have a **Cloud Service** active for you project. Also you need them for running [Cloud Functions](/docs/guides/cloud-logic/introduction).
Each **Cloud Service** has a dedicated database which means you might want to have multiple **Cloud Services** available for your project, for example one for your test data and one for your production data. Only one **Cloud Service** can be active for your project at one time, but when you [Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) you can choose which service to use for the deploy.
Each **Cloud Service** has a dedicated database which means you might want to have multiple **Cloud Services** available for your project, for example one for your test data and one for your production data. Only one **Cloud Service** can be active for your project at one time, but when you deploy your project you can choose which service to use for the deploy.
Also note that **Cloud Services** are shared within a workspace, i.e. all projects in a workspace have access to the all **Cloud Services**.
Also note that **Cloud Services** are accessible by all your Noodl projects.
### Noold hosted vs Self Hosted Cloud Services
In Noodl there are two types of **Cloud Services**, **Noodl Hosted (default)** and **Self Hosted**. The **Noodl Hosted** are easiest to use, since Noodl can create those for you in a few clicks. **Self Hosted Cloud Services** are services that you set up and host yourself, check out [this guide](/docs/guides/deploy/using-an-external-backend), In this guide we will focus on **Noodl Hosted Cloud Services**.
### Creating a cloud service
To add a new Cloud Service click the **Cloud Services** tab icon in the side bar.
@@ -110,9 +109,3 @@ Now you can switch back and forth between your two cloud services. But most ofte
## Deploying with a cloud service
When you deploy you application you pick which cloud service to use for the deploy. So you can for instance have one test deploy to sandbox that is using your development or testing cloud service, and another using your custom domain that use your production cloud service.
<div className="ndl-image-with-background l">
![](/docs/guides/cloud-data/creating-a-backend/deploy.png)
</div>

18
docs/guides/cloud-logic/introduction.md
View File

@@ -87,7 +87,7 @@ When your **Cloud Function** is in place you will need to call it from your fron
</div>
Then you can hook up the node. You call the function by sending a signal to the <span class="ndl-signal">Call</span> signal input.
Then you can hook up the node. You call the function by sending a signal to the <span class="ndl-signal">Call</span> signal input.
<div className="ndl-image-with-background xl">
@@ -102,19 +102,3 @@ When your cloud function has completed running it will result in either a <span
## Deploying
This is the basics of cloud function, keep reading the guides in this section to learn more about the details and different use cases. Finally you will want to deploy your application, and for the cloud functions to work properly you need to make sure you have a cloud services selected when deploying.
<div className="ndl-image-with-background l">
![](/docs/guides/cloud-logic/introduction/cloud-functions-deploy.png)
</div>

21
docs/guides/collaboration/version-control.md
View File

@@ -14,27 +14,18 @@ Version control has three main use cases:
</div>
Noodl uses [Git](https://git-scm.com) as the underlying version control system. The project folder is a git repository.
Users comfortable with git can use external git clients to view their Noodl projects.
Noodl uses [Git](https://git-scm.com) as the underlying version control system. The project folder is a Git repository.
Users comfortable with Git can use external git clients to view their Noodl projects.
## Enabling version control
Projects will automatically get a version control repository in the cloud. You can use it locally without sending data to the cloud, but to collaborate you have to push your changes, which will upload the project to Noodl's cloud.
Noodl projects will automatically initiate a Git project in the Project Folder. To activate the Version Control sidepanel you will need to push the Project Folder to an external Git repo, with any Git provider of your choice. This can be done through the terminal, or with a Git client like [Github Desktop](https://desktop.github.com/).
:::danger
A project that isn't pushed isn't available to collaborators or if you log into another computer.
Same goes for the changes you make, you have to push them to upload to the cloud.
:::
Read more about how to push your project below.
Any project collaborators will have to clone the project from the repo, and then open the downloaded Project Folder in Noodl.
## The version control panel
The version control panel is where you perform all actions related to version control.
This includes actions such as pushing new changes to your collaborators,
pulling down the latest version, seeing differences between versions, merging branches, and more.
The version control panel is where you perform all actions related to version control. This includes actions such as pushing new changes to your collaborators, pulling the latest version, seeing differences between versions, merging branches, and more.
<div className="ndl-image-with-background">
@@ -44,7 +35,7 @@ pulling down the latest version, seeing differences between versions, merging br
## Commiting your changes
When there are changes in your project and you can commit your changes to the version control system. This creates a commit, which is a snapshot of the state of your entire project. This can then be pushed to share your changes with collaborators (or yourself if you work on multiple computers).
When there are changes in your project you can commit them to the version control system. This creates a commit, which is a snapshot of the current state of your entire project. This can then be pushed to share your changes with collaborators (or yourself if you work on multiple computers).
<div className="ndl-image-with-background">

49
docs/guides/deploy/deploying-an-app-on-sandbox.md
View File

@@ -1,49 +0,0 @@
---
title: Deploy an App on the Sandbox domain
hide_title: true
---
# Deploy an App to the Sandbox domain, `*.sandbox.noodl.app`
## What you will learn in this guide
This guide will teach you how to deploy a Noodl App to the Noodl Sandbox, i.e the `sandbox.noodl.app` domain.
You can use this to share your Noodl App with other people.
## Overview
There are multiple ways for you to deploy Noodl Apps so other people can use them. The easiest one is to use the Noodl Sandbox deployment. The your app will get a public URL that ends with `.sandbox.noodl.app`.
The video below walks through all deployment options in Noodl, including Sandbox deploys:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/M97-89RiboE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Doing a Sandbox Deployment
Open the project you want to deploy. Then click the **Deploy** button on the top right.
<div className="ndl-image-with-background s">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/deploy-button.png)
</div>
In the popup that opens, you can select a subdomain name. Your URL will become `<subdomain>.noodl.app`. Note that some subdomains may be taken by other users, so be ready to come up with a unique name if that's the case.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/noodl-deploy-to-noodl-app-domain.png)
</div>
## Managing your Sandbox Deployments
Once you have deployed your app they will be available in the list of Sandbox Deployments.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-an-app-on-sandbox/manage-deploys.png)
</div>
You can select any of the sandbox deploys and change which backend to use or to **Delete** the deploys.

95
docs/guides/deploy/deploying-to-custom-domain.md
View File

@@ -1,95 +0,0 @@
---
title: Deploying to Custom Domain
hide_title: true
---
# Deploying to your custom domain
## What you will learn in this guide
This guide will take you through the steps needed for deploying a Noodl app to your own custom domain. Note that the app is still hosted by Noodl, but you let your custom domain point to the app. If you want to host the backend and frontend yourself check out the [Using a self hosted backend](/docs/guides/deploy/using-an-external-backend) and [Hosting Frontend](/docs/guides/deploy/hosting-frontend).
:::note
To be able to follow this guide you must have custom domain feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
## Overview
The guide walks you through the following topics
- Acquiring a domain
- Deploying to your acquired custom domain
- Managing your custom domain deployments
You can also check out the video below that walks through all deployment options in Noodl, including deploying to a Custom Domain:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/M97-89RiboE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
## Acquiring your domain
The first thing you need to do is to acquire the domain, i.e. purchase it from a domain provider if you don't have it already. There are many different places where you can acquire a domain and they all work a little differently. The important thing is that you need to be able to configure the DNS records and especially set a [CNAME](https://en.wikipedia.org/wiki/CNAME_record) record. You will need this later.
## Deploying to you domain
Once you have acquired the domain, click the **Deploy application** icon in the top right corner.
<div className="ndl-image-with-background s">
![](/docs/guides/deploy/deploying-to-custom-domain/deploy-button.png)
</div>
Then select the **Custom Domains** tab.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains.png)
</div>
Click **Manage Domains**. This allows you to add a new custom domain.
<div className="ndl-image-with-background xl">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-2.png)
</div>
Enter the name of the domain you want to deploy to, including the subdomain. Note that Noodl does not support naked domains (e.g. `mydomain.com`) so you will have to add a subdomain, for example `www.`.
Click **Add Domain**. Noodl will now try to connect to the domain which will always fail the first time. You need to set up a CNAME record in the DNS on your domain providers side that matches Noodl.
Copy the value in the **Value** box (`proxy-ssl.noodl.cloud`). You will need to provide when you create the CNAME record on the domain side.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-3.png)
</div>
Create the CNAME record in the DNS at your domain provider. Once that's done, click "Verify Connection" to see if Noodl can coonect.
?> Note that it could take some time - up to several hours - for your domain provider to propertly update the DNS records so if Noodl cannot verify the domain, try again in a few minutes or hours.
Once the domain has been verified you will see the green **Connected** text.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-4.png)
</div>
Now your domain is available to deploy to. So close the **Manage Domains** popup.
You can now choose your newly added domain as a target. Make sure to also pick the backend you want to use in the deploy.
<div className="ndl-image-with-background l">
![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-5.png)
</div>
Press **Create Deploy** and your new deployment is ready.
## Managing your custom deployments
Once you have added your custom domain and deployed to it you can updated it whenever you like, delete it or update which backend it uses.

9
docs/guides/deploy/embedding.md
View File

@@ -29,7 +29,7 @@ To add an iframe to your HTML document, you can use the `<iframe>` tag with the
<iframe
width="560"
height="315"
src="https://example.sandbox.noodl.app/"
src="https://url.to.your.deployed.app/"
rameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
@@ -37,13 +37,14 @@ To add an iframe to your HTML document, you can use the `<iframe>` tag with the
```
In this example, the `<iframe>` tag has several attributes:
- `width` and `height`: Set the dimensions of the iframe.
- `src`: The URL of the Noodl sandbox to be embedded.
- `src`: The URL of your deployed Noodl app.
- `frameborder`: Set to "0" to remove the border around the iframe.
- `allow`: Specifies a list of features that are allowed within the iframe, such as accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, and picture-in-picture.
- `allowfullscreen`: Allows the iframe to go full-screen mode when the full-screen API is used.
This example demonstrates how to add an iframe to your HTML document to embed a Noodl sandbox. You can customize the attributes as needed to suit your specific use case or other types of content to be embedded using iframes.
This example demonstrates how to add an iframe to your HTML document to embed a deployed Noodl app. You can customize the attributes as needed to suit your specific use case or other types of content to be embedded using iframes.
## Micro Frontend
@@ -51,4 +52,4 @@ Micro Frontends is an architectural pattern that involves breaking down a fronte
The micro frontend approach allows for greater flexibility and scalability in frontend development, as each micro frontend can be developed and deployed independently, and can be composed to create the overall frontend application. This approach also allows for different teams to work on different parts of the front-end application, using different technologies.
If you are interested in hearing more, [contact us](https://www.noodl.net/community).
If you are interested in hearing more, [reach out to us in the community](https://www.noodl.net/community).

19
docs/guides/deploy/hosting-frontend.md
View File

@@ -2,25 +2,16 @@
title: Self Hosting your Noodl frontend
hide_title: true
---
# Self hosting your Noodl frontend
## What you will learn in this guide
In this guide you will learn how to **Self Host** by deploying your Noodl App frontend to a local folder and then host it on either Google Cloud Platform or AWS. This is needed if you want to host your Noodl App frontend in your own cloud infrastructure and with your own domain name.
:::note
**Self Hosting**<br/>Note: To be able to follow this guide you must have "Self Host" feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
## Overview
By default, Noodl will host you App (both backend and frontend), by deploying your app to a **sandbox.noodl.app** domain for free or using your own domain. See [this](/docs/guides/deploy/deploying-an-app-on-sandbox) guide for more information.
However, for various reasons, you may want to host your frontend on your own infrastructure. For this you will first deploy it locally and then upload it to your hosting provider of choice.
In this guide you will learn how to **Self Host** by deploying your Noodl App frontend to a local folder and then host it on either Google Cloud Platform or AWS.
## Deploying to Local Folder
By using the **Self Hosting** section in the Noodl deployment popup will save a version of your frontend to a folder on your local machine, this folder will contain everything needed and you can simply upload the content to your hosting service.
Open up the deployment popup in Noodl to save a version of your frontend to a folder on your local machine, this folder will contain everything needed and you can simply upload the content to your hosting service.
<div className="ndl-image-with-background l">
@@ -32,6 +23,6 @@ Make sure you pick the backend you want to use for the deploy.
## Hosting your Frontend at GCP or AWS
- **Google Cloud Platform** If you would like use GCP to host the frontend you can follow this [guide](https://cloud.google.com/storage/docs/hosting-static-website). There you will create a bucket, a load balancer and a CDN.
- **Google Cloud Platform** If you would like use GCP to host the frontend you can follow this [guide](https://cloud.google.com/storage/docs/hosting-static-website). There you will create a bucket, a load balancer and a CDN.
- **Amazon Web Services** If you prefer to use AWS you can watch this [video](https://www.youtube.com/watch?v=BpFKnPae1oY&ab_channel=AmazonWebServices) it will explain how to create an S3 bucket and how to route traffic using the AWS DNS service, Route 53.
- **Amazon Web Services** If you prefer to use AWS you can watch this [video](https://www.youtube.com/watch?v=BpFKnPae1oY&ab_channel=AmazonWebServices) it will explain how to create an S3 bucket and how to route traffic using the AWS DNS service, Route 53.

9
docs/guides/deploy/overview.md
View File

@@ -2,9 +2,12 @@
title: Deploying and hosting Noodl apps
hide_title: true
---
# Deploying and hosting Noodl apps
Noodl have it's own hosting infrastructure which makes it very easy to deploy Noodl app. You can also use your own custom domain to point to the app if you have one.
If you for some reason want to host the frontend and/or the backend on you own infrastructure that's also possible.
Noodl allows you to export your frontend and backend so that you can host it on your own servers.
### [Start learning about hosting and deployment of Noodl apps](/docs/guides/deploy/deploying-an-app-on-sandbox)
- [Learn about deploying the frontend](/docs/guides/deploy/hosting-frontend)
- [Learn about deploying the backend on AWS](/docs/guides/deploy/setting-up-backend-on-aws)
- [Learn about deploying the backend on GCP](/docs/guides/deploy/setting-up-backend-on-gcp)
- [Learn about deploying to iOS and Android](/docs/guides/deploy/deploying-to-ios-and-android)

30
docs/guides/deploy/setting-up-backend-on-aws.md
View File

@@ -39,7 +39,7 @@ You can choose if you want to manually control when you redeploy and instance. T
On the next screen you provide a **name** for your service and you can change settings for service. For the most part you can keep the standard settings but a few needs to be changed.
* **Port** The port of the application needs to be set to **3000**
- **Port** The port of the application needs to be set to **3000**
You also need to provide a few environment variables to the instance. You do this using the **Add environment variable** button.
@@ -51,15 +51,15 @@ You also need to provide a few environment variables to the instance. You do thi
The following variables are needed:
* **APP_ID** You can choose this yourself, you need to provide it in the Noodl editor when connecting to your backend.
* **MASTER_KEY** This you be a password that you need to keep safe. With this password you get full access to your backend, this is also needed to connect to your backend from Noodl.
* **DATABASE_URI** This is the database url that you got when setting up the MongoDB database in the previous step. This can also be a Postgres url.
- **APP_ID** You can choose this yourself, you need to provide it in the Noodl editor when connecting to your backend.
- **MASTER_KEY** This you be a password that you need to keep safe. With this password you get full access to your backend, this is also needed to connect to your backend from Noodl.
- **DATABASE_URI** This is the database url that you got when setting up the MongoDB database in the previous step. This can also be a Postgres url.
* **PUBLIC_SERVER_URL** (Optional) This is needed if you want to support file uploads and downloads, in that case you might need to go back here and update this environment variable after you have received the URL in the next step. This variable should be the public url where your clour services can be reached, starting with `https://`.
- **PUBLIC_SERVER_URL** (Optional) This is needed if you want to support file uploads and downloads, in that case you might need to go back here and update this environment variable after you have received the URL in the next step. This variable should be the public url where your clour services can be reached, starting with `https://`.
With that in place you can move on to reviewing your settings and deploying your service. It might take a few minutes to completely setup you new service.
Once the service is up and running the last step is to find the URL of the service. You can find it by navigating to the service details page. It will look something like this:
Once the service is up and running the last step is to find the URL of the service. You can find it by navigating to the service details page. It will look something like this:
<div className="ndl-image-with-background l">
@@ -67,21 +67,15 @@ Once the service is up and running the last step is to find the URL of the servi
</div>
With that URL, master key and app id in hand, [go back](/docs/guides/deploy/using-an-external-backend#connect-your-application-to-the-self-hosted-backend) to the self hosting guide.
# File storage
If you want to support file upload and download, you need to specify the **PUBLIC_SERVER_URL** environment variable as noted above. By default the files will be stored in the database of your application, but if you instead want to use an S3 bucket for storage you need to create a bucket, and policy, you can find instructions on that [here](http://docs.parseplatform.org/parse-server/guide/#configuring-s3adapter). Then specify these additional environment variables:
* **S3_ACCESS_KEY** The AWS access key for a user that has the required permissions. Required.
* **S3_SECRET_KEY** The AWS secret key for the user. Required.
* **S3_BUCKET** The name of your S3 bucket. Needs to be globally unique in all of S3. Required.
* **S3_REGION** (Optional) The AWS region to connect to. Default: ‘us-east-1’
* **S3_BUCKET_PREFIX** (Optional)Create all the files with the specified prefix added to the filename. Can be used to put all the files for an app in a folder with ‘folder/’.
* **S3_DIRECT_ACCESS** (Optional)Whether reads are going directly to S3 or proxied through your Parse Server. If set to true, files will be made publicly accessible, and reads will not be proxied. Default: false
- **S3_ACCESS_KEY** The AWS access key for a user that has the required permissions. Required.
- **S3_SECRET_KEY** The AWS secret key for the user. Required.
- **S3_BUCKET** The name of your S3 bucket. Needs to be globally unique in all of S3. Required.
- **S3_REGION** (Optional) The AWS region to connect to. Default: ‘us-east-1’
- **S3_BUCKET_PREFIX** (Optional)Create all the files with the specified prefix added to the filename. Can be used to put all the files for an app in a folder with ‘folder/’.
- **S3_DIRECT_ACCESS** (Optional)Whether reads are going directly to S3 or proxied through your Parse Server. If set to true, files will be made publicly accessible, and reads will not be proxied. Default: false

45
docs/guides/deploy/using-an-external-backend.md
View File

@@ -2,36 +2,33 @@
title: Using a self hosted backend
hide_title: true
---
# Using a self hosted backend
## What you will learn in this guide
This guide will let you create a self hosted backend with an external database. This is an alternative to using an **Noodl Hosted Cloud Services**. Some reasons why you might want to do this could be:
This guide will let you create a self hosted backend with an external database. This is an alternative to using a built on **Noodl Cloud Service**. Some reasons why you might want to do this could be:
- You want to host your own database, maybe to ensure where data is stored or other privacy reasons.
- You want to host your own backend on a cloud service such as AWS or Google Cloud Platform.
:::note
**Self Hosting**<br/>Note: To be able to follow this guide you must have "Self Host" feature enabled. This is not available in the free Noodl plan. But you can request a trial [here](https://noodl.net/plans).
:::
- You want to host your own database, maybe to ensure where data is stored or other privacy reasons.
- You want to host your own backend on a cloud service such as AWS or Google Cloud Platform.
## Overview
We will go through the follwing steps
- Set up a Database cluster on MongoDB Atlas (any MongoDB or Postgres database is supported)
- Spin up a container with the Noodl backend docker image.
- Connect to the self hosted backend from your Noodl project.
- Set up a Database cluster on MongoDB Atlas (any MongoDB or Postgres database is supported)
- Spin up a container with the Noodl backend docker image.
- Connect to the self hosted backend from your Noodl project.
## The different parts of a Noodl App
As a background it's good to know that a Noodl App consists of three parts:
- **The database** All Noodl applications must be backed by a database, you can use either a MongoDB or Postgres compatible database. This is where users and other records are stored. Nodes like **Query Records** access the database via the backend web service.
- **The database** All Noodl applications must be backed by a database, you can use either a MongoDB or Postgres compatible database. This is where users and other records are stored. Nodes like **Query Records** access the database via the backend web service.
- **The backend service** This is the Noodl backend service that is provided via a Docker image and an instance can be started on most cloud providers. The Noodl backend is based on and compatable with the [Parse Platform](https://parseplatform.org) which is a great choice for a backend service. A solid open source project with an active foundation supporting many of the critical functions needed.
- **The backend service** This is the Noodl backend service that is provided via a Docker image and an instance can be started on most cloud providers. The Noodl backend is based on and compatable with the [Parse Platform](https://parseplatform.org) which is a great choice for a backend service. A solid open source project with an active foundation supporting many of the critical functions needed.
- **Static frontend hosting** Noodl applications are SPAs (Single Page Applications) and need a place that serves the application frontend created when you deploy your application from Noodl. You can use a **Noodl hosted** frontend, with a custom domain, together with a self hosted backend, or you can host the frontend yourself as well.
- **Static frontend hosting** Noodl applications are SPAs (Single Page Applications) and need a place that serves the application frontend created when you deploy your application from Noodl.
This guide will look at setting up your own self hosted **Database** and **Backend**.
@@ -51,7 +48,6 @@ You can start by choosing the free plan (you can always upgrade later) and then
Once your database is up and running you need to get the connection details for the next step. First you need to obtain the password of the **Admin** user. You will find your database users under the **Database Access** section.
<div className="ndl-image-with-background m">
![](/docs/guides/deploy/using-an-external-backend/atlas-3.png)
@@ -90,7 +86,7 @@ Now you need to copy and keep the connection URI shown below. It will look somet
mongodb+srv://Admin:<password>@cluster0.xxxxxxx.mongodb.net/?retryWrites=true&w=majority
```
You need to replace the ```<password>``` with the **Admin** password you generated before. Also, insert the name of your database in the url, you can pick any name, let's call it `noodldb`, your final URL should look something like this:
You need to replace the `<password>` with the **Admin** password you generated before. Also, insert the name of your database in the url, you can pick any name, let's call it `noodldb`, your final URL should look something like this:
```bash
mongodb+srv://Admin:<password>@cluster0.xxxxxxx.mongodb.net/noodldb?retryWrites=true&w=majority
@@ -102,10 +98,9 @@ Keep this URI safe as it will have full access to your database.
Next up we will deploy an instance of the Noodl backend service that we will point our application to. We provide guides for setting up Noodl on Amazon Web Services or Google Cloud Platform, follow the links below and set up the container. When you are ready you can proceed to the **Connect your application to the self hosted backend** below.
* **Setting up a backend on AWS** Make sure you have an AWS account created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-aws).
* **Setting up a backend on GCP** Make sure you have account on Google Cloud Platform created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-gcp).
- **Setting up a backend on AWS** Make sure you have an AWS account created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-aws).
- **Setting up a backend on GCP** Make sure you have account on Google Cloud Platform created and then follow [this guide](/docs/guides/deploy/setting-up-backend-on-gcp).
### Connect your application to the self hosted backend
@@ -135,17 +130,17 @@ Create a new cloud service. Make sure the **Self Hosted** checkbox is checked:
Fill out the information
- **Name** - Any name you want. This will be the name of the backend in the list of backends.
- **Description** - Some descriptive text of the backend.
- **Endpoint** - This is the url to the backend service you have created in the previous step.
- **Application id** - This is the application id that you provided when setting up the backend service in the previous step. It's simply and identifier of your own choosing.
- **Masterkey** - This is the master key to the backend service you created in the previous step. It is needed by the editor to access the database for the dashboard, query nodes etc. This is stored locally and encrypted. You need to keep this safe as with it you have full access to your backend and database.
- **Name** - Any name you want. This will be the name of the backend in the list of backends.
- **Description** - Some descriptive text of the backend.
- **Endpoint** - This is the url to the backend service you have created in the previous step.
- **Application id** - This is the application id that you provided when setting up the backend service in the previous step. It's simply and identifier of your own choosing.
- **Masterkey** - This is the master key to the backend service you created in the previous step. It is needed by the editor to access the database for the dashboard, query nodes etc. This is stored locally and encrypted. You need to keep this safe as with it you have full access to your backend and database.
You can make some quick tests, for example opening the **Dashboard** and create a **Class** to see that it works. That's it, now you have a self hosted Noodl cloud services up and running.
## Migrating from a Noodl hosted cloud service
## Migrating from a Noodl cloud service
If you are migrating from a Noodl hosted cloud service we can provide you with a database dump that you can use to restore your new database to, [email support to request](mailto:support@noodl.net). Once you have the backup file you need to install the MongoDB database tools, you can find instructions [here](https://www.mongodb.com/docs/database-tools/installation/installation/).
If you are migrating from a Noodl cloud service we can provide you with a database dump that you can use to restore your new database to, [email support to request](mailto:support@noodl.net). Once you have the backup file you need to install the MongoDB database tools, you can find instructions [here](https://www.mongodb.com/docs/database-tools/installation/installation/).
Then you will use the following command to migrate your data:

4
docs/guides/user-interfaces/figma-plugin.md
View File

@@ -50,11 +50,11 @@ Here's the same node duplicated in Noodl, with a different source and border rad
All text styles used by exported text layers will automatically be imported.
?> Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
<iframe width="560" height="315" style={{margin:'0 auto',display:'block'}} src="https://www.youtube-nocookie.com/embed/sZm0eBZvLaM" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe><br/>
?> Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
## Export complex shapes

14
docs/guides/user-interfaces/layout.mdx
View File

@@ -32,7 +32,7 @@ The **Group** node is the most central node for doing a layout. It's the fundame
**Group** nodes are arranged in a hierarchy and can have other nodes as children. It controls the layout of its children and there are a number of properties that can be used to specify how the children of a **Group** node will be laid out. You can copy the various node examples used in this guide by clicking "Copy nodes" and then pasting into a Noodl project.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/groups.png" />
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/groups.png")} />
<CopyToClipboardButton
json={{
nodes: [
@@ -113,7 +113,7 @@ Here's an example you can copy into Noodl. Click the "Copy nodes" button next to
Change the **Layout** of the top level node to see how the direction of the child nodes change.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/layout-dir.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/layout-dir.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -223,11 +223,11 @@ You can copy the nodes below to an empty component in Noodl. The result is shown
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-nodes.png"
src={useBaseUrl("docs/guides/user-interfaces/layout/content-size-nodes.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-example.png"
src={useBaseUrl("/docs/guides/user-interfaces/layout/content-size-example.png")}
className="ndl-image small"
></img>
<CopyToClipboardButton
@@ -368,7 +368,7 @@ You can use the alignment controls to pin the children to a specific edge, or ho
A Group can control the alignment of its children using the _Align and justify content_ property.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/alignment.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/alignment.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -418,7 +418,7 @@ Children can use the _alignment_ controls to override the parent's alignment set
Children can use margins to offset the position from how it's aligned.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/align.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/align.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -490,7 +490,7 @@ You can choose any of these options:
Here's an example of a horizontal layout with **Multi Line Wrap** set to `On`.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/multi-line.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/multi-line.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [

2
docs/guides/user-interfaces/responsive-design.mdx
View File

@@ -1108,6 +1108,6 @@ It features the following options in the property panel:
## Get building!
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that we havent touched upon here and feel like sharing it, feel free to hop on in to on our [Discord server](https://discord.com/invite/23xU2hYrSJ). We are always happy to hear your ideas and feedback.
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that havent been touched upon here and feel like sharing it, feel free to hop on in on the [Discord server](https://discord.com/invite/23xU2hYrSJ). The community is always happy to hear your ideas and feedback.
Happy Noodling!

34
docs/guides/user-interfaces/states.mdx
View File

@@ -24,7 +24,7 @@ First let's start with the basic visual nodes that make up the switch. This is s
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/switch-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/switch-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -82,11 +82,11 @@ Below you can see the styling of the two nodes. The first image shows the Circle
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/style-props1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props1.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/style-props2.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props2.png")}
className="ndl-image small"
></img>
</div>
@@ -99,7 +99,7 @@ Next, create the two states.
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/create-states.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/create-states.gif")}
className="ndl-image med"
></img>
</div>
@@ -110,7 +110,7 @@ We will also specify **Values** for each of our states. In the same way you adde
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/values-1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/values-1.png")}
className="ndl-image med"
></img>
</div>
@@ -119,11 +119,11 @@ Specify the value for each state. The X position should be **40** when the switc
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/on-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/on-values.png")}
className="ndl-image med"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/off-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/off-values.png")}
className="ndl-image med"
></img>
</div>
@@ -131,7 +131,7 @@ Specify the value for each state. The X position should be **40** when the switc
Connect the **Knob X** output of the **States** node to the **Pos X** input of the **Circle** node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/knob-x-connected.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/knob-x-connected.png")}></img>
</div>
As you can see the **States** node will get an output corresponding to each value that is defined under **Values**. This output will transition to the specified values when the **States** node changes state. One way to see the different states and transitions is to play with the **State** dropdown menu in the properties panel.
@@ -146,7 +146,7 @@ You can connect the outputs of the **States** node to anything you like. In this
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/color-type.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/color-type.png")}
className="ndl-image med"
></img>
</div>
@@ -154,7 +154,7 @@ You can connect the outputs of the **States** node to anything you like. In this
Finally, we can make the **States** node toggle state when the switch **Group** node is clicked. This is achieved by connecting the **Click** signal from the **Group** to the **Toggle** input of the **States** node. This will make the **States** node jump to the next state in the list and when the last one is reached it will jump to the first one again. In this case we only have two states, so it will toggle between **On** and **Off**.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/click-toggle.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/click-toggle.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -249,7 +249,7 @@ For _number_ and _color_ types the **States** node will try to smoothly transiti
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -335,7 +335,7 @@ This simple graph has a **States** node that controls the hover state of a **Gro
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx1.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx1.gif")}
className="ndl-image small"
></img>
</div>
@@ -344,7 +344,7 @@ Both transitions (color and size) have the default transition curves. You can ed
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/transition-props.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/transition-props.png")}
className="ndl-image med"
></img>
</div>
@@ -355,7 +355,7 @@ In this case we want to change the curve for the **Size** transition. You can ed
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/change-size-curve.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/change-size-curve.gif")}
className="ndl-image med"
></img>
</div>
@@ -369,7 +369,7 @@ You can play with different settings for the curves and see them working when yo
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx2.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx2.gif")}
className="ndl-image small"
></img>
</div>
@@ -379,7 +379,7 @@ You can play with different settings for the curves and see them working when yo
You can also connect several **States** nodes together to create more complex types of animations. In the node graph below we have a second **States** node that expands the **Group** node (changes the width). The second **States** node labeled **Expand** changes the width between the states **Yes** and **No**. The neat thing is that it is triggered when the first states node (the hover states) has reached the **Yes** state. It is returned to **No** when the mouse leaves (the hover end), just like the first node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/chaining-states.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/chaining-states.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -517,7 +517,7 @@ This will result in the behaviour shown below. As you can see the first **States
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx3.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx3.gif")}
className="ndl-image small"
></img>
</div>

13
library/modules/google-analytics/guides/setting-up-google-analytics/README.md
View File

@@ -2,6 +2,7 @@
title: Setting up Google Analytics
hide_title: true
---
# Setting up Google Analytics
## What you will learn in this guide
@@ -12,11 +13,11 @@ This guide will show you how to add basic tracking with Google Analytics. After
We will go through the following topics:
- Beginners guide to Google Analytics
- Set up Google Analytics
- Set up the Noodl Module
- Allow tracking
- Next steps
- Beginners guide to Google Analytics
- Set up Google Analytics
- Set up the Noodl Module
- Allow tracking
- Next steps
## Beginners guide to Google Analytics
@@ -55,7 +56,7 @@ Make sure that you are using _Google Analytics 4_ and **NOT** _Universal Analyti
So what is a **Data Stream**? Simply put, it's a connection that will stream data from your app to Google Analytics. You can have multiple **Data Streams** in your **Property**, but in most cases you will only need one.
Let's set up our first **Data Stream**. As Noodl outputs Web Apps, we will need to select the [**Web** option](https://support.google.com/analytics/answer/9304153#stream&zippy=%2Cweb). When asked for the URL of the primary website, this needs to be the URL for your app [when it's deployed](/docs/guides/deploy/deploying-an-app-on-sandbox). `example.com` works for testing purposes as well.
Let's set up our first **Data Stream**. As Noodl outputs Web Apps, we will need to select the [**Web** option](https://support.google.com/analytics/answer/9304153#stream&zippy=%2Cweb). When asked for the URL of the primary website, this needs to be the URL for your app when it's deployed. `example.com` works for testing purposes as well.
!> Make sure to disable [_Enhanced Measurement_](https://support.google.com/analytics/answer/9216061), as this might send double page views.

3
library/modules/qr-scanner/guides/camera-feed/README.md
View File

@@ -2,6 +2,7 @@
title: Scanning for QR Codes in a camera feed
hide_title: true
---
# Scanning for QR Codes in a camera feed
This example enables you to scan a camera feed for Quick Response (QR) Codes and fetch the resulting data in the QR Code. To scan for QR Codes via uploaded images, see the documentation on the [Image QR Scanner](/library/modules/qr-scanner/guides/image-upload).
@@ -33,4 +34,4 @@ Since we are using a **Video** node to display the camera feed, you might want t
## No camera stream in viewer? HTTP vs. HTTPS
For security reasons, the camera feed can generally only be accessed through a secure connection, i.e. an URL beginning with <code>https://</code>, and not <code>http://</code>. This means that on some platforms (depending on OS and browser) the camera feed of the **Camera QR Scanner** will not work inside of the Noodl viewer. Furthermore, connecting to http://localhost:8574/ might have the same issue. However, on some platforms localhost is exempted from the rule and the camera works without problems in the viewer.
If you run into this problem you will have to deploy to a secure server via <code>https://</code>. The easiest way to do that is to use the [Noodl Sandbox Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) which uses <code>https://</code> protocols.
If you run into this problem you will have to deploy to a secure server via <code>https://</code>.

116
library/prefabs/pdf/README.md
View File

@@ -1,116 +0,0 @@
---
title: PDF Export
hide_title: true
---
# PDF Export
:::note
This prefab only works on Noodl hosted cloud services.
:::
It's recommended that you have a grasp of the following concepts before diving into this prefab:
* [Page Navigation](/docs/guides/navigation/basic-navigation) - How to create pages and navigate between them.
* [Cloud Functions](/docs/guides/cloud-logic/introduction) - How to create cloud functions and run logic on the backend.
Here is a nifty prefab for exporting / generating PDFs. Exporting a PDF involves two components:
* **A PDF Page** This needs to be a page in your applications that is accessible externally. This page will be turned into a PDF in the next step.
* **A PDF export cloud function** This is a cloud function that will perform the PDF export, the exported PDF will be uploaded as a file to the cloud service and you will receive a URL that can be send to the frontend and opened in a new tab.
Let's review the two components one by one:
## The PDF Page
First you need to create a Noodl page in a page router that will be accessible at a specific `url` when you deploy the application. This web page should contain the content pages of your PDF. We have found that you get the best result when simply stacking groups on top of each other as shown below:
<div className="ndl-image-with-background xl">
![](/library/prefabs/pdf/pages.png)
</div>
We also recommend setting the dimensions of each page to explicit values as shown below:
<div className="ndl-image-with-background m">
![](/library/prefabs/pdf/page-size.png)
</div>
In this way you can put the content of each page within these groups. You could also use a [Repeater](/nodes/ui-controls/repeater) to dynamically generate the pages with data. You need to make sure that the page is publicly available so it doesn't require a login for any data you put on the pages. Here is an example: `https://pdf-test.sandbox.noodl.app/pdf`.
## The PDF export cloud function
The second step is to create a cloud function that performs the PDF export and returns a URL with the ready PDF. After cloning the prefab into your project you will have
<div className="ndl-image-with-background m">
![](/library/prefabs/pdf/cloud-components.png)
</div>
The cloud function `Create PDF` will simply create a PDF from a prodived web page URL, upload the file and return the URL. The content of the cloud functions is very simple:
<div className="ndl-image-with-background xl">
![](/library/prefabs/pdf/create-pdf.png)
</div>
The request is connected to the `Generate PDF` logic component that does the PDF export and when it succeeds the url with the location of the PDF is returned in the request.
## Hooking it up
Here is a very simple example of to hook it up in your application. When the button is clicked the cloud function is called with a string with the URL of the web page that should be made into a PDF.
<div className="ndl-image-with-background xl">
![](/library/prefabs/pdf/hook-up-1.png)
</div>
When the cloud function completes the url to the exported PDF is sent to an [External Link](/nodes/navigation/external-link) node that opens the url in a new tab and the browser will show a preview of the PDF.
The PDF generation generally takes a second or two, so it's good to show something like a [Loading Spinner](/library/prefabs/loading-spinner) while processing.
## User sessions
Often the web page that has the content of the PDF requires access the cloud database to include data in the document. This data should generally be protected with [Access Control](/docs/guides/cloud-data/access-control) so only users with permissions can access. But the page used to export the PDF will not have a valid user session as it's only used in the export process. We can solve this by providing a session token as a query parameter to the page.
There is a second cloud function called `Create PDF With Session` that helps us do this, it works like the other but it first fetches a session for the user calling the cloud function (this cloud function requires authentication on the front end to be called). The session is appended to the provided page url, as seen below:
<div className="ndl-image-with-background xl">
![](/library/prefabs/pdf/create-pdf-session.png)
</div>
To use the session token on the frontend you need to extract it from the [Page Inputs](/nodes/navigation/page-inputs) and feed into a function node with this code:
```javascript
if(Inputs.SessionToken) {
try {
await Noodl.Users.become(Inputs.SessionToken);
}
catch(e) {
Outputs.Failure();
throw e;
}
Outputs.Success();
}
else {
Outputs.Failure();
throw Error("No session token provided");
}
```
This code will use the provided session token to authenticate and "become" the user that the session token is valid for. Here is an example of how you can add the user email address to the PDF content.
<div className="ndl-image-with-background xl">
![](/library/prefabs/pdf/hook-up-2.png)
</div>

14
sidebarsLibrary.js
View File

@@ -1310,19 +1310,7 @@ const sidebars = {
},
],
// PDF
PDFExportSidebar: [
{
type: 'doc',
label: 'Overview',
id: 'prefabs/pdf/README',
},
{
type: 'link',
label: 'Back to prefabs',
href: '/library/prefabs/overview',
},
],
// Marquee Module
marquee: [

14
static/data/guides.js
View File

@@ -451,20 +451,6 @@ const guides = [
label: 'Deploying and hosting apps',
link: { type: 'doc', id: 'guides/deploy/overview' },
items: [
{
type: 'doc',
label: 'Sandbox Deploy',
id: 'guides/deploy/deploying-an-app-on-sandbox',
imageUrl: '/img/featured-content-images/hosting.png',
description: 'Learn how to deploy your app to a Noodl sandbox domain',
},
{
type: 'doc',
label: 'Deploying to custom domains',
id: 'guides/deploy/deploying-to-custom-domain',
imageUrl: '/img/featured-content-images/hosting.png',
description: 'Learn how to deploy your app to custom domains ',
},
{
type: 'doc',
label: 'Using a self hosted cloud service',

9
static/library/prefabs/index.json
View File

@@ -223,14 +223,7 @@
"docs": "/library/prefabs/openai/",
"tags": ["Cloud"]
},
{
"label": "PDF Export",
"desc": "A prefab for creating a PDF file from a web page",
"icon": "library/prefabs/pdf/pdf.png",
"project": "library/prefabs/pdf/pdf-0-1.zip",
"docs": "/library/prefabs/pdf/",
"tags": ["Cloud"]
},
{
"label": "Xano",
"desc": "Connects to Xano and handles queries, users and authTokens. Built by @gmaison.",

BIN
static/library/prefabs/pdf/cloud-components.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

BIN
static/library/prefabs/pdf/create-pdf-nodes.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
static/library/prefabs/pdf/create-pdf-session.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
static/library/prefabs/pdf/create-pdf.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
static/library/prefabs/pdf/hook-up-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
static/library/prefabs/pdf/hook-up-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
static/library/prefabs/pdf/page-size.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.5 KiB

BIN
static/library/prefabs/pdf/pages.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
static/library/prefabs/pdf/pdf-0-1.zip
View File

Binary file not shown.

BIN
static/library/prefabs/pdf/pdf.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB