Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/os fixes #66

Merged
merged 3 commits into from
Jan 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/build-alongs/horizontal-list-with-snapping.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@ title: Horizontal List with Snapping

This short build along shows how to create a Horizontal list with Cards. It will show you how to work with advanced **Scrolling** in lists.

:::note
This video is from a deprecated commercial version of Noodl and includes some features not present in the open source version, notably workspaces and built-in Git hosting
:::

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/x0nWHv2uCHI" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
4 changes: 4 additions & 0 deletions docs/build-alongs/star-rating-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ title: Star Rating Component

This short build along shows how to work with _animations_, _visual states_ and _component logic_ to build a visually rich star rating component.

:::note
This video is from a deprecated commercial version of Noodl and includes some features not present in the open source version, notably workspaces and built-in Git hosting
:::

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VwgcIsclVpE" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

You can import the full project [here](/library/examples/star-rating-component).
4 changes: 4 additions & 0 deletions docs/build-alongs/survey-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ In this three parts video series, Johan walks your through the creation of a sim

You can import the full project [here](/library/examples/survey-app).

:::note
These videos are from a deprecated commercial version of Noodl and include some features not present in the open source version, notably workspaces and built-in Git hosting
:::

## Part 1 - Navigation & Components

<iframe width="560" height="315" src="https://www.youtube.com/embed/ntKTCC7eEk0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
Expand Down
4 changes: 4 additions & 0 deletions docs/build-alongs/task-list-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ In this two parts video series, Johan will walk you through how he builds a task

You can import the full project [here](/library/examples/task-list-app).

:::note
These videos are from a deprecated commercial version of Noodl and include some features not present in the open source version, notably workspaces and built-in Git hosting
:::

## Part 1 - UI Controls and Layout

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/TNnn0Gzj-H4" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
Expand Down
10 changes: 4 additions & 6 deletions docs/getting-started/editor-tour.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,11 @@ hide_title: true

# The Complete Editor Tour

:::note
This video is from a deprecated commercial version of Noodl and includes some features not present in the open source version, notably workspaces, the component canvas and built-in Git hosting
:::

<div style={{padding:'62.5% 0 0 0',position:'relative'}}><iframe width="100%" height="100%" src="https://www.youtube.com/embed/gbEKSQKocHc" style={{position:'absolute',top:0,left:0}} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>
<br/>
<br/>

:::note

Please note that this video was recorded for the earlier 2.3 version of Noodl. It features a few minor visual inconsistencies with newer versions, but no big changes for the purposes of this video.

:::
4 changes: 4 additions & 0 deletions docs/getting-started/fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ Here you will learn about a few fundamental concepts in Noodl that are important

<div style={{padding:'62.5% 0 0 0',position:'relative'}}><iframe width="100%" height="100%" src="https://www.youtube.com/embed/kD-Oz_M-IS4" style={{position:'absolute',top:0,left:0}} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>

:::note
This video is from a deprecated commercial version of Noodl and includes some features not present in the open source version, notably workspaces and built-in Git hosting
:::

## 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 custom code.
Expand Down
2 changes: 0 additions & 2 deletions docs/getting-started/noodl-ai.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ Please note that the performance of the same AI command varies between the two m

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

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">
Expand Down
9 changes: 5 additions & 4 deletions docs/guides/cloud-data/creating-new-database-records.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: Creating new Database Records
hide_title: true
---

# Storing and fetching data in a database

## What you will learn in this guide
Expand All @@ -13,17 +14,17 @@ In this guide you will learn how to create and insert new entries - **Records**

We will go through the following steps in this guide:

- Create a **Record** in the database
- Retrieving the **Id** of the newly created **Record**
- Setting initial values of the **Record**
- Create a **Record** in the database
- Retrieving the **Id** of the newly created **Record**
- Setting initial values of the **Record**

