DEV Community: Ankush Lokhande

VPN Fundamentals for Mobile Developers: Everything You Need to Know Before Integrating WireGuard

Ankush Lokhande — Wed, 02 Apr 2025 05:12:31 +0000

👋 Hey all,

Welcome back to the mobile development blog! Today, we understand the fundamentals of VPN technology. This guide covers essential concepts, key protocols, and security aspects you need to understand before integrating WireGuard into your Android and iOS apps.

What is VPN
What is an IP Address
Types of VPN Protocols
Key Components of a VPN
- VPN Client
- VPN Server
- VPN Tunnel
How Does a VPN Work
Development-Oriented Terms in VPNs
- Interface
- Peer
- Encryption
- Tunneling
Conclusion

# What is VPN

A virtual private network (VPN) creates a secure, encrypted connection over a public network, providing additional privacy and security. It masks your IP address and encrypts your data for enhanced privacy and security.

Key Features of a VPN:

Encryption: Secures data transmission to prevent unauthorized access.
Anonymity: Hides your IP address to protect your online identity.
Secure Access: Allows safe connection to private networks from anywhere.
Bypass Restrictions: Helps access geo-blocked content and restricted services.

# What is an IP Address

An IP (Internet Protocol) address is the unique identifying number assigned to every device connected to the Internet or a local network. It allows devices to communicate with each other over the internet or local network.

Types of IP Addresses

Public IP address: It is unique across the internet, assigned by your Internet Service Provider (ISP) and used for devices (such as mobiles, PCs, hardware, etc.) to communicate on the public internet.
Private IP address: It is Used within a local or private network (like a home or office network) and is not visible from the internet.

# Types of VPN Protocols

A VPN protocol defines how data is securely transmitted between your device and the VPN server.

There is a wide range of VPN Protocols available across the market & different protocols offer varying levels of security, speed, and compatibility.

OpenVPN
- Security: Strong encryption (AES-256)
- Speed: Moderate
- Compatibility: Works on Windows, macOS, Linux, Android, iOS
- Best For: General use, privacy-focused applications
WireGuard (Modern & Lightweight)
- Security: State-of-the-art cryptography (ChaCha20)
- Speed: Very fast (lightweight & efficient)
- Compatibility: Android, iOS, Windows, Linux, macOS
- Best For: Mobile VPNs, gaming, and high-speed connections
IPsec (IKEv2/IPsec, L2TP/IPsec)
- Security: Strong encryption (AES-256)
- Speed: Fast but depends on the implementation
- Compatibility: Supported on most operating systems
- Best For: Mobile users (IKEv2 handles network changes well)
PPTP (Point-to-Point Tunneling Protocol) – Outdated
- Security: Weak (easily broken)
- Speed: Very fast
- Compatibility: Built into most OS but insecure
- Best For: Not recommended due to security risks
SSTP (Secure Socket Tunneling Protocol)
- Security: Strong (AES encryption, SSL/TLS-based)
- Speed: Decent
- Compatibility: Mainly Windows-based
- Best For: Windows users who need built-in VPN support

Which VPN Protocol Should You Use?

For security & privacy: OpenVPN or WireGuard
For speed & efficiency: WireGuard
For mobile reliability: IKEv2/IPsec
For Windows-only users: SSTP

# Key Components of a VPN: Client, Server, and Tunnel

A VPN (Virtual Private Network) consists of three main components that work together to create a secure and private connection over the Internet. Understanding these elements is essential before integrating a VPN into your mobile application.

# VPN Client – The User’s Gateway to Privacy

A VPN client is an application or software installed on a user's device (mobile, computer, etc.) that initiates and manages the VPN connection. It encrypts outgoing data before sending it through the VPN tunnel and decrypts incoming data from the server.

Example: WireGuard, OpenVPN, or built-in VPN clients on Android & iOS.

# VPN Server – The Secure Middleman

A VPN server is a remote server that acts as an intermediary between the VPN client and the internet. It receives encrypted data from the client, decrypts it, forwards it to the intended destination (websites, services, etc.), and then encrypts responses before sending them back.

Example: A WireGuard or OpenVPN server hosted on a cloud provider or private network.

# VPN Tunnel – The Encrypted Pathway

A VPN tunnel is a secure, encrypted connection between the VPN client and server. It prevents third parties, such as ISPs, hackers, advertizement agencies, or government agencies, from intercepting or accessing transmitted data.

Example: When a user connects to a VPN, their internet traffic is routed through an encrypted tunnel, making online activities private and secure.

# How Does a VPN Work

A Virtual Private Network (VPN) creates a secure, encrypted connection between a user's device and a remote server, allowing private and safe internet access.

Here’s how it works step by step:

The request is sent from a remote location.
The request travels over the internet.
The request reaches the VPN.
The VPN authenticates the user.
The VPN establishes a secure connection.
The VPN server forwards the data.
The Network Access Server receives it.
The server routes the data to its destination.
The resources are sent back.
The resources reach the original location.

# Development-Oriented Terms in VPNs

As we dine into the basics of VPN & the protocols, the popular VPN protocol is WireGuard. To integrate a VPN like WireGuard into your mobile app (Android & iOS), understanding these key development terms is essential.

In WireGuard VPN, the connection is defined using two key components: Interface and Peer. These terms describe how devices communicate securely within a VPN network. The Interface is the local device’s configuration & The Peer is the remote party it connects to securely. And both ends (client & server) must have each other's public keys to authenticate.

# Interface (VPN Configuration on a Device)

The Interface refers to the VPN configuration on a local device (VPN client or server). It defines the details needed to establish a connection, such as the IP address, private key, and listening port.

Key Parameters in an Interface:

PrivateKey: A unique private key for authentication.
Address: The internal VPN IP address assigned to the device (e.g., 10.0.0.2/24).
ListenPort: The port the WireGuard server or client listens on (e.g., 51820).
DNS: (Optional) The DNS server to use while connected to the VPN.

Example (Client Configuration - wg_client.conf):

[Interface]
PrivateKey = CLIENT_PRIVATE_KEY
Address = 10.0.0.2/24
DNS = 1.1.1.1

# Peer (Remote VPN Connection)

A Peer represents a remote device in the WireGuard VPN network. It contains the public key of the other party (server or client) and defines information related to allowed IPs and endpoints.

Key Parameters in a Peer:

