Convert Figma logo to code with AI

zhukov logowebogram

Telegram web application, GPL v3

7,949
2,353
7,949
371

Top Related Projects

25,848

Telegram Desktop messaging app

24,740

Telegram for Android source

Telegram-iOS

6,953

Cross-platform library for building Telegram clients

Experimental Telegram web client with tdlib, webassembly and react js under the hood

Telegram Web A, GPL v3

Quick Overview

Webogram is an open-source web application that provides a Telegram messenger client for browsers. It allows users to access their Telegram accounts and communicate with contacts directly through a web interface, without the need for a standalone application.

Pros

  • Cross-platform compatibility, accessible from any device with a modern web browser
  • No installation required, providing instant access to Telegram messaging
  • Open-source nature allows for community contributions and customizations
  • Supports most core Telegram features, including messaging, file sharing, and group chats

Cons

  • May have limited access to some advanced Telegram features compared to official apps
  • Performance might be slower than native applications, especially for resource-intensive tasks
  • Dependent on browser capabilities and limitations
  • Potential security concerns as messages are processed in the browser environment

Getting Started

To use Webogram:

  1. Visit the official Webogram website or a self-hosted instance.
  2. Enter your phone number associated with your Telegram account.
  3. Receive and enter the authentication code sent to your Telegram app.
  4. Once logged in, you can start messaging and using Telegram features through the web interface.

For developers who want to set up their own instance:

  1. Clone the repository:
    git clone https://github.com/zhukov/webogram.git
    
  2. Install dependencies:
    cd webogram
    npm install
    
  3. Build the project:
    npm run build
    
  4. Serve the built files using a web server of your choice.

Note: Ensure you comply with Telegram's terms of service and API usage guidelines when deploying your own instance.

Competitor Comparisons

25,848

Telegram Desktop messaging app

Pros of tdesktop

  • Native desktop application with better performance and system integration
  • Supports more features like voice calls and secret chats
  • Offers end-to-end encryption for enhanced security

Cons of tdesktop

  • Requires installation and updates, unlike web-based Webogram
  • Limited cross-platform compatibility compared to Webogram's browser accessibility
  • Larger file size and resource consumption

Code Comparison

tdesktop (C++):

void MainWindow::showSettings() {
    if (_settings) {
        _settings->showSettings();
    }
}

Webogram (JavaScript):

AppSettingsModalController.prototype.showSettings = function () {
  $modal.open({
    templateUrl: templateUrl('settings_modal'),
    controller: 'AppSettingsModalController',
    windowClass: 'settings_modal_window mobile_modal'
  });
};

Both repositories implement Telegram clients, but tdesktop is a native desktop application while Webogram is a web-based client. tdesktop offers more features and better performance, but Webogram provides easier access across platforms through web browsers. The code snippets show different approaches to implementing settings functionality, with tdesktop using C++ for desktop integration and Webogram using JavaScript for web-based interactions.

24,740

Telegram for Android source

Pros of Telegram

  • Native Android app with better performance and integration
  • Full access to device features like push notifications and contacts
  • More secure, with end-to-end encryption for secret chats

Cons of Telegram

  • Limited to Android platform
  • Requires installation and updates through app stores
  • Less accessible for quick use on various devices

Code Comparison

Telegram (Java):

public void sendMessage(String text) {
    SendMessage message = new SendMessage()
        .setChatId(chatId)
        .setText(text);
    try {
        execute(message);
    } catch (TelegramApiException e) {
        e.printStackTrace();
    }
}

Webogram (JavaScript):

AppMessagesManager.sendText(peerID, text).then(function (sentMessage) {
    $rootScope.$broadcast('history_update', {peerID: peerID});
});

Key Differences

  • Telegram is a native Android app, while Webogram is a web-based client
  • Telegram offers platform-specific features, Webogram provides cross-platform accessibility
  • Telegram uses Java for Android development, Webogram uses JavaScript for web implementation
  • Telegram has stricter security measures, Webogram focuses on ease of use and accessibility

