DEV Community: Kevin Furjan

How to create Python library

Kevin Furjan — Mon, 23 May 2022 19:31:18 +0000

Python programming language is extremely popular not only because it is easy to use but because it has lots of third-party libraries which really help in shortening development time. But how do you make one? I wondered the same thing and decided to create a simple Python library. The process of creating a library is not exactly straightforward so I decided to author this article which will hopefully help other people who are creating Python library for the first time or who are just trying to refresh memory on a certain step.

Introduction

Article will go over how to make simple Python library. More specifically, REST API client for FreeGeoIp's API [1]. It will describe project structure, how to use setup.py, how to add unit tests to project and how to publish created library to PyPI using GitHub Actions as CI/CD solution.

Project structure

Project has straightforward and basic structure. There is one module - freegeoip_client, actual Python library we are trying to build here. tests folder which contains all unit tests and last, but not least, setup.py and setup.cfg files which are used to create Python package - more on them in Setuptools section.

python-freegeoip-client  --> project root
    ├── freegeoip_client --> Python module
    │   ├── __init__.py
    │   ├── client.py
    │   └── data
    │       └── client.cfg
    ├── setup.cfg
    ├── setup.py
    └── tests
        ├── conftest.py
        └── test_client.py

Python's `init.py` file

__init__.py allows us to mark a directory as a Python package directory which enables importing Python code from one Python file into another. Also, it can be useful to define any variable at the package level. Doing so is often convenient if a package defines something that will be imported frequently, in an API-like fashion. If you are interested in learning more about this, there is an interesting Reddit thread covering appropriate uses of __init__.py file [2].

When creating Python library, __init__.py is used to import key functions and/or classes from various modules directly into the package namespace and thus enabling end-users to use Python module in an API-like fashion.

Example __int__.py:

"""
freegeoip_client package.

Provides FreeGeoIpClient object which enables consuming
FreeGeoIp's RESTful API by providing your own API key.

Usage
-----
from freegeoip_client import FreeGeoIpClient

client = FreeGeoIpClient(api_key="some_api_key")

geo_data = client.get_geo_location()
geo_data_by_ip = client.get_geo_location_for_ip_address("8.8.8.8")
"""

from .client import FreeGeoIpClient

Unit tests

In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use.

Adding unit tests is always highly recommended since tests enable us to test edge cases which in return results in higher code quality and more robust code.

One of the more popular unit test frameworks for Python is pytest framework [3]. It makes it easy to write small, readable tests in a pythonic way. If you are not familiar with it, I would encourage you to check it out.

python-freegeoip-client project uses pytest framework for unit tests and requests-mock library for mocking API responses [4].

from requests_mock import Mocker


def test_geo_data_output(client, current_geo_data):
    with Mocker() as mock:
        mock.get(f"{client.get_api_endpoint}/?apikey=", json=current_geo_data)
        response = client.get_geo_location()

        assert isinstance(response, dict)
        assert response == current_geo_data


def test_geo_data_output_for_ip_address(client, geo_data_for_ip_address):
    with Mocker() as mock:
        mock.get(
            f"{client.get_api_endpoint}/8.8.8.8?apikey=", json=geo_data_for_ip_address
        )
        response = client.get_geo_location_for_ip_address("8.8.8.8")

        assert isinstance(response, dict)
        assert response == geo_data_for_ip_address

Setuptools

Setuptools is a collection of enhancements to the Python distutils that allow developers to more easily build and distribute Python packages, especially ones that have dependencies on other packages.

Using setuptools you package Python code into, well, a package that can be imported in different scripts, either by installing it locally or by installing it using PyPI repository. Packaging Python code can be done using setup.py file, or, the preferred way, using pyproject.toml and setup.cfg files. I am, however, using setup.py file because there is pip bug where it is not possible to install packages locally when using pyproject.toml and setup.cfg files [5].

setup.py file for this Python project:

from setuptools import find_packages, setup


def get_long_description():
    with open("README.md") as file:
        return file.read()


setup(
    name="freegeoip-client",
    version="1.0.5",
    description="FreeGeoIp's RESTful API client for Python",
    long_description=get_long_description(),
    long_description_content_type="text/markdown",
    author="Kevin Furjan",
    author_email="kfurjan@gmail.com",
    url="https://github.com/kfurjan/python-freegeoip-client",
    project_urls={
        "GitHub Project": "https://github.com/kfurjan/python-freegeoip-client",
        "Issue Tracker": "https://github.com/kfurjan/python-freegeoip-client/issues",
    },
    packages=find_packages(
        include=["freegeoip_client", "freegeoip_client.*"],
    ),
    package_data={
        "freegeoip_client": ["data/*.cfg"],
    },
    install_requires=[
        "requests==2.27.1",
    ],
    setup_requires=[
        "pytest-runner",
        "flake8==4.0.1",
    ],
    tests_require=[
        "pytest==7.1.2",
        "requests-mock==1.9.3",
    ],
    python_requires=">=3.6",
    classifiers=[
        "Intended Audience :: Developers",
        "Programming Language :: Python",
        "Programming Language :: Python :: 3",
        "Operating System :: OS Independent",
        "License :: OSI Approved :: MIT License",
        "Topic :: Software Development :: Libraries :: Python Modules",
    ],
    keywords=[
        "FreeGeoIp",
        "REST API Client",
    ],
    license="MIT",
)

