Forem: David Okonji

Remote Debugging for Android Devices

David Okonji — Wed, 20 Apr 2022 08:03:47 +0000

While working on android applications development, it is a common practice to debug apps using a USB cable to connect the device to android studio. With the decreasing number of computer's ports, for which we require an external dongle device to connect USB cables. By using remote debugging, it saves a lot of time and space needed to carry external accessories used to debug a mobile application on an android device.

A couple years back I wrote an article on Remote Debugging in React Native which was majorly focused on using Xcode to connect to IOS devices remotely, at that time remote debugging option was not available for android studio.

In this article, I will be explaining how to set up remote debugging for an android application over the network using Android Studio and an Android device.

Note: This is not limited to testing a native android application but also for react native and flutter applications.

Required Tools

Android Studio Bumblebee | 2021.1.1 Patch 3 or later
A android device running on Android 11+
A wireless connection common to both mobile phone and system running the android studio

Steps to setup

Now, we have all tools setup, we can go ahead to open our android project in android studio and follow the steps below;

On the android test device

We should ensure the Developer Options is enabled, In developer options, an option for Wireless debugging should be toggled off by default, it should be toggled on

Tapping on the enabled wireless debugging should get you options to connect wirelessly

In android studio

We should click on the dropdown to select a device at the top right menu bar,

That should give a pop up dialog which give a default option to Pair using QR code

-> Pairing using QR code

On the mobile device already been setup above, we click on the option to Pair device with QR code which gives a QR scanner screen to scan the QR generated by android studio

Once scanned correctly, we get a successfully paired status and would see the new paired devices under the list

-> Pairing using pairing code
On the mobile device already been setup above, we click on the option to Pair device with pairing code to generate a pairing code which would be used to finish the pairing set up.

In android studio we should toggle the Pair using pairing code option in the popup dialog, we should see our device ready to start pairing

Input the code generated on the mobile phone into the fields on android studio

Once scanned correctly, we get a successfully paired status and would see the new paired devices under the list

Either ways we go about pairing the device, once done we should see our device available for the app to run on anytime we are connected to the same network 🎉

Debugging issues

Can't see developer options? How to toggle developer options on a new device: Go to phone settings -> Scroll to the bottom and click on the about phone option -> Click on software information -> Tap on the Build number 7 times to get a prompt that developer options has been enabled.
Can't see device to pair with? Confirm if the android device and system running the android studio are on the connected to same network.

Conclusion

Using remote debugging generally saves a lot of time to debug mobile applications, Hopefully it would save yours.

Thanks for reading 🥳

Remote Debugging in React Native

David Okonji — Mon, 21 Dec 2020 13:06:43 +0000

Coming from an Expo background in React Native development, remote debugging is an out of the box solution, as the Expo client provides one with the option of debugging react native applications over the network.

In this article, I would be explaining how to set up remote debugging for a react native application over a local network using Xcode and an IOS device.

With Xcode already installed and set up on your system, we would follow the steps highlighted below, In this article Xcode version 12.3 is being used.

Note: for the very first time you would need a cable to be connected to the phone you intend to use to test.

Step by Step guide

Ensure the system and the device which needs to be used to test are connected to the same Wi-Fi.
Open Xcode, proceed to the window menu option, select the Device and simulators option.
On selecting the option, a popup window comes up showing your existing simulators and device.
Click on the Devices tab to see the connected devices to see your connected phone

Select the Connect via network checkbox and you are good to go. You can now unplug the phone from the system and test your apps over the network.

Debugging Issues

In a case where the device is not showing as connected when plugged in with a cable and does not run regularly when connected, you may need to update the version of Xcode to match the updates for the device.
In a case where the connect via network option does not come up, please check your connection and ensure the device and the system are connected to the same network, and try again.

To setup remote debugging for android devices a good guide to follow Get Started with Remote Debugging Android Devices.

Thanks for reading this far 😃. Feedback is greatly appreciated.

Generating and Downloading CSV files using express JS

David Okonji — Mon, 18 May 2020 11:38:54 +0000

While working on a node JS project, I had the need to pull certain data from my database and represent values in a CSV file, This guide aims at simplifying the process of creating a CSV file and making it downloadable from the client-side.

Prerequisites

Knowledge using express JS.
A working database setup.

For this tutorial, I would be making use of PostgreSQL with Sequelize ORM (database/ORM type does not actually matter), json2Csv npm package is my choice package for parsing JSON to CSV data because of its simplicity and ease of use. other npm packages which can be used are fast-csv, csv-parse.

Objective

Downloading users data (first name, last name, email) as a CSV file, using an API endpoint /download.

Steps

utility function
Using the helper function in the controller

Utility Function

Install the package using yarn add json2csv or npm i json2csv, once complete, we would make use of the parser synchronous API that is giving from json2Csv.

util.js

import { Parser } from 'json2csv';

export const downloadResource = (res, fileName, fields, data) => {
  const json2csv = new Parser({ fields });
  const csv = json2csv.parse(data);
  res.header('Content-Type', 'text/csv');
  res.attachment(fileName);
  return res.send(csv);
}

The downloadResource function parameters;

res: This is a response from the API endpoint.
fileName: The name intended for the generated CSV file to be downloaded.
fields: This is an array of objects that has a number of functionalities which includes, specifying what values should be parsed from data sent, giving a custom header to each column etc. Note: For this tutorial we are going to supply fields, but fields are optional, when defining the parser instance it can accept an empty parameter (i.e new Parser()). The keys (i.e label, value) of the objects would be used to give structure to the CSV file.
data: This is an array of objects representing data to be populated in the CSV file, Note: this is to match the specified field.

In the utility function, set the header Content-type to text/csv to enable the client to recognize what type of data is being sent and how to handle it, setting the attachment to the file name of choice and then finally returning a response using res.send taking the parsed CSV data as parameters. We have our ready to use utility function.

Using the helper function in the controller

Creating a new route for the download
route.js

 import express from 'express';
 import userController from './controllers/userController';

 const router = express.Router();

 router.get('/download', userController.download);

 // rest of express configs

Creating a new controller download method
userController.js

 import { users } from '../models';
 import { downloadResource } from '../util';

 const controller = {};

 controller.download = async (req, res) => {
  const fields = [
    {
      label: 'First Name',
      value: 'first_name'
    },
    {
      label: 'Last Name',
      value: 'last_name'
    },
    {
     label: 'Email Address',
      value: 'email_address'
    }
  ];
  const data = await users.findAll();

  return downloadResource(res, 'users.csv', fields, data);
 }

 export default controller;

Testing Implementation

Run your local server and open link in the client browser with a path for the download endpoint (e.g http://localhost:3000/api/download) and your file gets downloaded using your local download manager.

Conclusion

Fun fact this is my first article on dev.to 🎉, I am David Okonji a software engineer based in Lagos, Nigeria, feedback would be greatly appreciated. Gracias!