PublicKey: The public key of the remote peer (server or another client).
AllowedIPs: Specifies which IPs can communicate through this peer.
Endpoint: The IP/hostname of the remote peer (needed for clients connecting to a server).
PersistentKeepalive: (Optional) Keeps the connection alive for NAT traversal (useful for mobile clients).

Example (Client Configuration - wg_client.conf):

[Peer]
PublicKey = SERVER_PUBLIC_KEY
AllowedIPs = 0.0.0.0/0
Endpoint = vpn.example.com:51820
PersistentKeepalive = 25

# Encryption (Securing VPN Data)

Encryption is the process of encoding data so only authorized devices can read it and in case of WireGuard, it uses ChaCha20 encryption, which is fast, secure, and efficient for mobile devices. The encrypted data securely travels through the VPN tunnel to ensure privacy.

Example:
🔒 Without VPN: Your ISP sees all your browsing activity.
🔐 With VPN (Encrypted): Data appears scrambled, unreadable to outsiders.

# Tunneling (Creating a Secure Data Pathway)

Tunneling is the process of encapsulating network traffic inside a secure VPN tunnel. This tunnel prevents third parties such as ISPs, hackers, governments & other agencies from intercepting your data. VPN tunnels may use different protocols like WireGuard, OpenVPN, or IPSec.

# Let's Wrap!

WireGuard is the most popular PVN protocol to use nowadays. WireGuard simplifies VPN implementation with modern cryptography, high performance, and ease of use, making it an excellent choice for both Android and iOS applications.

📢 Next, read our detailed guide:
VPN Fundamentals for Android & iOS Developers: Everything You Need to Know Before Integrating WireGuard

As you move forward with VPN integration, having a solid grasp of concepts like Interface, Peer, encryption, and tunneling will help you build a secure and efficient VPN solution.

If you found this blog helpful or have any further questions, we would love to hear from you. Feel free to reach out and follow us on our social media platforms for more tips and tutorials on tech-oriented posts.

Happy coding!👨‍💻

Building a Secure VPN in Android with WireGuard: A Complete Guide

Ankush Lokhande — Wed, 02 Apr 2025 05:12:14 +0000

👋 Hey all,

In this guide, we’ll learn how to integrate WireGuard into your Android app using Jetpack Compose and Kotlin. There is a wide range of VPN protocols available in the market to integrate with Android, and we selected WireGuard (a modern VPN protocol) known for its simplicity, speed, and strong security features. By the end of this tutorial, you’ll have a working WireGuard VPN implementation that you can integrate into your application.

If you are new to VPNs or unfamiliar with related terms, please read this blog before proceeding:

Ankush Lokhande

Apr 2 '25

VPN Fundamentals for Mobile Developers: Everything You Need to Know Before Integrating WireGuard

#vpn #wireguard #mobile #tutorial

Comments 1

6 min read

If you're already familiar with VPNs or have already read the blog, let's get started!!!

Introduction
Essential Prerequisites for Setting up your project
Test how VPN works on devices
Setting up the project
Let's Wrap

Before implementing the VPN, I explored various VPN protocols and found WireGuard the most suitable choice for mobile development. Its simplicity, speed, and strong security features stand out from traditional protocols like OpenVPN and IPSec. WireGuard is even better because many people support it, and there are lots of free code examples online. This makes it easier to add WireGuard to an Android app.

# Essential Prerequisites for Setting up your project

Before beginning development, it is essential to ensure that you have all the necessary tools installed and that they are up to date.

Make sure you have the following ready before starting:
Android Studio – Install the latest stable version.
VPN Server – You need a server to generate the wg.conf file for WireGuard.

# Test how VPN works on devices

To test how the VPN is working on your device (laptop, mobile, etc.), you can download available apps from the Store. Here are some of the best apps:

For Android: WireGuard, WG Tunnel, OpenVPN Connect
For Mac: WireGuard
You can also download the platform-specific app from the official website of WireGuard: Download it from here

You need a config file (eg. client.conf) to run the VPN on the device. Contact your server provider guy or create by own.

Here are some sample files to show how config file look like: client.conf

# Setting up the project

Are you ready to dive into the coding part? Let's get started!

Add dependency to the project

dependencies {
    // Add WireGuard dependency  
    implementation("com.wireguard.android:tunnel:1.0.20210211") 

    // Add desugaring library for Java 8+ API support
    implementation("com.android.tools:desugar_jdk_libs:2.1.5")  
}

Check the latest tunnel library for WireGuard for Android: Maven repository
Check the latest desugaring library: Maven repository

Configuring VPN Service in `AndroidManifest.xml`

Before using the WireGuard module, update your AndroidManifest.xml file.

Add Required Permissions:

These permissions allow the app to access the internet and check network status:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Register VPN Service:

Add the following inside the <application> tag to enable the WireGuard VPN service:

<application>
    <service
        android:name="com.wireguard.android.backend.GoBackend$VpnService"
        android:exported="false"
        android:permission="android.permission.BIND_VPN_SERVICE">

        <intent-filter>
            <action android:name="android.net.VpnService" />
        </intent-filter>

    </service>
</application>

Dive into the coding logic

Create a class WireGuardTunnel.kt in your project. This class acts as a wrapper for a WireGuard tunnel, allowing you to track and manage its state efficiently.

import com.wireguard.android.backend.Tunnel

typealias StateChangeCallback = (Tunnel.State) -> Unit

class WireGuardTunnel(
    private var name: String,
    private val onStateChanged: StateChangeCallback? = null
) : Tunnel {
    private var state: Tunnel.State = Tunnel.State.DOWN

    override fun getName() = name

    override fun onStateChange(newState: Tunnel.State) {
        state = newState
        onStateChanged?.invoke(newState)
    }

    fun getState(): Tunnel.State = state
}

To manage VPN server details, add the following ServerInfo data class to your project:

import com.google.gson.annotations.SerializedName

data class ServerInfo(
    // Interface details
    @SerializedName("address") val interfaceAddress: String?,
    @SerializedName("dns") val interfaceDns: String?,
    @SerializedName("private_key") val interfacePrivateKey: String?,

    // Peer details
    @SerializedName("public_key") val peerPublicKey: String?,
    @SerializedName("preshared_key") val peerPresharedKey: String?,
    @SerializedName("allowed_ips") val peerAllowedIPs: String?,
    @SerializedName("endpoint") val peerEndpoint: String?,
    @SerializedName("persistent_keep_alive") val peerPersistentKeepalive: String?
)

