DEV Community: Sukhbir Sekhon

Brief Answers To The Big Questions by Stephen Hawking

Sukhbir Sekhon — Sun, 28 Feb 2021 20:09:31 +0000

I generally like to write my afterthoughts on each chapter of the book. Here are some of the key takeaways I took from the book.

My Key Takeaways from the book

Is there a god?

In this chapter, Hawking used religion and science contradictions to explain the process of making the universe or the origin of the universe. For scientists like Hawking and Einstein, the word "god" doesn't means a human figure with whom you can attach personal feelings or relationships. The word "god" simply means the laws of nature. Hawking explained that you basically need three things to create a universe: mass, energy, and space. Einstein had already proved that mass and energy are basically the same things with the help of the famous equation E=MC^2. So, you only need two things, energy, and space. With the big bang, space came into existence like blowing up a giant balloon. For energy, he used an analogy to explain it. Imagine you want to create a hill on a flat surface. You dig up a hole to create a hill. Hill is a universe and a hole you dug up is negative energy. According to Hawking, you see positive energy in mass and energy we see today, but the negative energy is in space, which sounds odd, but it is true. Positive and negative energy balance out and adds up to zero and it's another law of nature. Hawking later says that if everything adds up to zero, then we might don't even need a god.

Something has to happen for something to happen. You can't just click your fingers and coffee present itself. You have to make it, right? Hawking says,

The laws of nature itself tell us that not only could the universe have popped into existence without any assistance, like a proton, and have required nothing in terms of energy, but also that it is possible that nothing caused the Big Bang. Nothing

Hawking compares the big bang to be as a black hole from which light can't even escape its gravity. Also, time. Time doesn't exist in the black hole. So, if the universe started from the big bang, there was no existence of time before that. So, even God didn't have time to trigger it. It's like asking for the edge of the earth, where there is no edge to a spherical object. So, it's a futile exercise to think that God created the universe. Wow!
How did it all begin?

In this chapter, Hawking tried to explain whether the universe has a beginning or an eternal history with boundary or not using Einstein and other physicists' work. Einstein proved many years ago that space and time are not absolute, but rather dynamic. They are only defined within the universe, so it doesn't make sense to talk about a time before the universe began. In the twentieth century, we found out that the universe is expanding and the objects far from us are expanding at a much higher rate. It shows that there must a point when the universe was not expanding and when everything was compact. That is the beginning of this universe, which was about 15 billion years ago. Hawking and Roger Penrose prove geometrically that the universe has a beginning.

Later in the chapter, Hawking said that we could predict the past the same way we can predict the future using Werner Heisenberg's Uncertainty principle, which says that no one can predict both position and speed of the matter. Einstein objected to the idea of uncertainty. As he puts it nicely, "God does not play dice". God is a gambler because, when the universe is big, there are a very large number of rolls, so the result averages out to something one can predict.

Hawking proposed a no-boundary proposal, which states that the universe does have a beginning, but doesn't have a boundary.

According to the no-boundary proposal, asking what came before the Big Bang is meaningless- like asking what is south of the south pole- because there is no notion of time available to refer to. The concept of time only exists within our universe.

Wondering on a personal note: This all makes sense when you think about multiverse ideas. There are many universes that have a beginning and are constantly expanding. The idea of time and space is limited within our universe and there was no time before the beginning of the universe.

Is there another intelligent life in the universe?

A human body has two main elements. A gene that provides the sets of instructions and a metabolism that aims to carry out those instructions. Our body has about 100 million bits of useful information in our genes. The evolution in the genes occurs around every 10,000 years. There are a lot of possibilities that our evolution would be disrupted by ourselves or the natural event and we won't be able to evolve into something that will take us to other galaxies. Some of the events include that we become so intelligent that we destruct ourselves, another meteorite hits the earth and wipes out mankind resulting in starting the process of making multi-cellular organisms from bacteria or any other single-cell organism. It is possible that in the future, we will be able to genetically enhance ourselves and become superhumans. Or is it possible that we nuke ourselves out?

Stephen described two ways of finding out whether stars have planets orbiting around them. One way is to measure the amount of light coming from another star. If the planet comes in a way, then the light from the star would get dimmable a little bit. If this occurs on a regular basis, then it means that there is a planet revolving around that star. Another way is to measure the position of the star and if the star slightly wobbles repeatedly then it means that there is a planet in an orbit that is making a star wobble due to its gravitational force.

Stephen also listed out some of the possibilities in the chapter to explain why we haven't visited by the aliens, which are convincing on an emotional note and also make sense. One of the possibilities, says that we might be the only life in the whole galaxy, which makes me wonder that if that's the case then we would probably be never visited by aliens because it would take around 50,000 years to travel from one galaxy to another, as stated by Hawking, therefore, life would have to genetically engineer themselves to live for great amounts of time to cover that travel. It would be a long trip into the dark.
Can we predict the future?

It is possible to predict the future to some extent in the theory, but it is impossible in reality due to complex calculations and equations. Heisenberg's principle says that we cannot predict the position and speed of a particle. It is random. But we could measure the combination of both speed and position of the particle. In quantum mechanics, the particles don't have well-defined positions and speeds, rather they have a wave function. A wave function is a number at each point of space and the size of a wave function gives a probability that the particle will be found in that position.
What is inside a black hole?

The biggest thing I learned in this chapter is that a human cannot survive while going into small black holes the size of our sun, but can survive while going into larger black holes. A smaller black hole will put more pressure or attraction on your feet than your head which will result in you becoming a spaghetti. But in the larger black holes, the force of attraction is equal which will make you survive in the entering of the black hole. But once you are inside a black hole, you will be crushed by the singularity. A star collapsed and forms into a black hole. There is a point in a black hole which is called singularity where space-time bend is infinite. Even Einstein's laws don't apply to singularity.

The Earth's escape velocity is 11 km/s and the sun's escape velocity is 617 km/s which is nothing as compared to the speed of light, which is 300,000 km/s. So light can easily escape the Earth because its speed is larger than the Earth's escape velocity. But imagine a bigger celestial object which is denser and bigger than Earth, a black hole. Light can't even escape a black hole because its escape velocity is much larger than the speed of light. Surprisingly, the escape velocity of the black hole is not listed in the book. Anyways, since light can't escape a black hole, therefore, a black hole doesn't reflect back any light and seems to be black.

The boundary of the black hole is known as the event horizon and Hawking made a discovery that the area of an event horizon always increases as more matter and radiation falls into the black hole. So if two black holes collide, then the surface area of an event horizon of a result black hole would be greater than the original black hole.

Hawking also discovered that black holes do emit swallowed matter in the form of radiation at a very slow rate. It is believed that the information from those released matter is lost forever, which doesn't support existing laws. This created an information paradox and scientists have been struggling for 40 years with this paradox.

Is time travel possible?

In this chapter, Hawking mostly talked about the wormholes and space-time bending which is already explained in the previous chapters. One thing that I didn't know that we have a tested Einstein's general theory of relativity and we have experimental data. To test the theory, we have sent a beam of light towards the sun and it was bent very mildly. To explain how mildly, think of an inch in a mile measuring unit. It was small bend but we have advanced tech to measure it accurately. The bend would increase near black holes or bigger stars. This bend in a light proves that space does bends.

One other thing which I didn't know was that scientist defines a position in a four-digit number. First, three-digit numbers tell the latitude, longitude, and height about sea level. The other fourth digit is used to tell the time in space. This four-digit number tells the position in space at a specific time.

Hawking indicated that it is next to impossible to travel in the past if the general theory of relativity is correct and energy density is positive. But it is possible to go slow in time if you travel at the speed of light, which is impossible for any rocket.

This chapter wasn't really technical. It mostly talks about fiction and hypothetical situations, which I guess is important to understand to grasp the concept of M-theory.
Will we survive on earth?

In this chapter, Hawking talks about few dangers that might wipe out humans from the Earth. First, climate change. Climate change is a serious issue that can be dealt with, but it requires strong political will. Polar ice caps have been melting, which reduces the amount of sunlight reflected back in space and this could further raise the Earth's temperature. Second, nuclear war. This is a controversial topic because it usually revolves around politics. Chief scientist Robert Oppenheimer of the Manhattan project, the first-ever atomic project, said later of the first explosion of an atomic bomb two years earlier in July 1945,

We knew the world would not be the same. A few people laughed, a few people cried, most people were silent. I remembered the line from the Hindu scripture, the Bhagavad Gita, 'Now, I am become Death, the destroyer of worlds'.

Since then the doomsday clock has been ticking, In 1947, the clock was originally set at seven to midnight. Some people think it tells the time left for human lives and some people think that it's a waste of time.

On a personal note, it is fascinating to think about it because it shows that scientists knew that one day humans will wipe themselves out using their own creation.

Third, asteroid hit. Earth has already been hit by an asteroid sixty-six million years ago and we will be hit by another asteroid in future which has been proven by physics and the probability. There is no rigid defense of stopping an asteroid hit and we might have it in the future.

The only way to make sure that human mankind continues to live on is by leaving the planet Earth and make another planet our home. People are already working on this idea. Hopefully, we will get to Mars by 2024.
Should we colonize space?

The argument between going into space versus improving our planet has been a long-overdue debate between activists and researchers. Both of them are right. Both are necessary. We could solve the issue of climate change, over-population, the spread of diseases, poverty, and other Earth problems while continuing space exploration. Our world's GDP can allow both of them to work together at a great force, but it requires political will, which is a challenging part. Saying no to space exploration is stupidity. Imagine if you are stuck in the desert, would you not try to reach out to the other parts of the Earth? We don't have any more unexplored space left on Earth, and we are depleting Earth's resources to the full extent. This chapter forces readers to think about this issue from its root causes. If we don't find any other place in space for new homes, human mankind will eventually die.

Hawking also discusses long-term research that's been happening for humans to travel long distances in space. Researchers have been trying to design an idea of sending Nanocraft at less than a speed of light with light beam technology and send back data with the same beam. We are trying to implement what Einstein used to imagine traveling at the speed of light in reality.
Will Artificial Intelligence Outsmart US?

This chapter was terrific because it aligns with my career choice, IT. It has always been an argument about whether AI will take over humans? The answer is not that easy to understand. We are using AI in many sectors of our society. Even when I am writing this sentence, there is an auto-correction tool that is continuously correcting my writing. That is an AI. From the technical standpoint, the ability to make decisions on their own comes from machine learning, where one feeds tons of data to AI to make better decisions. Feed more data and an AI would be more precise. According to Hawking, we can reap the benefits of AI by managing the risks that come with it. Many tech pioneers like Bill Gates and Elon Musk understand the implications of AI on society. Elon Musk has warned that

Superhuman artificial intelligence is capable of providing incalculable benefits, but if deployed incautiously will have an adverse effect on the human race.

Hawking touched on the topic of military AI robots. The world militaries are considering making AI robots that can decide and kill their targets on their own. The world UN is debating to whether allow this technology or not. Even if we don't deploy such kind of technologies, there is no guarantee whether it will stop countries to make such kind of technology and sell to bad people on the dark web.

There could be a lot of negative effects of AI on the human race. Like, an AI could literally crash the stock market and take over e-commerce. An AI could redesign itself and make itself better. They could make weapons by themselves that humans might not be able to ever understand.

But, if implemented correctly, an AI could help the human race. Self-driving cars, surgery bots, implants for disabled people, etc. are a couple of the sectors where AI is helping us. Also, don't forget that AI is heavily involved in space exploration and one day it might take us to mars.

Book review: Astrophysics for People in a Hurry

Sukhbir Sekhon — Sat, 26 Dec 2020 21:23:44 +0000

I normally don't review books, but this book is special, at least for me. The book Astrophysics for people in a Hurry by Neil deGrasse Tyson published in 2017 by W. W. Norton & Company. I know I am late in the book review game for this book. I've always wanted to read this book, but I never gave much priority to it and kept extending the read. But finally, I've read it and finished it within two days because I was too excited to know more about the universe, I guess.
I didn't just read this book, but I also made notes and listed some of the significant or key takeaways from this book. I am going to list them for you so that it gives a little sense to you about what this book revolves around. So here are some of the key takeaways from the book.