If you are interested in setup.py file in more detail, there is an excellent article about it and how to use it [6].

PyPI

The Python Package Index (PyPI) is a repository of software for the Python programming language.

By default, pip - package installer for Python - uses PyPI repository as the source for retrieving package dependencies. PyPI lets you find, install, and even publish your Python packages so that they are widely available to the public.

To publish packages to PyPI, you need to register an account [7] or login with the previously registered one [8]. Once logged in to PyPI, head over to Account settings and add new API token under API tokens section. API token will be required in the next step to publish package via GitHub Actions so make sure that you saved it.

Click on Add API token button:

NOTE: For purposes of this blog, I've selected token scope as "Entire account (all projects)", but it is advised to have each API token on PyPI scoped only to a certain project.

GitHub Actions

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a completely customized workflow.

GitHub Actions are free to use with each GitHub repository. You can set it up using the Actions tab in GitHub repository and clicking on New workflow button or you can directly add .github/workflow folder to your project code with .yml file in the folder that defines certain workflow.

Before creating CI/CD workflow, we need to add previously created API token to GitHub Secrets. Open your GitHub project and go to the Settings tab. Then select Secrets and finally Actions. Click on New repository secret button on top of the page. Name repository secret as PYPI_API_TOKEN and add API token's value.

Once done with this step, we can move on to defining workflow using .yml file that is saved within .github/workflow folder.

Setting up environment and dependencies

We need to define when CI/CD workflow will run and what environment will be used.

name: Build, lint, test, and upload to PyPI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Set up Python 3.8
        uses: actions/setup-python@v2
        with:
          python-version: '3.8'

      # Install dependencies
      - name: "Installs dependencies"
        run: |
          python3 -m pip install --upgrade pip
          python3 -m pip install setuptools wheel twine flake8

Here we defined the name of the workflow, when workflow will run - on each push to main branch, and what environment will be used - latest version of Ubuntu Linux. We also defined the step which will install necessary Python dependencies.

Linting and running unit tests

Before publishing package to PyPI, we need to make sure that code is formatted correctly and that all unit tests are passing. This can be achieved by adding two additional steps to the workflow.

      # Lint
      - name: Lint with flake8
        run: |
          python3 -m flake8 freegeoip_client/
          python3 -m flake8 tests/

      # Run unit tests
      - name: Test with pytest
        run: |
          python3 setup.py test

Building and publishing to PyPI

The last step is to build the Python package - creating source distribution using sdist - and upload it to PyPI.

      # Build package
      - name: "Builds package"
        run: |
          python3 setup.py sdist

      # Publish package to PyPI
      - name: Publish a Python distribution to PyPI
        uses: pypa/gh-action-pypi-publish@release/v1
        with:
          user: __token__
          password: ${{ secrets.PYPI_API_TOKEN }}

Here we are using pypa/gh-action-pypi-publish@release/v1 GitHub Actions workflow from Marketplace to make publishing to PyPI easier [9]. Workflow will do all the heavy lifting to upload package to PyPI, we just need to provide our API token saved to repository secrets using ${{ secrets.PYPI_API_TOKEN }} syntax.

And that's it! We have GitHub actions workflow that will publish our Python library to the PyPI and make sure that code is formatted correctly, and all unit tests are passing successfully before publishing.

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went step-by-step over creating and publishing Python library to PyPI automatically using GitHub Actions CI/CD workflow.

If you like my content and find it useful, please consider following me. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

References

[1] - FreeGeoIp

[2] - What to include in init.py

[3] - pytest

[4] - requests-mock

[5] - pip bug - not possible to install packages locally

[6] - A Practical Guide to Using Setup.py

[7] - Register an account on PyPI

[8] - Log in to PyPI

[9] - pypi-publish

How to localize SwiftUI application

Kevin Furjan — Sat, 12 Feb 2022 17:56:50 +0000

By localizing your application, you are making your application more accessible to a global audience. With help of SwiftUI framework and Xcode 13, localizing your app is not particularly difficult. But how do you do it exactly? Let's see.

Localization support in SwiftUI

Localization in SwiftUI was designed to be easy. Built-in SwiftUI views that are meant to show strings on UI, for example Text, Toggle and Picker, are using LocalizedStringKey internally when user-defined strings are passed to the view. LocalizedStringKey is a special type that signals SwiftUI to look up localized strings in your bundle by passed key.

Let's look at the Text constructor in more detail.

init(_ key: LocalizedStringKey, tableName: String? = nil, bundle: Bundle? = nil, comment: StaticString? = nil)

key: The key for a string in the table identified by tableName.
tableName: The name of the string table to search. If nil, use the table in the Localizable.strings file.
bundle: The bundle containing the strings file. If nil, use the main bundle.
comment: Contextual information about this key-value pair. Using comments is very much encouraged. It gives necessary context to the key, especially if person translating text is not developer and doesn't have access to the code. Good comments should explain where the string is visible, explain context of string and explain variable in string, if variable is used.