To track different states of the VPN connection, add the following VPNStatus enum class:

enum class VPNStatus {
    PREPARE,        // VPN is getting ready  
    CONNECTING,     // Establishing a connection  
    CONNECTED,      // VPN is active and running  
    DISCONNECTING,  // Disconnecting from the VPN  
    DISCONNECTED,   // VPN is not connected  
    NO_CONNECTION,  // No available VPN connection  
    REFRESHING      // Refreshing VPN status  
}

To handle VPN operations, add the following WireguardManager class. We'll expand it with more methods later.

import android.app.Activity
import android.content.Context
import com.wireguard.android.backend.Backend
import kotlinx.coroutines.*

class WireguardManager(private val context: Context, private val activity: Activity?) {
    private val scope = CoroutineScope(Job() + Dispatchers.Main.immediate)
    private var backend: Backend? = null
    private var tunnelName: String = "wg_default"
    private var config: Config? = null
    private var tunnel: WireGuardTunnel? = null
    private val futureBackend = CompletableDeferred<Backend>()
    private val TAG = "WireguardManager"

    companion object {
        private var state: VPNStatus = VPNStatus.NO_CONNECTION
    }
}

Implement the initialize method in the WireguardManager class:

class WireguardManager(private val context: Context, private val activity: Activity?) {

    // Remaining code

    init {
        scope.launch(Dispatchers.IO) {
            try {
                cachedTunnelData = SharedPreferenceHelper.getVpnData()
                backend = GoBackend(context)
                futureBackend.complete(backend!!)
                activity?.let { GoBackend.VpnService.prepare(it) }
            } catch (e: Throwable) {
                Log.e(TAG, "ERROR: Exception during WireguardManager initialization: ${e.localizedMessage}")
                Log.e(TAG, Log.getStackTraceString(e))
            }
        }
    }
}

Add support methods:

class WireguardManager(private val context: Context, private val activity: Activity?) {

    // Remaining code

    /**
     * Generates WireGuard configuration from the provided ServerInfo.
     * This creates a wg-quick compatible configuration for the VPN tunnel.
     */
    private fun getConfigData(tunnelData: ServerInfo): Config {
        val wgQuickConfig = """
            [Interface]
            Address = ${tunnelData.interfaceAddress ?: ""}
            DNS = ${tunnelData.interfaceDns ?: ""}
            PrivateKey = ${tunnelData.interfacePrivateKey ?: ""}

            [Peer]
            PublicKey = ${tunnelData.peerPublicKey ?: ""}
            PresharedKey = ${tunnelData.peerPresharedKey ?: ""}
            AllowedIPs = ${tunnelData.peerAllowedIPs ?: ""}
            Endpoint = ${tunnelData.peerEndpoint ?: ""}
            PersistentKeepalive = ${tunnelData.peerPersistentKeepalive ?: ""}
        """.trimIndent()

        val inputStream = ByteArrayInputStream(wgQuickConfig.toByteArray())
        return Config.parse(inputStream)
    }

    /**
     * Checks if any VPN connection is currently active on the device.
     * Returns `true` if a VPN connection is detected, otherwise `false`.
     */
    val isVpnActive: Boolean
        get() {
            return try {
                val connectivityManager =
                    context.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager

                val activeNetwork = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                    connectivityManager.activeNetwork ?: return false
                } else {
                    // For Android < 6.0, use the old method
                    val networkInfo = connectivityManager.activeNetworkInfo
                    return networkInfo != null && networkInfo.type == ConnectivityManager.TYPE_VPN
                }

                val networkCapabilities = connectivityManager.getNetworkCapabilities(activeNetwork)

                // Check if any VPN is active
                networkCapabilities?.hasTransport(NetworkCapabilities.TRANSPORT_VPN) == true
            } catch (e: Exception) {
                Log.e(TAG, "isVpnActive - ERROR - ${e.localizedMessage}", e)
                false
            }
        }

    /**
     * Retrieves an existing WireGuard tunnel or creates a new one if none exists.
     * The `callback` function listens for state changes in the tunnel.
     */
    private fun getTunnel(name: String, callback: StateChangeCallback? = null): WireGuardTunnel {
        if (tunnel == null) {
            tunnel = WireGuardTunnel(name, callback)
        }
        return tunnel as WireGuardTunnel
    }
}

Add methods to update the status:

class WireguardManager(private val context: Context, private val activity: Activity?) {

    // Remaining code

    /**
     * Updates the VPN status based on the tunnel's state.
     * Runs on the main thread to ensure UI updates happen smoothly.
     */
    private fun updateStageFromState(state: Tunnel.State) {
        scope.launch(Dispatchers.Main) {
            when (state) {
                Tunnel.State.UP -> updateStage(VPNStatus.CONNECTED)      // VPN is active
                Tunnel.State.DOWN -> updateStage(VPNStatus.DISCONNECTED) // VPN is disconnected
                else -> updateStage(VPNStatus.NO_CONNECTION)             // No active VPN connection
            }
        }
    }

    /**
     * Sets the VPN status and saves it in shared preferences.
     * Ensures status updates run on the main thread.
     */
    private fun updateStage(stage: VPNStatus?) {
        scope.launch(Dispatchers.Main) {
            val updatedStage = stage ?: VPNStatus.NO_CONNECTION
            state = updatedStage
            // Store VPN status in SharedPreferences if required
        }
    }

     /**
     * Returns the VPN status based on the tunnel's state.
     */
    fun getStatus(): VPNStatus {
        return state
    }
}

Add methods to start the VPN service:

class WireguardManager(private val context: Context, private val activity: Activity?) {

    // Remaining code

    /**
     * Starts the VPN connection process.
     * Initializes the tunnel and attempts to connect.
     */
    fun start(tunnelData: ServerInfo) {
        initialize(tunnelName)
        connect(tunnelData)
    }

    /**
     * Initializes the tunnel with a given name.
     * Ensures the tunnel name is valid before proceeding.
     */
    private fun initialize(localizedDescription: String) {
        if (Tunnel.isNameInvalid(localizedDescription)) {
            Log.e(TAG, "Invalid Tunnel Name: $localizedDescription")
            return
        }
        tunnelName = localizedDescription
    }

