Expert Freelance Mobile Developer for iOS, Android, and Cross-Platform Projects

How I Built an AI-Powered Telegram Content Bot in Days (Saving $400/Month per Channel)

Sun, 16 Mar 2025 00:00:00 +0700

Running a Telegram channel isn’t just about creativity—it’s a logistical nightmare. Curating content, rewriting posts, and scheduling updates can suck 20+ hours/week from your team. For businesses managing multiple channels, operational costs skyrocket.

Here’s how I automated it using Go, AI, and slashed costs by $400/month per channel—in just 7 days.

My Background: From Mobile Apps to AI Automation

As a mobile app developer specializing in native Android/iOS, Flutter, and Go (see my work here), I thrive on solving problems with new tools. When a client approached me with a Telegram channel struggling to scale, I saw a chance to merge my coding skills with AI—and further enhance my expertise in Go.

The Solution: Architecture of an AI-Powered Bot

Here’s how the system works:

Subreddit Scraper → Notion Database (API) → OpenAI Rewriter → Telegram Scheduler (Bot API)

Subreddit Scraper: Pulls trending posts using Reddit’s API.
Notion Database: Stores curated content via Notion API integration.
OpenAI Rewriter: Refines text for tone and clarity (GPT-4 API).
Telegram Scheduler: Posts content automatically using Telegram Bot API.

Key Features:

💰 $400/month Saved per Channel: Eliminated manual content curation costs.
⚡ Built in Days, Not Months: Leveraged AI tools like Cursor and Claude 3.7 Sonnet for rapid prototyping.
🌐 Scalable for Multiple Channels: Uses Go’s concurrency to manage 5+ channels simultaneously.

The Development Journey: Leveraging Go with AI

Phase 1: Enhancing Go Skills with AI Assistance

With a solid foundation in Go, I utilized Cursor to streamline the development process for:

Notion API integration (notion-client-go library)
Telegram Bot API setup (telegram-bot-api package)
OpenAI GPT-4o text rewriting

Example Early Code Snippet (Simplified):
func fetchSubredditPosts(subreddit string) []Post { ... }

Phase 2: Mastering Control

As the codebase grew, AI helpers like Claude 3.7 Sonnet provided valuable insights, though they occasionally required manual adjustments:

✅ Pros: Rapid iteration for features like scheduled posting.
❌ Cons: Over-optimized code needed careful review to maintain CI/CD pipeline integrity.

Critical Lessons:

AI-generated error handling often misses edge cases, which I addressed with Go’s robust error management.
Go’s strict typing was leveraged to ensure scalability and performance.

Why This Project Was a Game-Changer

This bot project allowed me to balance AI speed with architectural rigor:

AI ≠ “Go-ish” Code: While AI suggested Python-style try-except blocks, I ensured the use of Go’s error returns for idiomatic code.
Cost Efficiency: Go’s low memory footprint cut server costs by 40% vs. a Python prototype.
Business Impact: A client’s channel grew from 2k to 15k followers by delivering consistently engaging and high-quality AI-refined content that resonated with their audience.

Results That Matter

⏱️ 95% Time Reduction: From 20+ hours/week to 1 hour/week of maintenance.
💵 $2,400 Monthly Savings: For a client with 6 Telegram channels.
🚀 99.8% Uptime: Achieved via Go’s goroutines for background processing.

3 Lessons for AI-Driven Development

AI is a Scaffolding Tool, not a replacement for design.
Review Every Line: AI once “optimized” a function into an infinite loop, which I corrected with my Go expertise.
Document Relentlessly: AI skips comments—add them post-generation.

Let’s Automate Your Workflow

Whether you’re a business owner tired of content costs or a developer wanting to build AI tools:

📩 Contact Me to:

Deploy this Telegram bot for your channels.
Build custom AI automations (mobile apps, Flutter, Go).

Avoiding a Common Bundle Identifier Mistake in App Development

Tue, 08 Aug 2023 00:00:00 +0700

Are you a developer embarking on a new iOS/Android project? Here’s a crucial mistake to avoid from the start. Many developers, myself included, have fallen into the trap of naming the bundle identifier of their app using their personal name. I’m sharing this experience so you can sidestep this common error.