Before starting this guide, make sure you have Cloud Services enabled and have at least one **Class** in the database. You can learn how to do this in [this](/docs/guides/cloud-data/creating-a-backend) and [this](/docs/guides/cloud-data/creating-a-class) guide.

## Create a Record using the Create New Record Node

If you tried out the **Dashboard** you could see how you could create **Records** from there. Now we will learn how to create **Records** from within an app.

Start a new Noodl Project in your workspace. You can use any template, for example the `Hello World` template.
Create a new Noodl Project. You can use any template, for example the `Hello World` template.

Again, make sure you have **Cloud Services** enabled and an active **Cloud Service** set up with at least one **Class**. When opening your `Cloud Services` sidebar it should look something like the image below, with a `Used in editor` cloud service selected.

Expand Down
4 changes: 4 additions & 0 deletions docs/guides/collaboration/migrating-from-noodl-hosted-git.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ This is found in the repo in the "Quick Setup" section:

</div>

:::note
Noodl will clear out the newly created repo when pushing. However, to be on the safe side, make sure to create the repo without any `README.md` or `.gitignore` files.
:::

### Personal Access Token

This is managed in your Github account settings. You can find a guide on it [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token). The token can be set up to access all your repos, or a select few. Usually, allowing access to all repos is fine, but there are some security benefits in creating separate tokens for each repo. Do what works best for you, but make sure your token is able to access your newly created repository.
Expand Down
8 changes: 6 additions & 2 deletions docs/guides/collaboration/version-control.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,17 @@ This will set up all necessary files to run Git in your project. From here you c

