### Install Dependencies and Complete Setup

Source: https://developers.line.biz/en/docs/liff/cli-tool-create-liff-app

After answering all prompts, Create LIFF App installs dependencies and generates the project structure. Follow the instructions to start the development server.

```bash
yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning my-app@0.0.0: No license field
[1/4]  Resolving packages...
[2/4]  Fetching packages...
[3/4]  Linking dependencies...
[4/4]  Building fresh packages...
success Saved lockfile.
✨  Done in 25.06s.


Done! Now run:

  cd my-app
  yarn dev

```

--------------------------------

### Development Environment Setup Complete

Source: https://developers.line.biz/en/docs/liff/cli-tool-create-liff-app/index.html.md

Output indicating the successful generation of the development environment and instructions to start the app.

```bash
yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning my-app@0.0.0: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 25.06s.

Done! Now run:

  cd my-app
  yarn dev
```

--------------------------------

### Initialize a LIFF App with Prompts

Source: https://developers.line.biz/en/docs/liff/liff-cli/index.html.md

This example shows the interactive prompts for the `init` command when options are not provided. It includes channel addition, template selection, and dependency installation.

```bash
liff-cli init \
   --channel-id 1234567890 \
   --name "Brown Coffee" \
   --view-type full \
   --endpoint-url https://example.com

? Channel Secret?: ********************************
Channel 1234567890 is now added.
Welcome to the Create LIFF App
? Which template do you want to use? vanilla
? JavaScript or TypeScript? JavaScript
? Which package manager do you want to use? npm

Installing dependencies:
- @line/liff

removed 10 packages in 944ms

22 packages are looking for funding
  run `npm fund` for details

Installing devDependencies:
- vite

added 10 packages in 7s

25 packages are looking for funding
  run `npm fund` for details

Done! Now run:

  cd Brown Coffee
  npm run dev

App 1234567890-AbcdEfgh successfully created.

Now do the following:
  1. go to app directory: `cd Brown Coffee`
  2. create certificate key files (e.g. `mkcert localhost`, see: https://developers.line.biz/en/docs/liff/liff-cli/#serve-operating-conditions )
  3. run LIFF app template using command above (e.g. `npm run dev` or `yarn dev`)
  4. open new terminal window, navigate to `Brown Coffee` directory
  5. run `liff-cli serve -l 1234567890-AbcdEfgh -u http://localhost:${PORT FROM STEP 3.}/
  6. open browser and navigate to http://localhost:${PORT FROM STEP 3.}/

```

--------------------------------

### Create a New LIFF App

Source: https://developers.line.biz/en/docs/liff/cli-tool-create-liff-app/index.html.md

Run this command to start the Create LIFF App interactive setup. You can specify options to pre-configure your project.

```bash
$ npx @line/create-liff-app
```

--------------------------------

### Complete Node.js Server Example

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample/index.html.md

This is a complete example of the index.js file, integrating routing for root GET requests, webhook POST requests, and server listening. It includes necessary middleware for JSON and URL-encoded data.

```javascript
const https = require("https");
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
const TOKEN = process.env.LINE_ACCESS_TOKEN;

app.use(express.json());
app.use(
  express.urlencoded({
    extended: true,
  })
);

app.get("/", (req, res) => {
  res.sendStatus(200);
});

app.post("/webhook", function (req, res) {
  res.send("HTTP POST request sent to the webhook URL!");
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});
```

--------------------------------

### Initialize a LIFF App Interactively

Source: https://developers.line.biz/en/docs/liff/liff-cli/index.html.md

This example demonstrates the interactive prompts for the `init` command when no options are specified, guiding the user through channel ID, app name, view type, and endpoint URL.

```bash
$ liff-cli init
? Channel ID? 1234567890
? App name? Brown Coffee
? View type? full
? Endpoint URL? (leave empty for default 'https://localhost:9000') https://example.com
```

--------------------------------

### Install Dependencies and Launch LIFF App

Source: https://developers.line.biz/en/docs/liff/trying-liff-app/index.html.md

Install project dependencies using yarn and then start the LIFF app in development mode. The app will run on a local server.

```bash
yarn install
yarn dev
```

--------------------------------

### Run Create LIFF App

Source: https://developers.line.biz/en/docs/liff/cli-tool-create-liff-app

Execute this command in your terminal to start the Create LIFF App interactive setup process.

```bash
$ npx @line/create-liff-app

```

--------------------------------

### Install jwx Command Line Tool

Source: https://developers.line.biz/en/docs/messaging-api/generate-json-web-token/index.html.md

Install the jwx command line tool by cloning the repository, navigating into the directory, and running the make command. Ensure the installation path is configured for subsequent commands.

```sh
$ git clone https://github.com/lestrrat-go/jwx.git
$ cd jwx
$ make jwx
```

```text
// Example of installed path display
Installed jwx in {installed path}
```

--------------------------------

### Install JWCrypto Library

Source: https://developers.line.biz/en/docs/messaging-api/generate-json-web-token

Install the JWCrypto library using pip. This is a prerequisite for using the Python code examples.

```shell
$ pip install jwcrypto
```

--------------------------------

### Install Netlify CLI

Source: https://developers.line.biz/en/docs/liff/trying-liff-app/index.html.md

Install the Netlify command line interface globally to manage Netlify deployments.

```bash
$ npm install -g netlify-cli
```

--------------------------------

### Install Express.js

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample/index.html.md

Install the Express.js framework using npm. Express.js is a lightweight web server framework for Node.js.

```sh
npm install express
```

--------------------------------

### Start LIFF App Development Server

Source: https://developers.line.biz/en/docs/liff/cli-tool-create-liff-app/index.html.md

Command to run the LIFF app locally. This starts the Vite development server.

```bash
$ yarn dev
yarn run v1.22.19
warning package.json: No license field
$ vite

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 170ms.
```

--------------------------------

### Start LINE Login Activity

Source: https://developers.line.biz/en/docs/line-login-sdks/android-sdk/integrate-line-login

Initiates the LINE Login flow by getting the login intent and starting the activity. This method is used for app-to-app login when the LINE app is installed on the device. Ensure you have set up the TextView for the login button and defined the request code.

```java
private static final int REQUEST_CODE = 1;
...

final TextView loginButton = (TextView) findViewById(R.id.login_button);
loginButton.setOnClickListener(new View.OnClickListener() {

    public void onClick(View view) {
        try {
            // App-to-app login
            Intent loginIntent = LineLoginApi.getLoginIntent(
              view.getContext(),
              Constants.CHANNEL_ID,
              new LineAuthenticationParams.Builder()
                .scopes(Arrays.asList(Scope.PROFILE))
                        // .nonce("<a randomly-generated string>") // nonce can be used to improve security
                .build());
            startActivityForResult(loginIntent, REQUEST_CODE);
        }
        catch(Exception e) {
            Log.e("ERROR", e.toString());
        }
    }
});


```

--------------------------------

### Start LINE Login Activity

Source: https://developers.line.biz/en/docs/android-sdk/integrate-line-login

Initiates the LINE Login flow by getting a login intent and starting the activity. This method is used when the user taps a login button. Ensure the context and channel ID are provided. LINE app handles authentication if installed, otherwise redirects to a browser.

```java
private static final int REQUEST_CODE = 1;
...

final TextView loginButton = (TextView) findViewById(R.id.login_button);
loginButton.setOnClickListener(new View.OnClickListener() {

    public void onClick(View view) {
        try {
            // App-to-app login
            Intent loginIntent = LineLoginApi.getLoginIntent(
              view.getContext(),
              Constants.CHANNEL_ID,
              new LineAuthenticationParams.Builder()
                .scopes(Arrays.asList(Scope.PROFILE))
                        // .nonce("<a randomly-generated string>") // nonce can be used to improve security
                .build());
            startActivityForResult(loginIntent, REQUEST_CODE);
        }
        catch(Exception e) {
            Log.e("ERROR", e.toString());
        }
    }
});