Why is this important? The bundle identifier is a unique, unchangeable aspect of your app. It’s critical if you plan to sell your app or if it gains popularity and you want to build a company around it. The bundle ID, though usually hidden, is visible in the app’s URL on the Google Play Store.

💡 The workaround is simple: Choose a generic name like “com.myapp.myapp” or “com.myawesomeapp.app”. This approach saved me during negotiations when my app, initially a personal project, attracted potential buyers. The bundle ID with my personal name was nearly a deal-breaker. It sparked discussions about creating a new app and transferring users - a tedious and avoidable task.

As you begin your app development journey, remember this advice to navigate future obstacles smoothly.

Flutter CustomPainter Animation

Mon, 11 May 2020 00:00:00 +0700

Animating CustomPainter is easy. We just need to repaint the whole canvas on each AnimationController.value change.

Create AnimationController in a StatefulWidget that is parent of the CustomPainter:

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  _MyAppState() {
    // Start the animation in 2 seconds after screen open.
    Future.delayed(Duration(seconds: 2))
        .then((_) => _animationController.forward());
  }

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
  }

  @override
  void dispose() {
    // Properly dispose the controller. This is important!
    _animationController.dispose();
    super.dispose();
  }

  ...
}

In our CustomPainter create Tween objects for each transform we want to apply. In this example, we transform object offset, scale and color. Therefore we create 3 Tweens.

class AnimatedCustomPainter extends CustomPainter {
  final _paint = Paint();
  final Animation<double> _size;
  final Animation<double> _offset;
  final Animation<Color> _color;

  AnimatedCustomPainter(Animation<double> animation)
      : _size = Tween<double>(begin: 50, end: 150).animate(animation),
        _offset = Tween<double>(begin: 200, end: 0).animate(animation),
        _color =
            ColorTween(begin: Colors.red, end: Colors.blue).animate(animation),
        super(repaint: animation);

  @override
  void paint(Canvas canvas, Size size) {
    _paint.color = _color.value;
    canvas.drawCircle(
      Offset(
        size.width / 2,
        size.height / 2 + _offset.value,
      ),
      _size.value,
      _paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Note that we call super(repaint: animation) when constructing AnimatedCustomPainter. The CustomPainter would then repaint the canvas on each animation.value change. If we don’t call super(repaint: animation), our painter won’t animate.

That’s it! The full source code can be found below:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  _MyAppState() {
    // Start the animation in 2 seconds after screen open.
    Future.delayed(Duration(seconds: 2))
        .then((_) => _animationController.forward());
  }

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
  }

  @override
  void dispose() {
    // Properly dispose the controller. This is important!
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: CustomPaint(
          painter: AnimatedCustomPainter(
            _animationController.view,
          ),
        ),
      ),
    );
  }
}

class AnimatedCustomPainter extends CustomPainter {
  final _paint = Paint();
  final Animation<double> _size;
  final Animation<double> _offset;
  final Animation<Color> _color;

  AnimatedCustomPainter(Animation<double> animation)
      : _size = Tween<double>(begin: 50, end: 150).animate(animation),
        _offset = Tween<double>(begin: 200, end: 0).animate(animation),
        _color =
            ColorTween(begin: Colors.red, end: Colors.blue).animate(animation),
        super(repaint: animation);

  @override
  void paint(Canvas canvas, Size size) {
    _paint.color = _color.value;
    canvas.drawCircle(
      Offset(
        size.width / 2,
        size.height / 2 + _offset.value,
      ),
      _size.value,
      _paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Using of Flutter Banner Widget

Mon, 28 Oct 2019 00:00:00 +0700

Banner widget is a great thing to inform users about the environment in which the application works. For example, we want to show BETA or TESTFLIGHT ribbon for beta builds, just like the default DEBUG banner warning is displayed when the app is built in debug mode.

Here is the method I’ve used to add BETA badge.

/// Adds banner to the [child] widget.
Widget _wrapWithBanner(Widget child) {
  return Banner(
    child: child,
    location: BannerLocation.topStart,
    message: 'BETA',
    color: Colors.green.withOpacity(0.6),
    textStyle: TextStyle(
        fontWeight: FontWeight.w700, fontSize: 12.0, letterSpacing: 1.0),
    textDirection: TextDirection.ltr,
  );
}

The usage is as simple as:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return _wrapWithBanner(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ));
  }
  ...
}

