DEV Community: Emma Odia

API for Newbies

Emma Odia — Wed, 05 Sep 2018 14:03:27 +0000

Spare me the technical jargons please!

So in this article I'm going to answer questions that as at when I was a Junior Dev I did not have any answers to. I wish someone had made a post about it when I started out. So here I am and the goal is simple: Explain what an API is in non Dev Talk, so help me God!

"Everything Should Be Made as Simple as Possible, But Not Simpler"
Albert Einstein

In this article we will take an approach of asking questions and then providing answers which should be sufficient enough to answer the question without any loss in explanations or meaning.

1. Is an API a piece of Software?

Answer: There is this common misconception about what an API really is even after you have read the definitions on Wikipedia and all other sources that first begin with the Keyword definition: Application Programming Interface. Emphasis on Interface here that often causes a confusion not to mention the use of examples like Twitter API, YouTube API, Facebook API and APIs made by tech giants and then as a noob there’s this misconception associated with such thinking that APIs are made by the Tech Giants ONLY!

Well with this one question, I will provide three answers. As there exist two unasked questions given this one. The other two being:

1a. Can I build my own API?

1b. Can other people use my API as well?

An API is basically a piece of Software like an APP running on your Phone or a Website.

Before the “Senior Engineers” call this misleading, please remember that I said at the beginnig that this will be a non technical explanation!

Here’s a visual representation that explicitly explains in steps:

Use the image as a Visual guide

At this point it is safe to resort to using an Analogy to explain the answer and thereby give it some depth.

Yes, I compared an API to an APP on Mobile or a Website. Now to be explicit:

Both Apps run (are hosted) on a server before you can have access to use. The App has a code base which may be (or not) split into the front-end and the back-end. You do not see and maybe are not interested in the logic (code) that causes this app to run. You have it as a complete Software that you can access! An API is basically the same, it is a piece of Software hosted on a server that you can access for a myriad of reasons and usage.

Yes, you can build one! Simple enough answer! In a follow up article to this one I will teach you how to build an API using ExpressJS on Node with either MongoDB or PostgreSQL and you will push out to a server and have others use it. Watch out for this article. Like the Big Tech Giants, other people can use your API as well. The beauty here being that, they can use (consume) it on either Desktop or Mobile.

You can host your app on a server and make it live!

In closing this is what I wish I’d known when I started as a Junior Engineer and the buzz word was often thrown around and I felt dizzy when I discovered big tech companies where the ones who had APIs publicly available. Well, there, this is one of the many ways that it be made into simple language for non techie. If you have more questions, concerns or simply want to add your thoughts to this conversation, please you are kindly welcome to that in the comments section. Also be on the look out for the follow up articles where I build an API and walk you through the entire process so that you can begin building some yourself.

How to Fix that Heroku Push Error!

Emma Odia — Thu, 23 Aug 2018 12:54:54 +0000

You made a mistake pushing your code to the work account instead of your personal account!?!! The Horror! The Pain!! OMG... The PAIN!!!

Apparently you were on your PC and had logged into the work account the last time you made a push and now you have created a personal heroku app, most likely a weekend hobby project and yes, you pushed to the office dashboard... Hmmm. Well let's fix that shall we?

Here's how to fix that.

heroku login

Enter your credentials. Apparently this is why you pushed to the wrong account in the first place! Duh!

Check the remote urls that your app is hosted on

// Check for the current url 
git remote -v

Well seeing as your current user account cannot push to the remote heroku url, we then have to delete it!

// remove remote url
git remote rm heroku

Now we have to create a new Heroku app via the CLI since we are now logged into your user account

heroku create

You get a url at this point, which is also created on your heroku dashboard. Now set this url as the remote url for your app

git remote add https://git.heroku.com/<unique-heroku-app-name>.git

We can never be too careful! Just to be sure run

git remote -v

Now we are confident to push our app to heroku

git push heroku master

Phew! That was a close call mate!

A Weekend Hackathon: ReCode Nigeria.

Emma Odia — Mon, 30 Jul 2018 09:15:52 +0000

July 17th 2018 was when my friend told me about the Recode Nigeria Hackathon. I immediately registered as it held the promise of being a fun weekend. I mean, 3 days of coding! What else can a man ask for!?! This friend of mine, Habeeb, I had met not quite long, July 8th actually at… you guessed right a Hackathon! Here’s a fun fact, Habeeb isn’t a coder, yet. He is a digital marketer who has a knack for product design, management and leading teams. All in, dude’s an exceptional fella to work with. We came 3rd in the July 8 Hackathon where we first met and were grouped in the same teams. We became quite acquainted immediately a lot more because of his endearing nature and patience. Something that I don’t have so much of a reserve for, especially when I my code gets bugs… aarrrghhh. Yes back to the conversation. The Recode Nigeria Hackathon.

