DEV Community: Victor Macarios

Tips for configuring GitHub in IntelliJ

Victor Macarios — Mon, 06 Apr 2020 21:12:51 +0000

The steps described in this post were done using IntelliJ IDEA CE 2019.3 and macOS High Sierra (10.13.6).

When setting up GitHub in IntelliJ we have to follow some tricky steps.
I'll show the ones that I have passed by.

The first step is to configure the GitHub account.
To do that, just click in Configure link on IntelliJ Welcome Screen and then in Preferences option.

Open Version Control section and then GitHub.
Click in the + button and add the credentials.
If you want to use SSH (by the way, that is recommended for security reasons), you should tick "Clone git repositories using ssh" and click OK.

But...

(Here comes the first trick)
If you don't have added the SSH key for your computer on the GitHub website, you'll not be able to use this option.

Let's see how to add it then:

Open the Terminal app
Enter the following line:
```
ssh-keygen -t rsa
```
Press ENTER key to accept the default location to save the files
Create a password for your keys (you'll need to type it twice)

Your keys are now saved in .ssh folder inside your home folder.
To copy it, use the command below:
```
pbcopy < ~/.ssh/id_rsa.pub
```
Now, access the GitHub website, click in your avatar picture (top-right) and then Settings option.
Click in SSH and GPG key then in the green button named New SSH key.
Type a name that identifies your computer, pastes the key and finish by clicking in the Add SSH key button.
Your GitHub password will be requested.

With the SSH key added to the GitHub website, you can now clone a repository by using the Get from Version Control option in Welcome to IntelliJ IDEA screen.

Now that your repository was copied locally, you can commit using VCS>Commit (⌘ + K) option on the menu and push by using VCS>Git>Push (⌘ + ⇧ + K).

And here comes another trick.
For security reasons, GitHub has two options in Email settings that helps protect your privacy (Keep my email addresses private and Block command line pushes that expose my email).
If those options are ticked, maybe you receive an error when you try to push your commits.

Unfortunately, the error notification doesn't always have enough information.
Using the menu View>Tool Windows>Version Control (⌘ + 9), you can see more detailed information at the Log tab.
You should probably see the below message:
Your push would publish a private email address.

So, how can I push my commits while keeping my privacy?
GitHub provides us an email to avoid exposes our private email.

Let's see the steps to get it and solve the issue:

Access your GitHub Settings>E-mail and you will see the provided email at the first line of the Keep my email addresses private section (highlighted in the image above)
Copy it to the clipboard
Open the Terminal app
Navigate to your local repository directory
Type the text below (replacing the content between the quotation marks with your email copied in step 2):
```
git config --global user.email "{ID}+{username}@users.noreply.github.com"
```
Reset the author information:
```
git commit --amend --reset-author
```
Return to IntelliJ and now you can push by pressing ⌘ + ⇧ + K

Congratulations.
Now you've finished the IntelliJ/GitHub setup and can start to code.

Happy coding!
Victor Macarios

Sources:
https://help.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh

https://stackoverflow.com/questions/43863522/your-push-would-publish-a-private-email-address-error/51097104#51097104

Traversing Graphs

Victor Macarios — Sat, 25 Jan 2020 22:22:43 +0000

As developers, we are frequently dealing with lists, arrays, and sequence of values. But have you ever had to deal with related data, which are connected to other data? This is also known as a Graph.

These days I had to deal with it. It was scary at first.
But after reading this great article from Kumar Chandrakant, it became understandable and I felt capable of doing that.

Of course, there's a lot to learn yet, but I'm gonna show you the basics, so you have a start point to deepen your research.

A graph is a collection of Vertices (also called Nodes or Points) and Edges (also called Links or Lines), where an edge is the connections between two vertices.
In a social network, each person is a vertex, and each connection between them is the edge.

Kumar's diagram

In a map, the streets are the edges and their intersections are the vertices.
M&M's time!😋

Using Kumar's diagram as an example, let's code.
The first step is to create a Vertex class:

public class Vertex {
    String name;
    Vertex(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    @Override
    public boolean equals(Object o) {
        if (o == null)
            return false;

        if (this == o)
            return true;

        return ((o instanceof Vertex) && (((Vertex) o).getName() == this.name));
    }

    @Override
    public int hashCode() {
        int result = 17;
        result = 31 * result + name.hashCode();
        return result;
    }

    @Override
    public String toString() {
        return name;
    }
}

Basically, the vertex has only the "name" property.
But, since we will work with Java Collections, we have to override the equals, hashCode, and toString methods.

Now, it's time for Graph class:

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Graph {
    private Map<Vertex, List<Vertex>> adjVertices;

    public Graph() {
        this.adjVertices = new HashMap<Vertex, List<Vertex>>();
    }

    void addVertex(String name) {
        adjVertices.putIfAbsent(new Vertex(name), new ArrayList<>());
    }

    void addEdge(String name1, String name2) {
        Vertex v1 = new Vertex(name1);
        Vertex v2 = new Vertex(name2);
        adjVertices.get(v1).add(v2);
        adjVertices.get(v2).add(v1);
    }

    List<Vertex> getAdjVertices(String name) {
        return adjVertices.get(new Vertex(name));
    }

    String printGraph() {
        StringBuffer sb = new StringBuffer();
        for(Vertex v : adjVertices.keySet()) {
            sb.append(v);
            sb.append(adjVertices.get(v));
            sb.append("\n");
        }
        return sb.toString();
    }
}

We are using a Map to create an adjacency list. This list will contain all relationship of each vertex.
When adding an edge, we add a vertex on the list of the related vertex.
To represent the graph, we print the adjacency list, creating a string that starts with each vertex and shows the related list in front of it.

Then we will create a Travessal class, which will contain the methods for traversing our graph. Both methods will receive a graph and a root (which will be our start point) as parameters.
There are several ways for traversing a graph, but in this article, we will only show the two most commonly used. They are known as Depth-First Traversal (DFT) and Breadth-First Traversal (BFT).
The main difference between them is that the DFT visits each child connection until the end before start visiting the siblings.
The BFT, on the other hand, visits each sibling first before visiting their children.

import java.util.LinkedHashSet;
import java.util.LinkedList;
import java.util.Queue;
import java.util.Set;
import java.util.Stack;

public class Traversal {
    static Set<String> depthFirstTraversal(Graph graph, String root) {
        Set<String> visited = new LinkedHashSet<String>();
        Stack<String> stack = new Stack<String>();
        stack.push(root);
        while(!stack.isEmpty()) {
            String vertex = stack.pop();
            if (!visited.contains(vertex)) {
                visited.add(vertex);
                for (Vertex v : graph.getAdjVertices(vertex)) {
                    stack.push(v.name);
                }
            }
        }
        return visited;
    }

    static Set<String> breadthFirstTraversal(Graph graph, String root) {
        Set<String> visited = new LinkedHashSet<String>();
        Queue<String> queue = new LinkedList<String>();
        queue.add(root);
        visited.add(root);
        while (!queue.isEmpty()) {
            String vertex = queue.poll();
            for (Vertex v : graph.getAdjVertices(vertex)) {
                if (!visited.contains(v.name)) {
                    visited.add(v.name);
                    queue.add(v.name);
                }
            }
        }
        return visited;
    }
}

Note that to DFT we use a Stack to store the vertices which will be traversed, which takes us to go deeper in each vertice.
In the BFT, we use a Queue to store the vertices, which bring us the neighbors first.

To finish, we create a graph in the main method, defining its vertices and edges and then print the adjacency list and traverse it using both kinds of traversal.

public class TraverseGraph {
    public static void main(String[] args) {

        Graph graph = new Graph();
        graph.addVertex("Bob");
        graph.addVertex("Alice");
        graph.addVertex("Mark");
        graph.addVertex("Rob");
        graph.addVertex("Maria");
        graph.addEdge("Bob", "Alice");
        graph.addEdge("Bob", "Rob");
        graph.addEdge("Alice", "Mark");
        graph.addEdge("Rob", "Mark");
        graph.addEdge("Alice", "Maria");
        graph.addEdge("Rob", "Maria");

        System.out.println(graph.printGraph());     

        System.out.println(Traversal.depthFirstTraversal(graph, "Bob"));

        System.out.println(Traversal.breadthFirstTraversal(graph, "Bob"));  

    }
}

The result will be the following:

Bob[Alice, Rob]
Rob[Bob, Mark, Maria]
Mark[Alice, Rob]
Alice[Bob, Mark, Maria]
Maria[Alice, Rob]

[Bob, Rob, Maria, Alice, Mark]
[Bob, Alice, Rob, Mark, Maria]

I hope this article clarifies the usage of Graphs.
Leave your impressions or doubts.

Sources:
[1]https://www.baeldung.com/java-graphs
[2]https://dev.to/amberjones/intro-to-graph-data-structures-abk
[3]https://dev.to/vaidehijoshi/going-broad-in-a-graph-bfs-traversal
[4]https://dev.to/jjb/part-9-learning-graphs-4859

Configuring GitHub in IntelliJ IDEA CE

Victor Macarios — Sat, 25 Jan 2020 02:08:07 +0000

Hey folks!

Today I gonna show you how to configure GitHub on IntelliJ IDEA CE.

It's quite simple.

The first step is to open IntelliJ and, on the Welcome screen, click on "Configure", at the bottom right.
IntelliJ Welcome Screen

Choose the option "Preferences"
Preferences option

Open the Version Control section by clicking on the triangle at its left
Click on "GitHub"
Click on "Add account" at the center of the window
Preferences window

Insert your credentials and click on "Log In" button
Credentials

If you have the two-factor authentication activated, a window will open asking your authentication code. Insert it and click in OK.
Authentication code

Now, just click OK to close the Preferences window.

Now your GitHub account is configured.
If you want to download a hosted code, click on "Get from Version Control" in the Welcome screen and select your repository by clicking at GitHub on the left side of the window.

But, if you want to upload a project, open it, click in VCS menu and choose Import into Version Control > Share Project on GitHub
Share Project

Fill in the requested information and click on the "Share" button.

In the next window, select the files you want to upload, fill in the Commit Message and click on the "Add" button.
Selected files

The next edited files can be committed by clicking on VCS menu > Commit.
Check the desired files, fill in the Commit Message and, on the bottom left click on the triangle next to the "Commit" button and click on the "Commit and Push" option.
Commit changes

That way, the files will be versioned in your local machine and on the GitHub server as well.

Confirm the push on the following screen and you are done.
Push Commits

Happy coding.

Starting to learn React-Native #01

Victor Macarios — Sat, 30 Nov 2019 21:20:43 +0000

Hello, folks!

After great procrastination, I finally wrote my first post sharing my progress on React-Native.

This text is based on Lex Lemmens's post at:
https://medium.com/swlh/writing-your-really-first-mobile-app-in-react-native-simple-to-do-app-e67f875f0721

I'll use his tutorial to create my version of a To-Do App for iPhone.
The content may differ due to the version of some components.

So, let's start:

My config:
MacBook Pro 2010 (Core 2 Duo 2,4GHz)
macOS Sierra (10.12.6)

Requirements:
• iPhone
• Expo App
• IDE/Editor (I will use VSCode)
• Basic knowledge of macOS and Terminal app

First of all, we need to install npm which is installed with Node.js.
So, let's access www.nodejs.org and download node.

Click on the downloaded installation package and follow the on-screen instructions.

After that, open Terminal app and type the following commands to check if everything was correctly installed:

$ node -v
$ npm -v

Then install Expo (a software which will serve our new application to the Expo app on iPhone) by typing:

$ sudo npm install -g expo-cli

Create a folder to keep our projects and enter in it:

$ mkdir React
$ cd React

Then create a new project using:

$ expo init ToDo

Choose "minimal" to create a default template.
Set the "name" and "displayName" of the project.

Navigate to the new project folder:

$ cd ToDo

And start the project server:

$ expo start

Your default web browser will open and the expo server will start running.

Open your iPhone camera app and point it at the QR Code on the lower-left corner.
Click on the notification at the top of the screen to open it in the Expo app.

Wait a few moments for the first build to finish and a blank screen with an example text appears.

Now that we have our app running, let's open the App.js file with your favorite IDE.
Start by cleaning the template file like the code below.

App.js - Clean code

Let's add a gradient color on the background and change the status bar to a white text color.
To do that, import "LinearGradient" and "StatusBar" and add the following code:

App.js - Adding some color

The "style={{ flex: 1 }}" code is to ensure that the gradient will cover the whole screen.

Creating the text inputs

The next step is to add text inputs where people will type the To-Do title.

App.js - Creating and styling the Text Input

Don't forget to import "TextInput".
The <View> section is the React Native correspondent to HTML <div>.
The "styles" section is very similar to CSS.
The options set in the TextInput component are called "props" in React Native.
Read more about them in the official documentation:
https://facebook.github.io/react-native/docs/textinput.html#props

This is how it should look now:

Text Input

The app logic

Now comes the part that will make our app come to life.
The best way to define the logic is by splitting it into little steps.

A variable (state) that holds the text input value should be empty by default.
The variable should change its value while the user is typing.
After pressing enter (done) the text input value should be added to a list and be reset to a default empty value.
By hitting the delete button the item is removed from the list.
By hitting the edit button the user should be able to edit the entry.
By marking the checkbox the item should be strikethrough.

Let's start:

First, we should create and variable (state) with an empty default value and define that the text input component will use this state to hold its value.

App.js - Setting state to default empty value

Notice that we create a "state" and add a "value" prop in the text input component.

Second step

Now we have to update the state when the user is typing.
To do that we will use the "onChangeText={this.changeText}" prop, which will call the onChangeText method. This method receives the new value and set the new state of inputValue.

App.js - Update inputValue with TextInput value

Third step

When you hit done, the content should be stored in an array and showed on the list.

App.js - Showing the list of saved items when hitting "done"

We create a new "todos" array in the state.
There is where our To-Do items will be stored.

We also added an "onSubmitEditing" prop in the Text Input that will call the "addItem" function. That function adds new items to the "todos" state.

But why did we use concat() instead of push()?
Because of the immutability of the state.
The concat() doesn't modify the array but creates a new one.
Read more at:
https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

In the render function, we've added a variable "todos", that will map the whole array to rows with a side checkbox button (we need to import "TouchableOpacity" to make the button touchable). This variable is displayed in a <View> after the Text Input.
The concat() has been used here again because it's necessary to create a new array before we can reverse() the order. Otherwise, it will keep reversing as you type.

That's how it looks right now.

Items on the list

I'll be back!

I hope you are enjoying.
The other steps of the logic will be described in the next post.
If you have any questions or suggestions, feel free to contact me.

Thanks for reading.