Localization support in custom views

This also means that when creating custom views in SwiftUI, instead of regular String, use LocalizedStringKey as parameter which will display text on screen. This will make custom view ready for localization. Example below:

/// should be avoided if possible
struct CustomView: View {

    let string: String

    var body: some View {
        Text(string)
            .padding()
    }
}

/// preferred way
struct CustomView: View {

    let localizedString: LocalizedStringKey

    var body: some View {
        Text(localizedString)
            .padding()
    }
}

Returning localized strings from functions

Sometimes UI elements show some kind of state, whether it is an enum representation or something else entirely. There is usually some kind of function or computed property which returns string. Using NSLocalizedString(key:comment:) you can make that string localizable. If you are targeting iOS 15 later, prefer using String(localized:comment:).

/// prior to iOS 15
func getLocalizedString() -> String {

    /// ... some code

    return NSLocalizedString("some string", comment: "some comment")
}

/// iOS 15 and later
func getLocalizedString() -> String {

    /// ... some code

    return String(localized: "some string", comment: "some comment")
}

Xcode workflow

Up until here we went over how to adjust code to use localized strings but how to actually add localized strings to the project? Using Xcode 13 this process is pretty straightforward. Add wanted localization to project, export localizations, localize strings, import localizations.

Adding localizations

Localizations can be added to the project by opening Project configuration. Once opened, head over to Localizations section and add desired localization to the project by pressing + sign.

Exporting Localizations

Once you added localization to the project, export localizations by clicking on Product > Export Localizations.

This will create .xcloc files which can be easily opened, by double-clicking on them, and edited using Xcode. When opened, localize your strings to the desired language. Example below for Spanish language:

Note: If Export Localizations is not working properly for you, enable the "Use Compiler to Extract Swift Strings" build setting to extract LocalizedStringKeys from code when exporting for localization in Xcode.

Importing Localizations

Once you are done with translations, importing localizations is as simple as clicking Product > Import Localizations. Select .xcloc files and import them. You should see newly created Localizable.strings in Xcode project navigator which contain key value pairs.

Previewing localizations

Using SwiftUI Previews, it is extremely easy to preview localizations. Example below:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.locale, .init(identifier: "en"))

        ContentView()
            .environment(\.locale, .init(identifier: "es"))
    }
}

This will create preview which will use desired localization.

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over localizing SwiftUI application, introduction to it and how you can use it in your own projects. If you are interested in finding out more about localizing iOS applications, for example pluralization of strings, consult with references below.

If you like my content and find it useful, please consider following me. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

References

Enforce Swift style and conventions with SwiftLint

Kevin Furjan — Thu, 03 Feb 2022 17:01:24 +0000

What is a linter

Linter is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs. In other words, linter checks the source code for programmatic as well as stylistic errors. By doing that, it is helpful in identifying some common and uncommon mistakes that are made during coding, meaning that it helps in increasing the code's reliability and maintaining a higher level of code discipline.

What is SwiftLint

Well, it's a linter tool to enforce style and conventions for Swift programming language. SwiftLint enforces the style guide rules that are generally accepted by the Swift community, described in style guides like Ray Wenderlich's Swift Style Guide.

Installation

SwiftLint can be installed on OS level using Homebrew package manager with the following command: brew install swiftlint.

If you, however, want to install SwiftLint as dependency only to your project, you can do that using CocoaPods by adding pod 'SwiftLint' to your Podfile. This will download the SwiftLint binaries and dependencies in Pods/ folder during your next pod install execution.

Xcode configuration

SwiftLint can be integrated into your Xcode project to get warnings and errors displayed in the issue navigator. To enable this, click the Project in the file navigator, then click the primary app target, and go to Build Phases. Click the + and select "New Run Script Phase". Finally, add the following shell script:

if which swiftlint >/dev/null; then
  swiftlint
else
  echo "warning: SwiftLint not installed, download from https://github.com/realm/SwiftLint"
fi

Note: If you've installed SwiftLint via CocoaPods the script should look like this "${PODS_ROOT}/SwiftLint/swiftlint".

Rules

SwiftLint contains more than two hundred rules which are enforcing style and conventions for Swift programming language. Full list of SwiftLint rules can be found in Rule Directory.

Rules can be disabled or can be customized, by adjusting threshold for warnings and errors. This can be achieved using configuration file .swiftlint.yml or by disabling a rule directly in code.

Configuration file

Using .swiftlint.yml configuration file enables control over which rule is disabled/enabled and what thresholds are set for warnings and errors for a given rule. Also, it enables excluding some parts of your project, such as Pods, so SwiftLint won't check them. Configuration file needs to be manually created and added to project root directory.

Below is example of .swiftlint.yml configuration file that I personally use in SwiftUI projects.

excluded: # paths to ignore during linting
  - Carthage
  - Pods
  - Source/ExcludedFolder
  - Source/ExcludedFile.swift

disabled_rules: # rule identifiers turned on by default to exclude from running
  - multiple_closures_with_trailing_closure

