mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-17 14:30:34 +08:00
Code Issues Packages Projects Releases Wiki Activity
b1d4212ddd
lowdefy/packages/docs/tutorial/tutorial-start.yaml

283 lines
12 KiB
YAML
Raw Blame History

# Copyright 2020-2022 Lowdefy, Inc
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
# http://www.apache.org/licenses/LICENSE-2.0
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
_ref:
path: templates/general.yaml.njk
vars:
pageId: tutorial-start
pageTitle: 1. Getting started
section: Tutorial
filePath: tutorial/tutorial-start.yaml
prefetchPages:
- tutorial-create-page
content:
- id: tutorial_video
type: DangerousMarkdown
properties:
DOMPurifyOptions:
ADD_TAGS:
- iframe
ADD_ATTR:
- allowfullscreen
- allow
- frameborder
content: |
<iframe
width="800"
height="470"
src="https://www.youtube.com/embed/Cd4Xxxisykg" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
- id: body_start
type: MarkdownWithCode
properties:
content: |
In this tutorial, we will be creating a simple ticketing app, that allows users to file new tickets and see a list of outstanding tickets. The app will write the ticket data to Google Sheets, and we will deploy the app using [Netlify](https://www.netlify.com).
### Requirements
The Lowdefy CLI (Command Line Interface) is needed to run the development server. To run the Lowdefy CLI you need to install Node.js at version 12 or greater. If you don't have it installed, download Node.js from https://nodejs.org/en/download/, and follow the installation steps for your computer. All of the default settings given by the installer are fine for what we need. You will also need a text editor to modify the Lowdefy configuration files.
#### Step 1.1 - Create a project directory
Create a directory (folder) on your computer where you would like to create the configuration files for your project. We will be referring to this directory as the project directory
#### Step 1.2 - Open a command line interface
Open your computer's command line interface (Windows CMD, Terminal on MacOS), and change directory (`cd`) to the project directory.
#### Step 1.3 - Initialize an app
Use the Lowdefy CLI to initialize your project.
Run the following in your terminal:
- _ref:
path: templates/cli_command.yaml.njk
vars:
id: init
command: 'npx lowdefy@latest init'
- id: body_init
type: MarkdownWithCode
properties:
content: |
This will create two files in your current working directory. The first file, called `lowdefy.yaml` is the starting point of your app's configuration. The second, called `.gitignore`, is a hidden file that tells `git`, a version control tool, not to version or upload some specific files.
> We recommend using [`npx`](https://docs.npmjs.com/cli/v7/commands/npx) to run the Lowdefy CLI, since this ensures your are always running the latest version. You can also install the CLI globally or locally using `npm install lowdefy`
- id: info_windows_paste
type: Alert
properties:
type: info
icon: AiFillInfoCircle
description: To paste into the Windows Command Prompt, you can right-click and select paste.
- id: error_already_exists
type: Alert
properties:
type: error
icon: AiOutlineFire
message: A "lowdefy.yaml" file already exists
description: If you get a 'A "lowdefy.yaml" file already exists' error, delete the "lowdefy.yaml" file in your current working directory or run the command in a new directory.
- id: body_start_dev
type: MarkdownWithCode
properties:
content: |
#### Step 1.4 - Start the development server.
Run:
- _ref:
path: templates/cli_command.yaml.njk
vars:
id: dev
command: 'npx lowdefy@latest dev'
- id: body_open_browser
type: MarkdownWithCode
properties:
content: |
Your browser should open on http://localhost:3000, and you should see the following:
- id: example1
type: PageHeaderMenu
properties:
style:
minHeight: 300px
menu:
links:
- id: welcome
type: MenuLink
properties:
title: welcome
blocks:
- id: content_card
type: Card
areas:
content:
blocks:
- id: content
type: Result
properties:
title: Welcome to your Lowdefy app
subTitle: We are excited to see what you are going to build
status: success
icon:
name: AiTwoToneHeart
color: '#f00'
areas:
extra:
blocks:
- id: docs_button
type: Button
properties:
size: large
title: Let's build something
events:
onClick:
- id: link_to_docs
type: Link
params:
url: https://docs.lowdefy.com
newTab: true
footer:
blocks:
- id: footer
type: Paragraph
properties:
type: secondary
content: |
Made by a Lowdefy 🤖
- id: error_could_not_find
type: Alert
properties:
type: error
icon: AiOutlineFire
message: Could not find "lowdefy.yaml"
description: If you get a 'Could not find "lowdefy.yaml"' error, make sure your current working directory contains the "lowdefy.yaml" file. You can verify this by running the "dir" (Windows) or "ls" (MacOS) command.
- id: body_edit
type: MarkdownWithCode
properties:
content: |
#### Step 1.5 - Open the configuration file
Open the `lowdefy.yaml` file using a text editor like [VS Code](https://code.visualstudio.com/download). The content of the file should look like this:
```yaml
lowdefy: 3.23.2
name: Lowdefy starter
pages:
- id: welcome
type: PageHeaderMenu
properties:
title: Welcome
areas:
content:
justify: center
blocks:
- id: content_card
type: Card
style:
maxWidth: 800
blocks:
- id: content
type: Result
properties:
title: Welcome to your Lowdefy app
subTitle: We are excited to see what you are going to build
icon:
name: AiTwoToneHeart
color: '#f00'
areas:
extra:
blocks:
- id: docs_button
type: Button
properties:
size: large
title: Let's build something
color: '#1890ff'
events:
onClick:
- id: link_to_docs
type: Link
params:
url: https://docs.lowdefy.com
newWindow: true
footer:
blocks:
- id: footer
type: Paragraph
properties:
type: secondary
content: |
Made by a Lowdefy 🤖
```
This configuration completely describes the app you are running.
#### Step 1.6 - Make some changes
Change some of the text in the app. Change the text `Welcome to your Lowdefy app` to `Hello __YOUR_NAME_HERE__` (filling in your own name). Save the file and browser should automatically refresh, and you should see your changes.
### YAML Files
Lowdefy apps are written using YAML files. YAML files are useful for storing structured data, like the configuration of all of the elements of your app. YAML files focus on being easily readable by humans, this means they don't use lots of syntactic elements like brackets that make it difficult for humans to read, but instead use __indentation to indicate structure__. While this does make the file easier to read, this means care has to be taken that the data structure is as you intended. If you don't have any experience using YAML, this video is a good introduction.
- id: body_yaml_vid
type: DangerousMarkdown
properties:
DOMPurifyOptions:
ADD_TAGS:
- iframe
ADD_ATTR:
- allowfullscreen
- allow
- frameborder
content: |
<iframe
id="ytplayer-yaml-video"
type="text/html"
width="800"
height="470"
src="https://www.youtube.com/embed/cdLNKUoMc6c?origin=https://docs.lowdefy.com"
allowfullscreen="true"
frameborder="0">
</iframe>
- id: body_what_happened
type: Markdown
properties:
content: |
### What happened
The Lowdefy CLI helps you develop a Lowdefy app.
We used the `npx lowdefy@latest init` command to initialize a new project. This created all the essential files.
We also used the `npx lowdefy@latest dev` command to start a development server. The development server runs a Lowdefy app locally on your computer, which can be accessed at http://localhost:3000. The development server watches your configuration files, and if any of them changes it "builds" (compiles the configuration together for the server to serve) the configuration again and refreshes the browser to show the changes.
- _ref:
path: templates/navigation_buttons.yaml
vars:
previous_page_title: Introduction
previous_page_id: introduction
next_page_title: Creating a page
next_page_id: tutorial-create-page
Reference in New Issue View Git Blame Copy Permalink