The First Screen

It’s conventional to start building anything with a plan and there goes a prequel of stories that define the structure of my app, in its entirety.

Hariharan M
5 min readJul 29, 2017
My Crashz Guitar Symbolizes a Music World full of Peace, Love and Harmony

Look out for Beneath the Cover sections of this blog to unveil the underlying technology.

My Speculations

If the Login/Register Page doesn’t count for a screen in scope of the internship, it’s never a futile proposal to design one that’s a starter for a fresher.

I can put some words into what my app is all about with some groovy, that catches the user attention, esp. when it comes to android apps.

This is my 3 pager Welcome Screen and I unwind the curtains over my app screens for the first time, in the journey so far :)

The Starter

I say what the user can put inside the app.

I can also talk about what the app offers. It’s basically a social media platform with friends tuning into each others’ song collections. They comment on songs and tag them with likes.

The page on Social media, the essence of one’s voice in a community.

Then, I go further into asking the user if he’s got an user account with Crashz yup, thats’ my app’s brand name, by the way :)or if he’s a fresher.

The xml design blueprint of the welcome footer fragments.

Beneath the Cover: I’ve used a viewpager to host the welcome screens. The first 2 screens are fragments instantiated from the above constrained blueprint. I’ve used a depth in transformer for the transition effects.

Fresher’s Way In

If you are a fresher, sign up for Crashz.

Login or Register

I’ve got the MSG91 Gateway setup for OAuth login via Mobile and for one-time mobile verification, which I recall from the last blogpost.

MSG91, my OTP Partner. I would’ve gone with Social OAuth Logins, but a mobile OTP identity appeals the best with a mobile app.
This is how the hints look on a blank Register page
Upon clicking Submit with just the 3 fields, you’ll be prompted for an OTP.

When prompted for OTP, just copy paste from your Messaging clipboard & Submit.

Hasura Auth Console gets decorated.

Cool, you are now into my Auth tables :)

Let’s Interact a Bit

The first screen in a First Look

I’m finally grazing the opening shots of my first screen. It’s imperative to get some basic user profile into the data tables, — esp. when it comes to Social Media apps — so that he is presented with some uniqueness essentially.

From my stories so far, it should be pretty obvious for how I do that.

What’s Identity and what’s personal?

You can be identified with your name, place of work or your city. But, sharing your emotions with music, life events and a bit about your hobbies is the personal side of you.

Users may feed on that part for their friends to know them better. But otherwise, I strictly don’t encourage people without self-note (on name, work & city) to be able to make friends or add songs or do anything at all with the app.

The Cliffhanger

Now that you are registered, you are on permit to cross the Sign In Page.

Once you register and login for the first time, you get the edit profile screen.

Here comes the Main Picture after weeks of Trailers :)

It never takes you to your home screen until you fill the debated small piece of yourself, even when you restart the app.

Beneath the Cover: I’ve used intents to check on that. Once an user registers, I put a bool tag on a bundle object, and passed it with the intent to the sign in page. This tag indicates a first time login. If true, it takes the user to the Edit Profile and saves the tag into a SharedPreference. Even if you abort the app, leaving the page, you are still logged in & your tag is not flagged. So, you will revisit your profile nevertheless you lend the elementary--Who you are.

I’ve got some profile into the app.

And once you save your profile, HomeUp Navigate to the back stack is set from thereon.

Happy Tuning and Posting.

A Special Tweak

In further as you update, the update queries are propagated to the correlative user record in the user table, if the tag is flagged(if tag is false, it’s first time — So, I do an insert). But the best part is, your data is written into a SharedPreference, retrieved and rendered for you everytime to visit the Edit Profile page.

You get to make some revisions of your personal stories and save them in no time :)

While I visit Edit Profile, to make an update, its surprising to find my past data there as ever.
User is logged into my Hasura DB console. Hurrah.

Pretty Cool ah.

For the Day

That’s it for the story of the day, which infact took me a week to cook :D

I’ve provided with links then and there for a better visual simulation of the underlying technology. More coming up. So long for next time :)

--

--