Both projects aim to provide Telegram messaging functionality, but they target different platforms and use cases. Telegram offers a more robust, native experience for Android users, while Webogram provides a lightweight, web-based alternative accessible from various devices and browsers.

Telegram-iOS

Pros of Telegram-iOS

  • Native iOS app with better performance and integration
  • Full access to iOS-specific features and APIs
  • Official repository maintained by Telegram team

Cons of Telegram-iOS

  • Limited to iOS platform, not cross-platform like Webogram
  • Requires more development resources for platform-specific code
  • Larger codebase and potentially more complex maintenance

Code Comparison

Telegram-iOS (Swift):

class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // iOS-specific initialization
        return true
    }
}

Webogram (JavaScript):

angular.module('myApp', ['myApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
    // Web-based routing and configuration
}]);

The code snippets highlight the fundamental differences in approach:

  • Telegram-iOS uses native iOS code (Swift) and UIKit framework
  • Webogram utilizes web technologies (JavaScript, AngularJS) for cross-platform compatibility

Both repositories offer Telegram functionality, but Telegram-iOS provides a native experience for iOS users, while Webogram offers broader platform support through web technologies. The choice between them depends on specific project requirements and target audience.

6,953

Cross-platform library for building Telegram clients

Pros of td

  • Native implementation in C++, offering better performance and lower resource usage
  • Supports more Telegram features and APIs, providing a more comprehensive library
  • Cross-platform compatibility, allowing development for various operating systems

Cons of td

  • Steeper learning curve due to C++ implementation
  • Requires compilation and integration into projects, which can be more complex
  • Less suitable for web-based applications compared to Webogram

Code Comparison

td (C++):

auto client = td::Client::create();
client->send({td_api::make_object<td_api::setAuthenticationPhoneNumber>("<phone_number>")});

Webogram (JavaScript):

MtpApiManager.invokeApi('auth.sendCode', {
  phone_number: '<phone_number>',
  api_id: Config.App.id,
  api_hash: Config.App.hash
});

Summary

td is a powerful, native Telegram library with broad platform support and extensive API coverage. It excels in performance but requires more setup and C++ knowledge. Webogram, being web-based, offers easier integration for web applications but may have limitations in features and performance compared to td. The choice between them depends on the specific project requirements and development environment.

Experimental Telegram web client with tdlib, webassembly and react js under the hood

Pros of telegram-react

  • Built with modern React, offering better performance and maintainability
  • More active development and frequent updates
  • Supports more recent Telegram features and UI improvements

Cons of telegram-react

  • Smaller community and potentially fewer contributors
  • May have less comprehensive documentation compared to Webogram
  • Could be less stable due to more frequent changes and updates

Code Comparison

telegram-react (using React hooks):

const [messages, setMessages] = useState([]);
useEffect(() => {
  fetchMessages().then(setMessages);
}, []);

Webogram (using AngularJS):

$scope.messages = [];
$http.get('/api/messages').then(function(response) {
  $scope.messages = response.data;
});

Summary

telegram-react offers a more modern development experience with React, frequent updates, and support for newer Telegram features. However, Webogram may have a larger community and potentially more stable codebase due to its longer history. The code comparison highlights the difference in frameworks, with telegram-react using React hooks for state management and side effects, while Webogram relies on AngularJS's scope and HTTP service.

Telegram Web A, GPL v3

Pros of telegram-tt

  • More recent and actively maintained project
  • Utilizes modern web technologies and frameworks
  • Better performance and responsiveness

Cons of telegram-tt

  • Smaller community and less established codebase
  • May have fewer features compared to the more mature webogram

Code Comparison

telegram-tt (TypeScript)

const handleMessage = (message: ApiMessage) => {
  if (message.content.text) {
    renderTextMessage(message.content.text);
  } else if (message.content.photo) {
    renderPhotoMessage(message.content.photo);
  }
};