Note I wrap th entire MaterialApp, because I want the banner to be shown on every page of the app.

The banner can be placed on the bottom corners too

That’s it! Happy coding!

Why Flutter is better than Xcode/Swift for iOS development

Sat, 05 Oct 2019 00:00:00 +0700

I know the headline is misleading: Flutter is a framework, and Swift is a programming language. It should be “Why Dart/Flutter is better than Swift/Standard iOS SDK”. In this article I’m comparing Flutter with a classical way to develop iOS apps: using Xcode, Swift and iOS SDK.

UIKit is buggy and proprietary

UIKit is buggy. Any experienced developer faced such bugs during his career. People have even created a special website tracking those bugs: OpenRadar. The worst thing is we can’t actually do anything with them but wait for a new iOS version: iOS SDK (and UIKit) is embedded into iOS itself. And Apple Bug Reporting program shown itself from bad side. I sent a lot of bug reports, but most of them were closed due to ‘Duplicate’ reason.

The source code for iOS SDK is not publicly available. This makes debugging difficult.

iOS SDK is completely proprietary, which makes debugging hard. The only option for us is to find workarounds and hope they won’t break with the next version of iOS.

Flutter is open-source. We can pinpoint the problem and report an issue. Developers can even fix the problem on their own and commit to the Flutter repo. In any case, we are not required to wait an unknown amount of time to get the problem fixed. We can switch between Flutter releases on our own.

iOS SDK is outdated

It was released in 2009, ten years ago. It is written in Objective C and uses many of deprecated paradigms, such as selectors and KVO. The fact that these paradigms are deeply integrated into the SDK forces us to use them instead of more modern, safe and convenient options (closures, notifiers).

Apple tries to move forward though. In 2019 they introduced SwiftUI a new, declarative way to create app UI.

Swift limitations

Swift has certain annoying limitations:

No abstract classes.
No generic protocols.
No async/await (as of Swift 5.1).

Lacking of expressiveness impacts the app architecture in a negative way and forces us to find alternatives and workarounds.

Swift, iOS SDK and Xcode is unstable

No module compatibility in Swift 5 yet

Actually, Xcode is pretty stable here: it stops building your project properly every September, when a new version of iOS SDK and Xcode gets released. There are numerous ways things can go wrong: code signing, missing a required module, module incompatibility, Swift syntax change, UIKit or Foundation function change, Apple Mach-O linker error and so on. Sometimes the error message is very strange and not helpful at all. And here we are: instead of developing new features, we google the problem and try to fix it.

Things get even worse if the project is large with a lot of dependencies. We have to hope that guys maintaining our dependencies make sure they work with the new version of Swift, Xcode or iOS. This year guys from Zendesk weren’t able to submit a new version of ZendeskSDK in time, and I had to download the previous Xcode version to be able to run my project. Not fun!

Xcode is a poor development tool

Xcode is the weakest member of Swift/Xcode/iOS Dev SDK. It has too many disadvantages compared to other IDEs:

It’s buggy. It can crash when you writing a complex piece of code or building a project with many dependencies. Its source code highlighter crashes often too. The worst thing is it barely gets better from version to version.
No easy way to add extensions. Generally speaking, you stuck with default Xcode functionality and can’t really extend it. Compare it with VSCode with its own marketplace for extensions.
Xcode Autocomplete and code formatting are poor. Again, I’m comparing with VSCode: its IntelliSense greatly improves my performance, and Prettier extension does all the formatting for you for free.
Interface Builder doesn’t work properly. Sometimes it can just stop connect outlets with the code.

Conclusion

You might say that these issues are mostly environment and toolset related, not the language itself. I’d agree with that, but we write code using tools, SDKs and IDE we’re given. And Apple doesn’t do a great job with improving these tools. In fact, if you are an iOS developer, you have to use Xcode in some sort of way.

I personally found Flutter more easy to work with tool for iOS development. Dart and Flutter have their own disadvantages, but they both rapidly grows and, at least, listen for feedback from developers.

How to hire a good iOS developer

Thu, 31 May 2018 00:00:00 +0700

You’ve decided to wrap your idea into the iOS app, but don’t want a negligent developer to ruin the project and turn it into a waste of time and money? Here are a few quick tips how to understand if a developer is really good or not.

Check out his portfolio