Funny enough, that weekend had another hackathon that was being organized by Figma and which was geared towards designers. I had registered for that when Recode was announced; I immediately shifted my gaze as Recode appealed more to my interests as a developer. Well, Friday came by very quickly and I left work early so as to make it to the venue early. Yeah, my team in the company knew about it. This not being my first code slumber party, I had packed the necessary requirements in my backpack: Hoodie, Water Bootle for the energy drinks, Toothbrush, soap, deodorant and an extra Tshirt. One extra Tshirt because I knew that the organizers will make Tshirts available to the participants and I planned on wearing that for the last day.

Habeeb and I had planned to leave for the venue together, somehow our timelines did not sync and he left for the venue before I did and I had to catch up with him there. I got to the venue and I was wowed by the arrangement put in place. The venue African Fintech Foundry did wow me too, buh ama be chill about that and not flip… Lol

The venue used for the event is called the Hive and… you will not believe this… it is built entirely out of containers! All floors! Man… Like I said I ain’t going to flip. I’m not tripping though when I tell you that it is an architectural masterpiece. A thing of beauty and delight.

Day 1 had us arrive and the opening sessions delivered by the various companies who had brought problem statements for the participants to build solutions for over the course of the weekend. Participants who did not have team mates and those who wanted more people on their teams were paired together. All of this happened intermitently and well into late evening. Habeeb and I were joined by two other folks: Emmanuel (my namesakes) and a dude who called himself Tj. Emmanuel is a product person like Habeeb and Tj claimed to be a Software Engineer. My team chose to work on the FMCG problem statement as Habeeb had gained experience working in that sector. Night came and I never realized that Tj had left! He simply upped and left! I was left alone as the coder on the team.

Day 2 started 12:00am! Yes because the moment the moment the clock moved a second forward from 11:59pm we were in Day 2. No one slept that night. With Tj gone, the team progressed with prototyping the product flow and we sufficiently completed this before 4:00am and I started to build. In hindsight now I would have gone with Ruby On Rails over the MERN stack. I will tell you why when I close the article. Day 2 went by very fast as I had to attend another event I was organizing that day. The plan was to go there early, set up and go find "one corner" to continue hacking. At the time I had no inkling that Tj was not coming back. Well, what was I thinking, I mean, how on Earth will an event organizer be at an event and be able to attend to other things until his event is donw!!? Silly me! The afternoon went into evening and the event was thankfully a success and I had to go back to the Hackathon. That was almost 10 hours of work time lost! Evening progressed into night and morning came.

