DEV Community: Canopas Software

Golang: Struct, Interface And Dependency Injection(DI)

Nandani Sharma — Fri, 10 Jan 2025 04:51:10 +0000

Background

In this blog, we will explore when to use structs versus interfaces in Go. We will also look at how to leverage both for Dependency Injection (DI).

To make these concepts easier to grasp, we’ll use a simple analogy of a Toy Box.

Understanding with a real-world example: Toy Box

Structs

Think of a struct as a specific toy in a toy box, like a car.
The car has specific features, like its color, size, and type (e.g., sports car).
In programming, a struct holds data about an object.

Interfaces

An interface is like a toy box that can hold any type of toy.
It defines what toys can do, like roll, make noise, or light up. Any toy that can perform these actions can fit in the toy box.
In programming, an interface defines a set of methods that different types(struct) can implement.

Dependency Injection

Imagine a child who plays with toys. Instead of the child only being able to play with one specific toy, you let them choose any toy from the toy box whenever they want.
This is like dependency injection, where you provide a function or class with the tools (or dependencies) it needs to work, allowing for flexibility.

Understanding the Basics

Structs

Definition: A struct is a way to define a new type with specific fields.
Purpose: Useful for modeling data structures and encapsulating data and behavior within a single unit.

Example,

type Car struct {
    Model string
    Year  int
}

Interfaces

Definition: An interface defines a set of methods that a type must implement.
Purpose: Crucial for polymorphism and decoupling components, enabling generic programming.

Example,


type CarInterface interface {
    Start()
    Stop()
}

Implement CarInterface using Car struct,

func (c *Car) Start() {
    fmt.Println("Car started")
}

func (c *Car) Stop() {
    fmt.Println("Car stopped")
}

When to Use Which?

Use Structs When

You need to model a specific data structure with defined fields.
You want to encapsulate data and behavior within a single unit.

Use Interfaces When

You want to define a contract that multiple types can implement.
You need to decouple components and make your code more flexible and testable.
You want to leverage polymorphism to write generic code.

Balancing Flexibility and Performance

While interfaces provide flexibility, dynamic method calls can introduce overhead.

Structs, on the other hand, offer performance advantages due to static type checking and direct method calls. Below are the ways to strike the balance:

Interface Composition

Combine multiple interfaces to create more specific interfaces. For example, consider a file system interface:

type Reader interface {
    Read(p []byte) (n int, err error)
}

type Writer interface {
    Write(p []byte) (n int, err error)
}

Now, we can create a more specific interface ReadWrite, by composing Reader and Writer:

type ReadWrite interface {
    Reader
    Writer
}

Benefit: This approach promotes modularity, reusability, and flexibility in your code.

Interface Embedding

Embed interfaces within structs to inherit their methods. For example, consider a logging interface:

type Logger interface {
    Log(message string)
}

Now, we can create a more specific interface, ErrorLogger, which embeds the Logger interface:

type ErrorLogger interface {
    Logger
    LogError(err error)
}

Any type that implements the ErrorLogger interface must also implement the Log method inherited from the embedded Logger interface.

type ConsoleLogger struct{}

func (cl *ConsoleLogger) Log(message string) {
    fmt.Println(message)
}

func (cl *ConsoleLogger) LogError(err error) {
    fmt.Println("Error:", err)
}

Benefit: This can be used to create hierarchical relationships between interfaces, making your code more concise and expressive.

Dependency Injection

It is a design pattern that helps decouple components and improve testability. In Go, it’s often implemented using interfaces.

Example: Notification System

In this example, we will define a notification service that can send messages through different channels. We will use DI to allow the service to work with any notification method.

Step 1: Define the Notifier Interface

First, we define an interface for our notifier. This interface will specify the method for sending notifications.

type Notifier interface {
    Send(message string) error
}

Step 2: Implement Different Notifiers

Next, we create two implementations of the Notifier interface: one for sending email notifications and another for sending SMS notifications.

Email Notifier Implementation:

type EmailNotifier struct {
    EmailAddress string
}

func (e *EmailNotifier) Send(message string) error {
    // Simulate sending an email
    fmt.Printf("Sending email to %s: %s\n", e.EmailAddress, message)
    return nil
}

SMS Notifier Implementation:

type SMSNotifier struct {
    PhoneNumber string
}

func (s *SMSNotifier) Send(message string) error {
    // Simulate sending an SMS
    fmt.Printf("Sending SMS to %s: %s\n", s.PhoneNumber, message)
    return nil
}

Step 3: Create the Notification Service

Now, we create a NotificationService that will use the Notifier interface. This service will be responsible for sending notifications.

type NotificationService struct {
    notifier Notifier
}

func NewNotificationService(n Notifier) *NotificationService {
    return &NotificationService{notifier: n}
}

func (ns *NotificationService) Notify(message string) error {
    return ns.notifier.Send(message)
}

Step 4: Use Dependency Injection in the Main Function

In the main function, we will create instances of the notifiers and inject them into the NotificationService.

func main() {
    // Create an email notifier
    emailNotifier := &EmailNotifier{EmailAddress: "john@example.com"}
    emailService := NewNotificationService(emailNotifier)
    emailService.Notify("Hello via Email!")

    // Create an SMS notifier
    smsNotifier := &SMSNotifier{PhoneNumber: "123-456-7890"}
    smsService := NewNotificationService(smsNotifier)
    smsService.Notify("Hello via SMS!")
}

Benefits of This Approach

Decoupling: The NotificationService does not depend on specific implementations of notifiers. It only relies on the Notifier interface, making it easy to add new notification methods in the future.
Testability: You can easily create mock implementations of the Notifier interface for unit testing of the NotificationService.
Flexibility: If you want to add a new notification method (like push notifications), you can create a new struct that implements the Notifier interface without changing the NotificationService code.

Understanding when to use structs versus interfaces is essential for writing clean, maintainable, and testable code in Go.

By leveraging both concepts along with Dependency Injection, we can create flexible and robust applications.

To Read the full version of this blog, Visit our Canopas Blog.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Google's Geocoding APIs: Frontend and Backend Implementation

Nandani Sharma — Wed, 08 Jan 2025 08:52:56 +0000

Introduction

Nowadays, we can’t imagine our life without a Location Map. We are exploring so many things using maps. From finding the fastest route to a destination, discovering nearby restaurants, or even tracking deliveries in real time, these services rely on location and mapping APIs.

Whenever we are building any application, there may be requirements for working with user location like finding addresses or integrating maps. Among the many solutions available, Google Maps APIs are the most powerful and widely used tools for developers.

In this blog, we will explore Google’s various location-based APIs, with a major focus on the Geocoding API.

You’ll learn:

The different APIs offered by Google Maps and how they work.
How to use the Geocoding API on a web server for converting addresses to coordinates (and vice versa).
How to build a Typescript-powered frontend to display the results interactively.

Let’s navigate through maps!!!

Type of Google Maps API

When I started exploring Google Maps, I was overwhelmed by its huge set of APIs. It was difficult for me to identify the right API for my use case. I explored all the APIs and here is a breakdown of it.

Google Maps APIs help developers to integrate advanced mapping and location-based features into their applications. These APIs allow a range of functionalities, from embedding interactive maps to fetching detailed location data, calculating distances, and managing real-time routing.

Below, we’ll break down some of these most useful APIs, explaining their purpose and how they work.

Mapping APIs

These APIs can be used to create and display static or interactive maps as per the needs of the application.

Google Maps API

This API allows embedding interactive, customizable maps directly into applications.
Users can pan, zoom, and switch between map types (satellite, terrain, hybrid, etc.).
Developers can add markers, polygons, and custom overlays to enrich the map.
Use cases:
- Real-time location tracking applications.
- Interactive trip planners.

Static Maps API

When any application needs static, non-interactive maps, this API will be useful.
API is ideal for embedding maps in s*tatic websites, reports, and emails* and is easy to use with URL-based parameters.
Use Cases:
- Visualising data points in reports.
- Adding maps to non-dynamic web pages.

Street View API

It enables developers to display 360° panoramic views of streets and landmarks.
This API allows virtual exploration of locations through street-level imagery.
Use Cases:
- Real estate applications for property viewing.
- Travel & tourism apps

Places APIs

Places APIs enable applications to fetch detailed information about points of interest (POIs), such as landmarks, businesses, or public facilities.

Geocoding & Reverse Geocoding API

These APIs are essential for translating between human-readable addresses and geographic coordinates like latitude and longitude (e.g., 37.422, -122.084).
Geocoding(address -> coordinates)

One of the use cases for this API is a food delivery app, which converts user-inputted addresses to Geo coordinates and loads Google Maps based on them.

Reverse geocoding (coordinates -> address)

This API can be used in tracking applications like Vehicle or user tracking. It will display the nearest address of the given coordinates.

Autocomplete API

This API will be useful for search-based location applications like form-filling.
It suggests relevant location predictions as users type into a search field.
Use Cases:
- Search bars in maps or location selection forms.
- Reducing user efforts and errors in typing addresses.

Time Zones API

It provides time zone information for any given location.
It takes Geographic coordinates and a timestamp as input and returns the name of the time zone, UTC offset, and Daylight Saving Time (DST) information.
Use Cases:
- Applications displaying local times for events or activities.
- Travel apps adapt schedules to different time zones.

Routes APIs

Routes APIs are designed to provide navigation capabilities and distance calculations.

Directions API

This is widely used in Google Maps.
It offers detailed routes between two or more locations, including step-by-step navigation.
You just need to add start and end locations and it outputs directions, time, and distance with various travel modes (driving, walking, cycling, etc.).
Use Cases:
- Ride-hailing services optimising routes for drivers.
- Apps provide directions for users navigating cities like Google Maps.

Distance Matrix API

This API calculates travel distance and time between multiple origins and destinations.
Use Cases:
- Delivery logistics calculate the most efficient routes.
- Multi-location trip planning.

Enable Google Maps services

To use the above services(APIs), we need an API key generated from the Google Cloud console.

Note: Before starting with any of the google map services, I recommend you to go through its security and billing documents.

Below are the prerequisites to get and restrict API keys,

Prerequisites

Setup Google Cloud project & Enable billing (Require to use Google Maps API)
Go to Google Onboard and Enable Required API (For this blog, it will be Geocoding API)
Generate & Restrict an API key as needed.

API key restrictions

This will be helpful to secure the API key and prevent misuse of it. which eventually prevents unwanted high billing.

For running API in the Browser(Frontend) environment, use Websites restriction.
For running API in the backend environment, use IP addresses restriction.
Allow only the required API for the key.

Implementing Geocoding and Reverse Geocoding

We’ll now explore how to use the Geocoding API in both Frontend and Backend(Web server API) environments.

Frontend Implementation

Using Geocoding API directly in frontend, there are some drawbacks like API key exposure and performance issues. However, we can address these issues by adding API key restrictions and implementing caching.

Create an index.html file and add a script in the head,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Places API</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_API_KEY&libraries=places"></script>
</head>
<body></body>
</html>

By adding this script, the browser will able to access Google objects from this script using window.google.

Add the Geocoding logic in geocoding.ts

GeoCoding

In this, we will pass a human-readable address and get the coordinates of that location.

function fetchCoordinates() {
    new window.google.maps.Geocoder().geocode(
        { address: '1600 Amphitheatre Parkway, Mountain View, CA' },
        (results: any, status: string) => {
          if (status === "OK" && results && results[0]) {
            console.log(
              'Latitude:', results[0].geometry.location.lat()
            );
            console.log(
              'Longitude:', results[0].geometry.location.lng()
            );
          } else {
            console.error(
              "Error fetching coordinates from geocoding: " + status
            );
          }
        }
      );
    }
 }

Note: We will use only geometry, review full response here.

Build a typescript file and add a geocoding.js file inside index.html,

<body>
  <script type="module" src="geocoding.js"></script>
</body>

When you run index.html, the output will be,

Latitude: 37.4225018
Longitude: -122.0847402

Reverse GeoCoding

In this, we will pass the coordinates and get the human-readable address.

function fetchLocation() {

    const coordinates = {
      lat: 37.422,
      lng: -122.084,
    };

    new window.google.maps.Geocoder().geocode(
        { location: coordinates },
        (results: any, status: string) => {
          if (status === "OK" && results && results[0]) {
            console.log(
              "Address: " + results[0].address_components
            );
          } else {
            console.error(
              "Error fetching addressComponents from reverse geocoding: " + status
            );
          }
        }
      );
    }
 }

Note: We will use only address_components, review full response here.
Also, You can find all the fields of address_components here and can use the required field for your use case.

Extract human-readable address from address_components,

const extractLocation = (addressComponents: any[]) => {

    const findAddressType = (types, addressComponents) => {
        const found = addressComponents.find((c) =>
          types.some((t) => c.types.includes(t)),
        );
        return found?.longText ?? found?.long_name ?? "";
    };

    return {
        area: findAddressType(['sublocality_level_1', 'locality'], addressComponents),
        city: findAddressType(['locality'], addressComponents),
        state: findAddressType(['administrative_area_level_1'], addressComponents),
        pincode: findAddressType(['postal_code'], addressComponents),
    };
};

Print the address as below,

console.error(
   "Address: " + JSON.stringify(extractLocation(results[0].address_components))
);

Build a typescript and run index.html. The output will be,

