diff --git a/docs/getting-started/ai-assisted-dev/chat-gpt.md b/docs/getting-started/ai-assisted-dev/chat-gpt.md index e948948..10f2ac8 100644 --- a/docs/getting-started/ai-assisted-dev/chat-gpt.md +++ b/docs/getting-started/ai-assisted-dev/chat-gpt.md @@ -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. diff --git a/docs/getting-started/ai-assisted-dev/overview.md b/docs/getting-started/ai-assisted-dev/overview.md index 3dc81d5..5c9f27b 100644 --- a/docs/getting-started/ai-assisted-dev/overview.md +++ b/docs/getting-started/ai-assisted-dev/overview.md @@ -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/docs/getting-started/fundamentals.md b/docs/getting-started/fundamentals.md index 7ffa6da..0fcd53a 100644 --- a/docs/getting-started/fundamentals.md +++ b/docs/getting-started/fundamentals.md @@ -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, Data and Signals. -- Data: 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. +- Data: 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. -- Signal: 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. +- Signal: 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 Data and 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.
@@ -47,16 +39,6 @@ When opening a project you should see the AI bar in the top left corner of the n
-### 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: :::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`
@@ -189,16 +169,10 @@ This method allows you fine grained control over your design system, while still
:::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.

> 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! diff --git a/docs/getting-started/overview.mdx b/docs/getting-started/overview.mdx index 13c87d1..4e6200c 100644 --- a/docs/getting-started/overview.mdx +++ b/docs/getting-started/overview.mdx @@ -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! diff --git a/docs/getting-started/workflow.md b/docs/getting-started/workflow.md index 4b27ca6..4188fd1 100644 --- a/docs/getting-started/workflow.md +++ b/docs/getting-started/workflow.md @@ -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. -
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**.
-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.
@@ -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).
diff --git a/docs/guides/deploy/deploying-an-app-on-sandbox.md b/docs/guides/deploy/deploying-an-app-on-sandbox.md deleted file mode 100644 index c7c0372..0000000 --- a/docs/guides/deploy/deploying-an-app-on-sandbox.md +++ /dev/null @@ -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: - - - -## Doing a Sandbox Deployment - -Open the project you want to deploy. Then click the **Deploy** button on the top right. - -
- -![](/docs/guides/deploy/deploying-an-app-on-sandbox/deploy-button.png) - -
- -In the popup that opens, you can select a subdomain name. Your URL will become `.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. - -
- -![](/docs/guides/deploy/deploying-an-app-on-sandbox/noodl-deploy-to-noodl-app-domain.png) - -
- -## Managing your Sandbox Deployments - -Once you have deployed your app they will be available in the list of Sandbox Deployments. - -
- -![](/docs/guides/deploy/deploying-an-app-on-sandbox/manage-deploys.png) - -
- -You can select any of the sandbox deploys and change which backend to use or to **Delete** the deploys. diff --git a/docs/guides/deploy/deploying-to-custom-domain.md b/docs/guides/deploy/deploying-to-custom-domain.md deleted file mode 100644 index d0218f4..0000000 --- a/docs/guides/deploy/deploying-to-custom-domain.md +++ /dev/null @@ -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: - - - -## 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. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/deploy-button.png) - -
- -Then select the **Custom Domains** tab. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains.png) - -
- -Click **Manage Domains**. This allows you to add a new custom domain. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-2.png) - -
- -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. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-3.png) - -
- -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. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-4.png) - -
- -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. - -
- -![](/docs/guides/deploy/deploying-to-custom-domain/custom-domains-5.png) - -
- -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. diff --git a/docs/guides/deploy/embedding.md b/docs/guides/deploy/embedding.md index e7f816d..70400e9 100644 --- a/docs/guides/deploy/embedding.md +++ b/docs/guides/deploy/embedding.md @@ -29,7 +29,7 @@ To add an iframe to your HTML document, you can use the `
-?> 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 diff --git a/docs/guides/user-interfaces/layout.mdx b/docs/guides/user-interfaces/layout.mdx index d47e848..6b3efca 100644 --- a/docs/guides/user-interfaces/layout.mdx +++ b/docs/guides/user-interfaces/layout.mdx @@ -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.
- + - + - + - + - +
@@ -99,7 +99,7 @@ Next, create the two states.
@@ -110,7 +110,7 @@ We will also specify **Values** for each of our states. In the same way you adde
@@ -119,11 +119,11 @@ Specify the value for each state. The X position should be **40** when the switc
@@ -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.
- +
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
@@ -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**.
- +
@@ -344,7 +344,7 @@ Both transitions (color and size) have the default transition curves. You can ed
@@ -355,7 +355,7 @@ In this case we want to change the curve for the **Size** transition. You can ed
@@ -369,7 +369,7 @@ You can play with different settings for the curves and see them working when yo
@@ -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.
- +
diff --git a/library/modules/google-analytics/guides/setting-up-google-analytics/README.md b/library/modules/google-analytics/guides/setting-up-google-analytics/README.md index bb815c9..5ca830c 100644 --- a/library/modules/google-analytics/guides/setting-up-google-analytics/README.md +++ b/library/modules/google-analytics/guides/setting-up-google-analytics/README.md @@ -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. diff --git a/library/modules/qr-scanner/guides/camera-feed/README.md b/library/modules/qr-scanner/guides/camera-feed/README.md index 79b3cb4..46e1058 100644 --- a/library/modules/qr-scanner/guides/camera-feed/README.md +++ b/library/modules/qr-scanner/guides/camera-feed/README.md @@ -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 https://, and not http://. 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 https://. The easiest way to do that is to use the [Noodl Sandbox Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) which uses https:// protocols. +If you run into this problem you will have to deploy to a secure server via https://. diff --git a/library/prefabs/pdf/README.md b/library/prefabs/pdf/README.md deleted file mode 100644 index f50bd97..0000000 --- a/library/prefabs/pdf/README.md +++ /dev/null @@ -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: - -
- -![](/library/prefabs/pdf/pages.png) - -
- -We also recommend setting the dimensions of each page to explicit values as shown below: - -
- -![](/library/prefabs/pdf/page-size.png) - -
- -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 - - -
- -![](/library/prefabs/pdf/cloud-components.png) - -
- -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: - -
- -![](/library/prefabs/pdf/create-pdf.png) - -
- -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. - -
- -![](/library/prefabs/pdf/hook-up-1.png) - -
- -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: - -
- -![](/library/prefabs/pdf/create-pdf-session.png) - -
- -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. - -
- -![](/library/prefabs/pdf/hook-up-2.png) - -
- diff --git a/sidebarsLibrary.js b/sidebarsLibrary.js index 760d39b..67c162f 100644 --- a/sidebarsLibrary.js +++ b/sidebarsLibrary.js @@ -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: [ diff --git a/static/data/guides.js b/static/data/guides.js index e892d3c..9c6d4c7 100644 --- a/static/data/guides.js +++ b/static/data/guides.js @@ -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', diff --git a/static/library/prefabs/index.json b/static/library/prefabs/index.json index bd85ad7..bf938b2 100644 --- a/static/library/prefabs/index.json +++ b/static/library/prefabs/index.json @@ -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.", diff --git a/static/library/prefabs/pdf/cloud-components.png b/static/library/prefabs/pdf/cloud-components.png deleted file mode 100644 index 772143c..0000000 Binary files a/static/library/prefabs/pdf/cloud-components.png and /dev/null differ diff --git a/static/library/prefabs/pdf/create-pdf-nodes.png b/static/library/prefabs/pdf/create-pdf-nodes.png deleted file mode 100644 index e94385f..0000000 Binary files a/static/library/prefabs/pdf/create-pdf-nodes.png and /dev/null differ diff --git a/static/library/prefabs/pdf/create-pdf-session.png b/static/library/prefabs/pdf/create-pdf-session.png deleted file mode 100644 index ff33d3d..0000000 Binary files a/static/library/prefabs/pdf/create-pdf-session.png and /dev/null differ diff --git a/static/library/prefabs/pdf/create-pdf.png b/static/library/prefabs/pdf/create-pdf.png deleted file mode 100644 index 33c0fc1..0000000 Binary files a/static/library/prefabs/pdf/create-pdf.png and /dev/null differ diff --git a/static/library/prefabs/pdf/hook-up-1.png b/static/library/prefabs/pdf/hook-up-1.png deleted file mode 100644 index af2e821..0000000 Binary files a/static/library/prefabs/pdf/hook-up-1.png and /dev/null differ diff --git a/static/library/prefabs/pdf/hook-up-2.png b/static/library/prefabs/pdf/hook-up-2.png deleted file mode 100644 index 8d4cbe9..0000000 Binary files a/static/library/prefabs/pdf/hook-up-2.png and /dev/null differ diff --git a/static/library/prefabs/pdf/page-size.png b/static/library/prefabs/pdf/page-size.png deleted file mode 100644 index eb4da91..0000000 Binary files a/static/library/prefabs/pdf/page-size.png and /dev/null differ diff --git a/static/library/prefabs/pdf/pages.png b/static/library/prefabs/pdf/pages.png deleted file mode 100644 index cb5ef9f..0000000 Binary files a/static/library/prefabs/pdf/pages.png and /dev/null differ diff --git a/static/library/prefabs/pdf/pdf-0-1.zip b/static/library/prefabs/pdf/pdf-0-1.zip deleted file mode 100644 index 3fd6dc6..0000000 Binary files a/static/library/prefabs/pdf/pdf-0-1.zip and /dev/null differ diff --git a/static/library/prefabs/pdf/pdf.png b/static/library/prefabs/pdf/pdf.png deleted file mode 100644 index 2375173..0000000 Binary files a/static/library/prefabs/pdf/pdf.png and /dev/null differ