Day 3: Working alone on the products. Sleep deprived and powered by energy drinks, I did not (could not) complete building out the entire product that we had prototyped. Long story short, presentations took place and we did not come top 3. That broke me... apart. I blamed myself for everything. From not inviting my friends who are developers (they couldn't have been able to make it down), not asking about Tj's skills set (might have served as an early warning system), discussing with the other members of the team who were non technical and giving them a wide enough berth to interrupt my coding flow (getting in and out of the zone is frigging stress... arrrgghhh). Hackathon ended and it was good byes and back pats.

Lessons learned:

Form a team prior to entering into a hackathon and each team member should be clear on what is expected of them and internal team interactions should be clearly understood!
If you are going at it solo, decide on a programming language that you can use to quickly get an MVP up and running on a live server! I could have done this with Ruby on Rails even whilst sleeping! I wouldn't worry about code best practices given the short time and that I would be coding alone.
It is okay to let everyone know not to disturb you while you are writing code. Especially the non technical members of the team. Very important to verbally communicate this and not just assume that they ought to understand!

Well there you have it. I hope you enjoyed reading this and learnt a couple of lessons that you can apply in it. Do kindly let me know your thoughts in the comments. Thank you!

Customize your Bootstrap Navbar

Emma Odia — Fri, 20 Jul 2018 11:14:58 +0000

I want to sincerely appreciate everyone that takes the time to read my articles. I will keep sharing lessons that I know present a steep learning curve when you go at them by presenting them in a most comprehensible format.

The Navbar is important to every web app because it serves as the navigational compass that users of your app will your to find their way around your application.

Read my introductory article on setting up the Bootstrap Navbar here:

Fine course charting through the BootStrap Navbar

Emma Odia

#bootstrap#development#web#frameworks

I will share important factors you should take into consideration when building your Navbar:

It must be immediately visible: I recommend setting it at the top of the page and fixed there too, thus whenever a user scrolls they can easily navigate to any other section of the web app which they want to to access with out scrolling all the way back to the top of your website. Sufficient A/B testing can also make your decide on what works for your web app.
It must be easily understood and reflect drop-down icons if any: I suggested the URLs to add to your Navbar in the article I mentioned above and listed

Home | About | Contact | FAQs | Blog

Home is the landing page of your website. It can be described as the inscription on the door which determines if people reading it will want to pull the door knob which is the big call to action button that tell people to either sign up to use your service (product) or read more about you (portfolio).

It must be responsive across devices: Whether a user visits your web app on Desktop, Tablets and small mobile screens they should be able to easily navigate around your web app and get the same user experience (UX) across devices. This is where using Bootstrap makes it all easier!
It must convey meaning in ONE word: Once a user sees your Navbar they should immediately understand what each url represents. Thus I recommend using single words which convey meaning immediately. Like our example URLs thus:

                    Home | About | Contact | FAQs | Blog

HOW TO BUILD A FIXED TO TOP NAVBAR USING BOOTSTRAP

I created a gist with the code and I left comments in it which explains a sequential step by step process to build it.

Here's a codepen example which shows how it works. Scroll up and down the page to see the fixed Navbar in action.

Well if you have read this far and been able to implement it, CONGRATULATIONS!

I simply love using bootstrap because of the ease with which you can achieve accomplishing styling tasks that might take hours if not days to hand code especially taking into consideration different device sizes.

Fine course charting through the BootStrap Navbar

Emma Odia — Sat, 14 Jul 2018 14:15:33 +0000

Okay! I'm not even going to front: I LOVE USING BOOTSTRAP!

I think this has a lot to do with the fact that when I picked up using Ruby on Rails all that 4+ years ago, Bootstrap was the recommended go to resource to design front end. Boy, did it integrate into Rails nicely!!?!! You bet!

I will share the little bits of small gotchas that can easily get you peeved over using Bootstrap as often as I can here on dev.to with corresponding code snippets. If this is something that you are interested in, I recommend that you tag along for the ride. Quickly a brief intro. What is Bootstrap?

"Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."

Source: The official Bootstrap website.

Well I don't know about the claim being the world's most popular front end component library. Nonetheless is it used a lot? Well it is. Make that definitely so. I assume two kinds of readers, one who requires a simplified breakdown and another who just wants to see the Github gist. If you are the latter, kindly skip the next paragraph.

"Keep it as simple as possible, but not any simpler"

Albert Einstein

Basically I define Bootstrap as the go to resource when you don't want/like/desire to write CSS styles for your web app. You just make use of the default already created Bootstrap options available. Many a time all you will have to do is just change the front appearing text as I will show you with creating a simple Navigation Bar for your web app.

First we head over to the Bootstrap documentation where we are given 3 options out of which we have to choose one to get Bootstrap working in our app. I have preference for the CDN and that is what we will rely on in this article and all future articles I will write on Bootstrap. Using the CDN has the following advantages

Now, let's get building that Navbar. So let's begin with the default Bootstrap Starter Template Code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <title>BootStrap Nav!</title>
  </head>
  <body>

    <!-- Plug Bootstrap Nav Bar code here -->

    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  </body>
</html>

Well, as often is the case a web app has a part of it's navigation:

Home | About | Contact | FAQs | Blog

We will just stick with those 5 items when we go to the next articles in this series. Let's head over to Bootstrap documentation to copy the code for creating a Nav bar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

This is the default navigation view of the Navbar in Bootstrap and all we have to do is plug it into the html starter template where I left the comments.

Then we have:

You should have something which looks like this:

If you can see that view on your end, congratulations. I will end here in other not to make this lesson any longer that it should be.

The goal here was just to show you how easy it is to build a web app Navbar using Bootstrap. In follow up articles I will share how you can customize the Navbar to suite your needs, look, feel and what other considerations you may have.

Many thanks for reading! Please drop whatever comments you may have, I'm most glad to hear from you. Also if you are open to conversations about Bootstrap. Kindly say "Hi"!

Cover image credit: Photo by Artem Sapegin via unsplash
Further Reading: The Official Bootstrap Documentation
CDNs: What is a CDN?

What do you tell the PM when the deadline is against you?

Emma Odia — Mon, 09 Jul 2018 21:08:34 +0000

The truth! The truth, the whole of it!

We have all had that time where the Project Manager has come at us in ways that we felt like one of the following:Throw the mug you are drinking coffee out of at his head OR Raise the mug and smash it against your own head!

Here’s the thing, as with every story, perspective is very important. Only when we sufficiently see a story from all sides can we make certain affirmations. There’s you, the PM and then those bugs that you told the PM you were going to squash a few days ago. What then do you do when the PM comes at you days after and asks:

“About that feature that you said we could implement on Tuesday, errr... today is Friday… You know.”

Well, he is not asking about how much you know the days of the week or if you have lost the ability to number the days. Don’t throw the coffee mug at him!

You think to yourself:
“How can I make this dude understand that coding isn’t woodwork? You do NOT simply bring out a measuring tape, take measures and the cut!”

Just pause, before you question his powers of observation, take a sip of that coffee, if for no other reason, this ought to calm your nerves down. Try, try as much as you can to see things from the point of view of the PM. Let’s begin with some questions. For a minute, see this as an arbitrary session. There’s the PM, you the developer and myself. My purpose is to ask the questions.

Me: Did you and the PM open up a document before you started on this project.

You: Yes.

PM: Of course, there was no other that we could communicate what we both thought we should build without first outlining it on paper.

(You suck in a deep breathe as you think to yourself that a “yes” answer would have been just fine. But, no, the PM has to “talk”.)

Me: Okay. That’s fine. Did you both agree on the timeless that you set and did you as Engineer particularly expand the timeline with the view to make up for possible delays.

PM: We were on a deadline and didn’t have time for that. Besides he (points at you) reassured me of his competence and his ability to complete this project within a period lesser than the original estimate.

(I take a glance at you and you run your left hand across your face whilst making a fist with your right.)

Let break out from this scence and come back to the present reality.

Dude, there were obvious mistakes on both your parts.

Common knowledge: A structure built on faulty foundations will not stand! Well, is the inference from this to break down the entire structure simply because? The answer is no. Thank goodness that you guys are not building an actual physical building but a software product. Well, it is time to revisit that features doc and the timelines. Yes, you need to sit the PM down and not reassure that you are Ninja dev but that you are an engineer that does need “f*vk room” as part of the timeline. Point of note that you will not necessarily need this extra time of every feature, hence you can use the extra time to make up for when you do need it. Trust me, you will definitely need it!

From here on out, What do you tell the PM when the deadline is against you? The truth! The truth, the whole of it!

MVC pattern explained using a Guitar Shop analogy.

Emma Odia — Wed, 27 Jun 2018 15:13:30 +0000

I have a friend who is of the opinion that he wants to understand the entire abstraction process going on under the hood that makes an app work. This is often very hilarious to me and I always ask if he is interested in doing same with automobiles! I mean who is changing gears and wondering how the gears shift! That had be very funny! Not to mention all the people cussing at you when the red light turns green and you are lost in thought about how the ignition works! The point that I'm trying to make here is best explained by one of my favorite poems. Just because we have toothbrushes now doesn't mean that there wasn't a time when men used sticks to clean out their mouths. Processes over the years have been deployed and re-tweaked to make them better.

The MVC process is akin to this! There was a time when a individual had to set up their own servers just to share static assets over ftp and write all the machine level DevOps code! Now hosting your software (web and mobile) apps is easy with organizations abstracting away a huge chunk of the DevOps responsibility for you. The point as has already been made and which I still want to hit nail on the head here is the fact that once a task is abstracted away, it is simply done to make life easier. The MVC process is hence made to ensure a faster way to rapidly build web applications by thinking them of separate entities that communicate as part of an entire activity. I will define the general overview of a web app and then explain the structure using the MVC pattern and bring it close to home by using an actual guitar shop analogy in closing.

Say we have a website app that sell guitars. The Website has for example:
A landing page: Home Page. Static Pages: About and FAQ. A page that wrangles data: Contact form. Shop. Checkout. If we are to use the MVC pattern to build out this website we have to first define what is our MODEL, which of the pages will be simple views, which page VIEWS will return data from the MODEL and finally what logic will go into the CONTROLLER. Holding the mental picture or better still putting this on paper.

Static VIEWS: Home, About and FAQ pages.

Static VIEWS which returns data: Shop and Checkout pages.

MODEL: Where our guitar data will be saved. 

MODEL we will call SHOP: has_id has_item: guitar {guitar: has_price, has_name}

CONTROLLER: Static Pages controller and Guitar Controller.

When a user lands on the Home Page VIEW: He is served a Static Page by the (take a quick guess…) Static Pages CONTROLLER. Same action when he visits the about and Contact Pages, he is served by the (as you may have learned quickly by now) Static Pages CONTROLLER.

VIEWS	CONTROLLER	MODEL
Home	Shop	Shop
About	Guitar
FAQ
Shop

When a user clicks and goes to the Store Page VIEW (quickly, what do you think happens here?) He is still served by the CONTROLLER, this time the Guitar Controller which communicates with the shop MODEL ans serves up all the guitars in the Database according to their ids. When he proceeds to make a check out upon selection of a particular data, he is sent to a checkout page that bring up the particular guitar according to it's id in the database and he can then make payment for the particular guitar.

Guitar Shop Analogy

Let me use a Guitar shop as an example now.

You live in a city and have decided to pursue your long interest in music. You are not such a bad singer, to make up for the small (likely off key) singing inability you decide to purchase an instrument to accompany your singing with. Your instrument of choice: THE GUITAR!
You are on a budget and decide to walk to the local market where there are a couple of guitar dealers.
You see xyz shop (Home page VIEW), walk into the shop and see a larger roll up banner (About Page VIEW).
A Salesman walks up to you (CONTROLLER) and offers you an option to take you round the shop to see available guitars and their prices.
Salesman CONTROLLER action here can either tell you more about the shop (render Static Pages About VIEWS) and/or answer all other questions that you may have (render Static Pages FAQ VIEWS).
You asked a couple of questions and then you two proceed to walk round the shop and as you reach each guitar you ask for name, brand and price.
Salesman CONTROLLER pulls all relevant data (from the Shop MODEL) and serves them to you upon each ask.
When you finally decide on a guitar to purchase you select it by it's id and then proceed to Checkout where the Guitar CONTROLLER now pulls price information of that particular guitar and delivers it via the sticker on it and you make your payment.

I designed this using Figma. Photo Courtesy Unsplash

Well, if you read this far and still think this isn't cool I still need to GET concepts at deeper level of abstraction, just remember the dude that had to purchase an accompanying instrument to make up for his apparent lapses in music!

Many thanks for reading. Please, heart and share on Twitter. Thank you!

Run Windows Applications in Linux Environment.

Emma Odia — Mon, 25 Jun 2018 12:35:36 +0000

Problem: If you are a Linux user who recently ported from the Windows environment not necessarily because you despise explorer (Lols… I couldn’t resist throwing shade here!). Well if you will be honest enough, you will then admit that there some apps that you are missing out on in the Linux environment. This article is not meant to debate the use of virtual environments or dual booted machines (Hypocrites! Lols… Another shade!) rather it is the path to the gold mine patch that nicely integrates Windows packages in Linux based environments that it possesses an even sweet name.

Hear hear all ye Linux beer gulpers that seek the serendipity of the windows cocktails, bear with me and exchange the savor of the beer mug and bring wine glasses to pour some and join in the toast. There is a nice package that is actually called wine which we can use to run windows based packages in a Linux environment!

What is Wine?

According to the user manual on the Website

“Different software programs are designed for different operating systems, and most won't work on systems that they weren't designed for. Windows programs, for example, won't run in Linux because they contain instructions that the system can't understand until they're translated by the Windows environment. Linux programs, likewise, won't run under the Windows operating system because Windows is unable to interpret all of their instructions.

Wine makes it possible to run Windows programs alongside any Unix-like operating system, particularly Linux. At its heart, Wine is an implementation of the Windows Application Programming Interface (API) library, acting as a bridge between the Windows program and Linux. Think of Wine as a compatibility layer, when a Windows program tries to perform a function that Linux doesn't normally understand, Wine will translate that program's instruction into one supported by the system.”

You can read more about wine here

Install wine of your Linux PC.

Go to winehq.org/downloads. Select your Linux distro from the list of available options and you will land on a page with further instructions of installing the said distribution.

Here is the step by step approach to the Ubuntu install. You will need a working internet connection for this and it should take 10 minutes in all:

First if your Linux environment is 64 bit and has not been enabled to run 32 bit architecture, run this command:

sudo dpkg –add-architecture i386

Next, we will install the wine package from the wine repository. This way we can install future releases from the terminal. Run each of the following commands, one before the other.

wget -nc https://dl.winehq.org/wine-builds/Release.key

sudo apt-key add Release.key

sudo apt-add-repository https://dl.winehq.org/wine-builds/ubuntu/

Run the following command in place of the last command if you have a Linux Mint version 18.x

sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ xenial main'

As often with running new installations on Linux, update all the packages:

sudo apt-get update

Next is to install the wine package itself. I recommend installing the stable package. Run this command to do that:

sudo apt-get install --install-recommends winehq-stable

If apt-get complains about missing dependencies, install them, then repeat the last two steps (update and install).

Set up the wine configuration environment

Before using Wine, it is necessary to create the fake C: drive where your Windows applications will be installed. To do this open the terminal and enter the following command.

winecfg

Follow all the prompts to install packages and set the Windows environment which will you be prompted to choose a version of. When this step is completed, wine is now set up on your Linux environment and you can check if wine is installed by running:

wine --version

Install a windows app

To install Windows applications using Wine, follow these instructions:
1. Download the Windows application from any source, downloading the .exe (executable file).
2. Place it in a convenient directory (e.g. the desktop, or home folder).
3. Open the terminal, and cd into the directory where the .exe file is located.
4. Type wine the-name-of-the-application.extension

wine realplayer_installer.exe

This will run the .exe using Wine. If it is an installer, it should then run as it would in Windows. If the application asks for a directory to install the application to, select put it under C:\Program Files.

To test this you can install the Balsamiq mockups creator for window here. Using the above instructions will become
cd /home/user/Desktop

If the file downloaded into that dir, then run:

wine Balsamiq_Mockups_3.5.15.exe

This will install Balsamiq, after the installation. Launch the Balsamiq app and begin to use!

To start/run Windows programs using Wine

After installing an application using the directions above, those applications can be started and used by entering wine programname.exe (e.g. wine realplayer.exe). When done, close the application as one would normally. You must run the installed executable, which will by default be in the virtual Windows drive created by Wine, at ~/.wine/drive_c. Generally programs will install themselves somewhere under Program Files inside the virtual Windows drive, following Windows conventions.

You can also use the Wine file browser, by running winefile in a terminal. Clicking the C:\ button in the toolbar will open a window where you can browse the virtual Windows drive created in .wine. Double Clicking an executable in the Wine file browser will run it in Wine.

Instead of having to always enter the terminal or use the Wine file browser, you may also create a desktop icon, and start a Wine application using that icon. To do this, right click on the desktop and select "Create a launcher." If you wish, select an icon from the list of available icons (or browse to an icon you would like to use), fill out other information that is requested (Name, generic name, etc.). For the command, type in wine the-location-of-the-program.exe (e.g. wine /home/john/.wine/realplayer.exe). The most important part of creating a launcher is the command, the generic name is not as important. Just make sure you de-select "Run in terminal." This completes the process.

In some cases the application requires to be running from a certain location. In this case create launcher with command

sh -c "cd /home/USER/.wine/drive_c/Program Files/Appdir/; wine /home/USER/.wine/drive_c/Program Files/Appdir/game.exe"

Of course you will need to replace USER and Appdir with the proper data.
If you desire to have an icon on the panel, create a launcher on the panel of choice. Do this by right-clicking the panel, selecting "Add to Panel," and selecting "Custom Application Launcher." This will ask you for the same information as before.

Alternatively, to make life easier, you can set it so wine will automatically open .exe files files for you - instead of using the Wine File to locate the file each time. To do so, right click on the .exe file, select Properties, and then select the Open With tab. Click the 'Add' button, and then click on 'Use a custom command'. In the line that appears, type in wine, then click Add, and Close. Now all .exe files will be automatically opened by Wine, so you can use Nautilus to browse and open them instead of the Wine File.

Uninstalling Wine Applications

Open up a terminal window and type the command below:

wine uninstaller

What this will do is open up a program similar to the Windows add/remove programs control panel, allowing you to uninstall applications from a Wine installation. Running uninstall programs directly via Wine should also work normally. Alternatively, you could also simply delete the folder of the application. However, as when done in Windows, this method will be unclean and will not remove the program's configuration from the Wine registry like using an uninstaller will.

Enjoy!

Credits:

Winehq User Guide
Ubuntu Community
Papa Google