    /**
     * Connects to the VPN using the provided tunnel configuration.
     * Updates VPN status at different stages of the connection process.
     */
    private fun connect(tunnelData: ServerInfo) {
        scope.launch(Dispatchers.IO) {
            try {
                updateStage(VPNStatus.PREPARE) // Preparing VPN connection

                // Generate WireGuard configuration
                config = getConfigData(tunnelData)
                updateStage(VPNStatus.CONNECTING) // Attempting to connect

                // Retrieve or create the WireGuard tunnel
                val tunnel = getTunnel(tunnelName) { state ->
                    scope.launch {
                        Log.i(TAG, "onStateChange - $state")
                        updateStageFromState(state)
                    }
                }

                // Activate the VPN connection
                futureBackend.await().setState(tunnel, Tunnel.State.UP, config)

                scope.launch(Dispatchers.Main) {
                    updateStage(VPNStatus.CONNECTED) // VPN is successfully connected
                    // Store VPN status in SharedPreferences if required
                }

                Log.i(TAG, "Connect - success!")
            } catch (e: Throwable) {
                updateStage(VPNStatus.NO_CONNECTION) // Failed to establish a connection
                Log.e(TAG, "Connect - ERROR - ${e.message}")
            }
        }
    }
}

Add methods to disconnect the VPN service:

class WireguardManager(private val context: Context, private val activity: Activity?) {
    // Remaining code

    /**
     * Stops the VPN connection by calling the disconnect method.
     */
    fun stop() {
        disconnect()
    }

    /**
     * Disconnects the active VPN tunnel.
     * - If no tunnel is running, logs an error.
     * - Updates VPN status before and after disconnection.
     * - Handles reconnection if cached tunnel data exists.
     */
    private fun disconnect() {
        scope.launch(Dispatchers.IO) {
            try {
                // Check if any tunnel is currently running
                if (futureBackend.await().runningTunnelNames.isEmpty()) {
                    throw Exception("Tunnel is not running")
                }

                updateStage(VPNStatus.DISCONNECTING)

                // Retrieve the active tunnel and monitor state changes
                val tunnel = getTunnel(tunnelName) { state ->
                    scope.launch {
                        Log.i(TAG, "onStateChange - $state")
                        updateStageFromState(state)
                    }
                }

                // Set the tunnel state to DOWN to disconnect
                futureBackend.await().setState(tunnel, Tunnel.State.DOWN, config)

                // Update VPN status and shared preferences on the main thread
                scope.launch(Dispatchers.Main) {
                    updateStage(VPNStatus.DISCONNECTED)
                    // Store VPN status in SharedPreferences if required
                }
                Log.i(TAG, "Disconnect - success!")
            } catch (e: Throwable) {
                Log.e(TAG, "Disconnect - ERROR - ${e.message}")
            }
        }
    }
}

Now create a View Model class VPNViewModel, responsible for handling the VPN state, starting/stopping the connection, and monitoring the VPN status efficiently.

class VPNViewModel(application: Application) : AndroidViewModel(application) {
    private val context by lazy { application.applicationContext }
    private var wireguardManager: WireguardManager? = null

    // VPN connection status as a StateFlow
    private val _vpnState = MutableStateFlow(VPNStatus.NO_CONNECTION)
    val vpnState: StateFlow<VPNStatus> = _vpnState.asStateFlow()

    // Whether VPN is currently active
    private val _isVpnActive = MutableStateFlow(false)
    val isVpnActive: StateFlow<Boolean> = _isVpnActive.asStateFlow()

    /**
     * Initializes the WireGuard manager and starts monitoring VPN state changes.
     * This method should be called when the ViewModel is created.
     */
    fun initVPN(activity: Activity) {
        wireguardManager = WireguardManager(context, activity)

        // Observe VPN state changes in a coroutine
        viewModelScope.launch {
            while (isActive) {
                delay(500) // Check every 500ms (half a second)

                // Restore last known VPN state from SharedPreferences if needed and assign in fallback
                _vpnState.value = wireguardManager?.getStatus()
                    ?: VPNStatus.NO_CONNECTION

                _isVpnActive.value = wireguardManager?.isVpnActive ?: false
            }
        }
    }

    /**
     * Starts the VPN connection with the given tunnel data.
     */
    fun startVPN(tunnelData: ServerInfo) {
        viewModelScope.launch {
            wireguardManager?.start(tunnelData)
        }
    }

    /**
     * Stops the active VPN connection.
     */
    fun stopVPN() {
        viewModelScope.launch {
            wireguardManager?.stop()
        }
    }
}

Managing the VPN Connections with ViewModel in Jetpack Compose

// Handling VPN Permission Request
val vpnPermissionLauncher = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.StartActivityForResult()
) { result ->
    if (result.resultCode == Activity.RESULT_OK) {
        // Permission granted, now connect
        viewModel.startVPN(tunnelData)
    } else {
        // Permission denied, show an error or update UI
    }
}

// Starting a VPN Connection
coroutineScope.launch(Dispatchers.IO) {
    val intent = GoBackend.VpnService.prepare(activity)
    delay(100) // Small delay to prevent UI lag
    if (intent != null) {
        vpnPermissionLauncher.launch(intent) // Request permission if needed
    } else {
        viewModel.startVPN(tunnelData) // No permission needed, start directly
    }
}

// Stopping a VPN Connection
coroutineScope.launch(Dispatchers.IO) {
    delay(100) // Simulate network request
    withContext(Dispatchers.Main) {
        viewModel.stopVPN() // Stop the VPN connection
    }
}

# Let's Wrap

Managing VPN connections in an Android app requires handling permissions, starting connections, and managing disconnections efficiently. Using Jetpack Compose and a ViewModel, we can make the app easy to use while keeping the code organized and easy to manage.

Happy coding!👨‍💻

Images Vanish: My Experience with the dev.to Image Outage

Ankush Lokhande — Tue, 01 Apr 2025 10:46:28 +0000

Recently, I noticed that all the images in my dev.to blogs are missing! 😟 At first, I thought it was just a small glitch, but now I’m wondering—has this happened to anyone else?
But the platform's image hosting had an issue—possibly a server crash or temporary outage.

Is it a platform-wide issue, or just my account? Could it be a server crash? I have no idea! If you’re also facing this, let me know.

I trust this platform, but what is happening??? 😟

Also, does anyone know how to reach out to the dev.to team for help? If you have any suggestions, please share. Let’s figure this out together! 🚀

