pizza.svelte

Pizza.svelte

Simple pizza ordering process example. Svelte SPA frontend.

Pizza Ordering Process

This is simple demo application made for ObjectReef service. Although it is very simple and does not contain much source code, it meets the requirements of a complete and functional SPA. The sample is released under the terms of the MIT license, the content of which you can find here.

The application implements a fully functional online pizza ordering business process. The model, based on a simple task management system (Octopus Mini), generates tasks for interested actors (Chef, Pizza Guy, Manager, Customer) and controls their flow between states.

Sample screens:

menu chef status

NOTE: This is only frontend part of the application. Backend source code you can find at https://github.com/HumanDialog/pizza.reef

Prerequisites

The website requires backend service launched on your local machine. To launch backend service see https://github.com/HumanDialog/pizza.reef/README.md first.

This sample based on Svelte therefore requires node.js installed on your local machine.

Launch

In the repository root directory run
npm install
and then
npm run dev

Note that this project is only an SPA application and still needs the API service running for proper operation. You can find a repository of the backend service at https://github.com/HumanDialog/pizza.reef. In the description of this project you will find more details, including how to run, compile and fill-in with sample data.

Make sure that the address of the local API service is correct. You can find the setting in the App.svelte file:

    reef.configure( {
        mode: 'local',
        ...
        local: {
            api:    "http://127.0.0.1:1996/",

In case you would like to deploy an application based on this one, be sure to set the Identity Provider parameters correctly. According to OAuth2 standards, the application should be registered as a client width clientID and clientSecret. For more information about registering new client, see ObjectReef documentation.

The parameters of the registered client, such as clientID and clientSecret must be entered in the App.svelte file`:

    reef.configure( {
        mode: 'remote',
        remote: {
            iss :      "https://objectreef.io",
            clientID : "REGISTERED_CLIENT_ID",
            clientSecret: "REGISTERED_CLIENT_SECRET",
            scope :     "openid profile email DEPLOYED_REEF_APP_ID",
            apiVersion: "v001"
            ...

Note that switching between API connection on localhost and deployed service is possible through the mode parameter:

    reef.configure( {
        mode: 'remote', // or 'local'
        ...      

Dependencies

For the sake of clarity of the example, we use the @humandialog/forms.svelte components library available under the MIT license.

Authorization is provided by the npm package @humandialog/auth.svelte available under the MIT license.

The full list of dependencies, along with their versions, can be found in the package.json file.

About ObjectReef

ObjectReef is a complete platform to design, test and deploy any high performance backend service. It ensures robust, scalability and security with zero tech debt. That Low Code Backend as a Services (BaaS) solution offers you everything you need to develop, maintain, integrate and run the software without the advanced technical knowledge.

No matter, if you are creating the simple or complex and critical product, ObjectReef is the platform, that simplifies the process of delivering the application backend. It has never been so quick and so robust.

More info you'll find at https://objectreef.dev/

Top categories

Loading Svelte Themes