This is a standard practice, but I still want to highlight it here. Ask the iOS developer you’re hiring to show a few pieces from previous work. They should be available on the AppStore. It’d be great if the developer you’re reviewing has projects similar to yours, but in general it’s enough if a developer has a few large projects in his portfolio.

If you’re browsing freelancers’ profiles, pay attention to feedbacks left by previous employers and the total feedback score. On Upwork the job success score shouldn’t be less than 95-97%. It’s perfect if a freelancer maintains 100% JSS and also have Top Rated badge.

No Objective-C, only Swift

This sounds rude to someone who still codes in Objective-C, but I believe that language should not be used for a new project. It’s a plus when a developer knows Objective-C, but if he’s going to pick Objective-C as a main language for your project, it’s a red flag. Most likely he doesn’t want to learn new things or he still thinks Objective-C is better than Swift (which is not true).

Swift is cleaner and less time-consuming comparing to Objective-C. That means a good Swift developer will save your budget and be more productive. Always prefer Swift developer over Objective-C developer.

He’s a good communicator

An importance of communication between you and a developer could hardly be overestimated. During the initial conversation a good iOS developer always tries to know more about a project, asks questions and suggests improvements. He’s not only focused on the app, but also cares about your business and finds ways how to increase your revenue by using the app as one more source of customers. For example, I always ask about monetization model the future client is going to choose. If I see that subscriptions could potentially make more revenue than regular In-app purchases, I let my client know about that and we discuss that further.

In other words, simple “Yes, I can do that” is not enough! ⚠️

Open-source contribution is a very good sign

We (iOS developers) use open-source libraries and frameworks all the time in our daily routine. If a freelancer you’re hiring has his own open source projects or he’s a contributor to another open source project, then he’s not a low-budget monkey coder. At least he’s willing to share his knowledge with others and he’s not afraid of that. That means a lot.

How to check whether an iOS developer is open-source contributor? Simply google his name along with “github” word, like this: “andrey gordeev github” or ask him to give you his GitHub page.

The first block shows the most popular open-source projects a developer has: more high-starred projects is better. The second block shows how the user was active during the last year. On the graph above you can see that I took my vacation in August 😄

Also, please note that answering on Stackoverflow, Quora and Reddit is a kind of open source contribution too. Having a sustained profile on such websites shows that a developer is advanced enough to solve problems on the fly and answer the questions of other developers.

Hint: Find someone to examine candidates

Some time ago I was approached to select a right candidate for iOS project. The project owner was wondering how to select the best candidate to fit his budget and asked me to help with that. He suggested to create a list of iOS-related questions and a simple coding task for possible candidates. So I did that and gave that to him. He made a job posting, collected the results and gave them back to me. I examined the results and rated each candidate based on his answers and the coding task result. The project owner made his final decision based on the rating I’ve provided.

This is a good option for someone who doesn’t need a top notch developer, but rather a medium or low budget to test out the idea.

Summary

A good iOS developer should:

Have a sustainable portfolio and reputation.
Know new languages and approaches, be on the bleeding edge of the technology and always learn new things.
Care about your business and find ways how to better than it is now.
Share his knowledge with the world, receive feedback and grow as a professional.

Remember: right candidate can lead the project to success. Wrong candidate can only fail it. Good luck with the projects!

Save AVPlayerItem and play from cache in iOS

Sat, 31 Mar 2018 00:00:00 +0700

Let’s say we want to play a track from the server using AVKit’s AVPlayer. However, it’d be quite expensive to download the track over and over again. To reduce network traffic and preserve iPhone’s battery it’s better to cache the downloaded track on the user’s device after it’s downloaded in the first time. As we know, reading from disk is much cheaper in terms of resources than downloading a file over the network.

Unfortunately, AVPlayerItem doesn’t cache the downloaded data out of the box, so we need to do some work. Luckily, there are open-source repos covering that. We’ll use https://github.com/neekeetab/CachingPlayerItem for accessing the track’s data and https://github.com/hyperoslo/Cache for caching. In short, CachingPlayerItem is a simple subclass of AVPlayerItem exposing methods for retrieving the track’s data.

Here’s what we’d need to do:

Get raw track data from CachingPlayerItem when it’s downloaded.
Store raw data to the disk cache.
When starting playing a track first check if it’s cached. If yes, play from cache. If no, stream it from the server using CachingPlayerItem.

