How I recreate the Jenius App

4 min readMar 24, 2021

https://unsplash.com/photos/em37kS8WJJQ?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

(This is a continuation from the prelude article)

This time, I will recreate the Jenius Android App. The reason I choose Jenius is that they have so many UX case studies. Yet, zero articles that try to rebuild their studies into a real app. Also, it’s a challenge to recreate a finance app, which we know usually has a better security system.

For our note, this is not an attempt to hack or anything. We still need a valid account to use all its features. And no, I can’t get your lost password for you.

The Proof of Concept

We’ll be focusing on recreating these features as a proof of concept:

Login & OTP Screen,
Dashboard Screen with In & Out Widget

We will not develop all of the original features, God no, nobody ain’t got time for that. These features are enough because we only want to make sure that our app can do a POST and GET to their API.

This article will split the dev stage into 3 major steps: The Design, The Capture, and The Implementation. Don’t worry, I’ll put the source code at the end.

The Design

Let’s start with the design. Of course, it would be boring if we just copy the original design. What are we, a pisher? There’s a ton of inspirations from Dribbble, but I found the one that suits our need. Its redesign is minimalist and nice enough to have its own UX study, so our app will statistically have a better UX than the original.

We will start from the very start, the Splash Screen. Unfortunately, its redesign doesn’t have all we need except the Dashboard, so time to improvise.

Now we have the design, let’s try to capture and implement the API.

The Capture

We can’t get their API from the app on Playstore because it has Root Protection. Our phone needs to be rooted to use Fiddler, so we must find another way.

“We’ve detected this is a rooted device. Please reset your device to its original settings or use another device”

Fortunately, they have Internet Banking, so we’ll start from there. Let’s try logging in and make sure Fiddler is active in the background.

Now we arrived at the dashboard, let’s check our captured traffic on Fiddler.

There are some requests with a host “https://api.btpn.com”. So, let’s filter the list using that and also content-type “application/json” to make sure we only have requests that have a meaningful response.

First, we need to know what API is used for logging in, so search the request that contains your email and password inside its request body. Found it?

POST https://api.btpn.com/jenius

{"query":"mutation loginWithEmailPassword($email: String!, $password: String!) {\n  loginWithEmailPassword(input: {email: $email, password: $password}) {\n    authId\n    phone\n    __typename\n  }\n}\n","variables":{"email":"irfanyasiras@gmail.com", "password":"******"}, "operationName":"loginWithEmailPassword"}

Try to execute that request inside Fiddler Composer to make sure we can do it within our app too.

After all, they want their API to be as secure as possible. Take a look carefully at these requests in case you missed something. You will found that they have BTPN-ApiKey in their header. Let’s put this key inside the composer.

Examine every request and try to understand its flow. Take a look inside their header, body, and response. Some API will need a value from the API that comes before. These are my quick note for the flow:

The Implementation

Now we have all the data we need, time to implement this into our app. I’m not gonna bored you with a line-by-line presentation. So, please take a look at the source code for a depth explanation.

For a quick reference, I’ll be using: