Skip to content

Latest commit

 

History

History
157 lines (125 loc) · 6.44 KB

README.md

File metadata and controls

157 lines (125 loc) · 6.44 KB

Telegram Mini App client

This project contains an example of Telegram Mini App.

Telebook — is a fictional hotel booking service integrated to Telegram. It uses completely mocked data of hotels, cities and pictures.

Editor.js Logo

Features and Stack

  • 📦 Vue Telegram UI Kit
  • 📲 Declarative screens construction
  • ✈️ useTelegram() composable that simplifies usage of Telegram Web App SDK
  • ❤️‍🔥 Instant picture previews and on-device cache
  • 💎 Clean but simple architecture
  • ✨ Hot Reloading
  • 💰 Payments support

Telegram Vue UI Kit

It contains ready-to-use collection of components that could be used to create native-like views that will look perfect on iOS, Android and other devices

Read more in Telegram Vue UI Kit documentation

Get started

  1. Crate a bot

Go to @BotFather, write the /newbot command and follow instructions.

Then, call the /newapp comman to create your app. When BotFather will ask about Web App Url, start running the application as described below.

  1. Install dependencies
yarn install
  1. Copy .env.example to .env and fill the variables
cp .env.example .env
Name Description Example Where to get
VITE_WEB_HOST Web client endpoint https://xxxx-xx-xxx-xxx-xx.ngrok-free.app Use ngrok host for local development and your production host on real environemnt
VITE_API_HOST Backend endpoint https://xxxx-xx-xxx-xxx-xx.ngrok-free.app Use ngrok host for local development and your production host on real environemnt
  1. Run
Command Description
yarn dev Start dev server with Hot Reloading
yarn build Compile TS and prepare bundle for production
yarn preview Preview production bundle
yarn link Check ESLint problems
yarn link:fox Autofix ESLint problems when possible
  1. When app is running, give a link to @BotFather:

Copy the URL of your running app and send it to @BotFather if he still waiting for it during app creation process. Or call /myapps, select our bot and press Edit Web App URL button on the Inline Keyboard.

Recommended IDE Setup

Tech Stack and credits

List of libraries the project relies on

  • TypeScript
  • Vue.js 3 — reactive UI framework
  • Vite — build system
  • @twa-dev/sdk — Telegram Web App SDK wrapper and Type Definitions
  • @vueuse/core — Collection of Essential Vue Composition Utilities
  • normalize.css — makes browsers render all elements more consistently
  • Vue Router — helps handling of navigation
  • vue3-lottie — Lottie animations player

Directory structure

The directory structure introduces the simple variation of Clean Architecture. We separate the application into layers, where each layer has its own responsibility. The layers are:

  • /presentation - responsible for the UI. Contains all the UI components, screens, and assets
  • /application - responsible for the presentation-related business logic. It contains the application services, which are actually Vue Composables.
  • /domain - responsible for the domain logic. It contains the entities and business rules (domain services)
  • /infra - responsible for transport, store, and utils
client
├── application
│   ├── services
│   │   ├── ...
│   │   └── vue composables used by presentation layer
│   └── router.ts - vue-router instance
├── domain
│   ├── entities
│   │   ├── ...
│   │   └── domain entities (things from the real world)
│   └── services
│       ├── ...
│       └── domain services (business rules)
├── infra
│   ├── store
│   │   ├── ...
│   │   └── storages used by domain layer
│   ├── transport
│   │   ├── ...
│   │   └── transport layer (telebook api, etc)
│   └── utils
│       ├── ...
│       └── utils used by any layer
└── presentation
    ├── assets
    │   ├── ...
    │   └── icons, fonts, lottie, etc
    ├── components
    │   ├── ...
    │   └── Telegram Vue UI Kit
    ├── screens
    │   ├── ...
    │   └── application screens (pages) used by router
    └── styles
        ├── ...
        └── styles used by presentation layer