Easier Webhook Testing with Ngrok

Picture this scenario :

You have built a web app that has webhooks from other service. But everytime you want to test it out, you have to deploy your app, and keep a look out on your logs as the request trickles in. 

or

You are working with a mobile developer in-house, and you both want to test an API. You deploy the app, even if it is a minute change and then wait to see if all works properly. 

I am sure, as a developer, we have all been there. Deploying apps for a couple of small changes, and make it run through your entire CI/CD cycle can be exhausting. And so I was delighted, when I stumbled upon ngrok.

ngrok is a tool that allows you to access your localhost via Internet. This can save you from countless hours of frustrations by avoiding deploying code for minor changes.

Running ngrok is as simple as downloading the relevant files from the website. Once downloaded, on Mac / Linux – type

Once you have unzipped the contents, ensure your localhost is running and you know the port number. To get your server accessible via Internet, type

This would start ngrok, and now your web app is publicly accessible via the Internet. The terminal also shows the incoming request to your app

The Tunnel URL in my case is http://b3991383.ngrok.io, which points to port 8000 on my device. You can now update the tunnel URL in your webhooks, or pass it on to your client to test the app.

One cool feature of ngrok is it’s live dashboard – which allows you to inspect the status of server as well as the requests that are coming in. You can access this dashboard by navigating to http://localhost:4040/inspect/http

 

 

Apart from using ngrok for development, you can also use it to host your own webmail or other apps. ngrok also offers a paid tier with support for custom domains and other features.

ngrok has been easily one of the tools that has saved me hours of development time, and the paid plan is just worth it.

Beginner’s Guide on using Nine Patch

When building Android apps, we use resource images with different densities – HDPI, MDPI, LDPI etc. But this soon gets tedious and hard to manage – and that’s where 9 patch images can help us.

Using the 9 Patch image library – we can include only one image ( the smallest one ) and the device will stretch it according to it’s need. 

Creating Nine Patch Images : 

  • Open terminal, go to Android Home Directory (the location where you unzipped the Android SDK) /Sdk/tools and execute command ./draw9patch to launch the nine patch tool.
  • qice@qice:~$ cd /home/qice/Android/Sdk/tools/
    qice@qice:~/Android/Sdk/tools$ ./draw9patch
  • Drag your PNG image into draw9patch window (Or select File > Open 9-patch to locate the file). Your workplace will now open.
  • The left pane is your drawing area, in which you can edit the lines for the stretchable patches. The right pane is preview area, where you can preview different shapes of stretched image.
  • Click within the 1 pixel perimeter to draw stretchable patches.Black lines on left and top of the image shows stretchable patch.Black lines on right and bottom of the image shows fillable area (which is optional).
    Here, Pink color shows a stretchable patch and Purple color in preview area shows fillable area. You can have as many stretchable sections as you want.
  • Now save your image, select File > save 9-patch
  • The image will be saved with extension .9.png

Using the 9 Patch Image : 

With the 9 Patch image that we just created, we could use it anywhere – and the advantage is the image will scale itself to adjust to the content inside.

9 patch-bg

For ex :  The image you see – the background is generated by the image that we just created. Note how it scales to fit different type of content.

<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin">

	<TextView
   	android:id="@+id/textView1"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Text"
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<TextView
   	android:id="@+id/textView2"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Some large text"
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<TextView
   	android:id="@+id/textView3"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:gravity="center_vertical"
   	android:padding="10dp"
   	android:text="Bigger text. It gets stretch vertically as well as horizontally. See this background."
   	android:textSize="18sp"
   	android:textStyle="bold" />

	<ImageView
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_marginTop="15dp"
   	android:background="@drawable/bg_nine_patch"
   	android:padding="10dp"
   	android:src="@drawable/orange_bag" />

</LinearLayout>

Pros of using 9 Patch : 

  • Reduces the app memory usage, as well as the entire size of APK.
  • Custom Backgrounds are now easy to make, without worrying about supporting a whole lot of device resolutions.