Address: {"area":"Mountain View","city":"Mountain View","state":"California","pincode":"94043"}

To explore the Geocoding and Reverse Geocoding in Backend(Web server API) environments, Visit our full guide at Canopas Blog.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Exploring Cupertino and Material Updates in Flutter 3.27.0

Nandani Sharma — Fri, 27 Dec 2024 10:45:01 +0000

Background

Flutter 3.27.0 arrived with a bang, bringing a wave of improvements to both performance and developer experience. This release shows how Flutter is always getting better and helping developers make great apps.

In this article, we’ll explore the key updates of the Cupertino and Material widgets in Flutter 3.27.0

Ready? Let’s dive in!

SliverFloatingHeader

Just like Google Photos, The SliverFloatingHeader is a widget designed to create headers that appear when the user scrolls forward and gracefully disappear when scrolling in the opposite direction.

CustomScrollView(
  slivers: [
    SliverFloatingHeader(
        child: Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.orange,
      ),
      child: const Text(
        "Sliver Floating Header like Google photos",
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    )),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text("Item $index"),
            tileColor: index.isEven? Colors.grey.shade300 : Colors.grey.shade100,
          );
        },
        childCount: 100,
      ),
    ),
  ],
);

Tubular Figures

Have you ever faced UI misalignment when displaying monospaced text like DateTime, such as 01:00 PM or 02:30 PM? I encountered this issue while building the Canbook app, where I needed to display time slots. Initially, I tried calculating the width based on the thickest character (0) to fix the alignment.

How can we improve the UI for rendering monospaced text like DateTime and time, and maintain alignment and consistency for dynamic text updates?

In the old UI implementation, digits had variable widths due to the default font settings. This resulted in inconsistent alignment.


SingleChildScrollView(
  child: Wrap(
    alignment: WrapAlignment.start,
    crossAxisAlignment: WrapCrossAlignment.center,
    spacing: 8,
    runSpacing: 8,
    children: List.generate(30, (index) {
      final time = DateTime.now().add(Duration(minutes: (index) * 15));
      return Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.white,
          ),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(
          DateFormat('hh:mm a').format(time),
          style: const TextStyle(
              fontFeatures: [FontFeature.tabularFigures()],
              color: Colors.white),
        ),
      );
    }),
  ),
);

FontFeature.tabularFigures() feature ensures that each character occupies the same width.

This feature enables the use of tabular figures for fonts with both proportional (varying width) and tabular figures. Tabular figures are monospaced, meaning all characters have the same width, making them ideal for aligning text in tables, lists, or dynamic UI elements like time slots or numeric data.

Text(
  DateFormat('hh:mm a').format(time),
  style: const TextStyle(
      fontFeatures: [FontFeature.tabularFigures()],
      color: Colors.white),
),

CupertinoSliverNavigationBar

With the latest update, both CupertinoNavigationBar and CupertinoSliverNavigationBar now feature transparent backgrounds until content scrolls underneath them.

This enables,

The navigation bar to match the background color in its expanded state.
A customizable color in its collapsed state.
Smooth transitions between these colors as the user scrolls.

CustomScrollView(
  slivers: [
    const CupertinoSliverNavigationBar(
     largeTitle : Text(
        'Cupertino Transparent Navigation Bar',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      backgroundColor: Colors.transparent,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text("Item $index"),
          );
        },
        childCount: 100,
      ),
    ),
  ],
);

Repeat Animation

Flutter’s repeat method allows animations to run infinitely. But what if you want the animation to run for a specific number of times?

Now, with the addition of the count parameter, the repeat method can restart the animation and perform a set number of iterations before stopping.

If no value is provided for count, the animation will repeat indefinitely.

@override
void initState() {
  super.initState();
  controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );
  animation = Tween<double>(begin: 100, end: 300).animate(controller)
    ..addListener(() {
      setState(() {});
    });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
          width: animation.value,
          height: animation.value,
          color: Colors.yellow),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: FloatingActionButton.extended(
      onPressed: () {
        controller.repeat(count: 2);
      },
      label: Text("Start Animation"),
    ),
  );
}

Row and Column Spacing

With the release of Flutter 3.27.0, Row and Column widgets now support the spacing parameter, eliminating the need for manual SizedBox or Padding to add spacing between child widgets.

Now, with Flutter 3.27, you can simplify the layout by directly using the spacing property.

Using SizedBox for spacing between children,

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      _item(),
      const SizedBox(height: 16),
      _item(),
      const SizedBox(height: 16),
      _item(),
      const SizedBox(height: 16),
      _item(),
      const SizedBox(height: 16),
      _item(),
    ],
  );
}

With Updates,

@override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        _item(),
        _item(),
        _item(),
        _item(),
      ],
    );
  }

Tap to scroll to the item in CupertinoPicker

CupertinoPicker now supports tapping on an item to automatically scroll to it, to navigate directly to the selected item.

Refresh indicator

Refresh Indicator with No Spinner

RefreshIndicator.noSpinner widget to create a refresh indicator without the default spinner. This allows you to handle the refresh action with custom UI elements while still using the drag-to-refresh functionality.

Stack(
  children: [
    RefreshIndicator.noSpinner(
      onRefresh: () async {
        isRefreshing = true;
        setState(() {});
        await Future.delayed(const Duration(seconds: 2));
        isRefreshing = false;
        setState(() {});
      }, 
      child: ListView()
    ),
    if (isRefreshing)
      Align(
        child: CircularProgressIndicator(
          color: Colors.orange,
        ),
      ),
  ],
),

Elevation

The elevation property determines the shadow depth of the RefreshIndicator. The default value is 2.0.

RefreshIndicator(
        elevation: 10,
        backgroundColor: Colors.orange,
        onRefresh: () async {
          await Future.delayed(const Duration(seconds: 2));
        }, // Callback function for refresh action
        child: ListView()
      ),

With enhancements in both design and functionality, this release makes building beautiful, cross-platform apps easier than ever.

So, Curious to explore the full breakdown of these updates…?

Head over to our full blog at Canopas to explore all the new key updates in Flutter 3.27.0! 🚀

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Firebase Authentication: Google, Apple, and Phone Login to iOS App

Nandani Sharma — Thu, 19 Dec 2024 11:17:39 +0000

Introduction

Integrating Firebase Authentication into your SwiftUI app offers a secure and efficient way to manage user sign-ins. With Firebase, you can authenticate users using various login methods, like Google, Apple, Email, phone number, and many more authentications.

This integration is crucial for apps that require user identification and provides a smooth and unified login experience across platforms.

In this blog, we’ll walk you through setting up Firebase Authentication in a SwiftUI app, focusing on three key authentication providers: Google, Apple, and Phone number login.

We aim to simplify the setup and implementation process to help you build a secure, user-friendly app.

If you’d prefer to skip the detailed explanation in this blog, the complete source code is available on this GitHub Repository.

Firebase Project Setup

Before integrating Firebase Authentication into your app, you need to set up a Firebase project.

Follow these steps to set up Firebase:

1. Create an Xcode Project

Start by creating an initial Xcode project for your app. This project will serve as the base for integrating Firebase Authentication.
Make sure you set a proper bundle identifier. For instance, if you are building a chat app, your bundle identifier could be com.example.FirebaseChatApp.

2. Create a Firebase Project

Next, navigate to the Firebase Console and create a new project.
Give your project a name (e.g., FirebaseChatApp), and configure any settings based on your needs.
Enable Google Analytics is optional and can be done if you plan to collect app usage data.

3. Add Your iOS App to Firebase

After setting up the Firebase project, you must connect your iOS app.

To do this:

In the Firebase Console, go to Project Overview and click Add App.
Select iOS and enter your app’s bundle identifier.
Download the G*oogleService-Info.plist* file and drag it into your Xcode project.

4. Install Firebase SDK Using Swift Package Manager or CocoaPods

You can install Firebase SDK either using Swift Package Manager (SPM) or CocoaPods.

For Swift Package Manager, follow these steps:

In Xcode, go to File > Add Packages.
Enter the Firebase SDK repository URL: https://github.com/firebase/firebase-ios-sdk.

For CocoaPods, add the following dependencies to your Podfile:

pod 'GoogleSignIn'    # For Google login
pod 'FirebaseAuth'    # For Firebase Authentication

Run pod install in the terminal to install the dependencies.

Initialize the Firebase app

Once the Firebase SDK is installed, initialize it in your app to enable Firebase services, such as Authentication.

1. Create a FirebaseProvider Class

To make the initialization and authentication process smoother, create a FirebaseProvider class. This class will handle Firebase setup and provide easy access to Firebase’s Auth API.

Here’s an implementation of the FirebaseProvider class:

import FirebaseCore
import FirebaseAuth

public class FirebaseProvider {

    public static var auth: Auth = .auth()

    static public func configureFirebase() {
        FirebaseApp.configure() // Initializes Firebase with the default settings.
    }
}

Configure Firebase in the AppDelegate

Add the AppDelegate class to initialize Firebase when the app launches.

This class handles app-level events like application launch, backgrounding, and foregrounding.

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        FirebaseProvider.configureFirebase()
        return true
    }
}

Design Login Screen

Let’s start with designing a simple login screen that provides buttons for the three authentication providers: Google, Apple, and Phone.

struct LoginView: View {

    @State var viewModel: LoginViewModel

    var body: some View {
        VStack {
            LoginOptionsView(showGoogleLoading: viewModel.showGoogleLoading, showAppleLoading: viewModel.showAppleLoading,
                             onGoogleLoginClick: viewModel.onGoogleLoginClick, onAppleLoginClick: viewModel.onAppleLoginClick,
                             onPhoneLoginClick: viewModel.onPhoneLoginClick)
        }
        .background(.surface)
    }
}

private struct LoginOptionsView: View {

    let showGoogleLoading: Bool
    let showAppleLoading: Bool

    let onGoogleLoginClick: () -> Void
    let onAppleLoginClick: () -> Void
    let onPhoneLoginClick: () -> Void

    var body: some View {
        VStack(spacing: 8) {
            LoginOptionsButtonView(image: .googleIcon, buttonName: "Sign in with Google", showLoader: showGoogleLoading,
                                   onClick: onGoogleLoginClick)
            LoginOptionsButtonView(systemImage: ("apple.logo", .primaryText, (14, 16)), buttonName: "Sign in with Apple",
                                   showLoader: showAppleLoading, onClick: onAppleLoginClick)
            LoginOptionsButtonView(systemImage: ("phone.fill", .white, (12, 12)),
                                   buttonName: "Sign in with Phone Number", bgColor: .appPrimary,
                                   buttonTextColor: .white, showLoader: false, onClick: onPhoneLoginClick)
        }
        .padding(.horizontal, 16)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    }
}

private struct LoginOptionsButtonView: View {

    let image: ImageResource?
    let systemImage: (name: String, color: Color, size: (width: CGFloat, height: CGFloat))?
    let buttonName: String
    var bgColor: Color
    var buttonTextColor: Color
    let showLoader: Bool
    let onClick: () -> Void

    init(image: ImageResource? = nil,
         systemImage: (name: String, color: Color, size: (width: CGFloat, height: CGFloat))? = nil,
         buttonName: String, bgColor: Color = .container, buttonTextColor: Color = .primaryDark,
         showLoader: Bool, onClick: @escaping () -> Void) {
        self.image = image
        self.systemImage = systemImage
        self.buttonName = buttonName
        self.bgColor = bgColor
        self.buttonTextColor = buttonTextColor
        self.showLoader = showLoader
        self.onClick = onClick
    }

    public var body: some View {
        Button {
            onClick()
        } label: {
            HStack(alignment: .center, spacing: 12) {
                if showLoader {
                    ImageLoaderView(tintColor: .appPrimary)
                }

                if let image {
                    Image(image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 18, height: 18)
                } else if let systemImage {
                    Image(systemName: systemImage.name)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: systemImage.size.width, height: systemImage.size.height)
                        .foregroundStyle(systemImage.color)
                }

                Text(buttonName)
                    .lineLimit(1)
                    .foregroundStyle(buttonTextColor)
                    .frame(height: 44)
                    .minimumScaleFactor(0.5)
            }
            .padding(.horizontal, 16)
            .frame(maxWidth: .infinity, alignment: .center)
            .background(bgColor)
            .clipShape(Capsule())
        }
        .buttonStyle(.scale)
    }
}

Here, I’m not mentioning all the color codes, you can pick them from this GitHub Repo.

Main App Entry Point

In the @main entry point of your app, you will use the LoginView:

@main
struct FirebaseChatAppApp: App {

    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate

    init() {
        Injector.shared.initInjector()
    }

    var body: some Scene {
        WindowGroup {
            LoginView()
        }
    }
}

You can get the full code of the Injector class from the GitHub Repo.

Now, Let’s add the ViewModel class.

We will use the @Observable macro for the ViewModel class instead of the @ObservableObject macro in this project.

@Observable
class LoginViewModel: BaseViewModel {

    private var preference: AppPreference

    private(set) var showGoogleLoading = false
    private(set) var showAppleLoading = false

    private var currentNonce: String = ""
    private var appleSignInDelegates: SignInWithAppleDelegates?
}

func onGoogleLoginClick() { }

func onAppleLoginClick() { }

func onPhoneLoginClick() { }

For now, we are going to add just the method names, we’ll add further implementation later with each provider implementation.