```

--------------------------------

### Navigate to Vanilla JavaScript Implementation

Source: https://developers.line.biz/en/docs/liff/trying-liff-app/index.html.md

Change directory to the vanilla JavaScript implementation within the downloaded starter app.

```bash
cd line-liff-v2-starter/src/vanilla
```

--------------------------------

### LIFF Plugin install() Method with Context and Option

Source: https://developers.line.biz/en/docs/liff/liff-plugin

Shows the signature of the `install` method, accepting `context` and `option` arguments for initialization and customization.

```javascript
class GreetPlugin {
  constructor() {
    this.name = "greet";
  }

  install(context, option) {}
}

```

--------------------------------

### Example User ID for a Module Channel

Source: https://developers.line.biz/en/docs/partner-docs/module-technical-using-messaging-api

This is an example of a 68-digit user ID format used in module channels, starting with the letter 'L'.

```text
LUb577ef3cbe786a8da85ff8e902a03fc6-U5fac33f633e72c192759f09afc41fa28
```

--------------------------------

### Start LINE Login Activity

Source: https://developers.line.biz/en/docs/line-login-sdks/android-sdk/integrate-line-login/index.html.md

Initiates the LINE Login flow by getting a login intent and starting the activity. Requires context and channel ID. Handles both app-to-app and browser-based login.

```java
private static final int REQUEST_CODE = 1;
...

final TextView loginButton = (TextView) findViewById(R.id.login_button);
loginButton.setOnClickListener(new View.OnClickListener() {

    public void onClick(View view) {
        try {
            // App-to-app login
            Intent loginIntent = LineLoginApi.getLoginIntent(
              view.getContext(),
              Constants.CHANNEL_ID,
              new LineAuthenticationParams.Builder()
                .scopes(Arrays.asList(Scope.PROFILE))
                        // .nonce("<a randomly-generated string>") // nonce can be used to improve security
                .build());
            startActivityForResult(loginIntent, REQUEST_CODE);
        }
        catch(Exception e) {
            Log.e("ERROR", e.toString());
        }
    }
});
```

--------------------------------

### Initialize a LIFF App with Options

Source: https://developers.line.biz/en/docs/liff/liff-cli/index.html.md

Use the `init` command to create a LIFF app development environment. This command adds a channel, creates a LIFF app, and scaffolds a template. Options can be provided directly or prompted.

```bash
$ liff-cli init \
   --channel-id 1234567890 \
   --name "Brown Coffee" \
   --view-type full \
   --endpoint-url https://example.com
```

--------------------------------

### Navigate to Vanilla JavaScript Implementation

Source: https://developers.line.biz/en/docs/liff/trying-liff-app

Change the directory to the vanilla JavaScript implementation of the LIFF starter app. This prepares the environment for local development.

```bash
$ cd line-liff-v2-starter/src/vanilla

```

--------------------------------

### Initialize a LIFF App with Prompts

Source: https://developers.line.biz/en/docs/liff/liff-cli

Initializes a new LIFF app by prompting the user for necessary details like Channel ID, App name, View type, and Endpoint URL.

```bash
$ liff-cli init
? Channel ID? 1234567890
? App name? Brown Coffee
? View type? full
? Endpoint URL? (leave empty for default 'https://localhost:9000') https://example.com

```

--------------------------------

### Use Quick-fill Plugin with npm Package

Source: https://developers.line.biz/en/docs/partner-docs/quick-fill/overview

This JavaScript snippet shows how to import and use the Quick-fill plugin when installed via npm. It imports the necessary classes and then performs get and fill operations.

```javascript
import liff from "@line/liff";
import { LiffCommonProfilePlugin } from "@line/liff-common-profile-plugin";
liff.use(new LiffCommonProfilePlugin());

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

