Skip to content

Commit

Permalink
add more crosslinks (#1729)
Browse files Browse the repository at this point in the history
* add more crosslinks

* fix resourceful link
  • Loading branch information
Slashek authored Oct 16, 2024
1 parent 22fb88e commit 6b4996e
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ The heart of the framework is the [the pos-module-core](https://github.com/Platf
* Encapsulate your business rules in [Commands](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#command-workflow) — This makes it easier to write unit-ish tests and to reuse code across your application.
* Encapsulate your GraphQL queries in [Query](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#queries--accessing-data) object - This makes it easier to re-use the query and allows you to encapsulate additional data processing if needed, provide extra validation for the query parameters, set defaults etc.
* Use [Events](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#events) to broadcast that something has happened in the system to take additional action asynchronously — Following this pattern will make your code easier to maintain and understand, as well as provide necessary debug information in case the system does not behave as expected.
* Follow [Resourceful route naming convention](resourceful-route-naming-convention) to organize your [Pages](/developer-guide/pages/pages)
* Follow [Resourceful route naming convention](#resourceful-route-naming-convention) to organize your [Pages](/developer-guide/pages/pages)
* Use [Status implementation](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#status-handling) to keep track of resource's state Whenever you need to change a resource's status (for example, if you have a resource `Article` and would like to have states like `draft` and `published` to decide whether it should be publicly available), you can use this pattern to implement it. Usually, you will want to use it in combination with Events (to notify the system that the state has been changed, such as `article_published`, `order_cancelled`).
* Use [pos-module-users](https://github.com/Platform-OS/pos-module-user) module for authentication and authorization — It provides not only a great starting point for registration, sign-in, and password reset features that most applications require nowadays, but also an RBAC implementation that you can extend to your needs.
* Use [pos-module-tests](https://github.com/Platform-OS/pos-module-tests) to add unit-ish tests to all your commands, minimizing regression bugs caused by modifying business logic.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ metadata:
converter: markdown
---

To implement the _Contact Us_ form, we'll create a homepage with two input fields: `email` and `body`, where users can enter their contact information.
To implement the _Contact Us_ form, we'll create a homepage with two input fields: `email` and `body`, where users can enter their contact information.

{% include 'alert/tip', content: 'Creating a homepage is a bit special compared to creating a regular [page](/developer-guide/pages/pages). For detailed documentation, refer to the [Homepage](/developer-guide/pages/pages#homepage) documentation.' %}


## Requirements

* Followed all steps of the [Quick Setup Guide](/get-started/contact-us-tutorial/#quick-setup-guide) for building
* Followed all steps of the [Quick Setup Guide](/get-started/contact-us-tutorial/#quick-setup-guide) for building
* HTML knowledge

## Create a directory for pages
Expand Down Expand Up @@ -57,7 +57,7 @@ You might notice that we used `index.html.liquid` for our homepage file instead

## Using Path to the File as Default Route

The recommended approach for defining routes is to use the file path as the default route. This method uses the name of the file as the path, which enhances user experience and maintainability.
The recommended approach for defining routes is to use the file path as the default route. This method uses the name of the file as the path, which enhances user experience and maintainability.

For example, the slug of the file `app/views/pages/index.html.liquid` will automatically default to `/`, making it clear and easy to find that this file represents the homepage.

Expand All @@ -68,14 +68,14 @@ For example, the slug of the file `app/views/pages/index.html.liquid` will autom

### Exceptions and Advanced Usage

In some cases, such as creating RESTful URLs, you may need to use slugs. For example, to follow RESTful conventions for a `/contacts/create` page, you would use a slug `contacts`.
In some cases, such as creating RESTful URLs, you may need to use slugs. For example, to follow RESTful conventions for a `/contacts/create` page, you would use a slug `contacts`.

For more detailed information on using RESTful URLs, [refer to this guide](https://apiguide.readthedocs.io/en/latest/build_and_publish/use_RESTful_urls.html).
For more detailed information on using RESTful URLs, [refer to this guide](https://apiguide.readthedocs.io/en/latest/build_and_publish/use_RESTful_urls.html).

By default, use the file path for clarity and simplicity, but know that slugs are available for more complex routing needs.

{% include 'alert/tip', content: '
The homepage slug is `/`, which will work for
The homepage slug is `/`, which will work for
<ul>
<li><a href="https://example.com">https://example.com</a></li>
<li><a href="https://example.com/">https://example.com/</a></li>
Expand All @@ -86,7 +86,7 @@ By default, use the file path for clarity and simplicity, but know that slugs ar

## Deploy and check

Save your file. Since you have already enabled the [code syncing feature](/get-started/contact-us-tutorial/#step-9-enable-code-syncing) (`pos-cli sync staging`), any changes saved to the file will automatically sync with the instance.
Save your file. Since you have already enabled the [code syncing feature](/get-started/contact-us-tutorial/#step-9-enable-code-syncing) (`pos-cli gui serve staging --sync` or `pos-cli sync staging`), any changes saved to the file will automatically sync with the instance.

Now, visit your homepage URL (https://your-instance.staging.oregon.platform-os.com/) to see the _Contact Us_ form:

Expand Down
37 changes: 13 additions & 24 deletions app/views/pages/get-started/contact-us-tutorial/index.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,28 @@ converter: markdown

## Introduction

In this tutorial, we'll take a step up from the simplicity of the [To-Do list app](/get-started/build-your-first-app/) and create a _Contact Us_ form using the [platformOS core module](https://github.com/Platform-OS/pos-module-core). If you've already built your first application on platformOS, this project will help you enhance your skills and tackle a more complex challenge.
In this tutorial, we'll take a step up from the simplicity of the [To-Do list app](/get-started/build-your-first-app/) and create a _Contact Us_ form using the [DevKit mini-framework](https://documentation.platformos.com/developer-guide/modules/platformos-modules). If you've already built your first application on platformOS, this project will help you enhance your skills and tackle a more complex challenge. You will learn our best practices and naming conventions that our platformOS Senior Software Engineers recommend to use in every project developed on platformOS.

We'll build on the knowledge you gained from implementing the To-Do list app, introducing new concepts and techniques. By the end, you’ll understand how to build more sophisticated applications.

## Functionalities a Contact Us form needs

Before we start, let's outline the core functionalities of our Contact Us form:

* **Display Form on Homepage**: Show a form on the homepage with two fields: "email" and "body".
* **Display Form on Homepage**: Show a form on [the homepage](https://documentation.platformos.com/developer-guide/pages/pages#homepage) with two fields: "email" and "body".
* **Form Submission Handling**: When the form is submitted, it should trigger a POST request to the /contacts/create page.
* **Input Validation**: Implement the following Business Rules using the Command approach described in the [core module's README](https://github.com/Platform-OS/pos-module-core):
* **Input Validation**: Implement the following Business Rules using the [Command](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#commands--business-logic) approach using [Validator](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#validators) provided by [the core module](https://github.com/Platform-OS/pos-module-core):
* Ensure that the email provided by the user looks like a valid email address.
* Ensure that the body is at least 10 characters long and has no more than 200 characters.

**If input is valid:**

* Store the contact information in the database.
* Use Events (as described in the [core module's README](https://github.com/Platform-OS/pos-module-core)) to send a confirmation email to the address provided by the user with a simple static confirmation that their request was received.
* Store the contact information in the database using [Records](https://documentation.platformos.com/developer-guide/records/records-tables).
* Use [Events](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#events) provided by the [core module](https://github.com/Platform-OS/pos-module-core)) to send a confirmation email to the address provided by the user with a simple static confirmation that their request was received.
* Redirect the user to `/contact/thanks` and display a simple "Thank you" message.

**If input is invalid:**

* Redisplay the form.
* Show relevant error messages.
* Pre-fill the form with the submitted data.
Expand All @@ -41,7 +41,7 @@ Before you start implementing the _Contact Us_ form, follow these steps to get t

### Step 1: Sign up and log in to the Partner Portal

Sign up and log in to the [Partner Portal](https://partners.platformos.com/).
Sign up and log in to the [Partner Portal](https://partners.platformos.com/).

If you have already gone through [/try](https://www.platformos.com/try) or built a [To Do app](/get-started) as part of the get started process, you should already have a Partner Portal account.

Expand Down Expand Up @@ -146,34 +146,23 @@ pos-cli deploy staging

For further details, refer to the [Upload your code to an instance](/get-started/working-with-the-code-and-files/#upload-your-code-to-an-instance) guide.

### Step 9: Enable code syncing

<pre class="command-line" data-user="user" data-host="host"><code class="language-bash">
pos-cli sync staging
</code></pre>

For further details, refer to the [Upload code changes automatically when you save the file](/get-started/working-with-the-code-and-files/#upload-code-changes-automatically-when-you-save-the-file) guide.
### Step 9: Start the pos-cli GUI and enable code syncing

### Step 10: Start the pos-cli GUI

Use platformOS’s database management tool, which is part of pos-cli. Start the pos-cli GUI and sync your environment with a single command:

<pre class="command-line" data-user="user" data-host="host"><code class="language-bash">
pos-cli gui serve staging
pos-cli gui serve staging --sync
</code></pre>

Here is the proofread version of the provided content:

{% include 'alert/note', content: 'The `--sync` parameter will automatically sync your environment, so there is no need to run a separate sync command beforehand. You can either use `pos-cli sync staging` and `pos-cli gui serve staging` in separate terminal windows, or run `pos-cli gui serve staging --sync`.' %}

For further details, refer to the [Starting the GUI](/developer-guide/pos-cli/manage-database-using-pos-cli-gui.liquid#starting-the-gui) guide.
For further details, refer to the [Starting the GUI](/developer-guide/pos-cli/manage-database-using-pos-cli-gui.liquid#starting-the-gui) guide. and [Upload code changes automatically when you save the file](/get-started/working-with-the-code-and-files/#upload-code-changes-automatically-when-you-save-the-file) guide.

### Step 11: Install the platformOS VSCode Extension
### Step 10: Install the platformOS VSCode Extension

We highly recommend installing the [platformOS VSCode Extension](https://github.com/Platform-OS/platformos-check-vscode) for an easier development experience. On Windows, it works out of the box. For OSX/Linux, you'll need to manually install Ruby and [platformos-check](https://github.com/Platform-OS/platformos-check).

With these steps completed, you are now ready to start building your _Contact Us_ form. Let's dive into the details of implementing the form, setting up validations, and handling form submissions in the next sections.

{% include 'alert/note', content: 'For further details, read the [Installation and Configuration](https://documentation.platformos.com/get-started/installation-and-configuration/) chapters.' %}

{% render 'alert/next', content: 'Building the User Interface', url: '/get-started/contact-us-tutorial/building-the-ui' %}
{% render 'alert/next', content: 'Building the User Interface', url: '/get-started/contact-us-tutorial/building-the-ui' %}

0 comments on commit 6b4996e

Please sign in to comment.