Let’s run the app,

Add Firebase Authentication

Firebase Authentication allows us to integrate multiple sign-in methods into our app.

Before implementing the login functionality for each provider, ensure that the appropriate authentication methods are enabled in the Firebase Console.

You can also get a basic overview of Firebase Authentication from the official Firebase document.

Enable Authentication Providers

Navigate to Firebase Console > Authentication > Sign-in Method.

Initially, you’ll have all the providers listed below for your Firebase project.

We need to enable the following providers for our current implementation:

Google: This allows users to sign in with their Google accounts.
Apple: This enables Apple Sign-In, mandatory for apps on iOS devices.
Phone: This allows users to sign in using their phone numbers

Google Login Integration

Here’s a step-by-step explanation of integrating Google Login into your app using Firebase Authentication.

The process consists of enabling Google login in Firebase, configuring URL schemes in Xcode, and implementing the login logic in your app.

Enable Google Login in Firebase

In the Firebase Console, navigate to Authentication > Sign-in Method and enable the Google sign-in provider.

1. Enable Google Login in Firebase Console (if you haven’t):

Navigate to Authentication > Sign-in Method and enable the Google sign-in provider.

2. Download `GoogleService-Info.plist`:

After enabling it, download the updated GoogleService-Info.plist file.
Add this file to your Xcode project, and ensure it is included in your app’s target.

3. Check the `clientID`:

Verify that the clientID is present in the GoogleService-Info.plist.

If you want to refer to the official doc for all basic setup for Google login, refer to this Firebase Doc.

Configure URL Schemes in Xcode

In Xcode,

select your app target, go to the Info tab, and locate the URL Types section.
Under URL Types, add a new entry and paste the REVERSED_CLIENT_ID from the GoogleService-Info.plist file into the URL Schemes field.

Implement Google Login

Now, let’s implement the Google Login functionality in your app.

Import the required frameworks in your LoginViewModel:

import GoogleSignIn
import FirebaseCore
import FirebaseAuth

Then, implement the Google login functionality:

func onGoogleLoginClick() {

    // Ensure the Firebase client ID is available; otherwise, return early.
    guard let clientID = FirebaseApp.app()?.options.clientID else { return }

    // Create a Google Sign-In configuration object with the Firebase client ID.
    let config = GIDConfiguration(clientID: clientID)
    GIDSignIn.sharedInstance.configuration = config

    // Retrieve the topmost view controller to present the Google Sign-In UI.
    guard let controller = TopViewController.shared.topViewController() else {
        print("LoginViewModel: \(#function) Top Controller not found.")
        return
    }

    // Start the Google Sign-In process, presenting it from the retrieved view controller.
    GIDSignIn.sharedInstance.signIn(withPresenting: controller) { [unowned self] result, error in
        guard error == nil else {
            print("LoginViewModel: \(#function) Google Login Error: \(String(describing: error)).")
            return
        }

        // Ensure the user and their ID token are available in the result.
        guard let user = result?.user, let idToken = user.idToken?.tokenString else { return }

        // Extract user details like first name, last name, and email from the profile.
        let firstName = user.profile?.givenName ?? ""
        let lastName = user.profile?.familyName ?? ""
        let email = user.profile?.email ?? ""

        // Create a Firebase authentication credential using the Google ID token.
        let credential = GoogleAuthProvider.credential(withIDToken: idToken, accessToken:

        // Set loading state to true while performing Firebase login.
        self.showGoogleLoading = true

        // Call the helper function to authenticate with Firebase using the credential.
        self.performFirebaseLogin(showGoogleLoading: showGoogleLoading, credential: credential,
                                  loginType: .Google, userData: (firstName, lastName, email))
    }
}

The onGoogleLoginClick() function initializes Google Sign-In with Firebase's client ID, displays the sign-in UI, and retrieves user details and a Firebase credential upon success. It then calls performFirebaseLogin().

Handle Firebase Authentication

Now, let’s implement the performFirebaseLogin() function to manage the Firebase authentication process:

private func performFirebaseLogin(showGoogleLoading: Bool = false, credential: AuthCredential,
                                  loginType: LoginType, userData: (String, String,

    // Show the loading indicator while logging in.
    self.showGoogleLoading = showGoogleLoading

    // Sign in to Firebase using the provided credential.
    FirebaseProvider.auth
        .signIn(with: credential) { [weak self] result, error in
            guard let self else { return }

            // Handle errors during Firebase sign-in.
            if let error {
                self.showGoogleLoading = false
                print("LoginViewModel: \(#function) Firebase Error: \(error), with type Apple login.")
                self.alert = .init(message: "Server error")
                self.showAlert = true
            } else if let result {
                // On successful sign-in, stop loading and create a user object.
                self.showGoogleLoading = false
                let user = User(id: result.user.uid, firstName: userData.0, lastName: userData.1,
                                   emailId: userData.2, phoneNumber: nil, loginType: loginType)

                // Save user preferences and mark the user as verified.
                self.preference.user = user
                self.preference.isVerifiedUser = true
                print("LoginViewModel: \(#function) Logged in User: \(result.user)")
            } else {
                self.alert = .init(message: "Contact Support")
                self.showAlert = true
            }
        }
}

This function authenticates the user with Firebase, updates user preferences upon success, and manages errors by logging them and showing alerts.

AppPreference Class:

@Observable
class AppPreference {

    enum Key: String {
        case isVerifiedUser = "is_verified_user"
        case user           = "user"
    }

    private let userDefaults: UserDefaults

    init() {
        self.userDefaults = UserDefaults.standard
        self.isVerifiedUser = userDefaults.bool(forKey: Key.isVerifiedUser.rawValue)
    }

    public var isVerifiedUser: Bool {
        didSet {
            userDefaults.set(isVerifiedUser, forKey: Key.isVerifiedUser.rawValue)
        }
    }

    public var user: User? {
        get {
            do {
                let data = userDefaults.data(forKey: Key.user.rawValue)
                if let data {
                    let user = try JSONDecoder().decode(User.self, from: data)
                    return user
                }
            } catch let error {
                print("Preferences \(#function) json decode error: \(error).")
            }
            return nil
        } set {
            do {
                let data = try JSONEncoder().encode(newValue)
                userDefaults.set(data, forKey: Key.user.rawValue)
            } catch let error {
                print("Preferences \(#function) json encode error: \(error).")
            }
        }
    }
}

User Data Class:

public struct User: Identifiable, Codable, Hashable {

    public var id: String
    public var firstName: String?
    public var lastName: String?
    public var emailId: String?
    public var phoneNumber: String?
    public let loginType: LoginType

    enum CodingKeys: String, CodingKey {
        case id
        case firstName = "first_name"
        case lastName = "last_name"
        case emailId = "email_id"
        case phoneNumber = "phone_number"
        case loginType = "login_type"
    }
}

public enum LoginType: String, Codable {
    case Apple = "apple"
    case Google = "google"
    case Phone = "phone"
}

Handle Callback URL in AppDelegate

For Google Sign-In to work correctly, you must handle the callback URL when the user completes the sign-in process.

You can manage this to the AppDelegate by overriding the application(_:open:options:) method.

Here is the updated AppDelegate class:

class AppDelegate: NSObject, UIApplicationDelegate {

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

    // Add this method to handle the Google Sign-In callback URL
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        return GIDSignIn.sharedInstance.handle(url)
    }
}

This ensures that Google Sign-In can be completed and returned to the app.

Test the Integration

Once everything is set up, run the app and try logging in with Google. You should see the Google login flow, and upon successful authentication, you will be logged into Firebase.

Apple Login Integration

Apple Sign-In with Firebase allows users to log in securely using their Apple ID. Below is a comprehensive guide for integrating Apple Sign-In into your app.

Pre-requisites

1. Apple Developer Account Configuration:

Register your app in the Apple Developer portal.
Set up the “Sign in with Apple” capability to the provisioning profile.

2. Firebase Console:

Enable the Apple sign-in provider in your Firebase project.

3. Xcode Setup:

Add the Apple Sign-In capability to your Xcode project.

If you want to refer to the official doc for all basic setup for Sign in with Apple, refer to this Firebase Doc.

Steps to Configure the Apple Developer Portal

1. Create an App ID:

Log in to your Apple Developer Account and navigate to Certificates, Identifiers & Profiles > Identifiers.
Click the + button to create a new App ID and enable Sign in with Apple for your app’s Bundle ID.

2. Generate Certificates & Provisioning Profiles:

Create and download the necessary Development and Distribution certificates.
Generate and install provisioning profiles for both environments.

Xcode Project Configuration

1. Add Apple Sign-In Capability:

Open your project in Xcode.
Go to Signing & Capabilities and add the Sign in with Apple capability.

2. Update the Info.plist:

Add necessary permissions and configurations for Apple Sign-In in your Info.plist as follows:
Go to the app target > Signing & capabilities > click + > search for Sign in with Apple and add it.

Generate and Use a Nonce for Secure Authentication

Nonce Generator Class: This class generates a secure random string (nonce) and hashes it using the SHA-256 algorithm. It ensures that the authentication process is safe and helps to prevent replay attacks.

import CryptoKit
import Foundation

// A class for generating a secure random string (nonce) and hashing strings using SHA-256.
class NonceGenerator {

    // Generates a random nonce string of specified length (default is 32).
    static public func randomNonceString(length: Int = 32) -> String {

        var result = "" // Final nonce string to be returned.
        var remainingLength = length // Tracks how many characters are still needed.
        let charset: [Character] = Array("0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._") // Allowed characters for the nonce.

        // Ensures the requested length is valid (greater than 0).
        precondition(length > 0)

        // Generate characters until the required length is met.
        while remainingLength > 0 {

            // Generate an array of 16 random bytes.
            let randoms: [UInt8] = (0 ..< 16).map { _ in
                var random: UInt8 = 0

                // Use a secure random number generator to generate each byte.
                let errorCode = SecRandomCopyBytes(kSecRandomDefault, 1, &random)
                if errorCode != errSecSuccess {
                    fatalError("Unable to generate nonce. SecRandomCopyBytes failed with OSStatus \(errorCode)")
                }
                return random
            }

            // Map each random byte to a character in the charset if within bounds.
            randoms.forEach { random in
                if remainingLength == 0 { // Stop if the required length is reached.
                    return
                }

                if random < charset.count { // Ensure the random value maps to the charset range.
                    result.append(charset[Int(random)])
                    remainingLength -= 1 // Decrease the remaining length.
                }
            }
        }
        return result // Return the generated nonce string.
    }

    // Hashes a given input string using the SHA-256 algorithm.
    public static func sha256(_ input: String) -> String {
        let inputData = Data(input.utf8) // Convert the input string to Data.
        let hashedData = SHA256.hash(data: inputData) // Generate the SHA-256 hash.
        let hashString = hashedData.compactMap {
            return String(format: "%02x", $0) // Convert each byte of the hash to a hexadecimal string.
        }.joined() // Join all hexadecimal values into a single string.
        return hashString // Return the hash string.
    }
}

This code snippet helps generate a nonce and hash it for safe and secure Apple Sign-In authentication.

This NonceGenerator class provides two main utilities:

1. randomNonceString(length: Int):

Generates a cryptographically secure random string (nonce) of a specified length.
The generated string uses a predefined set of characters (0–9, A-Z, a-z, -, _) and ensures unpredictability by using the SecRandomCopyBytes function for randomness.

2. sha256(_ input: String):

It takes a string as input and returns its SHA-256 hash as a hexadecimal string.
This can be used to securely hash data for comparison or storage.The class is useful in scenarios requiring secure, unpredictable values (e.g., for authentication, cryptographic protocols) and hashing operations.

Handle the Apple Sign-In Flow

We’ll break down the process into two parts:
— Triggering the Apple Sign-In Process
— Handling the Apple Sign-In Response

1. Triggering the Apple Sign-In Process

To initiate the Apple Sign-In flow, we must create a request and delegate its handling to a custom class. This ensures that the sign-in process is managed separately, making the code easier to maintain.

Step 1: Create a Separate Delegate Class

In our project, we handle Apple Sign-In’s delegate methods in a separate class, SignInWithAppleDelegates.swift to keep the logic isolated.

Here's the structure of the delegate class:

class SignInWithAppleDelegates: NSObject {

    private let signInSucceeded: (String, String, String, String) -> Void

    init(signInSucceeded: @escaping (String, String, String, String) -> Void) {
        self.signInSucceeded = signInSucceeded
    }
}

Step 2: Handling Apple Sign-In Button Click

When the user clicks the Apple Sign-In button, we generate a nonce (a random string) and start the authorization request. The nonce is hashed using SHA-256 for security.

Let’s update LoginViewModel’s method for the Apple login action.

Here’s how you can set up the button action:

func onAppleLoginClick() {
    // Generate a random nonce to use during the Apple Sign-In process for security.
    self.currentNonce = NonceGenerator.randomNonceString()

    // Create a new Apple ID authorization request.
    let request = ASAuthorizationAppleIDProvider().createRequest()

    // Specify the user information that the app wants to access (full name and email).
    request.requestedScopes = [.fullName, .email]

    // Hash the generated nonce using SHA-256 and assign it to the request for verification.
    request.nonce = NonceGenerator.sha256(currentNonce)

    // Initialize the delegate to handle the Apple Sign-In process's callbacks.
    // The delegate is responsible for managing the successful authentication and passing the user data.
    appleSignInDelegates = SignInWithAppleDelegates { (token, fName, lName, email)  in

        // Create an OAuth credential for Firebase using the token received from Apple.
        let credential = OAuthProvider.credential(providerID: AuthProviderID.apple, idToken: token, rawNonce:
        self.showAppleLoading = true

        // Call a separate method to complete the Firebase login using the created credential.
        self.performFirebaseLogin(showAppleLoading: self.showAppleLoading, credential: credential,
                                  loginType: .Apple, userData: (fName, lName, email))
    }

    // Create an authorization controller to manage the Apple Sign-In flow.
    let authorizationController = ASAuthorizationController(authorizationRequests: [request])

    // Assign the delegate to handle the authorization callbacks.
    authorizationController.delegate = appleSignInDelegates

    // Start the Apple Sign-In process by presenting the authorization request to the user.
    authorizationController.performRequests()
}

Step 3: Firebase Login Integration

Next, we update our Firebase login method to handle both Google and Apple logins. We pass in the credential (from Apple Sign-In) and user data (name, email) to Firebase for authentication:

private func performFirebaseLogin(showGoogleLoading: Bool = false, showAppleLoading: Bool = false,
                                  credential: AuthCredential, loginType: LoginType, userData: (String, String,

    // Set the loading states for Google and Apple login to indicate the process has started.
    self.showGoogleLoading = showGoogleLoading
    self.showAppleLoading = showAppleLoading

    // Attempt to sign in with Firebase using the provided credentials.
    FirebaseProvider.auth
        .signIn(with: credential) { [weak self] result, error in
            guard let self else { return }

            // Handle any errors during the Firebase sign-in process.
            if let error {
                self.showGoogleLoading = false
                self.showAppleLoading = false
                print("LoginViewModel: \(#function) Firebase Error: \(error), with type Apple login.")
                self.alert = .init(message: "Server error")
                self.showAlert = true
            } else if let result {
                // Reset the loading states as the login process is complete.
                self.showGoogleLoading = false
                self.showAppleLoading = false

                // Create a User object using the signed-in user's details.
                let user = User(id: result.user.uid, firstName: userData.0, lastName: userData.1,
                                emailId: userData.2, phoneNumber: nil, loginType: loginType)

                // Save the user object and mark the user as verified in preferences.
                self.preference.user = user
                self.preference.isVerifiedUser = true
                print("LoginViewModel: \(#function) Logged in User: \(result.user)")
            } else {
                // Handle unexpected cases where neither error nor result is present.
                self.alert = .init(message: "Contact Support")
                self.showAlert = true
            }
        }
}

2. Handle the Apple Sign-In Response

Once the user completes the Apple Sign-In process, we must handle the response, including errors or successful sign-ins.

Apple Sign-In Delegate Methods

We extend the SignInWithAppleDelegates class to implement the ASAuthorizationControllerDelegate methods.

Here's how we manage the successful sign-in:

// Extend the `SignInWithAppleDelegates` class to handle Apple Sign-In responses.
extension SignInWithAppleDelegates: ASAuthorizationControllerDelegate {

    // Method called when the authorization process completes successfully.
    func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {

        // Attempt to retrieve the Apple ID credentials from the authorization response.
        if let appleIDCredential = authorization.credential as? ASAuthorizationAppleIDCredential {

            // Fetch the identity token from the Apple ID credential.
            guard let appleIDToken = appleIDCredential.identityToken else {
                print("SignInWithAppleDelegates: \(#function) Unable to fetch identity token.")
                return
            }

            // Convert the identity token to a String format for further processing.
            guard let idTokenString = String(data: appleIDToken, encoding: .utf8) else {
                print("SignInWithAppleDelegates: \(#function) Unable to serialize token string from data: \(appleIDToken.debugDescription).")
                return
            }

            // Extract additional user information (first name, last name, email) from the Apple ID credential.
            let firstName = appleIDCredential.fullName?.givenName ?? ""
            let lastName = appleIDCredential.fullName?.familyName ?? ""
            let email = appleIDCredential.email ?? ""

            // Call a custom method to handle successful sign-in, passing the token and user information.
            self.signInSucceeded(idTokenString, firstName, lastName, email)
        }
    }

    // Method called when the authorization process fails.
    func authorizationController(controller: ASAuthorizationController, didCompleteWithError error: Error) {
        print("SignInWithAppleDelegates: \(#function) Apple login complete with error: \(error).")
    }
}

This delegate method extracts the user data (first name, last name, email) and the identity token, which is then used to authenticate the user with Firebase.

It provides a robust mechanism for managing the Apple Sign-In process, ensuring both user data extraction and error handling are addressed efficiently.

Now, Let’s run the app,

Phone Login Integration

Phone authentication is an effective way to enhance user experience while ensuring secure access. From configuring Firebase to implementing phone number verification and OTP handling.

To explore the step-by-step instruction on phone login feature implementations, check out our full guide at Canopas Blog.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Integrating Live Activity and Dynamic Island in iOS - Part 2

Nandani Sharma — Wed, 04 Dec 2024 10:29:31 +0000

Background

Welcome to Part 2 of our guide on integrating Live Activities and Dynamic Island in iOS. In Part 1, we explored the fundamentals—how to set up a Live Activity, manage its lifecycle, and design layouts that work seamlessly on the Lock Screen and Dynamic Island.

In this part, we’ll take things further by adding advanced functionality to elevate the user experience. We’ll learn how to:

Animate updates for smoother transitions.
Handling live activity from a push notification.

Let's get started…

Animate state updates in Live Activity

Animations in Live Activities make updates visually engaging and draw the user's attention to important changes. Starting with iOS 17, Live Activities automatically animate data updates using default animations, or we can customize them using SwiftUI animations.

Key Points About Animations in Live Activities

1. Default Animations:

Text changes are animated with smooth transitions, like a blur effect.
Image and SF Symbol updates include fade-in effects or other content transitions.
When adding or removing views, the system uses fade animations.

2. Customizing Animations:

You can replace default animations with SwiftUI's built-in transitions and animations. Options include:

Transitions: Use effects like .opacity, .move(edge:), .slide, or .push(from:).
Content Transitions: Apply animations directly to text, such as .contentTransition(.numericText()) for numbers.
Custom Animations: Add .animation(_:value:) to views for more control.

For example, we can configure a content transition for queue position text as shown in this example:

Text("\(position)")
   .font(.system(size: 36, weight: .semibold)).lineSpacing(48).foregroundColor(Color("TextPrimary"))
   .contentTransition(.numericText())
   .animation(.spring(duration: 0.2), value: position)

3. Animating View Updates:

To animate a view when data changes:

Use the .id() modifier to associate the view with a data model that conforms to Hashable.
Apply a transition or animation based on the associated value.
Example: When the queue position changes, the image transitions from the bottom.

struct QueueIllustration :View {
    let position: Int

    var imageName: String {
        if position < 5 {
            return "queue4"
        } else if position < 9 {
            return "queue3"
        } else if position < 25 {
            return "queue2"
        } else {
            return "queue1"
        }
    }

    var body: some View {
        Image(uiImage: UIImage(named: imageName)!)
            .resizable().frame(width: 100, height: 100)
            .scaledToFit().id(imageName)
            .transition(.push(from: .bottom))
    }
}

4. Limitations:

Animations have a maximum duration of 2 seconds.
On the devices with Always-On displays, animations are disabled to save battery life. You can use the isLuminanceReduced environment value to detect when the Always-On display is active.
On devices running iOS 16 or earlier, only system-defined animations like .move or .slide are supported, and custom animations like withAnimation are ignored.

5. Disabling Animations

If multiple views in your Live Activity are updated simultaneously, consider disabling animations for less important changes to focus user attention.

To disable animations:

Use .transition(.identity) to prevent transitions.
Pass nil to the animation parameter

withAnimation(nil) {
    // Updates without animations
}

Handling live activity from a push notification

One of the most powerful features of Live Activities is their ability to receive updates via push notifications. This enables us to keep the content of a Live Activity synchronized with real-time data, ensuring users always have the latest information without manual intervention.

With ActivityKit, we can update or end Live Activities directly from the server by using push tokens. Starting with iOS 17.2, we can even start new Live Activities using push notifications.

Push notification capability

Before we go ahead make sure you have added the push notification capability in your application target.

Getting Started with Push Tokens

Push tokens are the key to communicating with Live Activities on a user’s device.

1. Push-to-start tokens

A push-to-start token is a secure identifier generated by the system, which enables the server to start a new Live Activity remotely via Apple Push Notification service (APNs). This token is device-specific and tied to the user’s current app state. When the server sends a valid payload using this token, the system creates a Live Activity on the user’s device.

We can use the pushToStartTokenUpdates asynchronous API provided by ActivityKit to listen for and retrieve push-to-start tokens. This API notifies our app whenever a new token is available.

Here’s how to implement it:

 func observePushToStartToken() {
        if #available(iOS 17.2, *), areActivitiesEnabled() {
            Task {
                for await data in Activity<WaitTimeDemoAttributes>.pushToStartTokenUpdates {
                    let token = data.map {String(format: "%02x", $0)}.joined()
                       // Send token to the server
                    }
            }

        }
    }

Activity<MyAttributes>.pushToStartTokenUpdates: an asynchronous sequence that continuously listens for new push-to-start tokens generated by the system.

2. Push-to-Update token

Once we have started a Live Activity on the user's device, we might need to update it periodically, such as to reflect progress, changes in status, or updated data. This is where push token updates come into play. When the app starts a Live Activity, it will receive a push token from ActivityKit, which we can use to send updates to the Live Activity via push notifications.

The pushTokenUpdates API is used to retrieve the push token required for sending updates to an existing Live Activity. This token is a unique identifier for each Live Activity that the app can use to send push notifications to the device.

Here's how to get an update token:

func observePushUpdateToken() {

    // Check if iOS version 17.2 or later is available and if activities are enabled
    if #available(iOS 17.2, *), areActivitiesEnabled() {

        // Start a task to observe updates from ActivityKit
        Task {

             // Listen for any updates from a Live Activity with WaitTimeDemoAttributes
            for await activityData in Activity<WaitTimeDemoAttributes>.activityUpdates {

                // Listen for updates to the push token associated with the Live Activity
                Task {
                    // Iterate through the push token updates

                    for await tokenData in activityData.pushTokenUpdates {

                        // Convert the token data to a hexadecimal string
                        let token = tokenData.map { String(format: "%02x", $0) }.joined()

                        // Obtain the associated booking ID from the activity attributes
                        let bookingId = activityData.attributes.bookingId

                        // Prepare the data dictionary to pass to the callback
                        let data = [
                            "token": token,
                            "bookingId": activityData.attributes.bookingId
                        ]

                        // TODO Send data to the server
                    }
                }
            }
        }
    }
}

After obtaining the update push token, we can use it to send push notifications to update the Live Activity. The token may change over time, so the server needs to be prepared to handle updates to the push token. Whenever a new token is received, it should be updated on the server and invalidated on previous tokens.

The format of the push notification is similar to the one we used to start a Live Activity, but this time, we're sending an update to the content or state of the existing Live Activity.

Using Push-to-Start Tokens to Start a Live Activity

1. Payload for Starting a Live Activity

When the server needs to start a Live Activity, it sends a JSON payload to APNs, using the push-to-start token as an identifier. The system will create the Live Activity on the device upon receiving this payload.

Payloads(all fields are required):

"aps": {
        "timestamp": '$(date +%s)',
        "event": "start",
        "content-state": {
            "progress": 0.1,
            "currentPositionInQueue": 8
        },
        "attributes-type": "WaitTimeDemoAttributes",
        "attributes": {
            "waitlistName": "For Testing",
            "waitlistId": "",
            "bookingId": ""
        },
      "alert": {
            "title": "",
            "body": "",
            "sound": "default"
        }
    }

timestamp: Represents the current time in UNIX timestamp format to indicate when the event occurred.
event: The type of event; in this case, we’re starting a Live Activity ("start")
content-state: Holds information related to the current state of the activity. Note: The key should match with Live activity Attributes.
attributes-type: Specifies the type of attributes for the Live Activity. A Live activity data holder, which contains the state and attributes.
attributes: Contains the immutable data of live activity.
alert: Configures a notification that may appear to the user.

2. Headers for Push Notification

When sending this push notification, the following headers are required:

apns-topic: The topic indicates the bundle identifier and specifies the push type for Live Activities.

apns-topic: <bundleId>.push-type.liveactivity

apns-push-type: Specify that this is a push notification for a Live Activity.

apns-push-type: liveactivity

apns-priority: Set the value for the priority to 5 or 10 (We'll discuss this in next section).

apns-priority: 10

authorization: The bearer token used for authenticating the push notification request.

authorization: bearer $AUTHENTICATION_TOKEN

Behaviour on the Device

1. Starting the Live Activity:

When the device receives the push notification, the system automatically creates a new Live Activity using the provided attributes.
The app is woken up in the background to download any assets or perform setup tasks.

2. Token Refresh:

Once the Live Activity starts, the system generates a new push token for updates. This token should be send to server for managing future updates or ending the activity.

Sending Push Notifications to Update the Live Activity

Payloads(all fields are required):
 "aps": {
          "timestamp": '$(date +%s)',
          "event": "update",
          "content-state": {
              "progress": 0.941,
              "currentPositionInQueue": 10
          }
          "alert": {
            "title": "",
            "body": " ",
            "sound": "anysound.mp4"
        }
      }

Once we have the payload and headers set up, we'll send the push notification from the server to APNs, which will then deliver it to the user’s device. When the device receives the update notification, ActivityKit will apply the changes to the existing Live Activity and update the content on the Dynamic Island or Lock Screen.

Once a Live Activity has ended, the system ignores any further push notifications sent to that activity. This means if we send an update after the Live Activity is complete, the system won't process it, and the information may no longer be relevant. If a push notification is not delivered or is ignored after the activity ends, the Live Activity might display outdated or incorrect information.

Sending Push Notifications to End the Live Activity

To end a Live Activity, we can send a push notification with the event field set to end. This marks the activity as complete.

By default, a Live Activity stays on the Lock Screen for up to four hours after it ends, giving users a chance to refer to the latest information. However, we can control when the Live Activity disappears by adding a dismissal-date field in the push notification's payload.

For example, in a waitlist scenario, when the waitlist is over and users are served, we can send an update with an "end" event, like this:

{
    "aps": {
        "timestamp": 1685952000,
        "event": "end",
        "dismissal-date": 1685959200,
        "content-state": {
              "progress": 0.1,
              "currentPositionInQueue": 1
         }
    }
}

To remove Live Activity immediately after it ends, set the dismissal-date to a timestamp in the past. For example: "dismissal-date": 1663177260. Alternatively, we can set a custom dismissal time within a four-hour window.

If we don’t include a dismissal-date, the system will handle the dismissal automatically, using its default behavior.

Activity relevance-score

When our app starts multiple Live Activities, we can control which one appears in the Dynamic Island by setting a relevance-score in the JSON payload.

If we don’t set a score or if all Live Activities have the same score, the system will show the first one started in the Dynamic Island. To highlight more important updates, assign a higher relevance score (e.g., 100), and for less important ones, use a lower score (e.g., 50).

Make sure to track and update relevance scores as needed to control which Live Activity appears in the Dynamic Island. Here's an example with a high relevance score of 100:

{
    "aps": {
        "timestamp": 1685952000,
        "event": "update",
        "relevance-score": 100,
        "content-state": {
            ....
        }
    }
}

This ensures that the most important Live Activity update is shown in the Dynamic Island.

Push Update frequency for Live Activities

ActivityKit push notifications come with certain limits on how frequently they can be sent to avoid overwhelming users. This limit is referred to as the ActivityKit notification budget, which restricts the number of updates our app can send per hour. To manage this budget and prevent throttling, we can adjust the priority of our push notifications using the apns-priority header.

Setting the Priority

By default, if we don’t specify a priority for push notifications, they will be sent with a priority of 10 (immediate delivery), and this will count toward ActivityKit push notification budget. If we exceed this budget, the system may throttle our notifications. To reduce the chance of hitting the limit, consider using a lower priority (priority 5) for updates that don’t require immediate attention.

Handling Frequent Updates

In some use cases, such as tracking a live sports event, we may need to update our Live Activity more frequently than usual. However, updating the Live Activity too often could quickly exhaust the notification budget, causing delays or missed updates.

To overcome this, we can enable frequent updates for our Live Activity. This allows our app to send updates at a higher frequency without hitting the budget limits. To enable this feature, we need to modify our app's Info.plist file:

Open the Info.plist file and add the following entry:

<key>NSSupportsLiveActivitiesFrequentUpdates</key>
<true/>

This change will allow our app to send frequent ActivityKit push notifications. However, users can turn off this feature in their device settings.

Detecting and Handling Frequent Update Settings

If a user has deactivated frequent updates for the app, we can detect this and display a message asking them to turn it back on. Additionally, we can adjust our update frequency to match the user's preferences.

We can also subscribe to updates regarding the status of frequent updates via the frequentPushEnablementUpdates stream, which allows us to respond to changes in the notification settings in real-time.

In Summary

Use priority 5 for less urgent updates to avoid hitting the notification budget.
Use priority 10 for critical updates to ensure timely delivery.
Enable frequent updates in the Info.plist for use cases requiring high-frequency updates, like live sports tracking.
Respect users’ preferences for frequent updates and adjust the app accordingly.

Further, we've discussed the intricacies of setting up, configuring, and Testing Live Activity Push Notifications to create a seamless user experience.

Read the complete guide on Integrating Live Activity and Dynamic Island in iOS.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

How To Create Easy Pagination In Jetpack Compose

Nandani Sharma — Tue, 03 Dec 2024 10:18:15 +0000

Introduction

When building apps with long lists of data, the Jetpack Paging Library is often the go-to solution. However, it can be overkill for scenarios where you need basic pagination or when working with APIs and databases that provide simple offset or query-based data retrieval.

In this blog post, I’ll show you how to implement smooth pagination in Jetpack Compose without using the Paging 3 library. Instead, we’ll use Firestore queries and Compose’s LazyColumn to achieve an elegant, lightweight solution that is easier to understand and adapt.

Why Use This Approach?

The Jetpack Paging Library is powerful, but it has its complexities and a steeper learning curve. Here are some scenarios where this custom approach shines:

Simplicity: You have basic pagination needs and prefer a more straightforward solution.
Control: You want full customization over how and when data is fetched and displayed.
Firestore Optimization: This approach takes advantage of Firestore’s native query capabilities, making it ideal for apps using Firebase.

By the end of this tutorial, you’ll have a working implementation that can dynamically load more data as the user scrolls through a list.

Step 1: Setting Up Dependencies

To get started, ensure your project includes the necessary dependencies for Firebase, Hilt, and Jetpack Compose. You can follow these steps to set up your Firebase project and include the required dependencies.

Add these to your build.gradle file:

// Firebase
implementation(platform("com.google.firebase:firebase-bom:33.6.0"))
implementation("com.google.firebase:firebase-common-ktx:21.0.0")
implementation("com.google.firebase:firebase-firestore-ktx:25.1.1")

// Hilt for Dependency Injection
implementation("com.google.dagger:hilt-android:2.51.1")
kapt("com.google.dagger:hilt-android-compiler:2.51.1")
implementation("androidx.hilt:hilt-navigation-compose:1.2.0")


// Coil for Image Loading
implementation("io.coil-kt:coil-compose:2.7.0")

These libraries will enable Firestore integration, dependency injection with Hilt, and image rendering with Coil.

Step 2: Firestore Integration

To interact with Firestore, define a Movie data model and a MovieService for fetching data.

Define the Movie Model

The Movie class represents a movie document in Firestore:

data class Movie(
    val id: String = UUID.randomUUID().toString(),
    val title: String = "",
    val posterUrl: String = "",
    val description: String = "",
    var createdAt: Long = System.currentTimeMillis()
)

We will use the createdAt field for sorting and pagination.

Create the Movie Service

We will handle the Firestore queries to fetch the initial dataset and subsequent pages using the MovieService:

@Singleton
class MovieService @Inject constructor(
db: FirebaseFirestore
) {
private val movieRef = db.collection("movies")

    fun insertMovieDetails(
        movie: Movie
    ) {
        movieRef.add(movie)
    }

    suspend fun getMovies(
        lastCreatedAt: Long,
        loadMore: Boolean = false
    ): List<Movie> {
        return movieRef
            .whereGreaterThan("createdAt", lastCreatedAt)
            .orderBy("createdAt", Query.Direction.ASCENDING)
            .limit(10) // Limit to 10 items per page
            .get().await().documents.mapNotNull {
                it.toObject(Movie::class.java)
            }
    }
}

We will use insertMovieDetails function in the first run of app to setup initial/sample movie data in firestore.
The getMovies function fetches the next page of movies based on the lastCreatedAt timestamp. It queries Firestore for movies created after the lastCreatedAt value, orders them by createdAt, and limits the results to 10 items per page, making it easy to implement pagination.
The await() function is an extension function that converts a Task to a suspend function.

Step 3: Setting Up the ViewModel

The MoviesListViewModel will handle the pagination logic and expose the list of movies to the UI. It will also manage the loading state and trigger data fetching when needed.

When the app is launched for the first time, we’ll insert some sample movie data into Firestore. This data will be used to demonstrate pagination. And then comment out the insertMovieDetails function.

Here’s the ViewModel implementation:

@HiltViewModel
class MoviesListViewModel @Inject constructor(
    private val movieService: MovieService
): ViewModel() {
    val moviesList = MutableStateFlow<List<Movie>>(emptyList())
    private val hasMoreMovies = MutableStateFlow(true)
    val showLoader = MutableStateFlow(false)

    // Insert sample movie data into Firestore
    // Comment out this function after the first run
    fun insertMovieData(
        movieList: List<Movie>
    ) = viewModelScope.launch {
        withContext(Dispatchers.IO) {
            movieList.forEach { movie ->
                delay(1000)
                movieService.insertMovieDetails(movie)
                moviesList.value += movie
            }
        }
    }

    // Fetch movie details from Firestore
    // Load more movies if loadMore is true
    fun fetchMovieDetails(
        lastCreatedAt: Long,
        loadMore: Boolean = false
    ) = viewModelScope.launch(Dispatchers.IO) {
        if (loadMore && !hasMoreMovies.value) return@launch
        showLoader.tryEmit(true) // Show loading indicator
        if (loadMore) delay(3000) // Simulate loading delay
        val movies = movieService.getMovies(lastCreatedAt, loadMore) // Fetch movies
        moviesList.tryEmit((moviesList.value + movies).distinctBy { it.id }) // Update the list of movies with unique items
        hasMoreMovies.tryEmit(movies.isNotEmpty()) // Check if there are more movies to load
        showLoader.tryEmit(false) // Hide loading indicator
    }

    // Load more movies when the user scrolls to the bottom
    // Triggered by the LazyColumn's reachedBottom state
    fun loadMoreMovies() {
        val lastCreatedAt = moviesList.value.last().createdAt
        fetchMovieDetails(lastCreatedAt, loadMore = true)
    }
}

The insertMovieData function inserts sample movie data into Firestore. This function is used only once to set up the initial dataset.
The fetchMovieDetails function fetches the next page of movies from Firestore based on the lastCreatedAt timestamp. It updates the moviesList and hasMoreMovies state flows accordingly.
The loadMoreMovies function is called when the user scrolls to the bottom of the list. It fetches the next page of movies by calling fetchMovieDetails with the lastCreatedAt value of the last movie in the list.
The showLoader state flow is used to display a loading indicator while fetching data.
The hasMoreMovies state flow tracks whether there are more movies to load.
The moviesList state flow holds the list of movies displayed in the UI.
The distinctBy function ensures that only unique movies are added to the list.

Step 4: Building the Composable UI

The UI consists of a LazyColumn that displays the list of movies and triggers data loading when the user scrolls to the bottom.

@Composable
fun MoviesListView(paddingValue: PaddingValues) {
    val viewmodel = hiltViewModel<MoviesListViewModel>()
    val moviesList by viewmodel.moviesList.collectAsState()
    val showLoader by viewmodel.showLoader.collectAsState()

    // Called only once to insert sample movie data on first run
    /*val sampleMovies = remember {
        mutableStateOf(MovieUtils.movies)
    }
    LaunchedEffect(Unit) {
        viewmodel.insertMovieData(sampleMovies.value)
    }*/

    LaunchedEffect(Unit) {
        // Fetch movie details when the screen is launched
        viewmodel.fetchMovieDetails(System.currentTimeMillis())
    }

    val lazyState = rememberLazyListState()

    // Check if the user has scrolled to the bottom of the list
    val reachedBottom by remember {
        derivedStateOf {
            lazyState.reachedBottom() // Custom extension function to check if the user has reached the bottom
        }
    }

    LaunchedEffect(reachedBottom) {
        // Load more movies when the user reaches the bottom of the list and there are more movies to load
        if (reachedBottom && moviesList.isNotEmpty()) {
            viewmodel.loadMoreMovies()
        }
    }

    LazyColumn(
        state = lazyState,
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues = paddingValue)
    ) {
        itemsIndexed(moviesList) { _, movie ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .border(
                        width = 1.dp,
                        color = Color.Gray
                    )
            ) {
                MovieCard(movie = movie)
            }
        }

        // Show loading indicator at the end of the list when loading more movies
        item {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .heightIn(min = 20.dp), contentAlignment = Alignment.Center
            ) {
                if (showLoader) {
                    CircularProgressIndicator()
                }
                Spacer(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(20.dp)
                )
            }
        }
    }
}