I’ve prepared a simple class doing that:

import AVKit
import Cache

class AudioPlayerWorker {
    private var player: AVPlayer!

    let diskConfig = DiskConfig(name: "DiskCache")
    let memoryConfig = MemoryConfig(expiry: .never, countLimit: 10, totalCostLimit: 10)

    lazy var storage: Cache.Storage? = {
        return try? Cache.Storage(diskConfig: diskConfig, memoryConfig: memoryConfig)
    }()

    // MARK: - Logic

    /// Plays a track either from the network if it's not cached or from the cache.
    func play(with url: URL) {
        // Trying to retrieve a track from cache asynchronously.
        storage?.async.entry(ofType: Data.self, forKey: url.absoluteString, completion: { result in
            let playerItem: CachingPlayerItem
            switch result {
            case .error:
                // The track is not cached.
                playerItem = CachingPlayerItem(url: url)
            case .value(let entry):
                // The track is cached.
                playerItem = CachingPlayerItem(data: entry.object, mimeType: "audio/mpeg", fileExtension: "mp3")
            }
            playerItem.delegate = self
            self.player = AVPlayer(playerItem: playerItem)
            self.player.automaticallyWaitsToMinimizeStalling = false
            self.player.play()
        })
    }

}

// MARK: - CachingPlayerItemDelegate
extension AudioPlayerWorker: CachingPlayerItemDelegate {
    func playerItem(_ playerItem: CachingPlayerItem, didFinishDownloadingData data: Data) {
        // A track is downloaded. Saving it to the cache asynchronously.
        storage?.async.setObject(data, forKey: playerItem.url.absoluteString, completion: { _ in })
    }
}

Feel free to use this code in your projects!

Creating In-app purchase records on iTunes Connect programmatically

Thu, 14 Sep 2017 00:00:00 +0700

One day you face a cruel reality: you need to create a lot of In-app purchases (IAPs) on iTunes Connect. You could do that manually, but, obviously, that’s not an optimal way. Why suffer if we can automate this? We’re developers, after all.

You’ve probably heard about fastlane - a great toolset for automating the deployment process for iOS developers. Luckily it also includes spaceship - a Ruby library to access the Apple Developer Center and the iTunes Connect portals. Spaceship also lets us to create/edit/delete IAPs and subscriptions via command line, though this functionality is not properly documented yet.

To start using spaceship, you need to install fastlane first.

Then, type irb in your terminal to launch Interactive Ruby shell and execute require "spaceship".

To log in to iTunes Connect, perform this command:

Spaceship::Tunes.login("user@email.com", "password")

After successful login find your app using bundle id:

app = Spaceship::Tunes::Application.find("com.your.app")

You can even create a new app by using Spaceship::Tunes::Application.create command. See docs for more info.

This command lists all In-app purchases for your app:

app.in_app_purchases.all

To create a non-consumable IAP:

app.in_app_purchases.create!(
type: Spaceship::Tunes::IAPType::NONCONSUMABLE, 
versions: {
  "en-US" => {
    name: "Display name",
    description: "Description has at least 10 characters"
  }
},
reference_name: "IAP reference name",
product_id: "com.your.app.consumable",
cleared_for_sale: true,
review_notes: "A note for a reviewer",
review_screenshot: "/Users/you/Desktop/iap.jpg", 
pricing_intervals: 
  [
    {
      country: "WW",
      begin_date: nil,
      end_date: nil,
      tier: 1
    }
  ] 
)

This code creates 10 consumable IAPs with different tiers, starting from Tier 1:

10.times do |n|
  i = n + 1
  puts i;
  app.in_app_purchases.create!(
    type: Spaceship::Tunes::IAPType::CONSUMABLE, 
    versions: {
      "en-US" => {
        name: "Tier #{i}",
        description: "Description for Tier #{i}"
      }
    },
    reference_name: "Tier #{i}",
    product_id: "com.your.app.#{i}",
    cleared_for_sale: true,
    review_screenshot: "/Users/you/Desktop/iap.jpg", 
    pricing_intervals: 
      [
        {
          country: "WW",
          begin_date: nil,
          end_date: nil,
          tier: i
        }
      ] 
  )
end