Pushing to an external repo can be done by clicking the button labeled "To push changes set a git remote". You can also use the terminal, or a Git client like [Github Desktop](https://desktop.github.com/).

:::note
:::tip
If you're new to Git, don't forget to push your changes regularly to prevent losing your work. A good rule of thumb is to do it everytime you finish or change a feature.
:::

Any project collaborators will have to clone the project from the repo, and then open the downloaded Project Folder in Noodl.

> The easiest way to get started with Git is through Github. Read more about creating Github repos [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories) or cloning Github repos [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
The easiest way to get started with Git is through Github. Read more about creating Github repos [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories) or cloning Github repos [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).

:::note
Noodl will clear out the newly created repo when pushing for the first time. However, to be on the safe side, make sure to create the repo without any `README.md` or `.gitignore` files.
:::

## The version control panel

Expand Down
2 changes: 0 additions & 2 deletions javascript/extending/build-script/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,6 @@ More documentation to come later!
### General

```ts
workspaceId: string;

project: ProjectModel;

environment: {
Expand Down
34 changes: 20 additions & 14 deletions javascript/extending/create-lib.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@ title: Create a new core node

# Create a new core node

Noodl is very extensible. As a developer you can add new modules with new capablities, create connections to data or make new visual components in your workspace. This guide gets us started by showing how the Noodl command line tool works and how to create an extension module with a single new node. This node will behave and appear just like the standard core nodes of Noodl.
Noodl is very extensible. As a developer you can add new modules with new capablities, create connections to data or make new visual components for your projects. This guide gets us started by showing how the Noodl command line tool works and how to create an extension module with a single new node. This node will behave and appear just like the standard core nodes of Noodl.

:::note
This guide requires <a href="https://nodejs.org/en/download/" target="_blank">Node.js</a> and <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" target="_blank">npm</a> installed.
:::

## Overview

This guide will walk you through how to create a **Noodl Module**. A Noodl Module can contain new core nodes to use in your projects. You can for example wrap an existing JavaScript library and expose it as a node in Noodl.

The general process works like this
* Set up a new **Module Project** where you can write the code for your module.
* Test your module in one of you projects while developing it.
* When you are done, build the module and deploy it to the projects you want to use it in.

- Set up a new **Module Project** where you can write the code for your module.
- Test your module in one of you projects while developing it.
- When you are done, build the module and deploy it to the projects you want to use it in.

## Install the Noodl CLI

Expand All @@ -29,6 +31,7 @@ npm install -g @noodl/noodl-cli
```

## Create a Module Project

With the CLI tool you can easily create a new Noodl module from a template:

```bash
Expand All @@ -53,7 +56,6 @@ First some notes on the content of a library module:
- The **module** directory contains the source code for the module as well as build scripts and any assets you might want, such as fonts, css etc.
- The **project** and **tests** folder can be ignored


First enter the **module** directory and install the needed dependencies:

```bash
Expand All @@ -68,7 +70,7 @@ If your module uses any other external libraries through NPM they will be instal

## Developing your module

You develop your module mainly by editing the file ``module/src/index.js``. From start it contains some example code that you can use as a boiler plate. There is currently no official documenation of the Noodl module SDK but you can find the source code to a number of modules [here](https://github.com/noodlapp).
You develop your module mainly by editing the file `module/src/index.js`. From start it contains some example code that you can use as a boiler plate. There is currently no official documenation of the Noodl module SDK but you can find the source code to a number of modules [here](https://github.com/noodlapp).

As you are developing your module you would want it packaged up and deployed in a Noodl project where you can test it. To do that you first have to create a new Noodl project that will be your test project. Once you've done that, find the local folder of that project by clickin the cogwheel ("Settings") and "Open project folder".

Expand All @@ -80,21 +82,25 @@ As you are developing your module you would want it packaged up and deployed in

Copy the full path to that folder - you will need it in the next step.

Now open the file ``/module/src/webpack.config.js``. Among other things, this file specifies where to deploy the module. We want to make sure its deployed to our test project.
Update the row containing ``var outputPath = ...`` to the following
Now open the file `/module/src/webpack.config.js`. Among other things, this file specifies where to deploy the module. We want to make sure its deployed to our test project.
Update the row containing `var outputPath = ...` to the following

```javascript
var outputPath = path.resolve('<the absolute path that your project>', 'noodl_modules/' + pjson.name);
var outputPath = path.resolve(
'<the absolute path that your project>',
'noodl_modules/' + pjson.name
);
```

Now go back to your terminal window (that was located in the ``modules/`` folder) and write the following.
Now go back to your terminal window (that was located in the `modules/` folder) and write the following.

```bash
npm run dev
```

This will enter development mode where your module is automatically rebuilt and redeployed to your project when you make changes in the source code.

If you started from the boiler plate code in ``module/src/index.js`` you will already have a module now in your project. Reload the Noodl project by closing it and opening it again, or simply press ctrl+R (Windows) / cmd+R (Mac) when you are in the Node Editor. Then bring up the Node Picker and you should see your new core node under "External Libraries".
If you started from the boiler plate code in `module/src/index.js` you will already have a module now in your project. Reload the Noodl project by closing it and opening it again, or simply press ctrl+R (Windows) / cmd+R (Mac) when you are in the Node Editor. Then bring up the Node Picker and you should see your new core node under "External Libraries".

## Overview of the module code

Expand All @@ -106,7 +112,7 @@ First you must import the Noodl SDK.
const Noodl = require('@noodl/noodl-sdk');
```

Next you will define the code for the new node.
Next you will define the code for the new node.

```javascript
const MyFullNameNode = Noodl.defineNode({
Expand Down Expand Up @@ -152,10 +158,10 @@ Again, check out the [Noodl Repo](https://github.com/noodlapp) at GitHub for som

## Deploying your module

When you are happy with your module you can do a proper deploy. Go back to the terminal window (still in the ``modules/`` folder) and write.
When you are happy with your module you can do a proper deploy. Go back to the terminal window (still in the `modules/` folder) and write.

```bash
npm run build
```

This deploys an optimized version of the module. If you want to use the module in a different project, just change the path in ``/module/src/webpack.config.js`` and do ```npm run build``` again.
This deploys an optimized version of the module. If you want to use the module in a different project, just change the path in `/module/src/webpack.config.js` and do `npm run build` again.
Loading