@Composable
private fun MovieCard(movie: Movie) {
    val imageLoader = LocalContext.current.imageLoader.newBuilder()
        .logger(DebugLogger())
        .build()
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.Black, shape = MaterialTheme.shapes.large)
    ) {
        Image(
            painter = rememberAsyncImagePainter(model = movie.posterUrl, imageLoader = imageLoader),
            contentDescription = null,
            modifier = Modifier
                .fillMaxSize()
        )
    }
}

The MoviesListView composable displays the list of movies in a LazyColumn. It fetches the initial dataset when the screen is launched and loads more movies when the user scrolls to the bottom.

The reachedBottom extension function checks if the user has scrolled to the bottom of the list. This function is called in a LaunchedEffect block to load more movies when the user reaches the end of the list.

fun LazyListState.reachedBottom(): Boolean {
    val visibleItemsInfo = layoutInfo.visibleItemsInfo // Get the visible items
    return if (layoutInfo.totalItemsCount == 0) {
        false // Return false if there are no items
    } else {
        val lastVisibleItem = visibleItemsInfo.last() // Get the last visible item
        val viewportHeight =
            layoutInfo.viewportEndOffset +
                layoutInfo.viewportStartOffset // Calculate the viewport height

        // Check if the last visible item is the last item in the list and fully visible
        // This indicates that the user has scrolled to the bottom
        (lastVisibleItem.index + 1 == layoutInfo.totalItemsCount &&
            lastVisibleItem.offset + lastVisibleItem.size <= viewportHeight)
    }
}