As of now, this feature isn’t documented in fastlane/spaceship docs. For more information of using this API check out this pull request: https://github.com/fastlane/fastlane/pull/7834. It also has examples how to create in-app subscriptions programmatically.

Hope this will help you to increase your producivity! 👍

Displaying a video with transparent background in iOS app

Sat, 01 Jul 2017 00:00:00 +0700

Recently I faced a problem in one of my ongoing projects: we wanted to display an animation with sound on iPad. First, I planned to simply use UIImageView and CAKeyframeAnimation with a sequence of sprites passed to it, but it’s very hard to synchronize sound with CAKeyframeAnimation.

Then I thought: SpriteKit has SKActions, which could handle both sprite sequence animation and sounds! The idea was great, I quickly implemented a prototype of the scene, but it was declined either. The point is we have a large sequence (~70 pieces) of large sprites (~1400px X 1100px). So each sequence frame ate (1400px * 1100px * 8 bits/channel) / 1024*1024 = 10.68 MBytes of RAM. 70 pieces took more than 700 MBytes, which was unacceptable for older iPads. SpriteKit wasn’t a good option in my case.

Apparently, video would fit our needs better, as we want to play both rich animation and sound. The only problem was to have the video with transparent background somehow. As you will see, this is possible and works just great.

I googled a lot and finally found a similar question on StackOverflow with interesting answer: Matthew Clark suggested to use GPUImage library with GPUImageChromaKeyBlendFilter. In its simplest form the code would look like this:

import UIKit
import GPUImage
import AVFoundation

class VideoView: GPUImageView {
    var movie: GPUImageMovie!
    var filter: GPUImageChromaKeyBlendFilter!
    var sourcePicture: GPUImagePicture!
    var player = AVPlayer()

    func configureAndPlay(fileName: String) {
        guard let url = Bundle.main.url(forResource: fileName, withExtension: "mp4") else { return }
        let playerItem = AVPlayerItem(url: url)
        player.replaceCurrentItem(with: playerItem)

        filter = GPUImageChromaKeyBlendFilter()
        filter.thresholdSensitivity = 0.15
        filter.smoothing = 0.3
        filter.setColorToReplaceRed(1, green: 0, blue: 1)

        movie = GPUImageMovie(playerItem: playerItem)
        movie.playAtActualSpeed = true
        movie.addTarget(filter)
        movie.startProcessing()

        let backgroundImage = UIImage(named: "transparent.png")
        sourcePicture = GPUImagePicture(image: backgroundImage, smoothlyScaleOutput: true)!
        sourcePicture.addTarget(filter)
        sourcePicture.processImage()

        filter.addTarget(self)
        player.play()
    }
}

configureAndPlay(fileName:) method takes the video’s file name, instantiates AVPlayerItem with the file’s url and attaches it to the player. Then the method sets up a filter chain, bypassing our video through GPUImageChromaKeyBlendFilter, which replaces the background color (magenta in our case) with the transparent color.

Since GPUImageChromaKeyBlendFilter expects two GPUImageInputs, we can’t just pass the transparent color. We have to pass a transparent image of any size, wrapped into GPUImagePicture instance. That’s why we need transparent.png.

A nice thing is that AVPlayer allows us to control a playback, and GPUImage responds to it! E.g. if you call player.seek(to: kCMTimeZero), the view will display the first frame of the video.

How to prepare a video file

AVPlayer supported formats are listed here: https://stackoverflow.com/questions/21879981/avfoundation-avplayer-supported-formats-no-vob-or-mpg-containers. I used and tested only mp4 with libx264 codec.

The video file must have a solid background. VideoView example above requires the background in magenta color, but you are free to choose any. Don’t forget to adjust filter.setColorToReplaceRed(1, green: 0, blue: 1) according to the selected color. Currently it expects magenta.

Make sure the background color doesn’t interfere with other colors on the video. You can also play with thresholdSensitivity and smoothing properties.

Conclusion

As you can see, sometimes using a video is a better option to display animation with transparent background in iOS app. GPUImage provides us with everything we need to achieve that.

Github repo: https://github.com/agordeev/VideoTransparentBackground

How to create overlay view controller using protocols in Swift

Tue, 18 Apr 2017 00:00:00 +0700