force_cast: warning # implicitly
force_try:
  severity: warning # explicitly

file_length:
  warning: 400
  error: 700

type_name:
  min_length: 2 # only warning
  max_length: # warning and error
    warning: 40
    error: 50
identifier_name:
  min_length: 2 # only warning
  max_length: # warning and error
    warning: 40
    error: 50
  excluded: # excluded via string array
    - id
    - URL
    - GlobalAPIKey

This configuration file will tell SwiftLint to exclude folders from linting where project dependencies are stored. It also optimizes some rules to be easier to work with when writing Swift and SwiftUI code. Example, by disabling multiple_closures_with_trailing_closure rule.

Disabling rules in code

Rules can be disabled with a comment inside a source file with the following format: // swiftlint:disable <rule>. The rule will be disabled until the end of the file or until the linter sees a matching enable comment: // swiftlint:enable <rule>.

When writing SwiftUI code, disabling rules in code can come in handy when dealing with SwiftUI Previews which can sometimes lead to longer line length. In that case, line_length rule can be disabled with // swiftlint:disable line_length:

// swiftlint:disable line_length

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        ... some long Swift code ...
    }
}

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over SwiftLint, introduction to it and how you can use it in your own projects.

If you like my content and find it useful, please consider following me. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

References

Build REST API with Kotlin and Ktor

Kevin Furjan — Tue, 21 Dec 2021 09:34:35 +0000

According to Stack Overflow survey from 2020, Kotlin is one of the most loved programming languages, so it is safe to say that JetBrains, a company that develops Kotlin, is doing an excellent job. Kotlin is most well known as a language for developing Android applications, but it can be used for developing backend services, such as RESTful API. JetBrains is also developing a framework named Ktor that can be used for developing RESTful API with Kotlin and as you can imagine, it is pretty great.

What is REST

REST, short for Representational state transfer, is a software architectural style that was created to guide the design and development of the architecture for internet communication. REST defines a set of constraints for how the architecture of an Internet-scale system, such as the Web, should behave.

A Web API (or Web Service) conforming to the REST architectural style is a REST API.

Ktor

Ktor is a web framework made by JetBrains with Kotlin programming language. In their own words:

Ktor is a framework to easily build connected applications – web applications, HTTP services, mobile and browser applications. Modern connected applications need to be asynchronous to provide the best experience to users, and Kotlin coroutines provide awesome facilities to do it in an easy and straightforward way.

Main goals of Ktor framework are to be lightweight, unopinionated, asynchronous and testable meaning that framework itself doesn't impose what technologies project is going to use, can be easily deployable and uses Kotlin coroutines to provide asynchronous operations.

Plugins

Ktor uses concept of Plugins to extend its functionalities. A plugin is a set of common functionalities that extend application logic, such as serialization or compression.

For example, typical request-response pipeline in Ktor:

Now, using Plugins in Ktor, previous request-response pipeline can be easily extended with functionalities to something like this:

Which plugin(s) you will add to the request-response pipeline depends on your preferences and application needs. Need Authentication? Fine, just install a plugin. Exception handling? Serialization? Great, just a simple plugin installation.

Plugins are configured during the initialization phase of the server using the install function which takes a Plugin as a parameter. You can install a plugin inside the embeddedServer call.

import io.ktor.features.*

fun main() {
    embeddedServer(Netty, port = 8080) {
        install(CORS)
        install(Compression)
        // ...
    }.start(wait = true)
}

or in desired module

import io.ktor.features.*

fun Application.module() {
    install(CORS)
    install(Compression)
    // ...
}

By default, Ktor does not activate any plugin(s), and it's up to developers to install the functionality their application needs.

Some of my personal favorite plugins are:

To find all other ready-to-use plugins, head over to Generate Ktor project tool.

Build REST API

First, we need to create Ktor project. There are two ways to create one, using online Generate Ktor project tool or, if you prefer, using Ktor plugin for IntelliJ IDEA.

Once the project is created, it should already have all necessary dependencies added for Ktor itself, but we need one more for serialization.

Dependencies:

dependencies {
    implementation("io.ktor:ktor-server-core:$ktor_version")
    implementation("io.ktor:ktor-server-netty:$ktor_version")
    implementation("ch.qos.logback:logback-classic:$logback_version")
    implementation("io.ktor:ktor-serialization:$ktor_version")
    testImplementation("io.ktor:ktor-server-tests:$ktor_version")
    testImplementation("org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version")
}

Let's keep it simple and add every-tutorial-ever generic Customer class. We will use Kotlin's data class and kotlinx.serialization to serialize class to JSON, and from JSON to class in case of POST method. Since we are keeping it simple, the application will use in-memory storage. For any real-world application, you would use a database.

import kotlinx.serialization.Serializable

val customerStorage = mutableListOf<Customer>()

@Serializable
data class Customer(val id: String, val firstName: String, val lastName: String, val email: String)

Next step is to define routes. We want to respond to GET, POST, and DELETE requests on the /customer endpoint. As such, let's define our routes with the corresponding HTTP methods. Let's add a new file Routing.

Routing.kt:

fun Application.customerRouting() {
    routing {
        route("/customer") {
            get {
                if (customerStorage.isNotEmpty()) {
                    call.respond(customerStorage)
                } else {
                    call.respondText("No customers found", status = HttpStatusCode.NotFound)
                }
            }
            get("{id}") {
                val id = call.parameters["id"] ?: return@get call.respondText(
                    "Missing or malformed id",
                    status = HttpStatusCode.BadRequest
                )
                val customer =
                    customerStorage.find { it.id == id } ?: return@get call.respondText(
                        "No customer with id $id",
                        status = HttpStatusCode.NotFound
                    )
                call.respond(customer)
            }
            post {
                val customer = call.receive<Customer>()
                customerStorage.add(customer)
                call.respondText("Customer stored correctly", status = HttpStatusCode.Created)
            }
            delete("{id}") {
                val id = call.parameters["id"] ?: return@delete call.respond(HttpStatusCode.BadRequest)
                if (customerStorage.removeIf { it.id == id }) {
                    call.respondText("Customer removed correctly", status = HttpStatusCode.Accepted)
                } else {
                    call.respondText("Not Found", status = HttpStatusCode.NotFound)
                }
            }
        }
    }
}

Last step is to register previously defined routes and to install ContentNegotiation plugin so Ktor can handle serialization.

Application.kt:

fun main(args: Array<String>): Unit =
    io.ktor.server.netty.EngineMain.main(args)

fun Application.module() {
    install(ContentNegotiation) {
        json()
    }
    customerRouting()
}

Great, our simple REST API is now ready to use and to handle those sweet customer CRUD operations. :)

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over Ktor framework, introduction to it and how you can build simple REST API using Ktor and Kotlin. If you are interested in Ktor, head over to official Ktor documentation for more thorough guides and explanations.

If you like my content and find it useful, please consider following me. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

Implement YouTube-like filtering in SwiftUI

Kevin Furjan — Sun, 12 Dec 2021 10:10:35 +0000

SwiftUI has its own radio button implementation using Pickers that come with few default designs, such as .pickerStyle(.segmented) or .pickerStyle(.wheel). Pickers can be useful for implementing filtering functionality but what if you want custom design and behavior, for example YouTube-like design and behavior?

YouTube-like filtering uses horizontally scrollable view where buttons are placed, each with its own state, and selected button has different color to the others.

Requirements

Before implementing custom YouTube-like filtering, let's define a few requirements that custom view needs to meet:

view needs to mimic YouTube-like filtering
view needs to use enumerations
view needs to be generic
view needs to be stateless

State handling

For handling state, custom filter view will use Swift Enumerations. Enumerations in Swift are quite powerful and are an ideal way to filter data displayed on view once each enum case is selected. Custom filter view will also require that enum conforms to a few protocols, such as String, CaseIterable and Identifiable.

Let's imagine that the application is showing a list of cars available for purchase, and you would like to filter them based on type. In such a case you would create CarType enum to define the type of each car in the list.

CarType:

enum CarType: String, CaseIterable, Identifiable {
    var id: String { self.rawValue }
    case all, family, city, luxury, supercar
}

Explanation of why each protocol is needed:

String - we want each enum case to have its raw value represented as string, needed for Text view in SwiftUI
CaseIterable - by conforming to this protocol, you can access a collection of all the type’s cases by using the type’s allCases property, needed for ForEach loop in SwiftUI
Identifiable - to provide unique id to each enum state, needed for ForEach loop in SwiftUI

Implementing view

In order to meet previously defined requirements, custom view needs to support generics that match Enumeration model defined in previous step.

FilterRowView:

import SwiftUI

struct FilterRowView<T>: View
    where T: RawRepresentable, T: CaseIterable, T: Identifiable, T.AllCases == [T], T.RawValue == String {

    @State private var selectedFilter: T = T.allCases[0]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 15) {
                ForEach(T.allCases) { filter in
                    Button(action: {
                        withAnimation(Animation.spring().speed(1.5)) {
                            selectedFilter = filter
                        }
                    }) {
                        Text(filter.rawValue.capitalized)
                            .font(.subheadline)
                    }
                    .buttonStyle(FilterButtonStyle(isSelected: selectedFilter == filter))
                }
            }
        }
        .frame(height: 40)
    }
}

As you can see, view is using custom ButtonStyle to mimic YouTube-like design.

FilterButtonStyle:

struct FilterButtonStyle: ButtonStyle {

    let isSelected: Bool

    func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .foregroundColor(
        isSelected ? .white : .black
      )
      .padding()
      .frame(maxWidth: .infinity, maxHeight: 30)
      .background(
        isSelected ? .black : .white
      )
      .cornerRadius(24)
      .overlay(
        RoundedRectangle(cornerRadius: 24)
            .stroke(isSelected ? .white : .black, lineWidth: 0.3)
      )
  }
}

FilterRowView should now look something like this:

It's horizontally scrollable view with buttons, each with its own state, and selected button has different color to the others.

State hoisting

As you probably noticed yourself, FilterRowView doesn't really do anything so we need to add the ability to filter data, but the view must be stateless, as stated in the Requirements section.