webogram (JavaScript)

function handleMessage(message) {
  if (message._ == 'message') {
    if (message.media && message.media._ == 'messageMediaPhoto') {
      renderPhoto(message.media.photo);
    } else {
      renderText(message.message);
    }
  }
}

The code comparison shows that telegram-tt uses TypeScript and has a more modern, type-safe approach to handling messages. It also demonstrates a cleaner structure for content type checking. Webogram, being older, uses plain JavaScript and relies on more nested conditionals for message type determination.

Both projects aim to provide web-based Telegram clients, but telegram-tt represents a more recent implementation with potential advantages in terms of maintainability and performance. However, webogram may offer a more stable and feature-complete experience due to its longer development history.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

js-standard-style

Project is DEPRECATED

The project was superseeded by 2 new official Telegram Web Apps:

Webogram — Telegram Web App

Telegram offers great apps for mobile communication. It is based on the MTProto protocol and has an Open API. I personally like Telegram for its speed and cloud-support (that makes a web app possible, unlike in the case of WA and others).

MTProto data can be carried over HTTP (SSL is also supported), so this project is my take at creating one.

That said, I'm using this app myself and I'd like to share its sources, so anyone can contribute to the development. Any help is welcome!

Interface

Here are some screenshots of the interface:

Sample screenshot 1 Mobile screenshot 2 Mobile screenshot 3

Unsupported at the moment

  • Secret chats
  • Black list
  • ...

Maintained locations

DescriptionURLType
Online Web-version (hosted on Telegram servers)https://web.telegram.org/hosted
Online Web-version (hosted on GitHub pages)https://zhukov.github.io/webogramhosted
Chrome Web Storehttps://chrome.google.com/webstore/detail/telegram/ clhhggbfdinjmjhajaheehoeibfljjnopacked
Firefox & FirefoxOS Marketplacehttps://marketplace.firefox.com/app/telegrampacked

Hosted version: the app is downloaded via HTTPS as a usual website. Will be available offline due to application cache.

Packed version: the app is downloaded at once in a package via HTTPS. The package is updated less frequently than the Web-version.

All of the apps above are submitted and maintained by @zhukov, so feel free to use them and report bugs here. Please do not report bugs which are only reproducible in different locations.

Technical details

The app is based on the AngularJS JavaScript framework, and written in pure JavaScript. jQuery is used for DOM manipulations, and Bootstrap as the CSS-framework.

Running locally

The project repository is based on angularjs-seed and includes gulp tasks, so it's easy to launch the app locally on your desktop. Install node.js.

Install dependencies with:

npm install

Optionally, run the following commands in the project directory to install gulp globally:

sudo npm install -g gulp

This will install all the needed dependencies.

Running web-server

Just run npm start (gulp watch) to start the web server and the livereload task. Open http://localhost:8000/app/index.html in your browser.

Running as Chrome Packaged App

To run this application in Google Chrome as a packaged app, open this URL (in Chrome): chrome://extensions/, then tick "Developer mode" and press "Load unpacked extension...". Select the downloaded app folder and Webogram should appear in the list.

Run npm start (gulp watch) to watch for file changes and automatically rebuild the app.

Running as Firefox OS App

To run this application in Firefox as a packaged app, open "Menu" -> "Developer" -> "WebIDE" (or hit Shift + F8). Choose "Open packaged app" from the Project menu and select the app folder.

Run npm start (gulp watch) to watch for file changes and automatically rebuild the app.

Running in production

Run npm run clean (gulp clean), then npm run build (gulp publish) to build the minimized production version of the app. Copy dist folder contents to your web server. Don't forget to set X-Frame-Options SAMEORIGIN header (docs).

Third party libraries

Besides the frameworks mentioned above, other libraries are used for protocol and UI needs. Here is the short list:

Many thanks to all these libraries' authors and contributors. A detailed list with descriptions and licenses is available here.

Licensing

The source code is licensed under GPL v3. License is available here.

Contribute