```

--------------------------------

### Initialize LIFF and Use Quick-fill Plugin

Source: https://developers.line.biz/en/docs/line-mini-app/quick-fill/overview

Initialize the LIFF SDK and use the Quick-fill plugin. This snippet demonstrates calling `liff.use()` with `LiffCommonProfilePlugin` and then using the `$commonProfile` API to get and fill data.

```javascript
liff.use(new LiffCommonProfilePlugin());
await liff.init({ liffId: "xxx" });

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);
```

--------------------------------

### Message Statistics Response Example

Source: https://developers.line.biz/en/docs/messaging-api/unit-based-statistics-aggregation

This JSON response provides detailed statistics for messages, including unique impressions, clicks, and media play events. It is returned by the Get statistics per unit endpoint.

```json
{
  "overview": {
    "uniqueImpression": 111,
    "uniqueClick": 74,
    "uniqueMediaPlayed": null,
    "uniqueMediaPlayed100Percent": null
  },
  "messages": [
    {
      "seq": 1,
      "impression": 111,
      "uniqueImpression": 111,
      "mediaPlayed": null,
      "mediaPlayed25Percent": null,
      "mediaPlayed50Percent": null,
      "mediaPlayed75Percent": null,
      "mediaPlayed100Percent": null,
      "uniqueMediaPlayed": null,
      "uniqueMediaPlayed25Percent": null,
      "uniqueMediaPlayed50Percent": null,
      "uniqueMediaPlayed75Percent": null,
      "uniqueMediaPlayed100Percent": null
    }
  ],
  "clicks": [
    {
      "seq": 1,
      "url": "https://example.com/new-item/",
      "click": 74,
      "uniqueClick": 74,
      "uniqueClickOfRequest": 74
    }
  ]
}
```

--------------------------------

### LIFF init() URL Warning Example

Source: https://developers.line.biz/en/docs/liff/release-notes/index.html.md

A warning message appears in the browser console if liff.init() is called on a URL that does not start with the LIFF app's endpoint URL. This helps identify potential issues with LIFF app features.

```text
liff.init() was called with a current URL that is not related to the endpoint URL.
https://example.com/path1/ is not under https://example.com/path1/path2/
```

--------------------------------

### Example Authorization URL with LINE Profile+ Scopes

Source: https://developers.line.biz/en/docs/partner-docs/line-profile-plus/index.html.md

Construct an authorization URL including scopes for LINE Profile+ information. Ensure 'openid' is specified to receive an ID token.

```sh
https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1234567890&redirect_uri=https%3A%2F%2Fexample.com%2Fauth%3Fkey%3Dvalue&state=123abc&scope=openid%20profile%20real_name%20gender%20birthdate%20phone%20address&bot_prompt=normal&nonce=0987654asd
```

--------------------------------

### Create and Initialize Heroku App

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample

Create a new directory for your project, initialize a Git repository, and create a new application on Heroku. Replace `{Name of your app}` with a unique name.

```sh
mkdir sample-app
cd sample-app
git init
heroku create {Name of your app}

```

--------------------------------

### Configure Start Script in package.json

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample/index.html.md

Modify the `package.json` to include a `start` script. This script tells server platforms which file to use when starting the Node.js application.

```json
{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

--------------------------------

### Configure npm Start Script

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample

Update the package.json file to specify the start script. This tells platforms like Heroku which file to use to start the server, in this case, 'index.js'.

```json
{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```

--------------------------------

### Initialize Heroku App

Source: https://developers.line.biz/en/docs/messaging-api/nodejs-sample/index.html.md

Create a new directory for your application, initialize Git, and create a new app on Heroku. Replace `{Name of your app}` with a unique name for your application.

```sh
mkdir sample-app
cd sample-app
git init
heroku create {Name of your app}
```

--------------------------------

### Example Callback URL for Successful Authorization

Source: https://developers.line.biz/en/docs/line-login/integrate-line-login-v2/index.html.md

This is an example URL demonstrating the parameters received after a user successfully authorizes your application.

```url
https://example.com/callback?code=b5fd32eacc791df&state=123abc
```