How to do that? Using state hoisting pattern. What is that? Let's explain it.

State hoisting is a well-known pattern for developing React applications, and as of recently, Google is recommending using it when developing Jetpack Compose applications.

State hoisting is a pattern of moving state to a caller to make view stateless.

In practice that means using higher order functions, which in Swift terms, means using closures.

To start using state hoisting pattern in FilterRowView, we only need two more lines of code. One line for new parameter which will accept closure and one line to provide generic type to closure.

Updated FilterRowView:

import SwiftUI

struct FilterRowView<T>: View
    where T: RawRepresentable, T: CaseIterable, T: Identifiable, T.AllCases == [T], T.RawValue == String {

    let block: (T) -> Void
    @State private var selectedFilter: T = T.allCases[0]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 15) {
                ForEach(T.allCases) { filter in
                    Button(action: {
                        withAnimation(Animation.spring().speed(1.5)) {
                            selectedFilter = filter
                        }
                        block(filter)
                    }) {
                        Text(filter.rawValue.capitalized)
                            .font(.subheadline)
                    }
                    .buttonStyle(FilterButtonStyle(isSelected: selectedFilter == filter))
                }
            }
        }
        .frame(height: 40)
    }
}

With this, FilterRowView is completely stateless and to do anything useful, it relies on its caller.

To use this in your application, you would call FilterRowView view with something like this:

FilterRowView<CarType>(block: { type in
    viewModel.filterCars(by: type)
})

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over how to implement custom YouTube-like filtering in SwiftUI using enumerations, generics, and closures.

If you like my content and find it useful, please consider following me. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

How to add Lottie animations to SwiftUI

Kevin Furjan — Thu, 02 Dec 2021 21:18:06 +0000

Using Lottie animations is an easy and popular way to add animations to your app to have that modern look and feel. All sorts of companies use Lottie animations, from startups all the way to the big boys, such as Google, Microsoft, Spotify, and Netflix to name the few.

Using LottieFiles you have a choice to make your own animations using Lottie Editor, buying animations from creators on Lottie Marketplace or using Free Animations to get LottieFile(s) completely free of charge to add them into you project.

UIKit and SwiftUI interoperability

Unfortunately, Lottie animations cannot be added directly to SwiftUI view without some work prior to that. In order to add Lottie animation to SwiftUI, you need to implement UIViewRepresentable protocol which is a wrapper for a UIKit view that you use to integrate Lottie view into your SwiftUI view hierarchy.

Show me the code

Let's get straight to the point, just make sure you previously installed lottie-ios library using your preferred package manager, whether it is CocoaPods, Carthage or Swift Package Manager.

Add new file named LottieView and add following contents:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {

    let fileName: String

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>) { }
}

All you need to do know is add following code to your SwiftUI view: LottieView(fileName: "your-file-name") and that's it, you have fully functioning Lottie animation inside SwiftUI view.

How do I make it to play or pause

In order to make animation play or pause, a bit more coding is required. It is required to provide Coordinator to your LottieView.

What is Coordinator? Let's see what Apple says:

The system doesn’t automatically communicate changes occurring within your view to other parts of your SwiftUI interface. When you want your view to coordinate with other SwiftUI views, you must provide a Coordinator instance to facilitate those interactions. For example, you use a coordinator to forward target-action and delegate messages from your view to any SwiftUI views.