And that’s it! You’ve created a simple yet effective pagination system in Jetpack Compose using Firestore queries and LazyColumn.

Want to dive deeper into testing this pagination method and uncover its key advantages?

Head over to the full guide on the Canopas blog to get all the details and enhance your Jetpack Compose development skills!

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Automate Flutter Android App Deployment with GitHub Actions and fastlane

Nandani Sharma — Tue, 26 Nov 2024 06:40:37 +0000

Background

Deploying your Flutter Android app doesn’t have to be a manual, time-consuming process. We’ll guide you through setting up automated deployment using GitHub Actions and Fastlane, enabling you to focus more on building features and less on repetitive tasks.

Previously, we explored deploying Flutter iOS apps; now, we turn our attention to Android, ensuring a smooth and efficient workflow for app distribution.

If you’re interested in further customization or adding other deployment tracks (e.g., production, beta), you can modify the Fastfile and GitHub Actions workflow accordingly.

Now, we’ll set up a Github action for an Android application using fastlane.

Why fastlane?

fastlane is a straightforward and efficient tool for integrating CI/CD pipelines into Android app development. It not only simplifies deployment but also handles tasks like generating screenshots, managing code signing, and automating releasing processes.

Prerequisite

Before diving in, ensure you have a Flutter application and a GitHub repository ready for your project.

A basic workflow setup is also essential to proceed, including checking out the repository and setting up the Flutter environment. Since this setup is covered in our previous article, we won’t repeat it here.

For detailed instructions on setting up the workflow and Flutter environment, refer to our Basic Workflow Setup Guide.

Let’s Get Started

We’ll break down the auto-deployment process into three key parts.

Configure Android Code Signing
Set Up fastlane
Add Jobs for Publishing the App

1. Configure Android Code Signing

To publish your app on the Play Store, it must be signed with a digital certificate. Android uses two signing keys for this process: Upload key and App signing key.

What are these keys, and why are they important?

Upload Key

The Upload Key is used to sign your app when you upload it to the Play Console. After uploading, Google Play will re-sign your app with the App Signing Key before distributing it to users.

The Upload Key is essential for authenticating your app during uploads.
It needs to be kept secure to prevent unauthorized access and to protect the integrity of your app’s updates.

To generate the Upload Key, follow the official Android Developer Guide on App Signing.

While creating the Upload Key, make sure to remember the password and key alias that you set for the key. You’ll need these later when configuring Fastlane and setting up the deployment process.

App Signing Key

The App Signing Key is the primary key used by Google Play to sign your app before delivering it to users. This key ensures that:

Your app updates are trusted by users.
Only apps signed with the same key can be installed or updated.
This key remains consistent throughout the lifetime of your app, providing security for future updates.

To generate the App Signing Key, follow the step-by-step instructions in the Collect your Google credentials section in the Fastlane setup documentation guide.

When creating the upload key, a JSON file is generated and downloaded. This file contains essential credentials that you will need to authenticate and manage your app on the Play Console. It will be required in the later steps.

2. Set Up Fastlane

Now, that we have the Upload Key and App Signing Key ready, it’s time to set up fastlane.

Install fastlane

To get started, you’ll need to install Fastlane on your machine.

# Using RubyGems(macOS/Linux/Windows)
sudo gem install fastlane

# Alternatively using Homebrew(macOS)
brew install fastlane

Set Up fastlane in Your Project

fastlane is installed, let’s configure it within your Flutter project.

Initialize fastlane

Open your terminal and navigate to your project’s root directory and change the directory to android. Then, run the following command

fastlane init

During the setup process, you’ll be prompted with a series of questions:

Package Name: Provide the package name of your application. You can find it in your android/app/build.gradle file, under defaultConfig > applicationId. For example:

applicationId "io.example.yourapp"

Path to JSON Secret File: Press Enter when asked for the path to your JSON secret file. We'll set up it later.
Download existing metadata and set up metadata management: Choose the option based on how you plan to manage app metadata and screenshots during deployment.
Google Play Upload: When asked if you plan on uploading information to Google Play via fastlane, answer ’n’ (No). We will configure this in a later step.

Now, you can see a newly created ./fastlane directory in your project. Inside this directory, you’ll find two key files:

Appfile: This file contains global configuration information for your app, such as the app’s package name and JSON key file.
Fastfile: This file defines the “lanes,” which are sets of actions that drive the behavior of fastlane for various tasks.

Now, open the Appfile and add the following line to specify the path to your JSON key file, which will be used for authenticating with the Google Play API.

Also, ensure that the package_name is set to the correct value for your app and set the JSON file path in the Appfile as follows

json_key_file("google_play_api_key.json") # Path to the json secret file
package_name("com.exapmle.appname")

🤔 Don’t worry!! We will add the google_play_api_key.json file in the next steps. Stay tuned!

Add Secrets to the Repository

In this step, we’ll add all the necessary environment variables and secrets that fastlane and the app will use during deployment.

To add new secrets and variables to your repository, go to Settings > Secrets and Variables.

APKSIGN_KEYSTORE_PASS: The password for the keystore that is set when creating the development.jks file.
APKSIGN_KEY_ALIAS: The alias created for the key inside the keystore .
APKSIGN_KEY_PASS: The password associated with the alias created for app’s signing key.
APKSIGN_KEYSTORE_BASE64: We need to convert the development.jks keystore file, which is generated during the creation of the App Signing Key, into Base64 format to store it as a secret. For that, open the terminal and navigate to the directory where the development.jks file is located. base64 -i <File name>| pbcopy Now that the Keystore is copied to your clipboard, paste this Base64 content as the value.
APP_PLAY_SERVICE_JSON_BASE64: Convert JSON file downloaded while creating Upload key to Base64 format in a similar way as the keystore file and add it as secret.

Set up environment variables

We will set up the environment variables for the deployment job. These variables will reference the secrets you added to your GitHub repository.

jobs:
  android_deployment:
    runs-on: ubuntu-latest
    env:
      APP_PLAY_SERVICE_JSON: ${{ secrets.APP_PLAY_SERVICE_JSON_BASE64 }}
      APKSIGN_KEYSTORE_BASE64: ${{ secrets.APKSIGN_KEYSTORE_BASE64 }}
      APKSIGN_KEYSTORE_PASS: ${{ secrets.APKSIGN_KEYSTORE_PASS }}
      APKSIGN_KEY_ALIAS: ${{ secrets.APKSIGN_KEY_ALIAS }}
      APKSIGN_KEY_PASS: ${{ secrets.APKSIGN_KEY_PASS }}

Configure `build.gradle` for Signing

To enable the Android build system to use these environment variables during the build process, add the following configuration to your android/app/build.gradle file.

signingConfigs {
    if (System.getenv("APKSIGN_KEYSTORE") != null) {
        release {
            storeFile file(System.getenv("APKSIGN_KEYSTORE"))
            storePassword System.getenv("APKSIGN_KEYSTORE_PASS")
            keyAlias System.getenv("APKSIGN_KEY_ALIAS")
            keyPassword System.getenv("APKSIGN_KEY_PASS")
        }
    } else {
        release {
            // Signing with the debug keys for now, so `flutter run --release` works.
            // Generate Debug keystore and add it here
        }
    }
}

 buildTypes {
            release {
            minifyEnabled true
            debuggable false
            shrinkResources true

            signingConfig signingConfigs.release
        }
        debug {
            minifyEnabled true
            debuggable true

            signingConfig signingConfigs.release
        }
    }

Whenever we initiate a release build, the system will look for the Keystore in the specified environment variables and use them to sign the build with the provided Keystore.

For local testing in release mode, you should generate a debug Keystore. The app will use this debug keystore if the release keystore is not available.

We've discussed further steps to define jobs for distribution of the Android app in our complete guide.

To read the step-by-step setup & implementation, check out our complete guide on Automate Flutter Android App Deployment with GitHub Actions and fastlane.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Golang + htmx + Tailwind CSS: Create a Responsive Web Application

Nandani Sharma — Tue, 19 Nov 2024 12:03:39 +0000

Background

In today’s web development landscape, JavaScript has long been the language of choice for creating dynamic and interactive web applications.

As a Go developer, what if you don’t want to use Javascript and still implement a responsive web application?

Imagine a sleek to-do list app that updates instantly as you check off tasks without a full-page reload. This is the power of Golang and htmx!

Combining Go and htmx allows us to create responsive and interactive web applications without writing a single line of JavaScript.

In this blog, we will explore how to use htmx and Golang to build web applications. (It can be used with other your favorite platforms, too.)

As a learning, we will implement basic create and delete operations for users.

What is htmx?

htmx is a modern HTML extension that adds bidirectional communication between the browser and the server.

It allows us to create dynamic web pages without writing JavaScript, as it provides access to AJAX, server-sent events, etc in HTML directly.

How htmx works?

When a user interacts with an element that has an htmx attribute (e.g., clicks a button), the browser triggers the specified event.
htmx intercepts the event and sends an HTTP request to the server-side endpoint specified in the attribute (e.g., hx-get="/my-endpoint").
The server-side endpoint processes the request and generates an HTML response.
htmx receives the response and updates the DOM according to the hx-target and hx-swap attributes. This can involve:

— Replacing the entire element’s content.
— Inserting new content before or after the element.
— Appending content to the end of the element.

Let’s understand it in more depth with an example.

<button hx-get="/fetch-data" hx-target="#data-container">
   Fetch Data
</button>
<div id="data-container"></div>

In the above code, when the button is clicked:

htmx sends a GET request to /fetch-data.
The server-side endpoint fetches data and renders it as HTML.
The response is inserted into the #data-container element.

Create and delete the user

Below are the required tools/frameworks to build this basic app.

Gin (Go framework)
Tailwind CSS
htmx

Basic setup

Create main.go file at the root directory.

main.go

package main