Chapter 1 describes how the universe was created after the big bang from the seconds and years of perspectives. Tyson describes how the universe came into play due to the right amount of energy that was applied at the right amount of masses, electrons, protons, hardros (meaning thick). This ultimately led to the existence of the sun in the milky way galaxy as he puts it this way:
"After nine billion years of such enrichment, in an undistinguished part of the universe (the outskirts of the Virgo supercluster) in an undistinguished galaxy (the Milky Way) in an undistinguished region (the Orion Arm), an undistinguished star (the Sun) was born".
Tyson further stated some events that happened million years ago on the earth, eg., the meteorite that wiped out the existence of dinosaurs and that asteroid hit is now Yucatan Peninsula.

Chapter 2, Page 44: "For ordinary household gravity, Newton's law works just fine. ... For Black holes and the large-scale structure of the universe, we need general relativity"

This statement clarifies my long-overdue curiosity of knowing when to consider Newton and Einstein's gravity laws. Tyson also stated that if the low mass and structure apply to the Einstein gravity laws then it converts into Newton gravitational laws, which is convenient, I guess.

In Chapter 3, Tyson mentioned the A. Penzias and R. W. Wilson
"A measurement of Excess Antenna Temperature at 4080 Mc/s"
experiment and journal. They were trying to establish an AT&T communication channel by eliminating all the interferences from the antenna, but they couldn't remove this one interference which they later discovered was because of the pigeon poop. As they cleared it out, the interference was decreased. They were getting this interference from all the directions they point in the sky. This experiment of excess temperature in antenna helped physicists for their study in Cosmic Microwave Background (CMB).

Chapter 3, Page 56: "Because light takes time to reach us from distant places in the universe, if we lookout in the deep space we actually see eons back in time"

This is simply because the reflection or the light from light year away object hasn't reached us yet. This reminds me of a very famous meme. It goes like this, if an alien looks at the earth from 65 million years ago, they will see the dinosaurs but not us.
The photons were trapped in the opaque universe until 380,000 years after the big bang, they were released and were allowed to travel throughout the universe. Interesting.
Our galaxy "Milky Way" is named due to its spilled milk appearance

Chapter 4, Page 72: "In either case, where there is mass there is gravity. And where there is gravity there is a curved space, according to Einstein's general theory of relativity. And where there is curved it can mimic the curvature of an ordinary glass lens and alter the pathways of light that pass through".

It's fascinating to think about the gravitational lens. There would be tons of gravitational lenses in our universe which are altering the emitting light from the galaxies. Some galaxies might seems closer, but in reality, they wouldn't be as closed to us.

Chapter 5, Page 86: "At odds in the universe were two competing effects: gravity wants to make stuff coagulate, but the expansion wants to dilute it. If you do the math, you rapidly deduce that the gravity from ordinary matter could not win this battle by itself. It needed the help of dark matter, without which we would be living - actually not living - in a universe with no structures: no clusters, no galaxies, no stars, no planets, no people".

Tyson described the dark matter as a frenemy, who is annoying but still needed to keep things intact. Scientists use dark matter to complete their equations to prove the existence of the universe. We don't know much about dark matter, but we do know that dark matter is there to keep things intact by exerting 6 times the gravitational force compare to the gravitational force from ordinary matter. Dark matter interacts with neither the strong or weak nuclear forces, electromagnetic force, and nor does it absorbs or emit or reflect or scatter light. Dark matter is our strange and invisible friend.
In Chapter 6, Tyson starts by describing the 2016 gravitational wave experiment. In 2016, we detected the gravitational waves that occurred due to a 1.3 billion-year-old explosion between two black holes, which proved Einstein's general theory of relativity of space and time. Tyson later described the effects of dark energy that works as an anti-gravity matter and responsible for the expansion of the universe. It's really fascinating to imagine the dark energy to be responsible for going against gravitational rules. Einstein released a cosmos constant for the universe in his career to show that the universe is statics and physicist Hubble proved that the universe is constantly expanding later. So Einstein removed that constant from his equations and told that it was his biggest mistake in the career. Later in 1998, that constant turned out to be the biggest center point for the physicist. That constant symbolizes the dark energy in the universe.

Our Milky Way galaxy was once spherical in shape, but now it's flattened.
In Chapter 7, Tyson stated that there are three elements formed during the big bang: Hydrogen, Helium, and Lithium. The rest of the elements are the results of heating and pressure over the course of billions of years. Tyson mostly described each element in the periodic table and how they are being used today. One of the things he said that stuck with me was that how hydrogen is used for making most dangerous bombs and oxygen extinguishes the fire, but when hydrogen and oxygen get together, they form water or liquid which helps to put out the fire.
In Chapter 8, Tyson described the importance of spherical objects in the universe. He said that the shape of a cosmic object can tell a lot of things about it. For example, Saturn is shaped like a hamburger, where pole to pole diameter is less than the equator diameter and due to this shape, the day at Saturn is only 10 hours and 30 min long. Another fact that Tyson stated that the earth's pole to pole diameter is less than ~29 miles than the equator diameter.

FAST or Five-hundred-meter Aperture Spherical radio Telescope is one of the largest telescopes ever built by China. So if aliens were to contact us, the Chinese will be the first to know.

Chapter 9 was all about the radio telescopes. Tyson described how a scientist named Herschel discovered the mysterious bands of waves in the light spectrum from the sunbeam. Even after the discovery of X-rays, gamma rays, and ultraviolet rays, scientists were using a regular telescope to view the visible light. Many supernovas emit invisible lights such as gamma rays and X-rays, but there it requires special telescopes such as radio telescopes to view the invisible light spectrum. One of the things I learned from this chapter is that water vapor in the upper environments kills the clean observations of cosmic objects since water absorbs microwave frequencies.
This is how Tyson describes the formation of Aurora lights:

"The sun loses material from its surface at a rate of more than a million tons per second. We call this the 'solar wind', which takes the form of high-energy charged particles. Traveling up to a thousand miles per second, these particles stream through space and are deflected by planetary magnetic fields. The particles spiral down toward the north and south magnetic poles, forcing collisions with gas molecules and leaving the atmosphere aglow with colorful aurora".

We should be grateful for having a protective layer around the earth, which protects us from space madness.

Overall, this book is a must-read for all the people who don't have time to read fat astrophysics books to know about our beautiful and mysterious universe.

I hope you enjoyed some of my key takeaways from the book. I will end this review with one of my favorite quotes from the book by Tyson.

The cosmic perspective enables us to see beyond our circumstances, allowing us to transcend the primal search for food, shelter, and a mate.

by Neil deGrasse Tyson

What is Neo4j?

Sukhbir Sekhon — Mon, 06 Jul 2020 02:22:43 +0000

Introduction

Neo4j is simply a database but unlike traditional databases that store data in rows, columns, and tables, Neo4j has a completely flexible structure. Most importantly, Neo4j saves the relationships that connect your data. With Neo4j, each data record or node contains direct pointers to all the nodes that it's connected to.

Let's say Dwight is friends with Jim, that Dwight node points directly to Jim through a stored relationship. This network of nodes connected by relationships is known as a graph.

Neo4j is referred to as a native graph database because it efficiently implements the property graph model down to the storage level. This means that the data is stored exactly as you whiteboard it, and the database uses pointers to navigate and traverse the graph. In contrast to graph processing or in-memory libraries, Neo4j also provides full database characteristics, including ACID transaction compliance, cluster support, and runtime failover – making it suitable to use graphs for data in production scenarios.

Benefit of using Neo4j

Most other databases, even more, recent node SQL types, don't save relationship data directly. They can figure out connections of course, but they usually do this by searching through a separate data structure called an index.

Note: You can also set up indexes for each column in SQL to retrieve data from those columns quicker.

This lookup process which has to be done repeatedly to find each connection is an expensive extra step that makes these databases inherently slower than Neo4j for relationship intensive queries. Neo4j avoids these index lookups because its native storage layer is a connected graph. This is why Neo4j is called a native graph database.

Neo4j is used to detect fraud, enhance artificial intelligence, manage supply chains, unify data silos, and much more.

Neo4j has some more exciting benefits:

1. Performance

Graph databases such as Neo4j perform better than relational (SQL) and non-relational (NoSQL) databases. The key is that, even though data queries increase exponentially, the performance of Neo4j does not drop, compared to what happens with relational databases such as MySQL.

Graph databases respond to inquiries by updating the node and the relationships of that search and not the whole of the complete graph. That optimizes the process.

2. Responsiveness

Neo4J has many advantages, but one is its responsiveness in managing data. If we wanted to push the boundaries of its abilities, we would have to exceed a total volume of 34 billion nodes (data), 34 billion relationships between these pieces of data, 68 billion of properties, and 32,000 types of relationships.

3. Flexibility and scalability

When developers of a company work with big data, they are looking for flexibility and scalability. Graph databases contribute a lot in this regard because when needs increase, the possibilities of adding more nodes and relationships to an existing graph are huge.

Why use Neo4j?

There are some great use cases for Neo4j. I would try to explain those use cases by comparing Neo4j with other traditional databases.

1. Fraud detection

Neo4j can discover patterns that would be difficult to detect with other DBs. Fraud networks have mechanisms for a crime that are not detectable with the linear analysis of data. But with a scalable analysis of the multiple relationships between data, this is much easier.

2. Data center management

Graph databases are the perfect antidote to the overwhelming growth in data. The large quantity of information, devices, and users mean that traditional technologies cannot handle so much data. The flexibility, performance, and scalability of Neo4j make it possible to manage, monitor, and optimize all types of physical and virtual networks despite a large amount of data.

3. Master Data Management Systems

Master data management is a real headache for companies. The creation of a centralized and reliable information system is always a complex issue. The ultimate goal is that every member of an organization uses the same formats and applications for data. This creates a working protocol that is usable by the rest.

Neo4j helps create such systems with speed, agility, performance, and all this without losing flexibility and scalability with data.

Some popular features of Neo4j

Neo4j is very popular among developers, architects, and DBAs because of:

Cypher, a declarative query language similar to SQL, but optimized for graphs.

Constant time traversals in big graphs for both depth and breadth due to efficient representation of nodes and relationships. Enables scale-up to billions of nodes on moderate hardware.

Flexible property graph schema that can adapt over time, making it possible to materialize and add new relationships later to shortcut and speed up the domain data when the business needs change.

Drivers for popular programming languages, including Java, JavaScript, .NET, Python, and many more.

Conclusion

Neo4j is an open-source, NoSQL, native graph database that provides ACID (Atomicity Consistency Isolation Durability) compliance to the developers for backend databases. It is definitely not something new because it's been available for the public since 2003. It is a native graph database because it efficiently implements the property graph model down to the storage level which is very powerful. So basically if you draw the data graph relationship on a whiteboard, you can implement that structure in the database using pointers. I have been excited about so many technologies in the past because they are mostly game changers but hands down this is the most exciting concept I have ever come across. I want to give a shoutout to my mentor and best friend Joshua Anderson for introducing me to Neo4j.

Let me know in the comments what do you guys think about Neo4j. Thanks for reading my blog and I really appreciate your time. It really means a lot.

I found something really interesting on internet. There is a TrumpWorld dataset created using Neo4j. You can check it out here. I am leaving an image of the dataset nest down below. It's so dope.

Get started with Neo4j: Tutorial

Check out my website: Sukhbir Sekhon

What is Deno?

Sukhbir Sekhon — Fri, 12 Jun 2020 00:59:44 +0000

History

Ryan Dahal, the creator of Node.js, worked about a year and half to built Deno. He worked on Node project since 2009, but he stepped down from it few years later. Ryan Dahal in his talk "10 Things I Regret About Node.js" talks about some regrets that he has about Node.js. For example, he addressed the issue of zero security embedded in Node.js because Node is built upon V8 which is itself a "very good security sandbox". Therefore, every npm package on the program has access to write to disk and access to network even if these packages don't need one. Packages like linter has complete access to your computer and network even if it doesn't need it.