All of us sometimes need to display overlay views in our iOS apps: informational or error messages, confirmation screens and so on. Usually I use child view controllers for that, and I have to write the boilerplate code of adding and presenting overlays all the time. It’s definitely a field for optimization!

Let’s start with creating UI for the overlay using storyboards. As you know, it’s a good idea to have a separate view controller for the overlay, so it’s not mixed up with the parent view controller’s logic and UI. For demonstration purposes I created simple MessageViewController:

Presenting it on the parent view controller requires us to implement something like this method:

func addReusableViewController() {
    guard let vc = storyboard?.instantiateViewController(withIdentifier: "MessageViewController") as? MessageViewController else { return }
    vc.willMove(toParentViewController: self)
    addChildViewController(vc)
    containerView.addSubview(vc.view)
    vc.didMove(toParentViewController: self)
}

Pollutes our parent view controller too much. After thinking about this I’ve decided to move the presentation logic to a protocol and its extension. In this case I could easily extend my MessageViewController by this protocol, without any subclassing. This gives me a flexibility, so necessary if I want to evolve my project further.

OverlayViewController protocol

So basically the protocol is quite simple:

protocol OverlayViewController: class {
    var overlaySize: CGSize? { get }
    func presentOverlay(from parentViewController: UIViewController)
    func dismissOverlay()
}

In Swift, protocols functions can’t have bodies, but we can extend our protocol and provide implementation. In Swift this is called protocol’s default implementation and here how it looks like:

extension OverlayViewController where Self: UIViewController {
    var overlaySize: CGSize? {
        return nil
    }
    /// Just a random number. We use this to access blackOverlayView later after we've added it.
    private var blackOverlayViewTag: Int {
        return 392895
    }

    /// Presents the current view controller as an overlay on a given parent view controller.
    ///
    /// - Parameter parentViewController: The parent view controller.
    func presentOverlay(from parentViewController: UIViewController) {
        // Dim out background.
        let parentBounds = parentViewController.view.bounds
        let blackOverlayView = UIView()
        blackOverlayView.backgroundColor = UIColor.black.withAlphaComponent(0.2)
        blackOverlayView.frame = parentBounds
        blackOverlayView.alpha = 0.0
        blackOverlayView.isUserInteractionEnabled = true
        blackOverlayView.tag = blackOverlayViewTag
        parentViewController.view.addSubview(blackOverlayView)

        let containerView = UIView()
        if let overlaySize = overlaySize {
            // The user has provided the overlaySize.
            let x = (parentBounds.width - overlaySize.width) * 0.5
            let y = (parentBounds.height - overlaySize.height) * 0.5
            containerView.frame = CGRect(x: x, y: y, width: overlaySize.width, height: overlaySize.height)
        } else {
            // No overlaySize provided. By default we have small paddings at every edge.
            containerView.frame = parentBounds.insetBy(dx: parentBounds.width*0.05,
                                                       dy: parentBounds.height*0.05)
        }

        // Adding a shadow.
        containerView.layer.shadowColor = UIColor.black.cgColor
        containerView.layer.shadowRadius = 10.0
        containerView.layer.shadowOpacity = 0.4
        containerView.layer.shadowOffset = CGSize.zero

        parentViewController.view.addSubview(containerView)

        // Round corners.
        view.layer.cornerRadius = 8.0
        view.clipsToBounds = false

        // Adding to the parent view controller.
        parentViewController.addChildViewController(self)
        containerView.addSubview(self.view)
        // Fit into the container view.
        constraintViewEqual(view1: containerView, view2: self.view)
        self.didMove(toParentViewController: parentViewController)

        // Fade the overlay view in.
        containerView.alpha = 0.0
        containerView.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
        UIView.animate(withDuration: 0.3) {
            containerView.alpha = 1.0
            containerView.transform = .identity
            blackOverlayView.alpha = 1.0
        }
    }

    /// Removes the current view controller from the parent view controller with animation.
    func dismissOverlay() {
        guard let containerView = view.superview else { return }
        let blackOverlayView = containerView.superview?.viewWithTag(blackOverlayViewTag)
        UIView.animate(withDuration: 0.3, animations: {
            blackOverlayView?.alpha = 0.0
            containerView.alpha = 0.0
            containerView.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
        }) { _ in
            self.removeFromParentViewController()
            containerView.removeFromSuperview()
            blackOverlayView?.removeFromSuperview()
        }
    }