Let's see updated code:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {

    let fileName: String
    let isEnabled: Bool

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>) {
        if isEnabled {
            context.coordinator.parent.animationView.play()
        } else {
            context.coordinator.parent.animationView.stop()
        }
    }

    class Coordinator: NSObject {
        var parent: LottieView

        init(_ parent: LottieView) {
            self.parent = parent
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
}

And this is it! You can now pass isEnabled Bool value to LottieView to make it play or pause.

One final gotcha

If you are using TabView withing your SwiftUI application and you are switching between tabs you will notice that animations won't start playing automatically when you switch back to view with animations.

All you must do is add animationView.backgroundBehavior = .pauseAndRestore to makeUIView(context:) method. Now animations will pause and restore as the code itself suggests.

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over how to add Lottie animation(s) to SwiftUI view, make it reactive if needed and how to use Lottie animations with TabView.

If you like my content and find it useful, please consider following me here on DEV Community. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

Create SwiftUI app with Firebase Authentication

Kevin Furjan — Sun, 28 Nov 2021 15:39:20 +0000

SwiftUI framework is already in its third iteration and with that, it is well and truly on its way to production-ready applications. Such applications are certainly going to need some sort of authentication. Since authenticating users can be tricky, you may want to rely on third-party solutions for that, such as Firebase. Question is then, how does one integrate Firebase and Google Sign-In to SwiftUI application?

This article will show you how to create iOS application using SwiftUI, create Firebase project and then use Firebase Authentication to integrate Google Sign-In SDK to your SwiftUI application.

Within this article we will cover following topics:

Creation of Firebase project
Creation of SwiftUI Lifecycle application
Handling dependencies with CocoaPods
Handling authentication within code
Designing UI elements

Creation of Firebase project

In order to use Firebase in our SwiftUI app, we need to create new Firebase project in Firebase console. Create new project by clicking on Add project.

Once Create a project page opens, enter project name.

Next step is either enabling or disabling Google Analytics. It is not necessary for this demo, so it's up to you to enable it.

When project's Dashboard opens, click on iOS icon.

Next, fill out form for registering the app. Apple Bundle ID is important since it needs to be the same as bundle identifier, we will use later in Xcode project. Other two fields are optional. App Store ID is only needed if app will be uploaded to the App Store which we are not doing in this tutorial.

Click on Register app.
Next, we need to download GoogleService-Info.plist file which will be added to Xcode project later.

In steps 3 and 4 just click Next since we will cover them in more detail later in the tutorial. To finish registering the app, click Continue to console.

Almost finished with setting up Firebase project. Lastly, we need to enable Authentication.

Click on Authentication, and then on Get started.

Now choose Google as Sign-in method provider.

Finally, enable it by toggling Enable button, add Project public-facing name and Project support email. Save this changes by clicking on Save button.

We are done with Firebase settings and now we are moving to actual coding!

Creation of SwiftUI Lifecycle application

Next step is to actually create Xcode project. Open Xcode, select option Create a new Xcode project. Once new window opens, make sure that iOS is selected in header and then select App. Click Next.

Now we need enter some details about project.

Product Name: demo
Organization Identifier: com.firebase
Interface: SwiftUI
Language: Swift

Core Data and Tests are not needed for this tutorial, so it is up to you to include them into the project.

Click Next and then choose folder where you want to save Xcode project.

Great! We are ready for next section, handling dependencies with CocoaPods.

Handling dependencies with CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 86 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly.

To handle project dependencies, this tutorial will use CocoaPods. If CocoaPods is not installed on your development machine, follow this Getting Started guide on official CocoaPods page.

Using Terminal, navigate to your project. Use command similar to this one: cd your/project/path.

Once in your project path, initialize empty pod file by executing pod init command. Open newly created Podfile to add dependencies needed for this project.

Add following content:

target 'swiftui' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for swiftui
  pod 'Firebase/Core'
  pod 'Firebase/Auth'
  pod 'GoogleSignIn'
  pod 'SDWebImageSwiftUI'

end

To install these dependencies, execute pod install command.

Awesome! Project setup is done, and its dependencies are successfully installed.

Handling authentication within code

First step is to take GoogleService-Info.plist file we downloaded it in Creation of Firebase project section and drag&drop it into Xcode project. Once file is added to the project, we need to add REVERSED_CLIENT_ID key to project configuration.

Handling REVERSED_CLIENT_ID key

Do the following:

Open your project configuration: double-click the project name in the left tree view. Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section.
Click the + button, and add a URL scheme for your reversed client ID. To find this value, open the GoogleService-Info.plist configuration file, and look for the REVERSED_CLIENT_ID key. Copy the value of that key and paste it into the URL Schemes box on the configuration page. Leave the other fields blank.
When completed, your config should look something similar to the following (but with your application-specific values):

Now we can move on to some coding!

Adding AppDelegate

Since iOS 14 and SwiftUI 2.0, Apple added ability to include AppDelegate to SwiftUI Lifecycle app which we will need to add to our project.

Right click on project in Xcode left tree view and then select New file.... Add new Swift file named AppDelegate. Once create, add following contents to the file:

import Firebase
import GoogleSignIn

class AppDelegate: NSObject, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
    ) -> Bool {
        FirebaseApp.configure()
        return true
    }

    func application(
      _ app: UIApplication,
      open url: URL,
      options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        return GIDSignIn.sharedInstance.handle(url)
    }
}

Adding helper functions

For signInWithConfiguration:presentingViewController:callback: method we will use later, we need to provide presenting ViewController and GIDConfiguration configuration thus we need to implement two helper functions.

GIDConfigurationExtensions.swift:

import Firebase
import GoogleSignIn

extension GIDConfiguration {

    /// Get GIDConfiguration instance by providing clientID from GoogleService-Info.plist file
    /// - Returns: GIDConfiguration instance
    static func getGIDConfigurationInstance() -> GIDConfiguration {
        GIDConfiguration(clientID: FirebaseApp.app()?.options.clientID ?? "")
    }
}

UIApplicationExtensions.swift

import UIKit

extension UIApplication {

    /// Get root UIViewController of application. If for whatever reason, UIViewController cannot be accessed,
    /// invoke fatalError() since UIViewController instance is crucial for application to work properly.
    /// - Returns: root UIViewController
    static func getRootViewController() throws -> UIViewController {
        let scenes = UIApplication.shared.connectedScenes
        let windowScene = scenes.first as? UIWindowScene
        let window = windowScene?.windows.first

        guard let uiViewController = window?.rootViewController else { fatalError() }
        return uiViewController
    }
}

With this finished, we can move start implementing ViewModel.

Implementing LoginViewModel

Create new Swift file named LoginViewModel.

LoginViewModel:

import Firebase
import GoogleSignIn

final class LoginViewModel: ObservableObject {

    @Published var isUserLoggedIn = false