Another biggest regret he addressed is regarding package.json. He basically said that it was never his intention to give rise to the concept of "module" as a directory of a files. Package.json is a centralized repository of all the "require" module in the project. Where npm is the standardized module. Now, package.json includes all sort of unnecessary information like Licenses, Reporsitory, and Description. He said that if the relative files and URLs were to used when importing, then there would be no need to list dependencies.

Another biggest flaw in Node.js is NODE MODULES. It is massively heavy and complicated module directory in the project that basically pulls down all the required packages and modules inside the local project. It is impossible to undo it now.

Surprisingly, he also regrets the index.js. He thought it was cute because there was an index.html. It needlessly complicated the module loading system. It is just unnecessary.

There are some more regrets and flaws in Node.js, but enough with regrets for now and now let's talk about how he fixed all these issues in Deno.

Deno

Tagline: A secure runtime for Javascript and Typescript

Whoa!

First of all, Node.js is not going anywhere simply because people are heavily depended on Node runtime and Deno is still fairly new and not a lot of people know about it. But Deno is an enhanced version of Node.js runtime. Deno is built on V8 (Google’s JavaScript runtime used in Chrome and Node, among others), Rust (Deno's core was written in Rust, Node's in C++), and Tokio (the event loop written in Rust) unlike Node.js which is only built on V8. The project Deno became public about two years ago.

There are couple of biggest reasons that why you should take it seriously:

Deno is built by the same guy who built Node.js
Deno directly addresses shortcomings in Node.js

Let's look into some new features of Deno!

1. Security

As mentioned in tagline, Deno strongly focus on security and permissions. Deno allows code to execute in secure sandbox by default so it means that the code would not have access to the local machine hard drive, network connections, or won't be able to execute any malicious actions without permissions. For example, simple program like Hello world mentioned below will fail unless the --allow-write command like flag is provided.

(async () => {
 const encoder = new TextEncoder();
 const data = encoder.encode('Hello world\n');

 await Deno.writeFile('hello.txt', data);
 await Deno.writeFile('hello2.txt', data);
})();
}

The program mentioned above will prompt us with this message on run:

⚠️Deno requests write access to "/Users/user/folder/hello.txt". Grant? [a/y/n/d (a = allow always, y = allow once, n = deny once, d = deny always)]

But, if we execute deno run command by providing the appropriate flag, it will automatically provide the write permission to the program.

deno run --allow-write programName.ts

There are multiple flags or configuration for permissions

--allow-run
--allow-read
--allow-write
--allow-net
--allow-env
--allow-plugin
--allow-hrtime

You can even check the state (enable/disable) of each permission in the program:

const { state } = await Deno.permissions.query({ name: 'run' });
console.log(state);

Modules

Just like any other browser, Deno loads modules by URLs.

import { assertEquals } from "https://deno.land/std/testing/asserts.ts";

So what? Remeber in Node.js, you would have a centralized registry for all modules such as npm from developers pull down the module in their local project in node_module directory. In Node.js, developer would need to specify all the required modules for project inside package.json file, but no more npm, node_module, and package.json in Deno.

You can now import the code via URL, which makes it possible for package creators to host their packages or modules anywhere on the internet. You might not be a fan of importing packages from the URL because you might say that what if the website goes down and then my project would not be able to access that package. It's risky right?

NO!

Deno caches the downloaded modules. Since the cache is stored on our local disk, the creators of Deno recommend checking it in our version control system (i.e., git) and keeping it in the repository. This way, even when the website goes down, all the developers retain access to the downloaded version.

Deno stores the cache data under directory with a specified environmental variable called $DENO_DIR.

You can specify the URLs inside JSON file and create an imports map:

{
   "imports": {
      "http/": "https://deno.land/std/http/"
   }
}

And then import it as such:

import { serve } from "http/server.ts";

In order for it to work, we have to tell Deno about the imports map by including the --importmap flag:

deno run --importmap=import_map.json hello_server.ts

3. Browser Compatibility

Deno is server-side runtime so what does it mean to be a browser compatible? There are a lot of APIs that doesn't directly work with browser but it is essential to do some front-end stuff like if you want to setup a chat application on browser then you need socket API.

Deno uses Browser APIs. Deno does not aim to support all browser APIs.

Here are some global scope APIs that are available in Deno

4. Typescript

The typescript compiler is compiled into Deno which is amazing because you don't have to worry about setting up of typescript project. You can literally just start coding in typescript.

Deno uses V8 snapshots which is a built in feature in V8 that allows V8 to quickly start up the project. They basically load your code into memory and serialize into file and then that file is bundled up into Deno executable which allows to start your code or script very fast. This prevents recompilation of typescript compiler every time Deno starts up.

Typescript is a first class language therefore, you can import URLs to typescript directly with .ts extension. Javascript is also a first class language and it bypass through typescript compiler and routed directly toward V8. This allows to enable a smooth transition from JS -> TS -> RUST as the code matures. You can start with JS and add TS into it later on.

Toolset

Deno provides full toolset in a single binary library just like node does. Here are the toolsets that comes with Deno.

Highlights

Deno is secure by default, with no file, network, or environment access unless explicitly enabled.
All async actions in Deno return a promise.
Deno is runtime for executing JavaScript and TypeScript outside the browser in a single executable (denocode).
Deno attempts to make your code browser compatible code.
Deno can also execute web assembly binary.
Goodbye to npm!
Deno allows developers to import packages from URLs and store it in cache so that developers can also work offline.

Personal Favorite Thing

My personal favorite thing about Deno is that every asynchronous thing in Deno is promise based. So basically you can create a fetch API request just like in browser but would not need to mention async because there is a top-level await available so you don't need asynchronous function. We can easily resolve promises without any extra boiler point code.

const stuff = await fetch(`https://mywebsite.com`)

Wrap-up

Deno will certainly not replace Node, but it has so much potential that it can give developers a choice to adopt Deno as an alternative for Node. It brings performance and security to the table. Moreover, it solves so many problems that developers had to deal with such as maintaining large chunks of modules and boilerpoint files in the project. Ryan addresses and solves most of his regrets from Node into Deno, so it worth to check out Deno.

I am pretty excited for Deno. I would really love to know your thoughts for Deno and what do you think about Node vs Deno. Share your thoughts in a comment section. Looking forward to read them.

I appreciate your time for reading this blog! :)

Get started resources:

Deno
Deno install
Deno third-party modules

Check out my website: Sukhbir Sekhon

DOM Tutorial

Sukhbir Sekhon — Mon, 01 Jun 2020 02:50:49 +0000

What is DOM?

Document Object Model or DOM is an API to manipulate HTML and XML documents. DOM represents a document or HTML page as a tree of nodes. DOM allows to add, remove, and modify each nodes of trees effectively.

According to DOM, a HTML page is a document which consist of multiple HTML tags where each tag is an object. Nested tags creates a tree like structure of nodes. These object can accessible using javascript and can be use to modify the document or HTML page.

To understand the hierarchy of nodes, consider this HTML document below:

<html>
    <head>
        <title>JavaScript DOM</title>
    </head>
    <body>
        <p>Hello DOM!</p>
    </body>
</html>

The following tree represents the above HTML document:

As you see that Document is a root node and everything else is a child node. DOM is all about child-parent relationship between nodes. In the HTML page, is a root node and then

and are its children nodes.

The text inside these element forms text nodes and are labelled as #text. Here is the example of text nodes:

<HTML>
<head>
<title>About elk</title>
</head>
<body>The truth about elk.
</body>
</html>

Here is the structure

HTML
   HEAD
      TITLE
         #text About elk
   BODY
      #text The truth about elk.

To summarize, the Document Object Model (DOM) is a cross-platform and language independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.

Selecting elements

In this section, I will show you how you can select different types elements on the document or HTML page.

getElementById()

The getElementById() is a method of a document object. It lets you select the HTML tag based on specific id on the document. A document or HTML page can only one id with a same name which means id element is unique. Id is also case-sensitive, which means 'hello' and 'Hello' are two different ids. Therefore, it is easy to retrieve element using getElementById() method.

Syntax of getElementById():

const element = document.getElementById(id);

Example of getElementById():

HTML document:

<html>
    <head>
        <title>getElementById()</title>
    </head>
    <body>
        <div class="container">
           <p id="hello">Hello from Sukhbir</p>
        </div>
    </body>
</html>

Let's retrieve paragraph element with id of hello.

const helloMessage = document.getElementById(`hello`);
console.log(helloMessage);

Output:

<p id="hello">Hello from Sukhbir</p>

Let's check out the real world example.

Scenario: Extract text Sukhbir Sekhon from the document below:

First thing first, right-click on desired text and look for id upn that element.

So id=nameHeading. Move onto the console and extract the h2 element from the document with id=nameHeading. Then we can use special method called innerHTML() to extract the #text from the element node.

innerHTML allows you to pull out the #text inside the element.

getElementsByName()

Elements on an HTML document can have a name attribute. Unline the id attribute, multiple element can share the same value of the name attribute.

Syntax for getElementByName():

const elements = document.getElementsByName(name);

elements would return a node list with multiple elements with a same name attribute.

Let's check out a real work example.

Scenario: Obtain project names from each of project cards which has name attribute to be projectName

There is total of 7 project cards. Let's move to the console panel and retrieve project name of each project cards.

I created a variable to store the node list of 7 node elements.

Now let's see how we can retrieve text from specific node element.

Since projects contains list, therefore, we can easily access each element just like in array list and then call innerHTML method on it to extract #text.

getElementsByTagName()

The getElementsByTagName() method accepts a tag name and returns a live HTMLCollection of elements with the matching tag name in the order which they appear in the document.

Syntax of getElementsByTagName():

const elements = document.getElementsByTagName(tagName);

How to use it?

Let's say if we want to extract all the elements with a tag of h1. You can do that like this:

const h1 = document.getElementsByTagName(`h1`);

The return collection of the getElementsByTagName() is live, meaning that it is automatically updated when elements with the matching tag name are added and/or removed from the document.

getElementsByClassName()

The getElementsByClassName() method is available on the document object and any HTML element. The getElementsByClassName() method accepts a single argument, which is a string that contains one or more class names:

const elements = document.getElementsByClassName(classNames);

In this syntax, the classNames parameter is a string that represents a class name or a list of comma-separated class names to match.

The getElementsByClassName() method returns a live HTMLCollection of elements.

If you call the getElementsByClassName() method on the document object, the method searches for elements with the specified class names in the whole document.

However, when you call the getElementsByClassName() method on a specific element, it returns only matching elements in the subtree of the element.

querySelector

The querySelector() is a method of the Element interface. The querySelector() allows you to find the first element, which is a descendant of the parent element on which it is invoked, that matches a CSS selector or a group of CSS selectors.

Besides the querySelector(), you can use the querySelectorAll() method to find all elements that match a CSS selector or a group of CSS selector.

Examples of querySelector() and querySelectorAll()

Finds first h1 element in the document:

const firstHeading = document.querySelector(`h1`);

Finds all h1 elements in the document:

const heading1 = document.querySelectorAll(`h1`);

Finds first element with a hello-world class name:

const hello = document.querySelector(`.hello-world`);

Finds all the elements with a hello-world class name:

const hellos = document.querySelectorAll(`.hello-world`);

Finds first element with a id of menu:

const menu = document.querySelector(`#menu`);

Finds all the element with a id of menu:

const menus = document.querySelectorAll(`#menu`);

Finds the first element with a attribute autoplay with any value:

const autoplay = document.querySelector(`[autoplay]`);

Find the first <a> element inside p element:

const a = document.querySelector(`p a`);

Find the first li element that are directly inside a

const list = document.querySelector(`ul > li`);

Find all the li element that are directly inside a

const lists = document.querySelectorAll(`ul >li`);

Select all list items that are directly inside

const lists = document.querySelectorAll(`ul.nav > li`);

Find all the links or <a> elements that have been visited:

const visitedLogs = document.querySelectorAll(`a:visited`);

Conclusion