    /// Sticks child view (view1) to the parent view (view2) using constraints.
    private func constraintViewEqual(view1: UIView, view2: UIView) {
        view2.translatesAutoresizingMaskIntoConstraints = false
        let constraint1 = NSLayoutConstraint(item: view1, attribute: .top, relatedBy: .equal, toItem: view2, attribute: .top, multiplier: 1.0, constant: 0.0)
        let constraint2 = NSLayoutConstraint(item: view1, attribute: .trailing, relatedBy: .equal, toItem: view2, attribute: .trailing, multiplier: 1.0, constant: 0.0)
        let constraint3 = NSLayoutConstraint(item: view1, attribute: .bottom, relatedBy: .equal, toItem: view2, attribute: .bottom, multiplier: 1.0, constant: 0.0)
        let constraint4 = NSLayoutConstraint(item: view1, attribute: .leading, relatedBy: .equal, toItem: view2, attribute: .leading, multiplier: 1.0, constant: 0.0)
        view1.addConstraints([constraint1, constraint2, constraint3, constraint4])
    }
}

As you can see, the protocol encapsulates the logic of presenting/dismissing itself on/from the given parent view controller. It also adds a shadow and rounded corners to the overlay.

Now defining an overlay is as simple as:

class MessageViewController: UIViewController, OverlayViewController {
    let overlaySize: CGSize? = CGSize(width: UIScreen.main.bounds.width * 0.8, height: 160.0)

    @IBAction func closeButtonPressed() {
        dismissOverlay()
    }
}

OverlayHost protocol

However, we still need to instantiate the overlay view controller from storyboard and tell it to present itself. One of options is to have this method in each view controller, which wants to present the overlay:

func presentOverlay() {
    let identifier = String(describing: MessageViewController.self)
    guard let overlay = storyboard?.instantiateViewController(withIdentifier: identifier) as? OverlayViewController else { return }
    overlay.presentOverlay(from: self)
}

We can move this method into a base class to preserve DRY principle. However, it’s easy to come up with the huge base class having many methods and pretty hard to refactor and maintain. And, after all, there is also SOLID principle we should follow.

The similar case was covered in my previous article about Reusing a view controller between screens. My suggestion is to encapsulate the logic into a protocol with extension again:

protocol OverlayHost {
    func showOverlay<T: OverlayViewController>(type: T.Type, fromStoryboardWithName storyboardName: String) -> T?
    func showOverlay<T: OverlayViewController>(identifier: String, fromStoryboardWithName storyboardName: String) -> T?
}

extension OverlayHost where Self: UIViewController {
    @discardableResult
    func showOverlay<T: OverlayViewController>(type: T.Type, fromStoryboardWithName storyboardName: String) -> T? {
        let identifier = String(describing: T.self)
        return showOverlay(identifier: identifier, fromStoryboardWithName: storyboardName)
    }

    @discardableResult
    func showOverlay<T: OverlayViewController>(identifier: String, fromStoryboardWithName storyboardName: String) -> T? {
        let storyboard = UIStoryboard(name: storyboardName, bundle: nil)
        guard let overlay = storyboard.instantiateViewController(withIdentifier: identifier) as? T else { return nil }
        overlay.presentOverlay(from: self)
        return overlay
    }
}

The first method in the protocol would show the overlay view controller, which is located in the given storyboard. This is a generic method, and the type must conform to OverlayViewController protocol we’ve defined before.

The second method is more concrete, and can be used if the view controller’s identifier differs from its class name (which is uncommon). Both methods are generic to constrain the type we’re passing to OverlayViewController descendant.

With this protocol the parent view controller would look like this:

class ViewController: UIViewController, OverlayHost {
    @IBAction func showOverlayButtonPressed() {
        showOverlay(type: MessageViewController.self, fromStoryboardWithName: "Main")
    }
}

To summarize, with OverlayViewController all what you need is to:

Define parent and overlay view controllers on storyboard.
Make parent view controller conformable to OverlayHost protocol.
Make overlay view controller conformable to OverlayViewController protocol.
Call showOverlay(_:) method on parent view controller.
Call dismissOverlay() when the user pressed Dismiss button on overlay view controller.

That’s it!

Github repo: https://github.com/agordeev/OverlayViewController