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

SDK-5434: Update docs #2412

Merged
merged 14 commits into from
Jan 23, 2024
Merged
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
83 changes: 53 additions & 30 deletions docs/acp/user/develop-an-app/develop-an-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,35 @@ This document will walk you through the process of developing an app using Spryk

{% info_block infoBox "Development guidelines" %}

Development guidelines for ACP apps contains general rules how to design an app and write code for it.
ACP apps are based on the [mini-framework](https://github.com/spryker-projects/mini-framework), which is its turn is based on the Spryker Framework. Therefore, we recommend following the same rules that are applicable for the [Spryker project development](https://docs.spryker.com/docs/scos/dev/guidelines/project-development-guidelines.html#updating-spryker).
Development guidelines for ACP apps contain general rules on how to design an app and write code for it.
ACP apps are based on the [mini-framework](https://github.com/spryker-projects/mini-framework), which in its turn is based on the Spryker Framework. Therefore, we recommend following the same rules that are applicable for the [Spryker project development](https://docs.spryker.com/docs/scos/dev/guidelines/project-development-guidelines.html#updating-spryker).

{% endinfo_block %}

## Prerequisites

Before you begin, ensure that you have the following prerequisites in place:
Before you begin, make sure that the following prerequisites are met:

- Completed the [thought process](#thought-process) for your app.
- An empty GitHub repository.
- A local project directory for your app (for example, `/www/my-app`).
- [DockerSDK](https://github.com/spryker/docker-sdk) installed globally.
- You have completed the [thought process](#thought-process) for your app.
- There is an empty GitHub repository.
- There is a local project directory for your app (for example, `/www/my-app`).
- [DockerSDK](https://github.com/spryker/docker-sdk) is installed globally.

Make sure you have the Spryker Docker SDK, Git, and an empty repository for your app code.

{% info_block infoBox "Info" %}

[Download](https://github.com/spryker-projects/mini-framework) the completed example from the Mini-Framework.
[Download](https://github.com/spryker-projects/mini-framework/tree/examples/acp/create-an-app-final) the completed example from the Mini-Framework.

{% endinfo_block %}

## Thought process
First, think about what your app should be capable of: what features it will bring and what data will be exchanged, not only to you but also to those interested in your app functionality. For example, what messages could be of interest to others, and what API endpoints you should provide.
## 1. Thought process
First, think about what your app should be capable of: what features it will bring and what data will be exchanged, not only to you but also to those interested in your app functionality. For example, what messages could be of interest to others and what API endpoints you should provide.

### API-first
It's strongly recommended that apps follow the API-first approach.
API-first means that your app is centered on the API. It should be possible to perform every action via the scripting language, and every piece of functionality should be available for other systems to leverage. For more information on the API-first approach, see [this blog post](https://www.algolia.com/blog/product/the-5-principles-of-api-first-development-and-what-does-api-first-even-mean/).
You need to have a clear understanding of what your app API will provide to others, and always keep that in mind when designing your app.
API-first means that your app is centered around the API. It should be possible to perform every action via the scripting language, and every piece of functionality should be available for other systems to leverage. For more information on the API-first approach, see [this blog post](https://www.algolia.com/blog/product/the-5-principles-of-api-first-development-and-what-does-api-first-even-mean/).
You need to have a clear understanding of what your app API will provide to others and always keep that in mind when designing your app.

### Schema-first

Expand All @@ -57,7 +57,7 @@ You can use the following tools to design your APIs:
- [Async API Studio](https://studio.asyncapi.com/)
- [Swagger Editor](https://editor.swagger.io/)

## Create an app
## 2. Create an app

To create an app, execute the following commands:

Expand All @@ -69,9 +69,9 @@ git add --all
git commit -m "first commit"
```

After running these commands, you will have a new local repository that needs to be linked with your remote one.
After running these commands, you get a new local repository that needs to be linked with your remote one.

If not done yet, create a new remote repository by opening your [Github account](https://github.com/newConnect). After you created a new repository, GitHub shows you instructions on how to continue. Follow the list below, as you don’t need some of the first steps proposed by GitHub since you’ve already initialized Git and you already have the `README.md` file from the cloned repository.
If not done yet, create a new remote repository by opening your [Github account](https://github.com/newConnect). After you have created the new repository, GitHub will display instructions on how to proceed. Execute the commands from the list below, as you don’t need some of the first steps proposed by GitHub since you’ve already initialized Git and you already have the `README.md` file from the cloned repository.

```bash
git branch -M main
Expand All @@ -84,38 +84,53 @@ You can also execute this step later.

{% endinfo_block %}

Now, you have done the groundwork that enables you to develop an App. You created a new repository that contains the boilerplate code for almost any App you’d like to build.
Now, you have done the groundwork that enables you to develop an app. You created a new repository that contains the boilerplate code for almost any app you’d like to build.

## Start the local development environment
### Validation

The Mini-Framework already comes with the predefined Docker configuration. Change the `deploy.dev.yml` by replacing `glue-backend.de.spryker.local` with `my-app.de.spryker.local`. After that, run the command provided in the next section at the root of your new repository.
Make sure that the project is cloned properly and has no uncommitted files.

### Boot and up your environment

Execute the following command to boot your application and start it:
## 3. Start the local development environment

To start the local development environment, you need must boot and up your environment. Do the following:

1. Clone Spryker Docker SDK to the project directory:

```bash
git clone git@github.com:spryker/docker-sdk.git docker
```

2. Execute the following command to boot your application and start it:

```bash
docker/sdk boot deploy.dev.yml
docker/sdk up
```

3. Validate if everything is set up correctly. Do the following:

- Make sure that all the commands are executed without errors and the tests are successfully passed.
- Check that docker containers are started by executing the `docker/sdk ps` command.
- Make sure that `my-app.spryker.local` domain is resolved by executing the `ping my-app.spryker.local` command.

After creating the development environment, you have several ways of using the app. The easiest one is to run the test suite as follows:

```bash
docker/sdk testing codecept run
```

You will now see that your app boilerplate code is up and running.
Now, your app boilerplate code should be up and running.

## Add the app manifest files
## 4. Add the app manifest files

Before your app can be listed in the App Store Catalog, you need to add the following files.

### Manifest

The manifest file is the most important one for the app. It contains data that will be displayed in the App Store Catalog. You can use the [manifest code snippet](/docs/acp/user/develop-an-app/code-snippets/manifest-json-file.html) and update it to your needs. Add the manifest file to `config/app/manifest/en_US.json` of your app.

Manifest files must have the local name as the filename, for example, `en_US.json`, and should be placed inside the `config/app/manifest` directory.
Manifest files must have the locale name as the filename, for example, `en_US.json`, and should be placed inside the `config/app/manifest` directory.
sergeyspryker marked this conversation as resolved.
Show resolved Hide resolved

### Configuration

Expand All @@ -125,7 +140,11 @@ The configuration file contains all necessary form fields for inputs required by

The translation file contains all translations for the form fields you’ve previously defined. You can use the Hello World [example translation file](/docs/acp/user/develop-an-app/code-snippets/translation-json-file.html) and update it to your needs. Add this file to `config/app/translation.json` of your app.

## Add the registry (code)
### Validation

Make sure that all the needed configuration files have been created and populated properly.

## 5. Add the registry (code)

Every app requires default endpoints for the App Registry Service. This service acts as an intermediary between the App Store Catalog and all apps. Each app is registered in the App Registry Service and requires the following endpoints for communication:

Expand All @@ -135,38 +154,42 @@ Every app requires default endpoints for the App Registry Service. This service
The `spryker/app-kernel` module transforms the Mini-Framework into an app. It provides SyncAPI schema and code for configuration and disconnection, as well as an AsyncAPI schema and code for the AppConfigure and AppDisconnect messages.
The `spryker/message-broker-aws` module installs the necessary plugins for sending and receiving messages.

## Build the transfer objects
### Validation

After the next two steps, check the new routes in [Test the endpoints](#test-the-endpoints).

## 6. Build the transfer objects

Transfer objects are used in many places. Since you installed some modules, you also need to generate the transfers. To generate the transfers, run the following command:

```bash
docker/sdk cli console transfer:generate
```

## Update the database
## 7. Update the database

Generate the database entities and update the database:

```bash
docker/sdk cli console propel:install
```

## Test the endpoints
## 8. Test the endpoints

You can now test the `configure` request with the following snippets. Run the cURL snippets from your host machine.

### Test the /private/configure endpoint

Follow the guidelines in [Test the endpoints](/docs/acp/user/connect-an-app.html#test-the-endpoints).

## Implement business logic
## 9. Implement business logic

Your app is now ready to use, although it doesn't contain any business logic yet.
Start implementing the business logic by implementing a synchronous or asynchronous API.

## Debug your app
## 10. Debug your app

If you want to understand what is happening in the code, you can [debug your app](/docs/acp/user/develop-an-app/debug-an-app-with-xdebug.html) with XDebug and by adding `--cookie "XDEBUG_SESSION=PHPSTORM;path=/;" \` to the above cURL request.
If you want to understand what is happening in the code, you can [debug your app](/docs/acp/user/develop-an-app/debug-an-app-with-xdebug.html) with XDebug and by adding `--cookie "XDEBUG_SESSION=PHPSTORM;" \` to the above cURL request.

Entry points for setting breakpoints are the following:
- `Spryker\Glue\App\Controller\AppConfigController`
Expand Down
Loading