The Document Object Model (DOM) is a way to manipulate HTML document or pages. There are a lot of implications for this API. For example, you can perform web scrapping using third party APIs such as cheerio. Cheerio allows you to call HTML page and parse HTML document and manipulate it. You can create a alert system for your favorite product that is currently unavailable on amazon. You can create an app that will always run on the background and monitor the particular URL for the product that is currently unavailable on amazon and as soon as the div element of availability changes, the app will send an email or text message to you and will alert you that your favorite item is now available on amazon. Its just one of countless examples how you can use DOM in your application.

Tell me your experiences with DOM in a comment section! Looking forward to hear your stories. :)

How to create an Electron app?

Sukhbir Sekhon — Wed, 20 May 2020 02:53:16 +0000

Electron

Simplest definition: Electron is a framework that allows creating a desktop application for all the platforms (Windows, Mac, and Linux). Some of the examples of desktop applications that are built on Electron are Atom, Visual Studio Code, Github Desktop. Could you believe that the Visual Studio Code is built on HTML, CSS, and NodeJS?

A little deep definition: Electron is a GUI framework that combines Chromium rendering engine and Node.js runtime to allow browser process and several other renderer processes to run the application logic. The browser process runs the logic of app (main.js => main entry point for an application) and another built-in rendering process creates windows by rendering HTML and CSS.

Why use Electron?

One of the problems I experience all the time as a developer when I start developing a project is that I get hung up on for which platform should I approach for my project. Electron helps to develop a cross-platform application using basic web technologies. Usually, you would use different web technologies to create an application on different platforms, but that is not the case with Electron.

Another reason to use Electron is because of code and app management. As a developer, you don't need to maintain different projects for different major platforms. You could develop code for all the major platforms in one project and encounter all the bugs and problems in one place. You also don't need to code new features and enhancements separately for different projects from different codebases.

How to create an Electron app?

Alright, let's get started to creating a simple electron app.

First and foremost, create a local project folder on your machine. Then, write this command in the terminal from the root project level.

npm init

Check out the package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Tutorial for getting started on building an elctron app :)",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sukhbir Sekhon",
  "license": "ISC"
}

If the main is not present in the package.json, Electron will try to load the index.js as it normally does with node.js.

Now, add a start script to give instructions on how to start an application. Since this is not a normal node app, so you wouldn't start by 'node .' command. Instead, you will start an app like this,

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "Tutorial for getting started on building an elctron app :)",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Sukhbir Sekhon",
  "license": "ISC"
}

Install the electron framework package using npm.

npm install electron --save

Code

As I mentioned earlier, Electron uses node.js runtime that means you could use javascript principles to create an app. You can find all the Electron APIs here.

Let's create an entry point or main.js for our application and import all the Electron module.

const electron = require('electron')

Create an 'app' and 'BrowserWindow' variables from the 'electron' module

const { app, BrowserWindow } = require('electron')

A desktop application doesn't work like other browser pages or mobile apps. It needs a desktop window to showcase different rendering pages just like any other desktop application.

Let's create a function that will create a desktop window with custom size preferences that will load the HTML file.

function createWindow () {

  const win = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

Since some APIs in the back-end takes time to load so we need to make our app smart that only creates windows after every API is loaded and all the events occurred including asynchronous functions.

app.whenReady().then(createWindow)

It's a good practice to quit an app and kill the process if the window is closed by the user.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

There are different names for different platforms:

Windows: win32

MAC: darwin

Linux: linux

Since it is common on macOS to re-create a window in the app when the dock icon is clicked and there are no windows open.

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Finally, let's add the basic index.html page for the rendering process to render the page and showcase it inside the window.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Created my first Electron App! :)</h1>
  </body>
</html>

Run

Once you have main.js, index.html, and package.json components, then finally run the app!

npm start

You did it! See how simple it was to get started on the Electron app. You can integrate Vue.js, React.js, Backbone.js and many other frameworks to create a renderer. 💭

Just leaving an example of the Vue.js electron app for some inspiration!

Let me know if you have any questions. Adiós until the next blog!

COVID-19 Tracker Android Application (Cases by Countries)

Sukhbir Sekhon — Sat, 09 May 2020 22:38:47 +0000

Overview

The most exciting part of this application is to display the wide and enormous amount of data of all the infected countries in one single page using the most effective approach to persuade the audience. That approach includes the 'RecyclerView' element of android.

Statistics or Cases by Countries page of Covid-19 application serves multiple purposes. One of the most important purposes is to display the total number of cases of each country. Other purposes include displaying active, death, recovered, new cases, and new deaths of each country.

As mentioned in my previous blog, this application calling the REST API to extract the data. For this single page, we are talking about an enormous amount of data which includes a list of countries and case data associated with each country.

Let's break this page into components. The first component would be the list of cards which includes country base data. To create this component, we would need to implement a Recycler view. We also need two different classes: data provider and adapter. We need one class that would provide data in a correct format and one adapter class that binds the data in a recycler view.

The second component is a search bar with an ability to search the recycler view for a specific country and the ability to clear the form. This is a valuable component of the user interface standpoint.

The rest of the components like Header and Navigation Bar has already been covered in the previous blog of this series. You can refer them here.

So let's get started and create an insightful recycler view.

Code

Since we have already set up the DataService class in the previous blog, therefore, we can move ahead and start by creating a UI for this page. As you might know, considering that you read my previous blog, that I don't like to explain UI because it's fairly easy. So I am linking my UI code down below which you can use to set up the UI.

activity_home.xml

I have used Constraint Layout for this page as a default, but I have also added Recycler View to implement the list functionality on the page.

Once you implement the UI, the page would look like this

Now we can move on to two very important classes.

ListCasesDataProvider.java

This is class is all about getters and setters. It is always very important to figure out all the variables that we will be dealing with later and create getters and setters for those variables to establish control over the goal we are trying to achieve. In our case, we need to list all the variables that are in the UI page like country name, active cases, recovered cases, new cases, e.t.c.

So let's start by creating variables for all the data fields.

private String countryName;
private String cases;
private String activeCases;
private String recoveredCases;
private String deaths;

private String newCases;
private String newDeaths;
private String seriousCritical;
private String casesPerMillion;

private boolean expanded;

To set getters and setter for all these variables, highlight all the variables, and generate getters and setters. Now let's create a constructor that will allow us to set all these variables when we initialize this class in a foreign class.

public ListCasesDataProvider(String countryName, String cases, String activeCases,
                                 String recoveredCase, String deaths, String newCases, String newDeaths, String seriousCritical,
                                 String casesPerMillion)
    {
        this.countryName = countryName;
        this.cases = cases;
        this.activeCases = activeCases;
        this.recoveredCases = recoveredCase;
        this.deaths = deaths;
        this.newCases = newCases;
        this.newDeaths = newDeaths;
        this.seriousCritical = seriousCritical;
        this.casesPerMillion = casesPerMillion;

        this.expanded = false;
    }

You might be wondering how and when will we assign values to these variables. I don't believe in suspense so I'll tell you now. We will set values to these variables inside our main entry point CasesByCountry.java class. We extract data from the DataService class inside the main class and assign those values to these variables.

ListCasesAdapter.java

Alright, the time has come to write code for the heart of this page. This class binds data from the data provider class to the UI fields. This class serves an important purpose for recycler view because the list of county names from data providers will decide the number of country cards in recycler view. So, this adapter has to work.

Let's get started by importing all the necessary dependencies.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

As I mentioned above that this class serves as an adapter for recycler view, and luckily there is already an adapter that we can use to implement all the necessary methods in the class.

public class ListCasesAdapter extends RecyclerView.Adapter<ListCasesAdapter.ViewHolder>
{

We need to implement ListCasesDataProvider class in the form of List because the data from the data provider class will be used to determine the position of the country card in recycler view and to determine the size of the recycler view list as well.

private List<ListCasesDataProvider> listItems;

Another variable we need is Context. We need to supply the context of cases by country page to ViewHolder so that recycler view can fir perfectly on the page.

private Context context;

Create the constructor for the adapter class using the variable mentioned above.

public ListCasesAdapter(List<ListCasesDataProvider> listItems, Context context)
    {
        this.listItems = listItems;
        this.context = context;
    }

Let's create a method that can serve as a view holder for the recycler view list. The main purpose of this method would be to assign UI variables which can later be used to set data in the form of a text.

Extend our custom ViewHolder with recycler view's view holder.

public class ViewHolder extends RecyclerView.ViewHolder{

Create appropriate variables for the UI text fields.

public TextView textViewHead, newCases, newDeaths, seriousCritical, casesPerMillion;
public TextView textViewDescription, activeCases, recoveredCases, deaths;
public LinearLayout linearLayout;
ConstraintLayout expandableLayout;

Now we can assign the UI variables to the variables we create above in the form of a constructor.

public ViewHolder(@NonNull View itemView)
        {
            super(itemView);

            textViewHead = (TextView) itemView.findViewById(R.id.textViewHead);
            textViewDescription = (TextView) itemView.findViewById(R.id.textViewDescription);
            activeCases = (TextView) itemView.findViewById(R.id.activeCases);
            recoveredCases = (TextView) itemView.findViewById(R.id.recoveredCases);
            deaths = (TextView) itemView.findViewById(R.id.deaths);
            newCases = (TextView) itemView.findViewById(R.id.todayCases);
            newDeaths = (TextView) itemView.findViewById(R.id.todayDeaths);
            seriousCritical = (TextView) itemView.findViewById(R.id.seriousCritical);
            casesPerMillion = (TextView) itemView.findViewById(R.id.casesPerMillion);

            linearLayout = (LinearLayout) itemView.findViewById(R.id.linearLayout);
            expandableLayout = itemView.findViewById(R.id.expandableLayout);

            textViewHead.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ListCasesDataProvider ls = listItems.get(getAdapterPosition());
                    ls.setExpanded(!ls.isExpanded());
                    notifyItemChanged(getAdapterPosition());
                }
            });
        }

There is click listener on header which allows to expand the card in the recycler view that contains all the other necessary information or data about country.

Now we can bind the data listCaseDataProvider class to the variable we created inside View Holder. As those variables are assigned to UI variable therefore, setting text View Holder variables will set the text to UI variables on the page.

@Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position)
    {
        ListCasesDataProvider listItem = listItems.get(position);
        holder.textViewHead.setText(listItem.getCountryName());
        holder.textViewDescription.setText(listItem.getCases());
        holder.activeCases.setText(listItem.getActiveCases());
        holder.recoveredCases.setText(listItem.getRecoveredCases());
        holder.deaths.setText(listItem.getDeaths());
        holder.newCases.setText(listItem.getNewCases());
        holder.newDeaths.setText(listItem.getNewDeaths());
        holder.seriousCritical.setText(listItem.getSeriousCritical());
        holder.casesPerMillion.setText(listItem.getCasesPerMillion());

        boolean isExpanded =  listItems.get(position).isExpanded();
        holder.expandableLayout.setVisibility(isExpanded ? View.VISIBLE : View.GONE);
    }

If the card is expanded then we are setting the expandable layout view (child view) to be visible, but if it is not expanded then we are keeping the expandable layout to be gone.

This is the expandable layout view which we are set to be VISIBLE or GONE when the user clicks on the header of each card:

Now we can write the override method for recycler view adapter. The first method we are going to override is onCreateViewHolder. This method is mainly responsible to add recycler view at the right spot on the page given the context.

@NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, parent, false);

        return new ViewHolder(v);
    }

There is one more method left to override and that is getItemCount. This method is responsible to tell the adapter how many items there are in the recycler view which will be determined using the size of items we received from the listCasesDataProvider class.

 @Override
    public int getItemCount() {
        return listItems.size();
    }

And that's it for the adapter. The adapter is the core of this page so it is very crucial to understand all the pieces inside the class. The adapter takes the data from the custom DataService class and binds it with UI using Recycler view. Now that we have everything set up, we can move ahead towards creating the main entry point of this page. The main entry point will tie up all the work that we have done so far.

CasesByCountry.java

This class serves as the main entry point for adapter and data provider classes that we will work on later in this blog. For starters, add all these imports in a class that we will need to write code in this class.

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ProgressBar;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import org.json.JSONException;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