    func signIn() {
        do {
            let config = GIDConfiguration.getGIDConfigurationInstance()
            let uiViewController = try UIApplication.getRootViewController()

            GIDSignIn.sharedInstance.signIn(with: config, presenting: uiViewController) { user, error in
                guard error == nil else { return }
                guard user != nil else { return }
                self.isUserLoggedIn = true
          }
        } catch {
            print(error.localizedDescription)
        }
    }

    func signOut() {
        GIDSignIn.sharedInstance.signOut()
        isUserLoggedIn = false
    }
}

Designing UI elements

Now comes last piece of the puzzle. Designing UI elements using SwiftUI framework and connecting UI with business logic we implemented earlier.

LoginView

Create new SwiftUI View file named LoginView.

LoginView:

import SwiftUI

struct LoginView: View {

    @EnvironmentObject var viewModel: LoginViewModel

    var body: some View {
        VStack {
            Spacer()

            Button(action: {
                withAnimation {
                    viewModel.signIn()
                }
            }) {
                HStack {
                    Text("Sign in with google")
                        .fontWeight(.bold)
                }
            }
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(.black)
            .cornerRadius(12)
            .padding()

            Spacer()
        }
    }
}

struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}

LoginView will look something like this:

HomeView

Create new SwiftUI View file named HomeView.

HomeView:

import GoogleSignIn
import SwiftUI
import SDWebImageSwiftUI

struct UserDetailView: View {

    let user: GIDGoogleUser?

    var body: some View {
        VStack {
            HStack {
                Text(user?.profile?.name ?? "")
                    .bold()
                    .font(.title2)

                Spacer()

                WebImage(url: user?.profile?.imageURL(withDimension: 75))
                    .resizable()
                    .placeholder(
                        Image(systemName: "person.fill")
                    )
                    .indicator(.activity)
                    .transition(.fade(duration: 0.5))
                    .frame(width: 75, height: 75, alignment: .center)
                    .scaledToFit()
                    .clipShape(Circle())
            }
            HStack {
                Text(user?.profile?.email ?? "")
                    .bold()
                    .font(.subheadline)
                Spacer()
            }

            Spacer()
        }
        .padding()
        .frame(height: 150, alignment: .center)
        .background(.thickMaterial)
        .cornerRadius(12)
    }
}

struct HomeView: View {

    @EnvironmentObject var viewModel: LoginViewModel
    private let user = GIDSignIn.sharedInstance.currentUser

    var body: some View {
        VStack {
            UserDetailView(user: user)

            Spacer()

            Button(action: {
                withAnimation {
                    viewModel.signOut()
                }
            }) {
                HStack {
                    Text("Sign out")
                        .fontWeight(.bold)
                }
            }
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(.black)
            .cornerRadius(12)
            .padding()
        }
        .padding()
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

HomeView will look something like this:

Connecting all together

All that is left to do is to connect it all together in DemoApp and ContentView.

DemoApp:

import SwiftUI

@main
struct DemoApp: App {

    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    @StateObject var viewModel = LoginViewModel()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(viewModel)
        }
    }
}

ContentView:

import SwiftUI

struct ContentView: View {

    @EnvironmentObject var viewModel: LoginViewModel

    var body: some View {
        if viewModel.isUserLoggedIn {
            HomeView()
        } else {
            LoginView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This is it! Integration of Firebase Authentication with Google Sign-In to SwiftUI application is done and our project is ready to be run on emulator or physical device!

Conclusion

Thank you for reading and and I hope this article was useful for you since integrating Firebase Authentication with SwiftUI Lifecycle application is not exactly straightforward.

If you like my content and find it useful, please consider following me here on DEV community. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.

DEV Community: Kevin Furjan

How to create Python library

Introduction

Project structure

Python's __init__.py file

Unit tests

Setuptools

PyPI

GitHub Actions

Setting up environment and dependencies

Linting and running unit tests

Building and publishing to PyPI

Conclusion

References

How to localize SwiftUI application

Localization support in SwiftUI

Localization support in custom views

Returning localized strings from functions

Xcode workflow

Adding localizations

Exporting Localizations

Importing Localizations

Previewing localizations

Conclusion

References

Enforce Swift style and conventions with SwiftLint

What is a linter

What is SwiftLint

Installation

Xcode configuration

Rules

Configuration file

Disabling rules in code

Conclusion

References

Build REST API with Kotlin and Ktor

What is REST

Ktor

Plugins

Build REST API

Conclusion

Implement YouTube-like filtering in SwiftUI

Requirements

State handling

Implementing view

State hoisting

Conclusion

How to add Lottie animations to SwiftUI

UIKit and SwiftUI interoperability

Show me the code

How do I make it to play or pause

One final gotcha

Conclusion

Create SwiftUI app with Firebase Authentication

Creation of Firebase project

Creation of SwiftUI Lifecycle application

Handling dependencies with CocoaPods

Handling authentication within code

Handling REVERSED_CLIENT_ID key

Adding AppDelegate

Adding helper functions

Implementing LoginViewModel

Designing UI elements

LoginView

HomeView

Connecting all together

Conclusion

Python's `init.py` file