Yalo Partners

The Yalo Developer Hub

Welcome to the Yalo developer hub. You'll find comprehensive guides and documentation to help you start working with Yalo as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    API Reference

A brief tour of the Yalo CLI

Meet your customer: The Chicken Shop. Its owner, Said, has been running the shop for about 20 years. He uses Whatsapp with his suppliers to get new stock, and would really like if his customers could place orders via Whatsapp easily.

The chicken shop wants to take orders via Whatsapp.

You choose Yalo as an easy way to launch this within a day. Good choice! You go to the cafe nearby and take out your laptop, ready to start hacking.

Logging in

First, you log in with the CLI using your OAuth credentials, using the command below.

yalo login -u [email protected]

You will be asked for a token. Paste the value of $YALO_CLI_ADMIN_TOKEN.

šŸ“˜

Use the echo command in the shell to get the token for the login command

echo $YALO_CLI_ADMIN_TOKEN

Your access token will be stored in a stored in a JSON file located in $XDG_CONFIG_HOME or
~/.config. Example: ~/.config/configstore/@engyalo/yalo-cli.json.

{
    "USER_EMAIL": "[email protected]",
    "USER_CLIENT_SECRET": "cc24c3b2-ca5c-4f31-b205-c23efca36375"
}

šŸ“˜

Example values only

Replace the tokens in this guide with actual values from your system, do not paste them as-is :)

You can see your CLI configuration at any time by using the yalo config command. Now that you are log in, you're ready to create. What we are going to create today is a project and a single package belonging to that project, which we will deploy.

Projects, Packages, and Add-Ons

Yalo projects always have a three-level hierarchy:

:file-folder: project
ā””ā”€ā”€ :file-folder: package
. . . . . .ā””ā”€ā”€ :file-folder: add-on

Projects
A project corresponds to the Javascript application you are developing. Only Javascript projects are supported at the moment. The top-level project contains a README file, as well as preferences and other files for development.

Packages
A package is a component of the project which can be deployed independently. Packages are built from package templates, and are the moment are standalone products (as in the case of a Storefront), deployable independently. In the future, other package types will be added, with builds targetting applications like Yalo Studio.

Add-ons
An add-on is a bit of extra functionality added to a package. An add-on extends the package's capabilities or configures it to behave in certain ways.

Projects are containers for functionality provided by their component packages. Without a package, a project does exactly nothing! You will be using two types of package:

  • A Storefront package
  • A Storefront Extension package

The two packages will collaborate in setting up the complete functionality for this tutorial. We will get deeper into what each package level is about later in this guide For now, it's good enough just to know that there are these three levels of packaging available to you, and that we will build all things Yalo by creating and linking up these three types of objects. So let's move on to create our first project!

Environments

To switch between environments, the commands should be run with a YALO_ENV environment. by default you are configuring the staging.

YALO_ENV=production or YALO_ENV=staging

šŸš§

Support Version

SDK https://bitbucket.org/yalochat/sdk/src/master/CHANGELOG.md
YALO_CLI https://bitbucket.org/yalochat/engyalo-yalo-cli/src/master/CHANGELOG.md

Creating a project

To create a project, us the yalo create project command, like so:

YALO_ENV=staging yalo create project my-project

or by default staging 

yalo create project my-project

The command will guide you through a list of questions to complete the setup.

answer the following questions to create "my-project" project!
? description .. My Project
? version .. 0.1.0
? author .. [email protected]
? license .. MIT
? select your repository source .. bitbucket
? who is the owner of repository (https://bitbucket.com/OWNER/repo) .. yalochat
? what is the name of repository (https://bitbucket.com/yalochat/REPO) .. my-project
creating "my-project" directory... done
copying static files [########################################] 100% | 8/8
copying dynamic files [########################################] 100% | 3/3
my-project
ā”œā”€ā”€ .editorconfig
ā”œā”€ā”€ .eslintignore
ā”œā”€ā”€ .eslintrc.json
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ .npmrc
ā”œā”€ā”€ .nvmrc
ā”œā”€ā”€ .prettierrc
ā”œā”€ā”€ CHANGELOG.md
ā”œā”€ā”€ README.md
ā”œā”€ā”€ package.json
ā”œā”€ā”€ typings.json
ā””ā”€ā”€ yalo-config.yml
initializing git... done

please execute the following commands:
cd my-project && nvm use && npm i

Now change into the newly generated directory, and behold its majesty.

cd my-project
npm install

Its structure is what you would expect from a Javascript project: you have a package.json, and an eslintrc.json file, among others. So where's the Javascript? Well there isn't any yet - you need to create a package first.

This project will serve us as a collection where we're going to put one or more Storefronts. Each Storefront will have some source code and configuration which we can edit. (Anything form the name and logo, to something more advanced such as how to handle products, etc.)

Before we move on to create the package, let's make a brief stop at a project file called yalo-config.yml. This file contains the information we provided when creating this project using the CLI:

metadata:
    description: All the best stores
    version: '0.1'
    author: [email protected]
    project: my-project

šŸ“˜

CLI as Code Generator

Since the CLI is only acting as a generator - i.e. it generates code on your local machine - we could just as easily have downloaded this project from the Internet or got it by email from somebody. We will use these properties to great effect later on.

Creating a package

We will create a package which corresponds to a standalone Product: a Storefront. (This will all make more sense as you gain more experience with it, trust us.) Create a new package by using the yalo create package command.

cd my-project
yalo create package chickenshop

You will now be guided through a list of items corresponding to what is necessary for the mystore package to work:

verifying credentials... done
verifying project... done
verifying package... done (creating)
? select your package type storefront

prepare storefront chickenshop
? region .. us-east-1
? currency .. MXN
? localization .. es-MX
creating storefront/chickenshop... done

creating successfully šŸ‘‹šŸ»

~ without fear of success!

šŸ“˜

Working Directory in shell snippets

Notice that the tab in the code sample above has the name of the working directory /{project}/. This means that the command is being run in the project directory. (/mystore/, in this directory). The CLI is aware of which project and which package it is being run in. To avoid ambiguity, further commands that are run in the project or package directories will be labeled like this.

Now Let's look at was generated by the previous command.

tree packages
packages
ā””ā”€ā”€ chickenshop
    ā””ā”€ā”€ package-config.yml

The command created a packages directory and a single package under that called packages/chickenshop. A package-config.yml file with the following contents was placed there:

name: sf01
country: MX
region: us-east-1
bot:
  slug: chickenshop
storefront:
  currency: MXN
  localization: es-MX

Just like the top-level yalo-config.yml, the package-config.yml file contains everything that was collected using the command line. However, there is also an ID field. This is the ID of the resource we are creating for this product type. In our case, a Storefront ID. You might see other fields in your package-config.yml file.

šŸ“˜

Source code for these examples

Source code for these examples are available for download from the yalochat/storefront repository, in the /examples directory.

To use the example source code, copy it to your machine and use the CLI to modify and preview the storefronts.

Updated 8 days ago

A brief tour of the Yalo CLI


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.