First thing first, start by initializing all the variables that you will need to write back-end for the page. Of course, you will not know all the variables all the time ahead of the time. But since this is a tutorial so go ahead and create these variables.

Start by most obvious ones: UI variables:

private ProgressBar progressBar;
ImageButton btnRefresh, btnSearch, btnClear;
EditText searchedText;

Now create all the variables that will be needed to implement recycler view which includes adapters and data-provider class.

private RecyclerView recyclerView;
private RecyclerView.Adapter adapter;
private List<ListCasesDataProvider> listItems;
private List<ListCasesDataProvider> listItems2;
Context con = null;

We also need to initialize list variables for the data service class.

ArrayList<String> countryNames = new ArrayList<>();
ArrayList<String> resultSet = new ArrayList<>();
List<String> cases = new ArrayList<>();
List<String> deaths = new ArrayList<>();
List<String> totalRecovered = new ArrayList<>();
List<String> activeCases = new ArrayList<>();
List<String> newCases = new ArrayList<>();
List<String> newDeaths = new ArrayList<>();
List<String> seriousCritical = new ArrayList<>();
List<String> totalCasesPerMillionPopulation = new ArrayList<>();

Since we are also implementing search functionality, therefore, we need to replicate these variables to load new data on the page.

ArrayList<String> cn = new ArrayList<>();
List<String> cs = new ArrayList<>();
List<String> ac = new ArrayList<>();
List<String> tr = new ArrayList<>();
List<String> dt = new ArrayList<>();
List<String> nc = new ArrayList<>();
List<String> nd = new ArrayList<>();
List<String> sc = new ArrayList<>();
List<String> cpm = new ArrayList<>();
int searchedCountryPosition;

Now all the requisites have been taken care of so we can move on coding the real meat of the page.

Let's start by creating a bottom navigation bar. This bar is extremely important for any page as it helps users to navigate throughout the app. For the bottom navigation bar, we need to implement a nav listener which listens to the request from the user on each icon click and redirects the user to the appropriate page.

private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem)
    {
        switch (menuItem.getItemId()){
            case R.id.nav_home:
                Intent a = new Intent(CasesByCountry.this, Home.class);
                startActivity(a);
                break;
            case R.id.nav_cases:
                break;
            case R.id.nav_world:
                Intent b = new Intent(CasesByCountry.this, MapsActivity.class);
                startActivity(b);
                break;
            case R.id.nav_news:
                Intent c = new Intent(CasesByCountry.this, News.class);
                startActivity(c);
                break;
            case R.id.nav_help:
                Intent d = new Intent(CasesByCountry.this, Help.class);
                startActivity(d);
                break;
        }
        return false;
    }
};

The onCreate method is the method that runs when the page is loaded so this is the real meat of the page.

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.cases_by_country);

Its time to initialize the variables that we created outside the method.

progressBar = findViewById(R.id.progressBar6);
btnRefresh = findViewById(R.id.btnRefresh2);
btnSearch = findViewById(R.id.btnSearch);
searchedText = (EditText) findViewById(R.id.txtSearch);
btnClear = findViewById(R.id.btnClear);
recyclerView = (RecyclerView) findViewById(R.id.recycler);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
listItems = new ArrayList<>();
listItems2 = new ArrayList<>();

All we did here is initialized the UI variables and list items that will be provided to the adapter.

We created a bottom navigation bar listener and its time to initialize it and set onNavigationListener to the navbar.

BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
bottomNav.setOnNavigationItemSelectedListener(navListener);

Remember adapter requires the context of the page so while we are inside the onCreate method, go ahead and initialize the context by providing the context of the current page.

con = this;

Here comes the interesting operation part of the page. Since our page calls out to the REST API to get data, therefore, extracting the data process takes time. So we need to implement an asynchronous job in the main thread of the page so that the page doesn't show empty values. Since it takes time to extract therefore we need to tell the user that it will take some moment. So we need to implement a progress bar and remove the progress bar when the job is done and the page is ready to show the date.

So let's implement the progress bar and async task/job.

progressBar.setVisibility(View.VISIBLE);
new CasesByCountryAsync().execute();

We don't have CasesByCountryAsync() class so far. So let's develop it.

Note: If you don't know what is AsyncTask, then you refer to my previous blog in which I have briefly explained the beauty of asynchronous tasks.

Implement the async task class in the CasesByCountry class.

class CasesByCountryAsync extends AsyncTask {

We need to call the REST API using DataService class and provide the sorted to ListCasesDataProvider which later would be bound up using our very own ListCasesAdapter.

Let's start by initializing the list objects for sorted data fields.

@Override
protected Object doInBackground(Object[] objects) {
    DataService ds = new DataService();
    try
    {
        countryNames = ds.getCountryName();
        cases = ds.getNumberOfCases();
        deaths = ds.getNumberOfDeaths();
        totalRecovered = ds.getTotalRecovered();
        activeCases = ds.getActiveCases();
        newCases = ds.getNewCases();
        newDeaths = ds.getNewDeaths();
        seriousCritical = ds.getSeriousCritical();
        totalCasesPerMillionPopulation = ds.getTotalCasesPerMillionPopulation();
    } catch (IOException e) {
        e.printStackTrace();
    } catch (JSONException e) {
        e.printStackTrace();
    }

Now, this process will take of extracting data will about a second so we need to wait for a second to move on towards the next step. So let's go and implement wait() function.

int i =0;
synchronized (this)
{
    while (i<10)
    {
        try {
            wait(100);
            i++;
        }catch (InterruptedException e){
            e.printStackTrace();
        }
    }
}

Here comes the part where we will tie up all the work we have done so far. On the UI thread, we will set extracted data inside data provider class. That data will be later provided to adapter to implement the recycler view functionality.

Implement the UI thread and extend it using a runnable method

runOnUiThread(new Runnable()
{
    @Override
    public void run()
    {

Since we have different data associated with multiple countries, therefore, we need to use for loop to go through each country and instantiate the data provider class inside the loop.

try
{
    for(int j = 0; j < countryNames.size(); j ++)
    {
        ListCasesDataProvider listCasesDataProvider = new ListCasesDataProvider("#" + (j+1) + " "+ countryNames.get(j),
                cases.get(j), activeCases.get(j),
                totalRecovered.get(j),
                deaths.get(j), newCases.get(j), newDeaths.get(j), seriousCritical.get(j), totalCasesPerMillionPopulation.get(j));
        listItems.add(listCasesDataProvider);
    }
} catch(Exception e){
    e.printStackTrace();
}

Instantiate the adapter class and set the adapter for recycler view

        adapter = new ListCasesAdapter(listItems, con);
        recyclerView.setAdapter(adapter);
    }
    return null;
}
});

That's it for doInBackground method. When all this process is done, we need to stop the progress bar which will reflect that job is successful.

@Override
protected void onPostExecute(Object o) {
    progressBar.setVisibility(View.GONE);
}

Now we want to tell users that they can click each card on the list to acquire more statistics for any given country.

We can create a simple toast once the progress bar stops or the job is successfully done.

Toast toast = Toast.makeText(getApplicationContext(), "Click a country to see more stats", Toast.LENGTH_LONG);
toast.setGravity(Gravity.BOTTOM, 0, 200);
toast.show();

Now pat yourself on your shoulder because you were able to implement the recycler view on the page. That's a great accomplishment. It took me a long time to figure all this out on my own.

The rest is easy.

Let's implement the refresh button functionality.

btnRefresh.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        searchedText.setBackgroundResource(0);
        progressBar.setVisibility(View.VISIBLE);
        new CasesByCountryAsync().execute();
    }
});

The last component of this page is the search bar. It is quite an interesting part because of think about how would you let the user search for specific country cards among multiple countries from the recycler view?

I created an algorithm that lets you do that.

The user will enter the country name and the algorithm will find the country data from the data extracted from API. It will then generate the card for that specific country.

So, let's begin exploring the search functionality using the integrated setOnClickListener method.