import (
 "fmt"
 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

It sets up a basic Go server, running at port 8080.
Run go run main.go to run the application.

Create a HTML file at the root directory, to render the user list.

users.html

<!DOCTYPE html>
<html>
   <head>
      <title>Go + htmx app </title>
      <script src="https://unpkg.com/htmx.org@2.0.0" integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" crossorigin="anonymous"></script>
      <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body class="text-center flex flex-col w-full gap-6 mt-10">
      <table id="user-list" class="w-1/2 mx-auto mt-4 border border-gray-300">
         <thead>
            <tr class="border border-gray-300">
               <th class="px-4 py-2">Name</th>
               <th class="px-4 py-2">Email</th>
               <th class="px-4 py-2">Actions</th>
            </tr>
         </thead>
         <tbody>
            {{ range .users }}
            <tr class="border border-gray-300">
               <td class="px-4 py-2">{{ .Name }}</td>
               <td class="px-4 py-2">{{ .Email }}</td>
               <td class="px-4 py-2">
                  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded">Delete</button>
               </td>
            </tr>
            {{ end }}
         </tbody>
      </table>
   </body>
</html>

We have included,

htmx using the script tag — https://unpkg.com/htmx.org@2.0.0

Tailwind CSS with cdn link —
https://cdn.tailwindcss.com

Now, we can use Tailwind CSS classes and render the templates with htmx.

As we see in users.html, we need to pass users array to the template, so that it can render the users list.

For that let’s create a hardcoded static list of users and create a route to render users.html .

Fetch users

main.go

package main

import (
 "fmt"
 "net/http"
 "text/template"

 "github.com/gin-gonic/gin"
)

func main() {
 router := gin.Default()

 router.GET("/", func(c *gin.Context) {
  users := GetUsers()

  tmpl := template.Must(template.ParseFiles("users.html"))
  err := tmpl.Execute(c.Writer, gin.H{"users": users})
    if err != nil {
       panic(err)
    }
 })

 router.Run(":8080")
 fmt.Println("Server is running on port 8080")
}

type User struct {
 Name  string
 Email string
}

func GetUsers() []User {
 return []User{
  {Name: "John Doe", Email: "johndoe@example.com"},
  {Name: "Alice Smith", Email: "alicesmith@example.com"},
 }
}

We have added a route / to render the user list and provide a static list of users (to which we will add new users ahead).

That’s all. Restart the server and let’s visit — http://localhost:8080/ to check whether it renders the user list or not. It will render the user list as below.

Create user

Create file user_row.html. It will be responsible for adding a new user row to the user table.

user_row.html

<tr class="border border-gray-300">
    <td class="px-4 py-2">{{ .Name }}</td>
    <td class="px-4 py-2">{{ .Email }}</td>
    <td class="px-4 py-2">
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded">Delete</button>
    </td>
</tr>

P.S. — You will notice that it has the same structure as the user table row in users.html . That’s because we want the same styling for the new row we are going to add.

Modify users.html. Add the Below code above the <table></table> tags.

<form hx-post="/users" hx-target="#user-list" hx-swap="beforeend">
   <input type="text" name="name" placeholder="Name" class="border border-gray-300 p-2 rounded">
   <input type="email" name="email" placeholder="Email" class="border border-gray-300 p-2 rounded">
   <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add User</button>
</form>

hx-post=“/users” — When the form will be submitted, it will trigger post request to /users route.

hx-target=“#user-list” —Specify the target where we want to add data.

hx-swap=“beforeend” — Specify the position where want to add data. In our case we want to add new user at the end of list, so we have used beforeend value.

Let’s implement /users(POST) route in the main.go file.

router.POST("/users", func(c *gin.Context) {
  tmpl := template.Must(template.ParseFiles("user_row.html"))

  name := c.PostForm("name")
  email := c.PostForm("email")

  user := User{Name: name, Email: email}
  err := tmpl.Execute(c.Writer, user)
  if err != nil {
   panic(err)
  }
})

It takes the name and email from the form input and executes the user_row.html.

Let’s try to add a new user to the table. Visit http://localhost:8080/ and click the Add User button.

Yayy! We’ve successfully added a new user to the list 🎉.

To dive deeper into the detail implementation guide, check out the complete guide at Canopas.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Integrating Live Activity and Dynamic Island in iOS: A Complete Guide

Nandani Sharma — Fri, 15 Nov 2024 07:20:57 +0000

Background

With the release of iOS 16, Apple introduced Live Activities, and later with iPhone 14 Pro, the Dynamic Island—two powerful tools that allow us to present real-time, glanceable updates directly on the Lock Screen and at the top of the screen on the Dynamic Island. These features are designed to keep users informed about ongoing activities, like delivery tracking, live sports scores, or wait times, without requiring them to unlock their devices or open the app.

In this two-part guide, we’ll discuss everything you need to know to integrate Live Activities and Dynamic Island effectively in your iOS app. We'll detail each step from understanding design constraints to setting up a Live Activity, handling updates, and adding interactions.

What we're going to cover in this first part?

What Are Live Activities and Dynamic Island?
Live Activity presentations and constraints
Design layout for different presentations
Start, update and end the activity

Here's what will achieve at the end of this blog.

What Are Live Activities and Dynamic Island?

Live Activities allow apps to display real-time information on the Lock Screen. These updates are perfect for tracking time-sensitive events like food delivery, ride-sharing ETAs, etc.

Dynamic Island extends this functionality by offering a compact, interactive display area. Users can see and interact with live updates at the top of their screens while using other apps, creating a nondisturbing way to stay informed on background activities like calls, music, and live events.

Live Activity presentations and constraints

Before implementing Live Activities and Dynamic Island, it’s important to understand the design guidelines and presentation options available. Apple has specific constraints and recommendations to ensure that these features offer a consistent, user-friendly experience across apps.

Presentations for Live Activities

Live Activities offers different presentation styles on the Lock Screen and Dynamic Island. Understanding these styles is crucial to creating a well-designed Live Activity that feels native to iOS.

Lock Screen Presentation

On the Lock Screen, Live Activities appear as banners with detailed information. They provide a flexible area for displaying key data about your app’s real-time events, like estimated arrival, or live score updates.

Dynamic Island Presentations

Compact Presentation

The compact view is the most commonly seen view, typically displayed when the device is not actively engaged with ongoing tasks. It consists of two separate elements positioned on either side of the TrueDepth camera.

To ensure clarity, use consistent colors and typography for visibility, and avoid adding padding between the content and the camera to prevent misalignment.

Make sure that tapping on either the leading or trailing content opens the same scene in your app to provide a consistent and intuitive user experience.

Minimal Presentation

The minimal presentation is used when multiple Live Activities are active simultaneously. In this state, your Live Activity is displayed as a small circle or oval, either on the Dynamic Island or detached from it. This presentation should focus on delivering the most essential and up-to-date information.

Instead of a logo, display live, dynamic content like a countdown or real-time update of the essential information, even if it means abbreviating details. When users tap on the minimal display, it should open the app to the relevant event or task for more details. If the users touch and hold the minimal Live Activity, users can access essential controls or view more content in the expanded presentation.

Expanded Presentation

The expanded presentation appears when users tap and hold a compact or minimal Live Activity. This view gives more space for detailed information and interactions, while still keeping the smooth, rounded "capsule" shape.

Make sure the content expands in a way that feels natural and doesn’t cause confusion. If you need more vertical space, keep the edges curved to maintain a clean look. Avoid making the height awkward or uneven. Like the other presentations, keep your content aligned around the camera area to maintain a tidy and efficient layout.

Constraints

Avoid Overcrowding: Don’t overcrowd the Live Activity with too much information. Keep it concise and focus on the most relevant data to ensure clarity and a good user experience.
Content Alignment: When designing Live Activities, make sure content is properly aligned and visually balanced around the camera area (in the compact and expanded presentations) to avoid misalignment.
Image Asset Size: The image used in a Live Activity must fit within the size limits of the presentation for the device. If the image is too large, the system may not start the Live Activity. For example, an image for the minimal presentation should not exceed 45x36.67 points.
Duration of Live Activity: A Live Activity can be active for up to 8 hours. After this, the system automatically ends it and removes it from the Dynamic Island. However, it will stay on the Lock Screen for up to 4 more hours, or until manually removed, whichever happens first. This means a Live Activity can remain on the Lock Screen for a maximum of 12 hours.
Live Activity Sandbox: Each Live Activity runs in its own sandbox. Unlike widgets, it can't access the network or receive location updates. If you need to update the data, use ActivityKit in your app or allow the Live Activity to receive push notifications through ActivityKit.
Minimal Distractions: Since Live Activities are meant to provide quick, glanceable information, avoid cluttering them with non-essential details. Stick to only the most important and up-to-date data that users need to see at a glance.
Data size limit: The combined size of static and dynamic data for a Live Activity, including data for ActivityKit updates and ActivityKit push notifications, cannot exceed 4 KB. Keep the data within this limit to ensure proper functionality and smooth performance of your Live Activity.

Integrating Live Activity and Dynamic Island in iOS can greatly enhance the user experience by providing real-time updates and immersive interactions directly on the iPhone’s home screen.

To explore the full guide on seamlessly integrating these features, check out our complete blog at Canopas.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋

Building a Better Monorepo with TypeScript, Turborepo, or Nx

Nandani Sharma — Mon, 11 Nov 2024 10:29:38 +0000

Introduction

Monorepo is a software development strategy that creates shared libraries and dependencies in a single repository. Monorepos offers a solution for crucial dependency management by centralizing codebases, improving collaboration, and streamlining dependency management.

This article aims to explain the process of creating monorepos using well-known tools and technologies like TypeScript, Turborepo, and Nx, allowing you to choose the best tool based on your requirements.

Why Monorepo?

Imagine managing three separate applications for a project: a Web App, a Mobile App, and an Admin Panel. Each resides in its git repository and shares a common UI component library. Now think, when you need to update a critical button component for accessibility.

The process becomes a headache:

Update the component library and publish to NPM
Update each application one by one
Deal with version conflicts and dependencies
Ensure consistency across all projects

Sounds frustrating, right? This is where monorepos comes in—a simpler approach where all your projects live under one roof, making it easier to coordinate changes and maintain consistency across your codebase.

Let’s start with monorepos…

In the following sections, we will create basic utils monorepo which can be used anywhere in the project.

Monorepo with Typescript

In this section, we will build a monorepo manually using just TypeScript and npm.

Initialize the Project

Create a monorepo example directory and set the root project using the below commands,

npm init -y
npm install typescript
npm install --save-dev @types/node ts-node

Organize Packages

Create a packages folder and a utils directory within it to act as a shared library.

mkdir -p packages/utils

Init npm inside utils with scope @monorepo,

npm init --scope @monorepo --workspace ./packages/utils -y

packages/utils/package.json will look like this,

{
  "name": "@monorepo/utils",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

This will also add a workspace field in the root’s package.json like below. If you have multiple monorepos, you can update workspace using wildcards like "packages/*".

"workspaces": [
    "packages/utils" or "packages/*"
]

Configure TypeScript

We need to configure typescript in both the directory root and packages,

npx tsc --init && cd packages/utils && npx tsc --init

You can update baseDir and rootDir in packages/utils’s tsconfig.jsonas needed. In my case it is,

"rootDir": "./src",
"outDir": "./dist", // make sure to update main

Note: Make sure to update the main field in the package.json based on your outDir. For me, it is dist/index.js .

As we need monorepo to be referenced in other projects, we need to add composite: true in utils/tsconfig.json .
Add utils reference in the project root’s tscofig.json

"compilerOptions": {...},
"references": [
     {"path": "./packages/utils" },
 ]

For module resolution and path mapping, we will add the following in the root’s tsconfig.json

"compilerOptions": {
  ...,
  "baseUrl": "./",              
  "paths": {
      "@monorepo/utiltest": ["packages/utils/*"],
   }
},

Add and Build Code

Write a sample function in packages/utils/src/index.ts

// packages/utils/src/index.ts

export function multiply(a: number, b: number): number {
    return a * b;
}

Add "build": "tsc --build" in the root and utils package.json scripts, then build with npm run build.

Usage

Import @monorepo/utils into the root file to verify the function works as expected.

npm install @monorepo/utils

You can use the monorepo package like below,

import { multiply } from "@monorepo/utils";

const result = multiply(2, 3);
console.log(`result: ${result}`);

Yeah, You have created a basic monorepo setup. You can build as many as monorepos and use them like this.

When to Use?

Monorepo’s with only typescript is useful for small, simple projects or experimental purposes without requiring third-party tooling.

Next, let’s create monorepo with Turborepo.

Monorepo with Turborepo

Turborepo is a high-performance monorepo build tool that simplifies dependency management and speeds up builds through caching.

Follow the below steps to configure monorepo using Turborepo.

Set Up Turborepo

Install Turborepo as a dev dependency,

npm install turbo -D

Add packageManager to each package.json to ensure compatibility with Turborepo.

"packageManager": "npm@<npm-version>",

Configure Turborepo

Create a turbo.json in the root directory:

{
    "$schema": "https://turborepo.org/schema.json",
    "tasks": {
      "build": {
        "dependsOn": ["^build"],
        "outputs": ["dist/**"]
      },
      "dev": {
        "cache": false
      }
    }
  }

The tasks section defines tasks like build dependencies and caching behavior.

Add and Build Code

Add a data-transform package to illustrate Turborepo's dependency management.
Add code for transforming data in data-transform,

export function transformData(data: any): any {   
   return data.map((item) => ({ ...item, transformed: true })); 
}

Build the entire project using,

npx turbo run build

Turborepo automatically caches results, speeding up subsequent builds.

Usage

You can install @monorepo/data-transform into the root or utils package, and verify it's working as expected.

When to Use?

Ideal for mid-size projects that need optimized build times and clear dependency management.

Yeah! We've Successfully Built a Monorepo with TypeScript and Turborepo!

Ready to take it a step further with Nx? 🚀

Head over to our full blog to explore how to implement Monorepo with Nx and discover even more insights on effective monorepo management.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding! 👋

Automate Flutter iOS App Deployment with GitHub Actions and Codemagic CLI

Nandani Sharma — Wed, 06 Nov 2024 05:54:59 +0000

Background

In this tutorial, we’ll set up an automated deployment process for a Flutter iOS application using GitHub Actions. You’ll learn how to create a workflow that runs Codemagic CLI tools to build your app and upload it to TestFlight.

By the end, you’ll have an efficient app distribution pipeline that saves time and effort, allowing you to focus more on development and less on manual deployments.

Why Codemagic?

Codemagic CLI tools are a free, open-source set of command-line utilities that power Codemagic’s CI/CD service.

When I first tried setting up auto-deployment for my iOS app, I faced several frustrating and hard-to-resolve pipeline failures. That’s when I discovered Codemagic CLI — it required no configuration and simplified the entire build automation process.

Since then, I’ve been happily using it! 😅

One of the standout advantages of Codemagic CLI tools is their cross-platform compatibility. Whether you’re building for iOS or Android, you don’t need separate tools for each platform, making it a versatile choice for mobile developers.

Prerequisites

Before you begin, ensure you have the following:

An App Store account enrolled in the Apple Developer Program.
A Flutter application ready for deployment.
A GitHub repository is set up for your project.

For this tutorial, I’ll be using the Flutter counter app as an example.

Let’s get started! 👇

To make it easier, I have divided the article into 3 separate sections.

Basic Workflow Setup
Setting things up in App Store Connect
Add Jobs For Distribution

Now, let’s walk through each of these steps together!

Ready? Let’s go! 🚀

Basic Workflow Setup

In this section, we’ll add a basic GitHub workflow setup.

Step 1: Creating a Workflow File

Navigate to your project’s root directory.
If you don’t already have one, create a new directory named .github/workflows.
Inside this directory, create a new YAML file (e.g., ios.yml).

Step 2: Set up workflow trigger

In the newly created YAML file, start by defining the workflow trigger

name: Publish to App Store Connect

on:
 push:
 branches:
 - main

name: This is the name of the workflow. It will be displayed under the Actions tab in your GitHub repository.

on: This defines the event that triggers the workflow. In this case, the workflow will be triggered automatically whenever code is pushed to the main branch (e.g. when a sub-branch is merged into main).

There are other events you can use as triggers depending on your workflow needs, such as pull requests, tags, or schedule-based triggers.

Step 3: Set up the jobs

jobs:
  ios_deploy_testflight:
    runs-on:  macos-13

A workflow is made up of one or more jobs.

Each job runs in a specific environment, specified by the runs-on attribute. In this case, we're using a macOS environment (macos-13), which is essential for building iOS apps.

Step 4: Add the jobs

steps:
  - name: Checkout
    uses: actions/checkout@v2

Checkout: This action checks out your repository into the $GITHUB_WORKSPACE, allowing your workflow to access the code and resources in your repository.

- name: Set up Flutter SDK
    uses: subosito/flutter-action@v2
    with:
      flutter-version: 3.19.0
      cache: true

Set up Flutter SDK: This step configures the Flutter environment in GitHub Actions. Make sure the specified version is compatible with the version in your pubspec.yaml file.

By default, this action will use the latest version, but you can specify a different version as needed.

- name: Install dependencies and lint check
  run: |
    flutter clean
    flutter pub get
    dart analyze --fatal-infos

Install dependencies and lint check: In this step, we run flutter pub get to install all necessary dependencies for the project.

We also perform a lint check using dart analyze --fatal-infos. This lint check is optional; you can skip it if you prefer not to perform static analysis on your code.

Once you push this workflow file to the main branch, you will see a build queued in the Actions tab of the GitHub repository.

Setting things up in App Store Connect

Before we proceed, we need to set up your app in App Store Connect. Skip this step if you’ve already done it.

Let’s walk through them. 👇

1. Create a Distribution certificate

You can follow this guide if you don’t have it.

Skip this if you’ve a Distribution certificate already.

2. Create an App Bundle identifier

Go to Identifiers and create a new ID. This bundle ID is required to create an app in the App Store.

Select App IDs and continue.
Select App to Register.
Provide a Description, Bundle ID, and check capabilities you need in the app.

Click continue and now you have a new identifier for the app.

3. Create a Provisioning Profile

A Provisioning Profile is linked to a Distribution Certificate and identifies a team or organization. This profile authorizes your app to run on devices without needing Xcode.

Go to the Profiles section and click on the + sign to create a new Provisioning Profile.
Select App Store Connect under Distibution and click Continue.
Choose the App ID you created earlier and click Continue.

Select the Distribution Certificate for the Provisioning Profile and click Continue.
Add the Provisioning Profile name and click Continue.

Download the Provisioning Profile.

4. Create a New App

Go to Apps and create a New App
Fill in the required details in the form and click on Create.

Congratulations! You have successfully created a new app.

5. Generate an API key

As per the Codemagic guide, to enable Codemagic CLI tools to upload and fetch data from App Store Connect, you’ll need to generate an App Store Connect API key with App Manager access.

Log in to App Store Connect and navigate to Users and Access > Integrations.
Click on the + sign to generate a new API key.
Provide a name for the key and choose an App Manager access level.

After generating the key, it will be listed among the active keys. Click Download API Key to save the private key for later use.

Note: The key can only be downloaded once, so be sure to keep it at a secure location.

Save this Issuer ID, KEY ID, and the API Key, as we’ll need it later.

6. Download the Certificate

Download the distribution certificate you created in Step 5.

Locate the downloaded certificate and open it using Keychain Access. Next, Export the certificate to create a file with a .p12 extension. You can save this file in your Downloads folder or any directory you prefer.

When you click to download, you’ll be prompted to set a password for the certificate. This password will be required to access the certificate, so make sure to remember it. You will need to add it as a variable in your workflow.

Now we’ve completed all the basic setups for App Store Connect, it’s time to configure the environment variables for GitHub Actions.

To read the Full blog on our platform, please visit Canopas blog.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding! 👋

How to write E2E tests for Next.js Application using Playwright

Nandani Sharma — Tue, 29 Oct 2024 08:48:24 +0000

Background

Imagine building a house without carefully reviewing the blueprints or measuring the materials.

You might have misaligned walls, incorrectly sized windows, or structural issues. Similarly, while developing an application, neglecting tests can lead to:

Unexpected errors: Bugs and errors can go unnoticed until users face your application, potentially causing significant problems to users. Of course, That you will never want!
Poor user experience: A buggy application can frustrate users and damage your reputation.
Increased maintenance costs: Fixing bugs after they’ve been discovered can be time-consuming and expensive.

By investing time in testing your code, you’re essentially building a solid foundation for your application, ensuring its reliability, quality, and maintainability.

Why E2E tests?

E2E tests validate that the entire user journey functions correctly, from login to checkout or any other complex process. They ensure that the application provides a seamless and intuitive user experience.

We can easily detect any broken link, invalid user input, or any UI/UX problem that is laughing in the corner!

You might say, the tests take up much of my time 😨. Trust me, it will be worth it!!

Multiple tools are available for testing, such as Jest, Cypress, Playwright, etc. Each has advantages and drawbacks.

As we are going to perform End-to-End tests, Playwright is the testing tool that has more advantages over any other tools, specifically Cypress.

Hence, we will go with the playwright in this blog.

Without further ado, let’s go ahead!!

Prerequisites

Consider installing Node.js as a first step, if you don’t have one already.

Before we start, let’s first create a Next.js application. We will use it throughout the blog.

Execute the below command to create the Next.js app.

npx create-next-app@latest

It will ask questions for configuring the app, respond to them, and we’re ready with the app.

Setup steps

Installation

Execute the command to install the playwright.

npm init playwright@latest

It will ask you certain questions for configuring the playwright tool in your project.

Configuration

After completing the configuration, you will find some of the files created inside the project folder, but we will only need the playwright.config.ts file and the tests directory from them.

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://127.0.0.1:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://127.0.0.1:3000',
  //   reuseExistingServer: !process.env.CI,
  // },
});