15 Best VSCode Extensions to Improve Your Productivity in 2023 (PART-1)

Ankush Lokhande — Fri, 27 Oct 2023 04:30:00 +0000

👋 Hey all,

Boosting our productivity as a developer plays an important role in daily planning and work. Whenever you're working on the complex structure of code, complex coding tasks, debugging, or working on new features, the ability to efficiently manage your time and workflow can make a significant difference in your overall performance.

As you prepare for interviews and work as a developer, the right tools and strategies boost your productivity and directly impact on workload, progress, and growth.

As a mobile developer, I've been using Visual Studio Code (VS-code) since the beginning of my coding journey, and I am excited to share my experience using this blog.

# Best and Useful VS-Code Extensions

In this blog, we'll explore productivity-boosting VS Code extensions and see how they can help you become an excellent coder.

1. Better Comments

The Better Comments extension will help you to create more human-friendly comments in your code and also provide customization for custom comments and edit the color schema.

How to use:

Extension Link: Visual Studio Code Market Place: Better Comments

2. Prettier - Code formatter

The Prettier - Code formatter is the best tool to format your code in a better way. You can format your JSON, HTML, JavaScript, Dart & whatever you want.

How to use:

Extension Link: Visual Studio Code Market Place: Prettier - Code formatter

3. Back and Forward buttons

Show back and forward buttons on the status bar, as you can see in other IDEs. The buttons are also located towards the bottom left of the screen. It helps to trace activities and indicate where you've previously clicked and which file visited previously.

How to use:

Extension Link: Visual Studio Code Market Place: Back and Forward buttons

4. Turbo Console Log

Turbo Console Log is a powerful tool for automating the process of writing meaningful log messages. This tool offers vast combinations of log methods.

How to use:

Extension Link: Visual Studio Code Market Place: Turbo Console Log

5. Android iOS Emulator

A small Visual Studio Code extension to run Android and iOS Simulators in a click. It provides support to run the emulator/simulator from the VS-Code

How to use:

Extension Link: Visual Studio Code Market Place: Android iOS Emulator

6. Import Cost

Import Cost extension displays the size of the imported package inline in the editor. The extension utilizes webpack in order to detect the imported size.

How to use:

Extension Link: Visual Studio Code Market Place: Import Cost

7. indent-rainbow

The indent-rainbow is a straightforward extension that makes your code indentation more readable. It adds colors to the spaces or tabs before your text, using different colors in a repeating pattern. This can be useful when writing code in languages like Python, Nim, Yaml, and even for file types that don't rely on indentation.

How to use:

Extension Link: Visual Studio Code Market Place: indent-rainbow

8. Code Spell Checker

Code Spell Checker is the best one to minimize minor mistakes during development. The goal of this extension is to help catch common spelling errors while coding. It suggests the spelling mistakes runtime.

How to use:

Extension Link: Visual Studio Code Market Place: Code Spell Checker

9. Image preview

Image preview enhances the preview functionality for images. It shows an image preview in the gutter and on hover.

How to use:

Extension Link: Visual Studio Code Market Place: Image preview

10. VSCode Icons

VSCode Icons organizes your folder icons and displays file icons based on their file extensions. This extension enhances the visual organization of your project in Visual Studio Code, making it easier to identify and work with files and folders.

How to use:

Extension Link: Visual Studio Code Market Place: VSCode Icons

11. Polacode

Create an awesome snippet screenshot with Polacode. This extension makes beautiful screenshots for your code with in a click.

How to use:

Extension Link: Visual Studio Code Market Place: Polacode

12. Code Runner

The Run code extension is a versatile tool designed to streamline the process of running code snippets or entire code files in multiple programming languages. It's a valuable resource for developers, programmers, and tech enthusiasts looking to quickly test and execute code.

How to use:

Extension Link: Visual Studio Code Market Place: Code Runner

13. Colorize

Instantly visualize CSS colors in your files with Colorize. This extension creates style files looking for colors and generates a colored background (using the color) for each of them.

How to use:

Extension Link: Visual Studio Code Market Place: Colorize

14. Path Intellisense

Path Intellisense plugin offers filename autocompletion and provides file and folder previews as hints.

How to use:

Extension Link: Visual Studio Code Market Place: Path Intellisense

15. Pubspec Assist

Pubspec Assist extension allows you to easily add and modify dependencies for your Dart and Flutter project's pubspec.yaml, all without leaving your editor, and formats the file automatically.

How to use:

Extension Link: Visual Studio Code Market Place: Pubspec Assist

These extensions are designed to streamline your workflow, offer useful features, and help you become a more efficient developer. This is just the beginning! We have more amazing VS Code extensions to share with you.
Stay tuned for Part 2.

Happy coding!👨‍💻

Effective techniques to use Comments in Swift iOS

Ankush Lokhande — Sun, 29 Jan 2023 04:30:00 +0000

👋 Hey all,

In this blog, we will explore the different types of comments and techniques that can be used in the Swift programming language.

Introduction
Types of comments
Ways to use comments
Conclusion

Comments are an essential part of any codebase, allowing developers to convey important information about the code to other developers who may be reading it. We will discuss the types of comments and also discuss the best use cases for each one. Whether you are a beginner or an experienced developer, this post will give you a deeper understanding of how to use comments effectively in your Swift code.

# Types of comments

In most programming languages, comments are typically written in two ways:

Single-Line comment : Single line comments start with "//" and continue until the end of the line.

// This is a single line comment

Multi-Line comment : Multi-line comments start with "/*" and end with "*/". They can span multiple lines.

/* This is a
multi-line comment */

It is also possible to nest multi-line comments by starting a new multi-line comment inside an existing one.

/*
This is a
multi-line comment
/*
 nested multi-line comment
*/
*/

In addition to the traditional comments, Swift also has a unique type of comment known as:

Documentation comment : It is used to provide information about the code and is typically used to document the purpose, usage, and behavior of classes, methods, and properties. It is placed immediately before the code it describes.