btnSearch.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v) {
                closeKeyboard();
                searchedText.setBackgroundResource(0);

I created this small function to close the keyboard so that the user doesn't have to close the keyboard manually as I realized that it can be tedius job.

private void closeKeyboard() {
    View view = this.getCurrentFocus();
    if (view != null) {
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
    }
    searchedText.setBackgroundResource(0);
}

Back to the click listener.

try
{
    progressBar.setVisibility(View.VISIBLE);
    resultSet = filter(searchedText.getText().toString());
    String searchedCountry = resultSet.get(0);
    for (int i = 0; i < countryNames.size(); i++) {
        if(searchedCountry == null)
        {
            Toast.makeText(getApplicationContext(), "Please enter a country", Toast.LENGTH_LONG).show();
        }
        else if (countryNames.get(i).matches(searchedCountry)) {
            searchedCountryPosition = i;
        }
    }
    DataService ds = new DataService();
    cn = ds.getCountryName();
    cs = ds.getNumberOfCases();
    ac = ds.getActiveCases();
    tr = ds.getTotalRecovered();
    dt = ds.getNumberOfDeaths();
    nc = ds.getNewCases();
    nd = ds.getNewDeaths();
    sc = ds.getSeriousCritical();
    cpm = ds.getTotalCasesPerMillionPopulation();
}

The code mentioned above is the small algorithm that I am talking about. First it provides the search text to the function name filter() that spits out the list of data for that country. (Isn't that cool!?) Then the loop helps to determines the position of a country on the original country list. Once it knows what it is the position of a search country on the original list, it calls the data service to get the original list.

Before moving forward, I want to share the filter() method that I mentioned above.

private ArrayList<String> filter(String searchText) throws IOException, JSONException {
        ArrayList<String> filteredList = new ArrayList<>();
        DataService ds = new DataService();
        countryNames = ds.getCountryName();
        int i =0;

        synchronized (this)
        {
            while (i<10)
            {
                try {
                    wait(100);
                    i++;
                }catch (InterruptedException e){
                    e.printStackTrace();
                }
            }
        }

        for(String s : countryNames)
        {
            if(s.toLowerCase().matches(searchText.toLowerCase()))
            {
                filteredList.add(s);
            }
        }

        return filteredList;
    }

This method helps to retrieve the data related to the searched country. Note: Search country name is case sensitive.

Back to the click listener.

Now that we are calling to DataService to retrieve the original list we need to wait for about second to get all the data.

int i =0;
synchronized (this)
{
    while (i<10)
    {
        try {
            wait(100);
            i++;
        }catch (InterruptedException e){
            e.printStackTrace();
        }
    }
}

We have the original list data. So now have to search the country data in the original list using the searched country position that we have retrieved earlier. Once we have searched country data, we can fill the recycler view card with the data using our custom adapter.

runOnUiThread(new Runnable()
{
    @Override
    public void run() {
        try
        {
            ListCasesDataProvider listCasesDataProvider = new ListCasesDataProvider("#" + (searchedCountryPosition+1) + " "+ cn.get(searchedCountryPosition),
                    cs.get(searchedCountryPosition), ac.get(searchedCountryPosition),
                    tr.get(searchedCountryPosition),
                    dt.get(searchedCountryPosition), nc.get(searchedCountryPosition), nd.get(searchedCountryPosition), sc.get(searchedCountryPosition),cpm.get(searchedCountryPosition));
            System.out.println(cn.get(searchedCountryPosition));
            listItems2.removeAll(listItems2);
            listItems2.add(listCasesDataProvider);
            System.out.println(listItems2.toString());
        } catch(Exception e){
            e.printStackTrace();
        }
        adapter = new ListCasesAdapter(listItems2, con);
        recyclerView.setAdapter(adapter);
    }
});
progressBar.setVisibility(View.GONE);
}

And that's it my amigos! We have successfully implemented the search functionality. You might think that I am just keep dumping big chunks of code at you, but believe me that I have explained all of these things briefly in my previous blog of this series. So make sure to check that out as well.

There it is. The page that lists the valuable covid19 data of each country. It seems a lot but once you pick up the momentum, it gets easier.

You made it! 🎊

Conclusion

The statistics page is very important for the COVID-19 application because the user expects to see different countries in the app. This page helps to monitor the effect of COVID-19 throughout the world. There is a lot of work that goes into this page, but it is worth it because this page can help people to understand the global effect of coronavirus. Statistics are important when it comes to understanding why some countries are more affected by coronavirus than others. This page serves its true purpose that is to educate people about the seriousness of this pandemic. Implementing a ranking system on the page makes it easier to compare countries. There is a lot of thought that went through when building this page.

In the next blog, I will go through my favorite page and that is NEWS! How come someone calls this a one-stop application for COVID19 when the app doesn't have a news page from different countries. The news page will also use REST service (Google-News-API) to retrieve new of different countries from different credible sources. So stay tuned for that and we will meet in the next blog.

Stay home!
Stay Safe!

sukhbirsekhon / CovidTracker-Android

This is an android based application and built to spread awareness among community regarding corona virus (COVID-19). This application helps you keep track of number of confirmed cases, active cases, fatal cases, new cases, new deaths, and other infromation of different countries through different views and visualizations.

How to set up NGINX Docker Reverse Proxy?

Sukhbir Sekhon — Sat, 25 Apr 2020 04:00:00 +0000

Introduction

Imagine a time when you set up the local server and created a front-end application based on it. To access the API of an app, you would type example.com:3000 and for the application, you would type something like this example.com:4040. There could be multiple ports for one application to access different pages: home, dashboard, contacts, table, e.t.c. Now imagine remembering multiple ports for multiple applications.

Wouldn't be nice to just do something like this to access API: example.com/api and for an app: example.com/app. Instead of typing stupid ports, you could establish routes for multiple containers, and those routes URLs could be anything. Reverse proxy using docker makes it easier to accomplish.

What is a Proxy?

Let me try to explain it using an analogy. Let's say you walk into your favorite restaurant. You are hungry. You want to have your favorite food. You give an order food to the waiter. The waiter takes your order and goes to the kitchen. The waiter asks the chef to cook all the things that you asked from the waiter. Chef cooked the food. The waiter brings your food. Simple?

Key things to note: You requested the waiter. The waiter fulfilled your request without making you go to the kitchen. The chef doesn't know for whom was that food.

In this example, the waiter is a proxy, and the chef is the internet. A proxy acts as a firewall between you and the internet. A proxy provides security, privacy, and other levels of functionality. You can set up a proxy server in Nigeria. Then you can make an HTTP request on the internet and that request would go to Nigeria first and then on the internet in easy language.

Another example of proxy would be multiple computers in one company or building. All computers inside a company have IP address under the supreme IP address of a company. All the internet requests are made under one IP address which makes it harder to trace back to an individual computer.
Proxy is all about making secure external requests.

What is Reverse Proxy

It would not be fair if I don't throw in an analogy here. This analogy is old. Disclaimer: Don't judge me, I am a tech-savvy person. Let's say you woke up in the morning and you see postman on your door. Postman gives you multiple letters, invoices, postcards, and other forms of letters. All those letters are sent from different places, but they all end up to you at the right place.

Note: Senders didn't have to make direct contact with you. Postman retrieved letters on behalf of you from multiple sources.

In this example, the postman is a reverse proxy, the source is client, and you are applying. The client makes an HTTP request to talk to your application. The client wants to see the app so the client creates this request: example.com. But behind the scene reverse proxy converts this request to example.com:8080. If the client or user wants to see the API, then the client creates this request: example.com/api, but behind the scene, reverse proxy converts it to example.com:3000. A reverse proxy sits in front of the web servers and forwards client requests to the servers. Reverse proxies are usually implemented to increase security, performance, and reliability.

Reverse proxy lets you make secure internal requests.

What is Docker?

Docker is a popular enterprise PAAS (Platform as a Service) to create, run, and deploy applications by using containers. Containers allow a developer to package up an application with necessary modules, libraries, dependencies and deploy it as one of the packages. Docker sits on an existing host operating system and allows a developer to make light-weight containers on virtual machines to run their applications. So a developer can create many containers and run several applications on one host operating system. Enterprises don't have to spend money on purchasing multiple OS to deploy individual applications.

How to setup NGINX Docker Reverse Proxy

Let's establish a use case for setting up NGINX reverse proxy using docker. Inside the docker container, it is not possible to access ports and IP addresses that are private unless they are bound to host. We can use a reverse proxy to access multiple web applications running on multiple containers through single port 80. We will set up Nginx container that will be bind to port 80 to the docker host's port 80 and it will forward the request to web application running on multiple containers.

We need to set up two containers for web services or two applications that could be written in any language. But for the sake of the tutorial, let's create two web services with a simple index.html page.

Structure for our web service 1:

webservice1
├── docker-compose.yml
└── index.html

cd ~
mkdir webservice1
cd webservice1
vi docker-compose.yml

Then paste this YAML code in the file:

version: '2'
services:
app:
image: nginx:1.9
volumes:
- .:/usr/share/nginx/html/
expose:
- "80"

Ouick tip: Make sure that the indentations for all the YAML files correctly formatted. You can also use the VS Code to format them correctly.

Now, let's create a simple HTML page for webservice1:

vi index.html

<!DOCTYPE html>
<html>
<head>
<title>Web service 1</title>
</head>
<body>
<h1>Welcome to website 1</h1>
</body>
</html>

Now, build the webservice1 using the docker-compose command

docker-compose build

Start the container

docker-compose up -d

List all the containers

docker ps -a

You should see your container with a name:

site2_app_1

Similarly, create a second container for webservice2

cd ~
mkdir webservice2
cd webservice2
vi docker-compose.yml

Code for YAML file:

version: '2'
services:
app:
image: nginx:1.9
volumes:
- .:/usr/share/nginx/html/
expose:
- "80"

Create an index file

vi index.html

Create a simple HTML response

<!DOCTYPE html>
<html>
<head>
<title>Web service 2</title>
</head>
<body>
<h1>Welcome to website 2</h1>
</body>
</html>

Build the webservice2 container using docker-compose command

docker-compose build

Start the container

docker-compose up -d

Great! Now we have the two running docker containers that we want to bind to the proxy. Note: Both these containers are supposed to be running on port 80 so we have to set up a proxy that will direct requests accordingly. So let's set up the proxy.

This will be file structure for the proxy:

proxy/
├── backend-not-found.html
├── default.conf
├── docker-compose.yml
├── Dockerfile
├── includes
│   ├── proxy.conf
│   └── ssl.conf
└── ssl
├── site1.crt
├── site1.key
├── site2.crt
└── site2.key

Let's begin by creating all the necessary files.

cd ~
mkdir proxy 
cd proxy 
touch Dockerfile
touch backend-not-found.html
touch default.conf
touch docker-compose.yml
mkdir includes
mkdir ssl
cd includes
touch proxy.conf
touch ssl.conf

Create Dockerfile

vi Dockerfile

FROM nginx:1.9

COPY ./default.conf /etc/nginx/conf.d/default.conf

COPY ./backend-not-found.html /var/www/html/backend-not-found.html

COPY ./includes/ /etc/nginx/includes/

COPY ./ssl/ /etc/ssl/certs/nginx/

Dockerfiles are used to create docker images. Then docker images are used to create docker containers. In this Dockerfile, the image will refer to the existing Nginx docker image to create a custom docker image. Then, the image will be built by copying existing files on a local machine to the docker image. We are basically adding a configuration file, basic error HTML, some more configuration files for proxy, and certifications that we will generate later.

Create default.conf

vi default.conf

# web service1 config.
server {
listen 80;
listen 443 ssl http2;
server_name site1.test;

# Path for SSL config/key/certificate
ssl_certificate /etc/ssl/certs/nginx/site1.crt;
ssl_certificate_key /etc/ssl/certs/nginx/site1.key;
include /etc/nginx/includes/ssl.conf;

location / {
include /etc/nginx/includes/proxy.conf;
proxy_pass http://site1_app_1;
}

access_log off;
error_log  /var/log/nginx/error.log error;
}

# web service2 config.
server {
listen 80;
listen 443 ssl http2;
server_name site2.test;

# Path for SSL config/key/certificate
ssl_certificate /etc/ssl/certs/nginx/site2.crt;
ssl_certificate_key /etc/ssl/certs/nginx/site2.key;
include /etc/nginx/includes/ssl.conf;

location / {
include /etc/nginx/includes/proxy.conf;
proxy_pass http://site2_app_1;
}

access_log off;
error_log  /var/log/nginx/error.log error;
}

# Default
server {
listen 80 default_server;

server_name _;
root /var/www/html;

charset UTF-8;

error_page 404 /backend-not-found.html;
location = /backend-not-found.html {
allow   all;
}
location / {
return 404;
}

access_log off;
log_not_found off;
error_log  /var/log/nginx/error.log error;
}

In this Nginx configuration file, there are two main server components for both Webservice. Both of the containers will listen to Nginx port 80. To access both containers, we can curl them on their defined server_name: HTTP://site1.test or HTTP://site2.test. Both the server components will help Nginx to instruct the request to the appropriate web services container. This config also allow Nginx to throw custom error HTML instead of the default Nginx error page. Both server components direct Nginx to pick SSL certificates from the appropriate place.

Create docker-compose.yml

vi docker-compose.yml

version: '2'
services:
proxy:
build: ./
networks:
- site1
- site2
ports:
- 80:80
- 443:443

networks:
site1:
external:
name: site1_default
site2:
external:
name: site2_default

Note: Make sure indentation is right when copying my file to the terminal.

Here is the main part where we are actually implementing proxy. (Technically we did it in default.conf) This docker-compose.yml file will connect two external networks named site1 and site2 to the proxy. The binding of port 80/443 of this proxy is implemented on the Docker host's port 80/443. We already created our two docker containers for Webservice and we created two external docker networks with the name site1_default and site2_default.

Create certificates and keys

For webservice 1

cd ssl
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout site1.key -out site1.crt

For webservice 2

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout site2.key -out site2.crt

Now let's create a standard configuration for the proxy.

cd includes
vi proxy.conf

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors on;

Create standard SSL configuration to decode the SSL certifications and keys

vi ssl.conf

ssl_session_timeout 1d;
ssl_session_cache shared:SSL:50m;
ssl_session_tickets off;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-
ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-
SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-
GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-
AES128-SHAECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-
SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:
DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-
DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:
AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-
CBC3-SHA:!DSS';
ssl_prefer_server_ciphers on;

This configuration helps to decode the SSL certs and keys using the ciphertext.

Let's add hostnames and IP addresses

cd ~
vi /etc/hosts

172.31.30.78 site1.test
172.31.30.78 site2.test

These are the private IP address of the docker host. The request will come to port 80 of the docker host but it will be redirected to port 80 of Nginx container.

Finally, let's build a proxy container

docker-compose build

We have a container and now run the container

docker-compose up -d

Now, you should see three running docker containers. Two for web services and one for the proxy container.

docker ps -a

Let's verify if our reverse proxy is working

curl site1.test

You should see this response:

<!DOCTYPE html>
<html>
<head>
<title>Web service 1</title>
</head>
<body>
<h1>Welcome to website 1</h1>
</body>
</html>

Great job! ✨

One of the benefits of a containerized application is that you can add and deploy applications easily. You can add as many web services containers as you want by adding configuration to default.conf and adding the external network to a docker-compose YAML file. This example illustrates how easy it is to use docker and Nginx to set up a reverse proxy. Imagine having multiple applications running on docker containers and all of their requests are getting redirected by Nginx container. You don't need to worry about adding configuration manually. You can simply automate the process using Docker APIs, which is a good concept to talk about for another blog.

Thanks for reading the blog and I hope it helped you to understand the pretty unique concept.

Leave me a comment if you have any questions or concerns.

COVID-19 TRACKER Android Application (HomePage)

Sukhbir Sekhon — Thu, 16 Apr 2020 04:38:11 +0000

Overview

One of the best things about this project is its simplicity. There are many overwhelmed applications/websites on the internet which are very hard to comprehend because the data is all over the places. As a developer, I always try to sort and simplify the main objective of the project into smaller bits and pieces. Then I start with coding the core objective of those pieces. Once it is layout properly on the page then I think of different ways to maximize its value to the audience.

The COVID-19 Tracker's home page follows the same approach. It is easy to understand the layout for the home page because it only contains the information that user needs to know when they land to the face of this application which is 'what's happening around the globe?'

Let's break this page into smaller pieces.

The first component of this page is a stats area. This area contains Total Confirmed Cases for the globe in bold and large text to emphasize the importance of this number follows by Recovered Cases, Fatal Cases, Cases Today, Deaths Today, and Mortality Rate. Each piece of information is valuable to a concerned audience and it is easy to understand.

The second main component of this page is a bar chart. This chart compares the top 5 countries with the most confirmed cases against each other in terms of confirmed, active, and fatal cases. The chart as well is easy to understand.

Some other components put a lot of value on the page. The refresh button is an essential ingredient because the user needs to have the ability to view updated records. Then there is a bar navigation view in the bottom which allows you to navigate throughout the page.

Now let's code each of the components! :)

Code

Before jumping into the coding make sure you have a basic android project setup ready to go. You should also have an emulator set up to test your application.

Side note: Break up pieces of functionality into their classes and encapsulate all the logic so that you can focus on small pieces of code. This way code is more maintainable, reusable, manageable and testable.

DataService.java

We need to create a service that provides us data for information like a list of country names, confirmed cases, recovered cases, etc. This service needs to call a REST API and return specific data in a simple ArrayList format so that we can use that list however we want in the form of visuals and front-end.

We will be calling this REST API: https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php

We will call this API using an HTTP client. Luckily we have an amazing open-source project which allows us to create an HTTP request. Okhttpclient performs best when you create a single OkHttpClient instance and reuse it for all of your HTTP calls.

First, add this implementation inside build.gradle file under dependencies section:

implementation 'com.squareup.okhttp3:okhttp:3.5.0'

Let's create a DataService.java class inside our project folder.

Add these imports to your class:

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

Now, let's build our HTTP request.

First, instantiate our OkHttpClient inside the class.

OkHttpClient client = new OkHttpClient();

For the request we need two things: URL and headers. For this API these are the two headers we need to add in order to access the JSON data:

KEY	VALUE
x-rapidapi-host	coronavirus-monitor.p.rapidapi.com
x-rapidapi-key	12a8dba6admshd5f767ad7c36e5bp17cb05jsn3c9cee783e36

This is how our request will look like after adding headers:

Request request = new Request.Builder()
            .url("https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php")
            .get()
            .addHeader("x-rapidapi-host", "coronavirus-monitor.p.rapidapi.com")
            .addHeader("x-rapidapi-key", "12a8dba6admshd5f767ad7c36e5bp17cb05jsn3c9cee783e36")
            .build();

We have the most important part of this service is setup. We can now write our methods based on this request.

We need to create a method that returns ArrayList of all the country names in string format. A JSON for the whole dataset looks like this:

{
    "countries_stat": [
        {
            "country_name": "China",
            "cases": "81,054",
            "deaths": "3,261",
            "region": "",
            "total_recovered": "72,440",
            "new_deaths": "6",
            "new_cases": "46",
            "serious_critical": "1,845",
            "active_cases": "5,353",
            "total_cases_per_1m_population": "56"
        },
        {
            "country_name": "Italy",
            "cases": "53,578",
            "deaths": "4,825",
            "region": "",
            "total_recovered": "6,072",
            "new_deaths": "793",
            "new_cases": "6,557",
            "serious_critical": "2,857",
            "active_cases": "42,681",
            "total_cases_per_1m_population": "886"
        },

This is what code for our first method (getCountryNames0 to extract 'country_name' from all the 200+ JSON objects looks like:

public ArrayList<String> getCountryName() throws IOException, JSONException
    {
        final ArrayList<String> countries = new ArrayList<>();

        client.newCall(request).enqueue(new Callback()
        {
            @Override
            public void onFailure(Call call, IOException e) {
            }

            @Override
            public void onResponse(Call call, final Response response) {

                try {
                    String casesByCountry = response.body().string();

                    JSONObject Jobject = new JSONObject(casesByCountry);
                    JSONArray Jarray = Jobject.getJSONArray("countries_stat");

                    for (int i = 0; i < Jarray.length(); i++) {
                        String object = Jarray.getJSONObject(i).getString("country_name");
                        countries.add(object);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });

        return countries;
    }

There are two important parts of this method: call the API using OkHttpClient through the request we created and the logic of extracting country_name.

client.newCall(request).enqueue(new Callback()
        {
            @Override
            public void onFailure(Call call, IOException e) {
            }

            @Override
            public void onResponse(Call call, final Response response) {
        }

OkHttpClient's newCall() method allows us to create a callback function which is very crucial for our application thread concerns. The purpose of the callback function is to inform a class Sync/Async if some work in another class is done.

 String casesByCountry = response.body().string();

                    JSONObject Jobject = new JSONObject(casesByCountry);
                    JSONArray Jarray = Jobject.getJSONArray("countries_stat");

                    for (int i = 0; i < Jarray.length(); i++) {
                        String object = Jarray.getJSONObject(i).getString("country_name");
                        countries.add(object);
                    }

Once we get response from our called function, we then store our dataset into string variable. Then we create a JSON object for our dataset so that we can later create a JSON array object for all the 'country_stat' object in our JSON object. For loop would go through array and store value of 'country_name' into ArrayList which we return back in our method. That's how I created a simple but yet thorough method.

Now we can create similar methods to retrieve other information like the number of cases, deaths, recovered, new deaths, new cases, serious critical, active, cases per one million population from the JSON.

Here is one more example of another method that retrieves the total number of cases for all the countries.

public List<String> getNumberOfCases() throws IOException, JSONException
    {
        final List<String> cases = new ArrayList<>();

        client.newCall(request).enqueue(new Callback()
        {
            @Override
            public void onFailure(Call call, IOException e) {
            }

            @Override
            public void onResponse(Call call, final Response response) {

                try {
                    String casesByCountry = response.body().string();

                    JSONObject Jobject = new JSONObject(casesByCountry);
                    JSONArray Jarray = Jobject.getJSONArray("countries_stat");

                    for (int i = 0; i < Jarray.length(); i++) {
                        String object = Jarray.getJSONObject(i).getString("cases");
                        cases.add(object);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });

        return cases;
    }

Looks similar? Except for the name of JSON Object (cases) and variable names, the structure of a method is similar.

You can create the rest of the methods similarly. Here is the name of methods and JSON objects.

METHOD NAME	JSON OBJECT NAME
getNumberOfDeaths()	"deaths"
getTotalRecovered()	"total_recovered"
getNewDeaths()	"new_deaths"
getSeriousCritical()	"serious_critical"
getNewCases()	"new_cases"
getActiveCases()	"active_cases"
getTotalCasesPerMillionPopulation()	"total_cases_per_1m_population"

Once you have all the methods, move on to the next step.

activity_home.xml

Now that we have a service that provides data, we can work on setting up a front-end for the home page. I usually like to set up back-end first and then move to front-end, but since it is a small page and back-end requires unique IDs of labels and buttons, therefore, it is safe to set up front-end first.

Create an empty activity inside res/layout folder and give it a name activity_home.xml.

You can create your layout in any way you want but before you add an XML code, you need to add some imports to the Gradle file and declare this activity inside the AndroidManifest file. Here is how you do it.

Add this implementation inside build.gradle file under dependencies section:

implementation 'com.github.PhilJay:MPAndroidChart:v2.2.4'

This implementation will allow us to create fancy charts.

Now add this snippet of code inside the Android Manifest file to declare Home page as a main and launcher page of the application.

<activity android:name="[projectName].[package].[module].Home">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
</activity>

Replace [projectName], [package], and [module] with appropriate data.

Now you are ready to create front-end for the homepage. Let's start by defining a layout that we want to use. There are tons of layouts available so if you need more information about layout then click here.

For the sake of this tutorial, let's create a constraint layout like this.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context="[projectName].[package].[module].Home">

</androidx.constraintlayout.widget.ConstraintLayout>

Inside the Constraint Layout, we need to add all the labels that we will later populate them with real data by calling the DataService class.

Here is the link to all textView and charts with unique IDs and constraints that will work on any size of the mobile screen:

activity_home.xml

Please go ahead and create one more activity inside res/layout folder and name it bottom_navigationn.xml

Add the code from file below:

href="https://github.com/sukhbirsekhon/LocalEvents/blob/master/app/src/main/res/menu/bottom_navigation.xml">bottom_navigation.xml

Now we are ready to move on to the back-end of the home page which is the main meat. 🎊🎉

Home.java

First thing first, let's quickly set up variables for TextViews, ImageButtons, progressBar, and ArrayList/List for data.

public class Home extends AppCompatActivity 
{
   TextView txtConfirmedCases, txtRecoveredCases, txtDeathCases, 
   txtGlobalNewCases, txtGlobalNewDeaths, txtMortality;
   ImageButton btnRefresh;
   private ProgressBar progressBar;

   ArrayList<String> globalCases = new ArrayList<>();
   ArrayList<String> globalRecovered = new ArrayList<>();
   ArrayList<String> globalFatal = new ArrayList<>();
   ArrayList<String> globalNewCases = new ArrayList<>();
   ArrayList<String> globalNewDeaths = new ArrayList<>();
   List<String> confirmedCases = new ArrayList<>();
   ArrayList<String> countryNames = new ArrayList<>();
   List<String> activeCases = new ArrayList<>();
   List<String> fatal = new ArrayList<>();

Let's code each of the components separately.

'Statistics area': contains global data

Initialize all the text views under onCreate() method that goes inside the statistics area.

txtConfirmedCases = findViewById(R.id.txtConfirmedCases);
txtRecoveredCases = findViewById(R.id.txtRecoveredCases);
txtDeathCases = findViewById(R.id.txtDeathCases);
txtGlobalNewCases = findViewById(R.id.txtNewCases);
txtGlobalNewDeaths = findViewById(R.id.txtNewDeaths);
txtMortality = findViewById(R.id.txtMortality);

Before proceeding with code that will call DataService class under insert data inside these text views, I want to walk you through an important concept of multi-threading. Multi-threading is the ability of a central processing unit (CPU) (or a single core in a multi-core processor) to provide multiple threads of execution concurrently, supported by the operating system. The Home.java class would run on the main thread that will execute all the events inside the class from top to bottom. But the DataService class has methods that use callBack methods to create new events.

If call DataService methods from Home class, the main thread would not wait for it to retrieve data out of those methods because calling a REST API and retrieving data back takes milliseconds amount of time and sometimes even some seconds. The main thread would not wait for our methods to retrieve data and we will get null values. So we need to create a background job that will call DataService methods and wait for the data to store inside ArrayList variables and then we can use those variables to populate our TextViews.

We will be using AsyncTask class to help us create background jobs.

Let's call this function inside onCreate()

new HomeAsync2().execute();

We haven't created this HomeSync2() method yet but let's do it now. Go ahead create a new class inside our main Home class which is of course outside onCreate().

class HomeAsync extends AsyncTask
    {
        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }

        @Override
        protected String doInBackground(Object[] objects)
        {

        }
        @Override
        protected void onPostExecute(Object o) 
        {
        }

Little bit background about these methods: onPreExecute will execute before our background task starts, doInBackground is where we will call DataService methods, and onPostExecute will execute after the job gets done.

Inside doInBackground() call DataService Class which is calling this URL https://coronavirus-monitor.p.rapidapi.com/coronavirus/worldstat.php and retrieving global stat.

GlobalDataService gs = new GlobalDataService();
            try
            {
                globalCases = gs.getGlobalCases();
                globalRecovered = gs.getGlobalRecovered();
                globalFatal = gs.getGlobalFatal();
                globalNewCases = gs.getGlobalNewCases();
                globalNewDeaths = gs.getGlobalNewDeaths();
            } catch (IOException e) {
                e.printStackTrace();
            } catch (JSONException e) {
                e.printStackTrace();
            }

It will take time for ArrayList variable to get populated because there is about 400ms delay in calling REST API. So we have to wait for at least 1-2 seconds before populating our textViews. So let's add wait() function.

int i =0;
synchronized (this)
{
while (i<10)
{
try {
wait(150);
i++;
}catch (InterruptedException e){
e.printStackTrace();
}
}
}

After waiting for 1.5 seconds, we can insert our dataService values inside our textViews.

runOnUiThread(new Runnable() {

                @Override
                public void run()
                {
                    try
                    {
                        double cases = Double.parseDouble(globalCases.get(0).replaceAll(",", ""));
                        double deaths = Double.parseDouble(globalFatal.get(0).replaceAll(",", ""));
                        double mortality = (deaths / cases) * 100;
                        double mm = Math.round(mortality * 100.0) / 100.0;
                        String m = String.valueOf(mm);
                        txtMortality.setText(m + "%");
                        txtConfirmedCases.setText(globalCases.get(0));
                        txtRecoveredCases.setText(globalRecovered.get(0));
                        txtDeathCases.setText((globalFatal.get(0)));
                        txtGlobalNewCases.setText((globalNewCases.get(0)));
                        txtGlobalNewDeaths.setText((globalNewDeaths.get(0)));
                    } catch (IndexOutOfBoundsException e)
                    {
                        e.printStackTrace();
                    }

                }
            });

            return null;
        }

A good developer knows she/he needs to off load-heavy tasks to a worker Thread to avoid clogging the Main Thread and allow a smoother user experience and avoid ANR. Therefore, I am populating values using UI thread.

Now if you run your app, you should see values inside the statistics area. Let's move on to our next component!

Bar chart

Let's create a try-catch block and put all the code that I am about to show you inside of it.

For bar chart, we need values so let's call DataService methods to retrieve data.

DataService ds = new DataService();
            try {
                confirmedCases = ds.getNumberOfCases();
                countryNames = ds.getCountryName();
                activeCases = ds.getActiveCases();
                fatal = ds.getNumberOfDeaths();
            } catch (IOException e) {
                e.printStackTrace();
            } catch (JSONException e) {
                e.printStackTrace();
            }

As I explained earlier, it will take some seconds to retrieve data from the API. So go ahead and add our wait() function after it.

int i =0;
            synchronized (this)
            {
                while (i<10)
                {
                    try {
                        wait(150);
                        i++;
                    }catch (InterruptedException e){
                        e.printStackTrace();
                    }
                }
            }

I would highly recommend looking through our charts library to understand the mechanics behind it.

Let's start by initializing entries (vertical bars) and barChart.

ArrayList<BarEntry> entries = new ArrayList<>();
ArrayList<BarEntry> entries2 = new ArrayList<>();
ArrayList<BarEntry> entries3 = new ArrayList<>();
BarChart barChart = (BarChart) findViewById(R.id.bargraph);

Now we need to add data in these entries. Three entries represent vertical bars for confirmed, fatal, and active cases. We will limit the amount of data we supply to 5 records which the data for top 5 countries. To accomplish it we will need to create three for loop to populate entries.

confirmedCases entry:

for(int j = 0; j < 5; j++)
            {
                try
                {
                    int c = Integer.parseInt(confirmedCases.get(j).replaceAll(",", ""));
                    entries.add(new BarEntry(c, j));
                }
                catch (Exception e)
                {
                    e.printStackTrace();
                }
            }

activeCases entry:

for(int j = 0; j < 5; j++)
            {
                try
                {
                    int c = Integer.parseInt(activeCases.get(j).replaceAll(",", ""));
                    entries2.add(new BarEntry(c, j));
                }
                catch (Exception e)
                {
                    e.printStackTrace();
                }
            }

fatal entry:

for(int j = 0; j < 5; j++)
            {
                try
                {
                    int c = Integer.parseInt(fatal.get(j).replaceAll(",", ""));
                    entries3.add(new BarEntry(c, j));
                }
                catch (Exception e)
                {
                    e.printStackTrace();
                }
            }

We can give these entries a label and put it inside a bar data set. We will use this data set to create a the whole Bar Data later.

BarDataSet bardataset = new BarDataSet(entries, "Confirmed cases ");
BarDataSet bardataset2 = new BarDataSet(entries2, "Active cases ");
BarDataSet bardataset3 = new BarDataSet(entries3, "Fatal cases ");

Store these dataSets inside a list:

List<IBarDataSet> set = new ArrayList<>();
set.add(bardataset);
set.add(bardataset2);
set.add(bardataset3);

So we have data for our 5 groups of vertical bars (the group of confirmed, fatal, active cases vertical bar). Let's create labels to display country names on the x-axis.

ArrayList<String> labels = new ArrayList<String>();
for(int k = 0; k < 5; k++)
{
   try
   {
       labels.add(countryNames.get(k));
   }
   catch (Exception e)
   {
       e.printStackTrace();
    }
}

We have labels and a set of the vertical bar data set. Supply both of these data to our main bar data.

BarData data = new BarData(labels, set);

Technically, you're done! But wait what about animations, grid lines, scaling, zoom functionality and all those fancy stuff? We can set properties for both X-axis and Y-axis separately. Here is how you do it.

Set X-axis properties:

XAxis xAxis = barChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTextColor(Color.BLACK);
xAxis.setTextSize(8f);
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);
xAxis.setLabelsToSkip(0);
xAxis.setLabelRotationAngle(-45);

Set Y-axis properties:

YAxis right = barChart.getAxisRight();
right.setDrawLabels(false); // no axis labels
right.setDrawAxisLine(false); // no axis line
right.setDrawGridLines(false); // no grid lines
right.setDrawZeroLine(true);

YAxis left = barChart.getAxisLeft();
left.setDrawLabels(false); // no axis labels
left.setDrawAxisLine(false); // no axis line
left.setDrawGridLines(false); // no grid lines
left.setDrawZeroLine(true);

Set overall properties:

barChart.setData(data);
barChart.setDrawGridBackground(false);
barChart.setDescription("");  // set the description
barChart.animateXY(5000,5000);
barChart.setScaleEnabled(true);
barChart.setDrawValueAboveBar(true);
barChart.setDrawGridBackground(false);
barChart.setDoubleTapToZoomEnabled(true);
barChart.setPinchZoom(true);

bardataset.setColor(Color.parseColor("#B71C1C"));
bardataset2.setColor(Color.parseColor("#000000"));
bardataset3.setColor(Color.parseColor("#717171"));

There you have your second main component working! Great job!

You made it this far! We are so close to finish the home page. Just few more basic components.

Bottom Navigation Bar

This is a navigation component that will allow the user to navigate different pages of our app. The user will click one of the icon and navListener would respond by displaying the selected page.

Let's initialize our bottomNavigationBar and set a listener to it.

BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
bottomNav.setOnNavigationItemSelectedListener(navListener);

Don't worry we haven't created navListener yet. We need to create global private variable for navListener outside our onCreate() method.

private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            switch (menuItem.getItemId()) {
                case R.id.nav_home:
                    break;
                case R.id.nav_cases:
                    Intent a = new Intent(Home.this, CasesByCountry.class);
                    startActivity(a);
                    break;
                case R.id.nav_news:
                    Intent c = new Intent(Home.this, News.class);
                    startActivity(c);
                    break;
                case R.id.nav_help:
                    Intent d = new Intent(Home.this, Help.class);
                    startActivity(d);
                    break;
            }
            return false;
        }
    };

In the above code snippet, we are attaching a 'navListener' to our Bottom Navigation View variable. The switch-break statements are working like if-else statements.

At this point, you would need to create some blank java classes for our future pages. Create these empty java classes: CasesByCountry.java, News.java, Help.java.

That's it for this component.

Refresh Button

The main purpose of this refresh button to call the REST API again and populate all the values again. We are not updating the data. The people who are actually updating the data set are the people who are maintaining the API.

Programatically, we just need to call our Async() class inside the refresh button onClickListener() and that's about it.

btnRefresh = findViewById(R.id.btnRefresh);

btnRefresh.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar.setVisibility(View.VISIBLE);
                new HomeAsync2().execute();
            }
        });

Progress Bar

We need to let the user know that we are calling the API and it is taking time to retrieve the updated data. Imagine clicking the button and not seeing anything on the page, how frustrating it could be.

We need to add a progress bar at two places: 1. Before calling HomeAync2() class inside onCreate() method 2. in onpostExecute() method of asyncTask class

onCreate():

progressBar = findViewById(R.id.progressBar);

progressBar.setVisibility(View.VISIBLE);
new HomeAsync2().execute();

onPostExecute():

@Override
protected void onPostExecute(Object o) 
{
   progressBar.setVisibility(View.GONE);
}

You made it! 🎊

Conclusion

As you might realize that there is a lot of work on this page. However, this is the easiest page of my application. I tried to break down code and explained it as much as I could. There weren't a lot of new concepts on this page to know since we are only trying to implement a basic page. The sole purpose of this page is to give insightful global information to the user. Users should take one quick glance and know what is going around the world.

In the upcoming tutorial, I will be going through the next exciting page which is a 'Stats' page. This page is more challenging than the home page because there is more coding involved in the back-end. 'Stats' page requires an adapter and data provider class. You will also be creating a recycler view which is one of the most exciting components of the page. I will take you through a process of implementing search functionality which will allow the user to search for specific countries along with their unique data which is really cool.

Stay tuned because much more exciting content is coming up! 🔔

Thanks for reading the blog and spending time working through the page. Please let me know if your questions/feedback/suggestions in the comment box. I would love to hear what do you think. 😃

sukhbirsekhon / CovidTracker-Android

This is an android based application and built to spread awareness among community regarding corona virus (COVID-19). This application helps you keep track of number of confirmed cases, active cases, fatal cases, new cases, new deaths, and other infromation of different countries through different views and visualizations.

COVID-19 TRACKER Android Application (Introduction)

Sukhbir Sekhon — Wed, 15 Apr 2020 00:55:50 +0000

About

COVID-19 Tracker allows you to monitor the number of COVID-19 cases around the globe and different countries as the spread of disease is increasing. The sole purpose of this application is to keep you aware of the spread of disease around you and help you share credible and trustworthy information with your friends and family.

This application gets most of the data from different credible REST APIs. It is very crucial to understand how does REST API works. A REST API is an interface that uses HTTP requests to perform multiple tasks using data. Some of the common HTTP protocols are GET, PUT, POST, and DELETE. An application program interface (API) is a code for a website that allows two software programs to communicate with each other. A REST API is an architectural approach to communicate between two different software entities. It follows the Client-Server model. We make HTTP requests using browsers every day and calling a REST API works the same way except you would have to define some optional or required headers, key-value, or authorization on your own.

COVID-19 Tracker app calls two different REST API to GET data in the form of the JSON format. This data contains information about COVID-19 confirmed, recovered, and fatal cases for different countries. There are different from where you can retrieve data, but I found a reliable and credible API on the RapidAPI website.

This application contains four different pages (Home, Stats, News, Help) along unique purposes.

Home page: Includes global statistics view so that you can take a quick glance and know the total spread of corona-virus pandemic around the globe. This page also includes a bar-chart for the top 5 countries with information about their confirmed, active, and fatal cases so that you can compare them with each other.
Stats page: This is the page where you will see all the countries that are affected by corona-virus. You can view specific detail like confirmed, active, recovered, fatal, new cases, new deaths, serious critical, total cases per one million population for each country. With the help of search functionality, you can find any country details. You get all this information from a reliable source that gets updated every minute.
News page: This page makes this application a 'one-stop' application. You can read all the corona-virus news from different authentic sources here. You can also select a different country to read their news. This page is supported by 'Google News API' which means that it gets updated frequently and contains news from diverse sources.
Help page: Our Help page allows you to get access to a screening tool developed by Apple, CDC, White House, and FEMA. This page will keep getting updated in the future with useful resources and information on how to protect yourself from corona-virus.

In the upcoming blog, I will share my code and best practices to create these pages. I will also share some of the unique concepts that I've learned over the building period of this app.

Stay tuned! 🔔

sukhbirsekhon / CovidTracker-Android

This is an android based application and built to spread awareness among community regarding corona virus (COVID-19). This application helps you keep track of number of confirmed cases, active cases, fatal cases, new cases, new deaths, and other infromation of different countries through different views and visualizations.