testDir — Path where our test files live

projects — Defines the browsers, in which we want to run the tests. It will run all the provided tests in all browsers.
i.e. total test executions will be no. of test cases * no. of browsers

webServer — This block presents our server url, for lcoal environment it will be http://127.0.0.1:3000

modify the webServer block as below, if the url doesn’t load local server:
webServer: {
command: ‘npm run start’,
port: 3000,
reuseExistingServer: true,
}

Notes:

It also provides an option to mention a specific device or a browser on which we want to execute tests. P.S. /* Test against mobile viewports. */ section.
Before running the tests, ensure the application is already running on the url provided in the webserver config. If it is running on a different port, consider updating it accordingly.

Implement user login flow

To test user login flow, let’s first create it.

Please note that I have used an App router in Next.js that’s why I added the login page at /src/app.
If you use a Page router then add the /login/page.tsx into /src/pages directory.

src/app/login/page.tsx

"use client";

import { useState } from 'react';
import { FormEvent } from 'react'

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errorMessage, setErrorMessage] = useState("");

  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    // Validate the form
    if (!email || !password) {
      setErrorMessage('Please fill in all fields');
      return;
    }

    // Simulate a login request
    if (email === "johndoe@gmail.com" && password === "pass1234") {
      window.location.href = "/";
    }
  };

  return (
    <div className='flex justify-center items-center h-screen'>
      <form onSubmit={handleLogin} className='flex flex-col gap-3 w-[300px] text-black'>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className='p-3'
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        className='p-3'
      />
      <button type="submit" className='bg-blue-500 p-3 w-fit mx-auto'>Login</button>
      {errorMessage && <p>{errorMessage}</p>}
    </form>
    </div>
  );
}

In this simple component, we’re expecting users to input their email and password to log in to the application.

For simplicity purposes, I have simulated the login request by just matching the email and password to static values(Don’t take it seriously though😃).

There are two scenarios,

If the login succeeds — Redirect the user to the home screen(“/”)
In case login fails — Stay on the login page and show the error message

Let’s test both scenarios now.

P.S. Make sure the app is running while executing the tests, as we will need to test redirection using a real URL.

End-to-End testing

As we have configured /tests directory in the playwright.config.ts, we asked the playwright to look into this directory and execute tests from there. Consider modifying it, if you want to use some other directory.

Let’s create login.spec.ts in the tests directory, you can name it whatever you want (There’s no convention for it).

For simplicity purposes, I have named it as the feature name.

Let’s first collect the steps, we are going to test for successful login.

Navigate to the login page
Fill in the email and password fields
Click on the Login button
Next steps will be executed according to the login success/failure scenario

For a successful login case — We will verify whether the current page is the home page
For failure case — We will check the current page is login and the error message is set.

Let’s write our first test case for successful login.

test('Login form successfully redirects on valid credentials', async ({ page }) => {
  // Navigate to the login page  
  await page.goto('/login'); // Replace with your development URL

  // Fill in the email and password fields
  await page.fill('input[type="email"]', 'johndoe@gmail.com');
  await page.fill('input[type="password"]', 'pass1234');

  // Click the login button
  await page.click('button[type="submit"]');

  // Wait for the page to redirect
  await page.waitForURL("/");

  // Assert that the user is redirected to the homepage
  await expect(page).toHaveURL('/'); // Replace with your homepage URL
});

Here, we have provided the valid credentials and thus the login check passed and redirected to the home page.

Let’s check by running the test command inside the project directory.

npx playwright test

Hurray! Our first test is passed successfully🎉🎊.

We have written only one test case, but it shows two tests while executing the tests as below.

Why is it like that?

It’s because we opted for two simulated browsers using playwright.config.ts file. All the tests will be executed in each browser we have mentioned.

Let’s write the failure test cases now. We will consider two cases:

Requesting login with empty email and password

test('Login form displays error message on empty credentials', async ({ page }) => {
  await page.goto('/login');

  // Click the login button
  await page.click('button[type="submit"]');

  // Check if the error message is displayed
  const errorMessage = await page.textContent('p');
  await expect(errorMessage).toContain('Please fill in all fields');
});

Requesting login with wrong credentials

test('Login form displays error message on invalid credentials', async ({ page }) => {
  await page.goto('/login');

  // Fill in the email field only
  await page.fill('input[type="email"]', 'test@gmail.com');
  await page.fill('input[type="password"]', 'pass1234');

  // Click the login button
  await page.click('button[type="submit"]');

  const errorMessage = await page.textContent('p');
  await expect(errorMessage).toContain('Invalid credentials');
});

Let’s rerun the tests to check whether all of our test cases pass or not. And yay! it all passed🎉

The playwright tool also provides a test report. Run the below command to see the report. It will open a browser page as below.

npx playwright show-report

Bottom Line

A playwright is a powerful tool for writing E2E tests.

E2E tests ensure your application feature works as expected from start to finish.

For performing E2E tests in Next.js, the essential steps are:

Setup Playwright
Create test files
Write test cases
Execute the tests
Show the test report for a visual representation of the test results

To read the Full blog on our platform, please visit Canopas blog.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding! 👋

DEV Community: Canopas Software

Golang: Struct, Interface And Dependency Injection(DI)

Background

Understanding with a real-world example: Toy Box

Structs

Interfaces

Dependency Injection

Understanding the Basics

Structs

Interfaces

When to Use Which?

Use Structs When

Use Interfaces When

Balancing Flexibility and Performance

Interface Composition

Interface Embedding

Dependency Injection

Example: Notification System

Step 1: Define the Notifier Interface

Step 2: Implement Different Notifiers

Email Notifier Implementation:

SMS Notifier Implementation:

Step 3: Create the Notification Service

Benefits of This Approach

Google's Geocoding APIs: Frontend and Backend Implementation

Introduction

Type of Google Maps API

Mapping APIs

Google Maps API

Static Maps API

Street View API

Places APIs

Geocoding & Reverse Geocoding API

Autocomplete API

Time Zones API

Routes APIs

Directions API

Distance Matrix API

Enable Google Maps services

API key restrictions

Implementing Geocoding and Reverse Geocoding

Frontend Implementation

GeoCoding

Reverse GeoCoding

Exploring Cupertino and Material Updates in Flutter 3.27.0

Background

SliverFloatingHeader

Tubular Figures

CupertinoSliverNavigationBar

Repeat Animation

Row and Column Spacing

Tap to scroll to the item in CupertinoPicker

Refresh indicator

Refresh Indicator with No Spinner

Elevation

Firebase Authentication: Google, Apple, and Phone Login to iOS App

Introduction

Firebase Project Setup

1. Create an Xcode Project

2. Create a Firebase Project

3. Add Your iOS App to Firebase

4. Install Firebase SDK Using Swift Package Manager or CocoaPods

Initialize the Firebase app

1. Create a FirebaseProvider Class

Design Login Screen

Main App Entry Point

Add Firebase Authentication

Enable Authentication Providers

Google Login Integration

Enable Google Login in Firebase

1. Enable Google Login in Firebase Console (if you haven’t):

2. Download GoogleService-Info.plist:

3. Check the clientID:

Configure URL Schemes in Xcode

Implement Google Login

Handle Firebase Authentication

AppPreference Class:

User Data Class:

Handle Callback URL in AppDelegate

Test the Integration

2. Download `GoogleService-Info.plist`:

3. Check the `clientID`:

Configure `build.gradle` for Signing