Swift documentation comments can be written in two formats:
A. Each line is preceded by a triple slash (///):

/// This is a documentation comment
/// 
/// Here is the description

B. Javadoc-style block comments (/** … */):

/**
 This is a documentation comment

 Here is the description
*/

# Ways to use comments

There are several ways to use comments based on their purpose:

1. Informative Comment:
These provide a brief explanation of what the code is doing or what a specific function or variable is used for.

// This function calculates the average of two numbers
func average(a:Int, b:Int) {
    // code
}

2. Inline Comment:
These comments provide explanations or clarifications for specific lines of code and are placed on the same line as the code they describe.

let x = 5 // This is an inline comment

3. Debugging Comment:
These functions are used as a comment for understanding what's happening in the app and for finding and fixing errors during the development process. The most common functions are:
print(), dump(), debugPrint(), NSLog() and os_log().

func average(a: Int, b: Int) -> Float {
    let avg = (a + b) / 2;
    debugPrint(avg);
    return avg;
}

debugPrint(avg) is used as a comment during the development process.

4. Organizational Comment:
These are comments that are used to organize the code and leave reminders for yourself or other developers.

MARK: syntax is used to create a clear visual separation in the source code, often used to organize code by functionality or feature.

// MARK: - View Life Cycle

TODO: syntax is used to indicate that a specific task or issue needs to be addressed in the future.

// TODO: Add error handling

FIXME: syntax is similar to TODO comments, but they indicate that there is an issue with the code that needs to be fixed as soon as possible.

// FIXME: Memory leak

Here is a screenshot of an example:

Note:
MARK:- separates a section of code from the previous one, while MARK: groups sections together with the previous one.

Other organizational tags also perform similar behavior.

5. Deprecation Comment:
These are comments that are used to indicate that a function or class is deprecated and should no longer be used.

@available(*, deprecated, message: "Use 'newFunction()' instead", renamed: "newFunction")
func oldFunction() {
    // code
}

6. Preprocessor Directives Comment:
These are the directives tag can be used as a comment to include custom warning and error messages in your code.

#warning

#warning("This is a warning message.")

#error

#error("This is a error message.")

7. Documentation Comment:
These are comments that are used to document the purpose, usage, and parameters of a function or class.

/**
Call alert to handle the crashes and errors.

Use this method to to call alert at any instance

- Note: This method not required any instance of object, It calls globally.

`` `
GNMAlertController().showError(message: "Key not found")
`` `

- Parameters:
    - message: - Error message `(String)`
- Returns: null
*/
internal func showError(message: String) {
    // code
}

Here is the preview of documenation:

Here is the callouts list, You can also use as needed:
Attention, Author, Authors, Bug, Complexity, Copyright, Date, Experiment, Important, Invariant, Note, Parameters, Postcondition, Precondition, Remark, Requires, Returns, Since, Todo, Version and Warning.

# Let's Wrap!

Commenting your code is an efficient way to improve readability, understandability, and maintainability for scalable projects. However, for small projects, clear and effective code alone may be sufficient.
Here is a link that provides tips on how to code effectively: Utilizing Clear Code as a Tool for Documentation

By following the above-mentioned techniques, you can ensure that your code is easy to understand, navigate, and maintain.

Happy coding!👨‍💻

Code Documentation: Best Practices and Strategies

Ankush Lokhande — Mon, 23 Jan 2023 04:30:00 +0000

👋 Hey all,

In this blog post, we will explore how to effectively use code as a form of documentation in development.

Introduction
Reasons why code documentation are important in code
Approach to documentation code
Conclusion

As developers, we are not only responsible for writing efficient and optimized code, but we are also responsible for documenting that code. Code documentation, helps to make the code more readable and understandable for others, as well as for future reference.

It also enables easy collaboration, better maintenance and debugging. Clear, well-written code can make it much easier for other developers to understand the code and make changes to it, which can save time and reduce the risk of errors.

# Reasons why code documentation are important in code

There are several reasons why code documentation are important in code:

Clarity: Using the descriptive naming of class, variable & method can be used to explain the purpose of a particular piece of code or to provide context for how it works. This can make it easier for other developers to understand the code and make changes to it.
Maintenance: While debugging, descriptive naming can also be used to understand the behaviour of process, which can help other developers to quickly identify and fix the problems.
Organization: It can be used to group related code together, making it easier to navigate and understand large or complex codebases.
Collaboration: Code documentation can be used to communicate with other developers and to coordinate work on a project.
Future reference: It can also be used for future reference for the developer or other members in the team who wants to understand the code after a long time.

Overall, focus on code documentation to make it clear and descriptive makes code more readable, understandable and maintainable.

# Approach to documentation code

Using clear and descriptive class, variable, and method names can greatly enhance the understandability and maintainability of code. By providing context and purpose through the names, it becomes easier for others to understand the intended functionality of the code and make changes or additions as needed.

For example, instead of using a class name like "Cust" or "MainClass", a more descriptive name like "Customer" would provide context and make it clear that the class is related to customer information. Similarly, a variable named "i" or "a" doesn't convey any information about its purpose, whereas a variable named "customerName" makes it clear that it stores a customer's name. Lastly, a method named "doSomething" doesn't explain what the method does, but a method named "calculateDiscount" makes it clear that the method is used to calculate a discount.

Here's an example in Java:

class Customer {
    private String customerName;
    private int customerAge;
    private String customerAddress;

    public void setCustomerName(String customerName) {
        this.customerName = customerName;
    }

    public String getCustomerName() {
        return customerName;
    }

    public int calculateDiscount(double purchaseAmount) {
        int discount = 0;
        if (customerAge > 60) {
            discount = (int)(purchaseAmount * 0.1);
        }
        return discount;
    }
}

In this example, the class name "Customer" gives context about what the class represents. The variable names "customerName", "customerAge" and "customerAddress" makes it clear that they are related to a customer. The method "calculateDiscount" tells us that the method is used to calculate a discount, and the parameter "purchaseAmount" tells us that it required the purchase amount as input.

Therefore, writing optimized code and documenting it properly is a vital responsibility for any developer. It ensures that the code is not only functional but also maintainable and understandable for a long run.

# Let's Wrap

Experience is not about how many years of experience you have, It is about the quality of your years of experience. So always try to learn from the mistakes and apply those lessons to future tasks or projects.

If you have any insights or knowledge gained from your experience regarding code documentation, please feel free to share it with us in the comments section.

If you found this blog helpful or have any further questions, we would love to hear from you. Feel free to reach out and follow us on our social media platforms for more tips and tutorials.

Create your own CocoaPods library in Swift: A Step-by-Step Guide

Ankush Lokhande — Sun, 15 Jan 2023 12:59:24 +0000

👋 Hey all,

During my tenure as a developer, I have come across various challenges and have had to find solutions to those challenges. One such challenge was to build a library that could be reused across multiple projects & publish it on the CocoaPods to be reusable by any of the developer. And that's where the concept of creating custom pods came into play.

Introduction
Essential Prerequisites for Setting up your project
Setting up the Pod Structure
Publish Pod on CocoaPods
Conclusion

In iOS development, CocoaPods is a widely used dependency manager that allows developer to easily integrate third-party libraries and frameworks into the projects. However, sometimes you may need to create your own custom libraries to be used across multiple projects.

In this blog, we will learn how to build a custom pod using step-by-step approach in Swift for iOS development. We will cover everything from the setting up the pod structure to publishing it on the CocoaPods. By the end of this guide, you will have a solid understanding of how to create and maintain your own custom pods.

Before we dive into the guide, let's briefly talk about what custom pods are and why you might want to create one. Custom pods are the libraries that you create by yourself. These libraries can be used across multiple projects and allowing you to easily share. This can save your time and effort when working on the new projects, and it can also help you to write more efficient code.

# Essential Prerequisites for Setting up your project

Before beginning development, it is essential to ensure that you have all the necessary tools installed and that they are up to date.

Ensure that the Prerequisites are up to date:

A laptop running macOS, as CocoaPods are designed to work with macOS and iOS development.
The latest version of Xcode, you can be download it from the Mac App Store.
Ruby, the programming language that CocoaPods is built on. This should be pre-installed on macOS and you can also check by running command: ruby -v
The CocoaPods gem, which can be installed by running command in the terminal: sudo gem install cocoapods

# Setting up the Pod Structure

Are you ready to dive into the coding part? Let's get started!

Step 1: Initiate Project

First, navigate to the desired directory where you want to create your custom Pod. Once you have selected the folder, open the terminal within that directory.
To create a new project for Pod creation, run the following command:

pod lib create [POD_NAME]

After that, proceed with configuring your Pod as necessary.

Step 2: Configure a template for your Unique Pod

Please respond to the following prompts (capitalization does not matter):

A. What platform do you want to use?? [ iOS / macOS ]
iOS
B. What language do you want to use?? [ Swift / ObjC ]
Swift
C. Would you like to include a demo application with your library? [ Yes / No ]
Yes
D. Which testing frameworks will you use? [ Quick / None ]
None
E. Would you like to do view based testing? [ Yes / No ]
No

Once the setup is complete, it redirect to the project within XCode. If the directory is not already open, open it manually:
[PROJECT_DIRECTORY]/../[POD_NAME]/Example/[POD_NAME.xcworkspace]

Step 3: Setup Codebase on GitHub

Create a new repository on GitHub and link it to your existing codebase.
This will set up a GitHub repository with your existing code and allow you to continue to push and pull updates from the repository for future development.

Step 4: Revise the template version

Set the default pod template setting to the minimum version:

iOS deployment target: 12.0
Swift version: Swift5
Project Format: Xcode 12-compatible

In addition, reflect this updated configuration in both Xcode and the relevant files.

Step 5: Revise Podspec Metadata file

Revise the .podspec file within the Podspec Metadata section.

s.name = <POD_NAME>
s.version = <POD_VERSION> (example: 0.1.0)

# This short description is used to provide a brief summary of the functionality of the pod.
#   * The name of the pod and the purpose it serves.
#   * The main features and functionality provided by the pod.
#   * The main platform(s) or technology(s) that the pod is intended to be used with.
#   * Any dependencies or prerequisites that are required for the pod to function properly.
#   * Any notable or unique features or capabilities of the pod that set it apart from similar libraries or frameworks.
s.summary = <SHORT_DESCRIPTION_OF_POD>

# This description is used to generate tags and improve search results.
#   * Think: What does it do? Why did you write it? What is the focus?
#   * Try to keep it short, snappy and to the point.
#   * Write the description between the DESC delimiters below.
#   * Finally, don't worry about the indent, CocoaPods strips it!
s.description = <<-DESC
<LONG_DESCRIPTION_OF_POD>
DESC
s.homepage = <GITHUB_REPO_LINK>
# s.screenshots = <EXAMPLE_IMAGE>, <EXAMPLE_VIDEO>, <EXAMPLE_GIF>
s.license = { :type => 'MIT', :file => 'LICENSE' }
s.author = { <AUTHOR_NAME> => <AUTHOR_EMAIL_ADDRESS> }
s.source = { :git => <GITHUB_REPO_URL>, :tag => s.version.to_s }
s.social_media_url = <SOCIAL_MEDIA_LINK>, <OTHER_LINK>
s.ios.deployment_target = '12.0'
s.source_files = 'Classes/**/*.swift'
s.swift_version = '5.0'

We specified a custom path for source files:
s.source_files = 'Classes/**/*' thus, we must create Classes directory.

Locate the .podspec file in the Podspec Metadata group, as shown in the screenshot:

Step 6: Creating a Codebase Directory

Delete the ReplaceMe.swift file and Create Classes folder in the directory:
Pods project > Development Pods group > [POD_NAME] group

Create a file with the same name as the Pod within the Classes folder and use it to write custom code for the Pod.
example: <POD_NAME>.swift
You can also create multiple folders and files in order to write personalize code.

Refer to the screenshot for clarification:

Step 7: Create an example using Pod

To test the code of Pod, create an example by following the instructions in the folder reference:
[POD_NAME] project > Examples for [POD_NAME] group >

Please refer to the attached screenshot for further clarification:

Implement personalize Pod in example folder to help everyone to understand how to use it.

Step 8: Push changes to the Git Repository

Commit the changes to the local Git repository and push them to the remote repository.

Your personalized pod can be reused across multiple projects, and can also be shared as open-source with the community.

# Publish Pod on CocoaPods

Now, We are at the stage where you can easily share your iOS development work with community by publishing personalize Pod to CocoaPods.

Publishing your own CocoaPod is fairly straight forward. Let's get started!

Step 1: Getting setup with Trunk

To publish new or update Pod(libraries) to CocoaPods for public release you need a valid Trunk session on your current device. You can also publish your private library as well on the CocoaPods.

First sign up with email address to begins a valid session on your current device. We are using terminal to access the Trunk account. To register, please follow these instructions:

Run command in the terminal by navigating to the project's directory. Here is the example:

pod trunk register ankush@example.org 'Ankush Lokhande' --description='Macbook Air'

email and author name is the required parameter to run this command. CocoaPods personally recommend including a description with your session to give some context when you list your sessions later.

Shortly you will get an email by Trunk to verify the connection between your Trunk account and the current computer. With the email open on your computer device, you are now able to access your Trunk account through the terminal. You can list your sessions by running the command:

pod trunk me

Trunk accounts do not have passwords, only per-computer session tokens.

Step 2: Validate Pod using lint

You can validate a pod using lint by running the command:

pod lib lint <POD_NAME.podspec>

This command will check the podspec file of the specified pod against the CocoaPods specs guideline and provide feedback on any error or issues that it finds on your pod. You can also skip the warnings and it only fails in the errors case:

pod lib lint <POD_NAME.podspec> --allow-warnings

Once you have fixed issues or errors that are detected, you can then submit the pod for review.

Step 3: Create Release

You can create release by the multiple ways:

Using terminal:

$ cd ~/code/Pods/NAME
$ edit NAME.podspec
# set the new version to 0.0.1
# set the new tag to 0.0.1
$ pod lib lint

$ git add -A && git commit -m "Release 0.0.1."
$ git tag '0.0.1'
$ git push --tags

Using GitHub web interface: Here are the steps:
- Go to the GitHub repository for your project.
- Click the "Releases" tab near the top of the page.
- Click the "Create a new release" button.
- In the "Tag version" field, enter a version number for your release (e.g. 1.0.0).
- In the "Release title" field, enter a name for your release (e.g. "Initial Release").
- Optionally, you can write a description of the release in the "Description" field.
- Click the "Publish release" button.

Step 4: Deploying a Library

You must have a valid Trunk session to deploy a specific library. We have already discussed how to use Trunk.
Run the command to deploy library:

pod trunk push [POD_NAME.podspec]

It will deploy your Podspec to Trunk and make it publicly available to everyone. You can also deploy Podspecs to your own private specs repo with the following command:

pod repo push REPO [NAME.podspec]

After deploying specific pod, it generate a dedicated URL for your pod.

Now, The URL provided in the terminal can now be used by anyone to access your pod.

Congrats! 🎉

Your pod is published on the CocoaPods.

You can access your pod on CocoaPods using the provided link by Trunk. Anyone with link can add the pod to an existing Xcode project and use the feature across multiple projects.
Note: May be it take time up to a week or a month to appear your pod in the CocoaPods search results.

# Let's Wrap!

With a little bit of effort, you can create a pod that becomes a valuable asset to the iOS developer community. By following the step-by-step guide outlined in this blog post, you should now have a solid understanding of how to create, test, and distribute your own custom pods. With this knowledge, you can easily create reusable components that can save you time and effort when developing iOS apps. You can also extend the functionality of your pod with the time and make it more reusable and functional.

Key Resources for in-depth exploration:

Here are a few additional tips to keep in mind when creating and maintaining your custom pod:

Make sure to include clear and comprehensive examples of how to use the pod in your documentation.
Regularly test the pod in different environments to ensure compatibility and fix any bugs.
Always include versioning and release notes to keep track of the updates and changes made to the pod.
Consider open-sourcing the pod to allow other developers to contribute and improve the code.
Be responsive to issues and pull requests, and maintain an active presence in the community around your pod.

By following these tips, you can ensure that your custom pod is well-maintained and widely adopted by other developers.

DEV Community: Ankush Lokhande

VPN Fundamentals for Mobile Developers: Everything You Need to Know Before Integrating WireGuard

Table Of Contents

# What is VPN

Key Features of a VPN:

# What is an IP Address

Types of IP Addresses

# Types of VPN Protocols

Which VPN Protocol Should You Use?

# Key Components of a VPN: Client, Server, and Tunnel

# VPN Client – The User’s Gateway to Privacy

# VPN Server – The Secure Middleman

# VPN Tunnel – The Encrypted Pathway

# How Does a VPN Work

# Development-Oriented Terms in VPNs

# Interface (VPN Configuration on a Device)

Key Parameters in an Interface:

# Peer (Remote VPN Connection)

Key Parameters in a Peer:

# Encryption (Securing VPN Data)

# Tunneling (Creating a Secure Data Pathway)

# Let's Wrap!

Happy coding!👨‍💻

Building a Secure VPN in Android with WireGuard: A Complete Guide

VPN Fundamentals for Mobile Developers: Everything You Need to Know Before Integrating WireGuard

Table Of Contents

# Essential Prerequisites for Setting up your project

# Test how VPN works on devices

# Setting up the project

Add dependency to the project

Configuring VPN Service in AndroidManifest.xml

Dive into the coding logic

# Let's Wrap

Happy coding!👨‍💻

Images Vanish: My Experience with the dev.to Image Outage

15 Best VSCode Extensions to Improve Your Productivity in 2023 (PART-1)

# Best and Useful VS-Code Extensions

1. Better Comments

2. Prettier - Code formatter

3. Back and Forward buttons

4. Turbo Console Log

5. Android iOS Emulator

6. Import Cost

7. indent-rainbow

8. Code Spell Checker

9. Image preview

10. VSCode Icons

11. Polacode

12. Code Runner

13. Colorize

14. Path Intellisense

15. Pubspec Assist

Happy coding!👨‍💻

Effective techniques to use Comments in Swift iOS

Table Of Contents

# Types of comments

# Ways to use comments

# Let's Wrap!

Happy coding!👨‍💻

Code Documentation: Best Practices and Strategies

Table Of Contents

# Reasons why code documentation are important in code

# Approach to documentation code

# Let's Wrap

Create your own CocoaPods library in Swift: A Step-by-Step Guide

Table Of Contents

# Essential Prerequisites for Setting up your project

# Setting up the Pod Structure

Step 1: Initiate Project

Step 2: Configure a template for your Unique Pod

Step 3: Setup Codebase on GitHub

Step 4: Revise the template version

Step 5: Revise Podspec Metadata file

Step 6: Creating a Codebase Directory

Step 7: Create an example using Pod

Step 8: Push changes to the Git Repository

# Publish Pod on CocoaPods

Step 1: Getting setup with Trunk

Step 2: Validate Pod using lint

Step 3: Create Release

Configuring VPN Service in `AndroidManifest.xml`