DEV Community: EdRome

Game Dev Diary #1: Starting from zero

EdRome — Sun, 13 Oct 2024 17:43:56 +0000

Introduction

Well, I was planning to publish this first diary, at least, two weeks ago. However, my plan changed due to technical issues I faced during the development and other activities that kept me busy.

I just started a whole new project from scratch, something different from what I'm used to do.

A few months ago, I imagined a story that I believed could be great to tell. Since programming is my passion (although my main job is more related to managing and data science), I decided to start from scratch with almost no knowledge of game development. I mean, I'm a gamer and I really love video games and board games, but I've never worked on developing one.

Over the last two weeks, I created a Game Design Document (GDD) to serve as a guide during development. I don't want to lose my way during the process.

Next, I got my hands on Godot (I was considering Unity, but I haven't decided yet) and started working on a prototype to test different mechanics that I want to include in the game.

Development

For my first prototype, I will be developing the following:

Isometric view.
Click to move.
Inventory menu
Interactions with its environment
Interactions with enemies

Divided into severa posts to not make a big one.

First, I created an empty 3D scene (Spatial node) and create the following:

Spatial
- NavigationMeshInstance
  - MeshInstance - The Mesh is a block resized to look like a floor.
    - StaticBody
      - CollisionShape

If everything is done in this order, the collision shape will fit automatically to the mesh and the final map looks like this.

Once happy with the result, I selected the NavigationMeshInstance node, reduced the cell size property and clicked on Bake NavMesh.

Note: Reducing the cell size is important to make the navigation mesh as close as possible to the floor.

Isometric view

I think this is the easiest mechanic of all, to create the isometric view I create a camera and fix its configurations so it shows the desired view.

After following these steps, this is the result.

As reference I use this video

Click to move

The click to move development was made taking as reference this video and using this navigation documentation and this raycasting documentation.

Note: The video uses Godot 4 and I'm using Godot 3.5 (the reason behind this is because of an installation problem that I couldn't solve u.u)

The idea behind it is that the mouse casts a ray from its camera perspective of fix length, getting the position where the ray collides and calculating the character trajectory from its current position.

The character should be a KinematicBody (I include a dummy figure with MeshInstance) with a collision shape and a NavigationAgent. My complete scene looks like this:

I attached a script to the kinematic body that would do all the magic.

extends KinematicBody

var navigationAgent
export var speed = 10

# Called when the node enters the scene tree for the first time.
func _ready():
    navigationAgent = $NavigationAgent

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    if navigationAgent.is_navigation_finished():
        return
    moveToPoint(delta, speed)

func moveToPoint(delta, speed):
    var targetPos = navigationAgent.get_next_location()
    var direction = global_translation.direction_to(targetPos)

    var velocity = direction * speed
    move_and_slide(velocity)

func _input(event):
    if Input.is_action_just_pressed("left-click"):
        var camera = get_tree().get_nodes_in_group("Camera")[0]
        var rayLength = 100
        var from = camera.project_ray_origin(event.position)
        var to = from + camera.project_ray_normal(event.position) * rayLength

        var space_state = get_world().direct_space_state
        var result = space_state.intersect_ray(from, to)

        navigationAgent.set_target_location(result.position)

The most complex part (casting a ray from mouse position) is made by the _input function (remember that I'm using Godot 3.5, it varies from its implementation on Godot 4.x).

The character movement from its current position to the mouse clicked position is done by the Navigation Agent inside the moveToPoint function.

Starting with Django

EdRome — Tue, 19 May 2020 23:35:55 +0000

Hi dev community!

This time I'll be showing you the basic process to develop a web app using Django. We'll be exploring most of its base functionality, seeing how its administrator view works, creating a database with foreign relations, and exposing it to your local network.

I'll try to make the process as easy to understand as I possible, so anyone interested in it, could create one.

Let's get start with the base of everything

What is Django?

Django is a python framework that allows you to develop web applications with the minimum effort. It provides a basic folder structure where you'll be placing logic functionality, HTML layouts, styles, and much more.

First things go first

Anaconda environments

Prepare an environment to install Django, an advantage offered by python is the availability to create environments with low memory usage, installing just the essentials, using Anaconda. Please install it by executing its Windows installer (in case you're using Windows) or any other installation method described in this page.

Installing Anaconda step by step is this post's out of reach, sorry :(

Once you have successfully installed Anaconda, then open up the command prompt and type the following command

conda create --name envname python=3.6
Please, change the envname to whatever name you want to set to your environment

What we have done is telling Anaconda to create a basic environment using python 3.6 version.

During installation, you'll be asked to confirm package and dependencies installation, so please type Y to proceed without any troubles

Preparing Django

Great! time to install Django, inside your Anaconda prompt type the following command

conda activate envname
Please, change envname with your already set environment name
This will activate your environment whose going to be used

Now you're inside your environment, so time to install Django by typing the following

pip install Django
Note: Anaconda has a special way to install packages, that is supposed to be better than classic pip installation, however Django doesn't have an anaconda distribution.

Time to get dirty

Let's start validating our Django installation by running the following command inside Anaconda Prompt

python -m django --version
Remember to activate your environment with command described above

If your don't get an error saying No module names django and get something like 3.x.x instead , then django is ready!

Creating a project

Creating a Django project should be as easy as typing on your target directory

IMPORTANT change your default directory to something you remember well, because we'll be accessing to it further this series.

django-adming startproject project_name
Please, change project_name to your website desire name

Then a directory should be created in the following structure

project_name /
     manage.py
     project_name /
          __init__.py
          settings.py
          urls.py
          asgi.py
          wsgi.py
```



1. The first **project_name** is the base folder where all project is located
2. **manage.py** is a python file that will let you interact with **Django** based in commands
3. The second **project_name** is a directory containing all necessary tools to work with **Django** storing database settings, urls, and configurations.
4. **__init__.py** an empty file to let know python this is a package.
5. **settings.py** a file with **Django** settings
6. **urls.py** your **Django** urls directory (when you create a page inside your website, your page url might be here)
7. **asgi.py** an entry point, allowing compatibility with ASGI servers (not used in this tutorial)
8. **wsgi.py** an entry point, allowing compatibility with WSGI servers (not used in this tutorial)

# Final thoughts #

At this point **Django** can run, just type this command on your project base directory (where `manage.py` is located). Easy, right?

> `python manage.py runserver`

And your done with a basic **Django** application. Surely you'll see a really basic webpage with almost nothing, but the adjustments and details will be tackle in the next post **;)**

Neural Network, the universal solver?

EdRome — Wed, 20 Nov 2019 18:19:17 +0000

In the past weeks I’ve been working on a research to help people improves their savings by reducing expenses. The work is about to be finished but during the research I’d found out a couple of things I want to share with others, especially when talking about artificial neural networks, a.k.a ANN.

We all know ANN’s, their different architectures, and their importance to solve most of the Big Data problems. Most of the time we hear of them as an analogous of the real ones, those that we all have on our brains; however the real question comes, are they as good as we thought?

A brief of history about ANN, the first time they were proposed was in 1943 with Warren McCulloch and Walter Pitts from there, lot of new models and architectures have been proposed, most of them with a specific purpose. Various examples have been shown, AlexNet, GoogLeNet, ResNet, Multi Layer Perceptron, and so many others.

Most of the data analysis problems can be solved by training an ANN, combine different type of layers and being patient. Also, pros of using it can be listed

Flexible
Deal great with nonlinear problems
Fast once trained
And most important, they work as universal approximators

The last one is the most important advantage, no matter how is your problem, or how complex they look, with the sufficient time and data you can solve it. But some problems emerge when working with them.

They require lot of time and data to be trained
The data need to be transformed in special ways
Computational expensive

Despite of these disadvantages, most of data scientists continue using them. Looks like the ability ANN has to deal with a variety of problems is more important than the computational expenses they require. Just wait and think it for a moment, is seriously most important their nature of being almost an automated machine learning algorithm than the time and resources their require to finish a task? Particularly I don’t share that opinion.

Think it this way.

You’ve been asked to make a prediction on a time series

To start working on it, you decided to take a look on the Internet and compare different algorithms, beginning with the classic ARIMA or SARIMAX, continuing to more sophisticated algorithms like boosting, and finishing with recurrent neural networks

Comparing them with each other, you find out that most of the recent articles says RNN are great solutions, because of their precision, they also mentions a few thoughts about they are required to use bunch of data, but not a special problem to deal with.

Decided to use them, you prepare an environment to run a couple of experiments, and the surprise is that RNN is not appropriate for you, the RNN require lot of previous preparations, the data need to be transformed in a certain way, takes lot of time to be trained, tend to overfit, and looks like it sucks in all ways

I don’t mean they’re bad in all aspects, for certain problems they are great, but only for very particular problems.

What I want to transmit with these thoughts is neural networks are not as great as everybody says. Yes, important problems have been solved using them, but they require lot of time, being the same as if you run a genetic algorithm generating all possible solutions. And that’s we’re converting the data science with these, we’re converting it in a matter of time. Wait until the problem is solved by computers. Essentially this approach is wrong, we must inquire to find patterns, outliers, clusters, and everything needed to solve satisfactorily the problems we’re facing to; no just running an algorithm and wait until it solve it. That’s not the idea.

In my humble opinion, I think we all need to start changing our minds about the usage of ANN. Of course they are great, they are the reason I was interested on Data Science in the first place, but please, stop using them for every problem you face to. Look for better alternatives and stop overvaluing them.

How to create an Android App: Improving designs

EdRome — Thu, 12 Sep 2019 19:37:48 +0000

Here we are one week more, in the last part of this series.

We had reviewed important topics like database connectivity, image selecting, etc. However, there’s still missing an important, missing it will devalue our application no matter the powerful functionality it has. I’m talking about the design.

I’m going to be honest and tell to you that I’m not a great designer. In fact, this last part take me lot of time to prepare, while I’d been writing the series, I was practicing and reading resources for all over the internet to write a great entry.

In this last post we’ll review a material components, not all of them, and a tool to improve designs.

First of all, Android allow us to use components call materials. This kind of components give to us hole new experience on UX patterns with interesting designs like elevations, shadows, animations, and drawables.

Considering the previous mentioned, let’s change all text view and text edit, also the button. Image container, as far as I know, doesn’t support materials, so we’ll let it as it.

To modify text edit we’ll use TextInputLayout and TextInputEdit. The layout is used as container of text input, it can contain a hint and images to avoid even more components.
The code below show how to change the EditText to the new component.
Notice the hint tag with “Username” text, it’s like a decorator, when you press the component, it will change its position; and boxStrokeColor tag, allowing us to change the color of the stroke.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/profile_username_edittext_layout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="44dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:ems="10"
    android:hint="Username"
    android:textColorHint="@android:color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/profile_imageView">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/profile_username_edittext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="textPersonName"
        android:maxLength="15"
        android:textColor="@android:color/black"
        android:singleLine="true" />

</com.google.android.material.textfield.TextInputLayout>

Because of the hint tag of the component I remove the TextView, being redundant.

Now the radio buttons will be changed for images, a great page where you can find free png resources is icons8, you could add drawable to the left or right and the icons will be shown, in case you don’t like que orientation, also there’s a possibility to add it top or bottom, hiding the circular button.

<RadioGroup
    android:id="@+id/profile_gender_radiogroup"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:gravity="center"
    android:orientation="horizontal"
    app:layout_constraintBottom_toTopOf="@+id/profile_birthday_dateselect_layout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.497"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/profile_gender_textview"
    app:layout_constraintVertical_bias="0.506">

    <androidx.appcompat.widget.AppCompatRadioButton
        android:id="@+id/profile_male_radiobutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:drawableRight="@drawable/icons8_man_50" />

     <androidx.appcompat.widget.AppCompatRadioButton
        android:id="@+id/profile_female_raidobutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:drawableRight="@drawable/icons8_woman_50" />
</RadioGroup>

Next step is changing birthday field as we did with the username field, the variant in this case is changing the input type by none to avoid the user from writing. This last step was performed programmatically, once everything is initialized.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/profile_birthday_dateselect_layout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="152dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:ems="10"
    android:hint="Birthday"
    android:textColorHint="@android:color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/profile_gender_textview">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/profile_birthday_dateselect"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusable="false"
        android:inputType="textPersonName"
        android:maxLength="15"
        android:singleLine="true" />

</com.google.android.material.textfield.TextInputLayout>

birthday.setInputType(InputType.TYPE_NULL);

Then, center everything in the screen and change a cool color and its contrast, a great page is paletton. I suggest to pick up light colors, but not too bright (imagine yourself using sunglasses every time you open up your app because of the bright).

Combine all together into a style to your layouts, just to to style.xml file and add the following

<style name="UsernameLabel" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/ColorFalseState</item>
    <item name="android:textSize">20sp</item>
    <item name="hintTextAppearance">@color/boxStroke</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/boxStroke</item>
    <item name="colorControlNormal">@color/boxStroke</item>
    <item name="colorControlActivated">@color/boxStroke</item>
    <item name="boxStrokeColor">@color/boxStroke</item>
</style>

Don’t miss to change the names of the style, that is, UsernameLabel and color values to something fit great to your app.

To import this style to your component, just add an style tag, like this.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/profile_birthday_dateselect_layout"
    style="@style/UsernameLabel"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginStart="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="152dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:ems="10"
    android:hint="Birthday"
    android:textColorHint="@android:color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/profile_gender_textview">

    ...

</com.google.android.material.textfield.TextInputLayout>

Taking advantage of Text input layouts, let’s complement our functionality with error message. To do that, use a text change listener on your edit text; on after change check if the change made, when the text field change to empty, set an error; otherwise change text layout to original state.

username.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (editable.toString().isEmpty()) {
                username.setError(getResources().getString(R.string.username_error));
                username_layout.setBoxStrokeColor(Color.RED);
            } else if (!editable.toString().isEmpty()) {
                username_layout.setBoxStrokeColor(getResources().
                                                  getColor(R.color.boxStroke));
            }
        }
   });

You should do this for every text layout you want to show an error.

At the end the app should look like this.

(Less orange, I really don’t know why image is turned this color when I take an snip)

But there’s one missing issue, what happen if the app is used on a small device? everything will look weird, we simply put layout into a ScrollView, and problem solved.

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0">

    <include layout="@layout/content_main" />

</ScrollView>

Aaaand…. that’s it.

Thanks for reading, and remember that the project is on github (link) for whatever purpose you want to give it.

How to create an Android App: Android Room part 2

EdRome — Thu, 05 Sep 2019 18:07:37 +0000

Here we are one more week to continue with the previous post

In the last post we design a database of one entity to store user profile. This time we’ll make usage of it.

Let’s start adding a type converter file, not added last week. This is necessary to store date data types.

import androidx.room.TypeConverter;

import java.util.Date;

public class Converters {

    @TypeConverter
    public static Date fromTimestamp(Long value) {
        return value == null ? null : new Date(value);
    }

    @TypeConverter
    public static Long dateToTimestamp(Date date) {
        return date == null ? null : date.getTime();
    }


}

Then, onto the room file add type converter annotation and change version if you already compile the project.

@Database(entities = {profileModel.class}, version = 2, exportSchema = false)
@TypeConverters({Converters.class})
public abstract class databaseRoom extends RoomDatabase {
    ...
}

Modify Main Activity calling a POJO's instance and calling method getProfile.

The constructor takes Application as parameter.

getProfile method takes an ID as parameter

profilePojo = new profilePOJO(getApplication());
user = profilePojo.getProfile(1);

getProfile method will be used to retrieve information about the user. Once the application is started the first action will be looking into the database for information, in case it hasn't information, all Edit Texts will appear empty; otherwise, Edit Texts appear with information.

The logic described bellow is shown as follows.

if (user != null) {
    username.setText(user.getUsername());
    byte[] bitmapdata = user.getPhoto();
    Glide.with(this).load(byteArray2Bitmap(bitmapdata)).into(imageview);
    switch (user.getGender()) {
        case "male":
            male.setChecked(true);
            female.setChecked(false);
            break;
        case "female":
            female.setChecked(true);
            male.setChecked(false);
           break;
      }
      birthday.setText(parseDate(user.getBirthday()));
}

Now comes the insert or update logic when save button is pressed,

save.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        byte[] img;
        String gender;
        if (bitmap == null) {
            img = user.getPhoto();
        } else {
            img = convertBitmap2byte(bitmap);
        }

        if (female.isChecked()) {
            gender = "female";
        } else {
            gender = "male";
        }

        if (user == null) {
            user = new profileModel(
                        username.getText().toString(),
                        gender,
                        birthdate,
                        img);

            profilePojo.insert(user);
         } else {
             user.setGender(gender);
             user.setPhoto(img);
             user.setUsername(username.getText().toString());
             if (birthdate != null) {
                 user.setBirthday(birthdate);
             }
             profilePojo.update(user);
         }
     }
});

Before validating user emptiness, recollect data from main activity and set them into global variables. After that, create the user if it's empty and do insert operation, if it's not empty, do update operation.

Notice that we create two more method parseDate and convertBitmap2byte. The first one is used to convert a date variable into string.

private String parseDate(Date date) {
    Calendar cal = Calendar.getInstance();
    cal.setTime(date);
    int day = cal.get(Calendar.DAY_OF_MONTH);
    int month = cal.get(Calendar.MONTH);
    int year = cal.get(Calendar.YEAR);

    String sDay = String.valueOf(day);
    String sMonth = getMonth(month);
    String sYear = String.valueOf(year);

    sDay = addLeftZero(sDay);
    return (sMonth + " " + sDay + ", " + sYear);
}

The second one is used to convert a bitmap image into byte array to store it into database instead of creating new folder on gallery.

private Bitmap byteArray2Bitmap(byte[] bitmapdata) {
    return BitmapFactory.decodeByteArray(bitmapdata, 0, bitmapdata.length);
}

Aaaand... that's it. Now we have a functional profile activity, the next post will be the last one of this series, checking a little bit of designing. I'm not really good at it, but I'll try my best to bring something interesting.

As always, the project can be forked on github for the purpose you want to give it.

How to create an Android App: Android Room

EdRome — Thu, 29 Aug 2019 19:16:01 +0000

Hi again (x3) everyone!

We’re almost done with all app functionality, missing the saving mechanism. Once the user has filled his information, then it has to be saved on database to avoid the user fill it again and again.

Android support either SQLite or Room, I prefer the second one because adding queries and modifying columns it’s easier. Also, allow singleton instance, and asynchronous task.

As we establish on the last post, the readability is important and the way to accomplish it is by creating packages where classes are going to be stored.

Inside gradle add the following implementations. They will add android room annotations that are very important.

    implementation 'androidx.room:room-runtime:2.1.0'
    annotationProcessor 'androidx.room:room-compiler:2.1.0'
    implementation 'org.jetbrains:annotations-java5:15.0'

Android Room needs four different classes:

Entity: it is table definition.
DAO: it has all queries available to be performed to the table.
POJO: here it is the DAO functionality
Room Database: here we create the database instance.

Start creating the package database, inside it we’ll create subpackages in case we want to add more tables. I suggest to structure all your database packages like this.

+-- com.main.package
|   +-- database
|      +-- dao
|      +-- entity
|      +-- pojo
|      +-- room

First we’ll create the entity, the name I chose is profileModel. The class needs a constructor either empty or not, prefered private attributes, getter and setters of every attribute, otherwise an error will be thrown.
The table design is as described below:

Columns name	Data Type	Attributes
profileID	Integer	Primary Key, Auto generate, Non null
username	String	Non Null
gender	String	Non Null
birthday	Date	Non Null
photo	byte[]

As you can see we add a primary key auto generated, every column might be non null except for photo, allowing the user to either select or not a profile photo.

Add the annotation for every column, and generate the constructor including getters and setters. Note the “Entity” annotation at the beginning of the class, it tells android that this class is a table and its name is profile.

@Entity(tableName = "profile")
public class profileModel {

    public profileModel(@NonNull String username, 
                        @NonNull String gender, 
                        @NonNull Date birthday, 
                        @NonNull byte[] photo) {
        this.username = username;
        this.gender = gender;
        this.birthday = birthday;
        this.photo = photo;
    }

    @NonNull
    @PrimaryKey(autoGenerate = true)
    private Integer profileId;

    @NonNull
    private String username;

    @NonNull
    private String gender;

    @NonNull
    private Date birthday;

    @NonNull
    private byte[] photo;

    @NonNull
    public Integer getProfileId() {
        return profileId;
    }

    public void setProfileId(@NonNull Integer profileId) {
        this.profileId = profileId;
    }

    @NonNull
    public String getUsername() {
        return username;
    }

    public void setUsername(@NonNull String username) {
        this.username = username;
    }

    @NonNull
    public String getGender() {
        return gender;
    }

    public void setGender(@NonNull String gender) {
        this.gender = gender;
    }

    @NonNull
    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(@NonNull Date birthday) {
        this.birthday = birthday;
    }

    @NonNull
    public byte[] getPhoto() {
        return photo;
    }

    public void setPhoto(@NonNull byte[] photo) {
        this.photo = photo;
    }
}

Tip: You can press alt+insert or right-click generate to popup a generate menu.

Select all columns excluding the primary key and press ok.

These steps also work for getter and setter, in that case you might select all columns, including primary key.

The DAO will be interface instead of classe, containing all table operations like inserts, queries, deletes and updates. For this tutorial purpose, we'll define an insert, an update and a query.

@Dao
public interface profileDAO {

    @Insert
    void insert(profileModel profile);

    @Update
    void update(profileModel profile);

    @Query("SELECT * FROM profile WHERE profileId = :id")
    profileModel getProfile(Integer id);

}

Once the entity and DAO are create, we add the database room class. It has to be abstract, with an annotation at the top of it. This annotation indicates the entities contained inside the database, along with a version number, that has to increase each time you do a change on the entity, and an exportSchema indicator, it is defined as false for this series.

@Database(entities = {profileModel.class}, version = 1, exportSchema = false)
public abstract class databaseRoom extends RoomDatabase {

    public abstract profileDAO foodsDao();

    public static volatile databaseRoom INSTANCE;

    public static databaseRoom getDatabase(final Context context){
        if (INSTANCE == null){
            synchronized (databaseRoom.class){
                if (INSTANCE == null){
                    INSTANCE = Room.databaseBuilder(
                                   context.getApplicationContext(),
                                   databaseRoom.class,
                                   "profile_database")
                               .fallbackToDestructiveMigration()
                               .allowMainThreadQueries()
                               .build();
                }
            }
        }
        return INSTANCE;
    }

}

When all files are ready, then we create a POJO class that will be the one used to perform operations inside our database.

public class profilePOJO {

    private profileDAO mProfileDao;
    private profileModel mProfile;

    public profilePOJO(Application application) {
        databaseRoom db = databaseRoom.getDatabase(application);
        mProfileDao = db.foodsDao();
    }

    public profileModel getProfile(Integer id) {
        return mProfileDao.getProfile(id);
    }

    public void insert(profileModel profile){
        new insertAsyncTask(mProfileDao).execute(profile);
    }

    private static class insertAsyncTask extends AsyncTask<profileModel, Void, Void> {

        private profileDAO mAsyncTaskDao;

        insertAsyncTask(profileDAO dao){
            mAsyncTaskDao = dao;
        }

        @Override
        protected Void doInBackground(final profileModel... profiles) {
            mAsyncTaskDao.insert(profiles[0]);
            return null;
        }
    }
}

Aaand.... we're going to leave it here or the post will be to large for reading.

As always, I share the link to this project on GitHub. Feel free to use it as you wish.

Edit: I forgot to add Dao annotation. Sorry for that

Adding ads to OpenSource projects

EdRome — Sat, 24 Aug 2019 17:07:44 +0000

Hi all,

I'd started my day as always and, when I was checking Twitter, I saw a post with an image showing somebody on github running an experiment about new ways to fund projects.

What's the experiment? Whenever standard 14 is installed, we'll display a message from a company that supports open source. Currently, these are Linode and LogRocket. The sponsorship pays directly for maintainer time. That is, writing new features, fixing bugs, answering user questions, and improving documentation.

I understand how complicated is receiving support to OSS, specially when nobody wants to support your project but there are lot of downloads. In my opinion, there should be better ways to earn money instead of showing ads on terminals, we just have to go deeper and find it out.

What do you think? Do you have a better idea to fund projects?

Here's the issue on github if you're interested in check it out.

How to create an Android App: picture picking

EdRome — Thu, 22 Aug 2019 20:30:10 +0000

Hi again (x2) everyone!

The last post we talk about the datepicker and name text view, because we already review radio buttons then we’ll check profile photo changing. We’ll use the Circular Image View from mikhaellopez package; Glide, an easy way to load and caching images; Image Cropper, a really useful library if you want to crop a image to make it fit inside a component; and Dexter, a really easy way to ask for permissions.

Let’s start with the following implementation inside app build gradle

implementation 'com.mikhaellopez:circularimageview:4.0.1'
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.karumi:dexter:5.0.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
api 'com.theartofdev.edmodo:android-image-cropper:+'

On our content main, go to text edition and add the CiruclarImageView component, define a size on width and height attributes. Also select an image to visualize the component in the design layout.

<com.mikhaellopez.circularimageview.CircularImageView
    android:id="@+id/profile_imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:contentDescription="@string/nav_header_desc"
    android:src="@drawable/baseline_person_outline_24px"
    android:onClick="showPictureDialog"
    app:layout_constraintBottom_toTopOf="@+id/profile_username_edittext"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/profile_photo_textview" />

I set a default image to circular image. I get it from material.io resources are free.

The component need a logic to allow user take a picture or select one from gallery. The functionality is done by using android imagecropper, additional, into the manifest, permissions will be added.

<manifest>

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />

    <application>
        ....
        <activity
            android:name="com.theartofdev.edmodo.cropper.CropImageActivity"
            android:theme="@style/Base.Theme.AppCompat" />
    </application>

</manifest>

To maintain readability in the project, we will create a package named utils where photo selection logic is going to be located. Package creation is done by right clicking over main package, then new, and package. Enter a name, in my case is utils.

Once the package is created, right click again over utils package and select the Java Class option

Pick up a name to the class (mine is photo), after this process we’ll write down a small functionally that invoke dialog where let the user take a photo or pick it from various sources. The method is static because it’s not necessary to create an object and store it in memory.

public static void choosePhoto(Activity activity) {
    CropImage.activity()
             .setGuidelines(CropImageView.Guidelines.ON)
             .start(activity);
}

Subsequently, in Main activity java class, we’ll add severus methods explained below.

First, a method to be called when Circular image view is clicked. As I said in the previous post, to create a method to be called an onClick event it has to be public, void, with a formal parameter of type View. Inside this method, it’ll call our method displaying the dialog to the user to let him select a source for his photo.

public void showPictureDialog(View view) {
    photo.choosePhoto(this);
}

When the image has been selected, then we override an onActivityResult method that put the image onto the Circular Image View when selected.

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {

    super.onActivityResult(requestCode, resultCode, data);
    if (resultCode == this.RESULT_CANCELED) {
        return;
    } else if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
        CropImage.ActivityResult result = CropImage.getActivityResult(data);
        if (resultCode == RESULT_OK) {
            Uri resultUri = result.getUri();
            try {
                Bitmap bitmap = MediaStore.Images.Media
                                 .getBitmap(this.getContentResolver(),resultUri);
                Glide.with(this).load(bitmap).into(imageview);
            } catch (IOException e) {
                e.printStackTrace();
            }
        } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
            Exception error = result.getError();
        }
    }
}

Moreover, the user needs to give us the sufficient permissions to access to his media content. Dexter is another library that simplify this task by implementing a couple of methods. (I’ll explain the easiest part, so if you want to go in deep with all available functions, please refer to its documentation, I’ll list all libraries at the end of this post)

private void  requestMultiplePermissions(){
    Dexter.withActivity(this)
          .withPermissions(
                    Manifest.permission.CAMERA,
                    Manifest.permission.WRITE_EXTERNAL_STORAGE,
                    Manifest.permission.READ_EXTERNAL_STORAGE)
           .withListener(
               new MultiplePermissionsListener() {
                   @Override
                   public void onPermissionsChecked(MultiplePermissionsReport report) {
                       // check if all permissions are granted
                       if (report.areAllPermissionsGranted()) {
                           Toast.makeText(getApplicationContext(), 
                                       "All permissions are granted by user!", 
                                       Toast.LENGTH_SHORT).show();
                        }

//                      check for permanent denial of any permission
                        if (report.isAnyPermissionPermanentlyDenied()) {
                            // show alert dialog navigating to Settings

                        }
                    }

                    @Override
                    public void onPermissionRationaleShouldBeShown(
                                   List<PermissionRequest> permissions, 
                                   PermissionToken token) {
                        token.continuePermissionRequest();
                    }
                }).
                withErrorListener(new PermissionRequestErrorListener() {
                    @Override
                    public void onError(DexterError error) {
                        Toast.makeText(getApplicationContext(), 
                                      "Some Error! ", 
                                      Toast.LENGTH_SHORT).show();
                    }
                })
          .onSameThread()
          .check();
}

We use the main object Dexter, telling them that we want permission on camera, in addition to write and read storage. It’s possible to implement a listener, there you can implement actions when the user deny the access or you want to show a permissions dialog to the user. Finally, when an error occurs, you can show a message linked to more routines.
The method we just created is going to be called inside onCreate method, important thing to note, you have to initialize the image view, otherwise you’ll get a null pointer exception.

And that’s it, now you have a full functional picture picker either taking it with the camera or selecting it from internal/external storage.

As I said, here’s the links to all libraries’ documentation.

Dexter
Glide
CircularImageView
Image Cropper
material.io

Here it is the link to the github project

How to create an Android App: Datepicker

EdRome — Thu, 15 Aug 2019 16:23:54 +0000

Hi again everyone

First of all, thank you very much for all the support on the previous post, I can't believe it has a lot of reactions :)

During the previous post we review the project creation, some basics on design, and adding some basic components. Continuing from the last checkpoint, the topics for this post will be:

Write functionality to allow the user write his username, considering some limitations.
Code a datepicker that popup when user click on text view.

For username functionality the limitations will be:

User can pick any kind of characters either numbers, letter, or special characters; except new lines. The field may have a limited length of 15 characters. For datepicker the idea behind is:
The datepicker needs to popup when the user click on a textview.
The datepicker has to read the user selection.
Once the date is selected, the textview may show the full date.

As said, the first functionality to check is the field for user name, considering the limitations previously mentioned. I’ll show all images about configuring all attributes, when everything is set up, then I show the code.

We’re going to see our design and open the attributes

As you can see, the default inputType is textPersonName, but we can changed to whatever we want (or at least whatever is available) clicking on the flag side left of textPersonName text, you should see something like this.

To us, the default selection is functional. Now go down on your attributes menu and look for maxLength attribute. After we locate the attribute, we’ll set 15 as max length.

Other limitations mentioned is to allow the user just write one line for his username. As previously, go down on your menu looking for singleLine attribute and change it to true.

Our XML code should look like this. As I said, you can prefer coding it instead of searching for the attributes on the menu.

    <EditText
        android:id="@+id/profile_username_edittext"
        android:layout_width="207dp"
        android:layout_height="45dp"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:maxLength="15"
        android:singleLine="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.172"
        app:layout_constraintStart_toEndOf="@+id/profile_username_textview"
        app:layout_constraintTop_toBottomOf="@+id/profile_photo_textview" />

With this, the functionality described is done (yes, this fast and easy). It’s time to raise the difficulty. Android allow us to select an EditText with inputType date, but it only show the keyboard and let you write your date, as developers we should imagine that anything that could go wrong, will actually go wrong with the user interactions. That's the reason we're going to use a datepicker, creating an easy-to-use mechanic.

Go to your main activity class and declare four variables at the top of the class, before our first method; remember to make all of them private.

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    private TextView birthday;
    private int mYear;
    private int mMonth;
    private int mDay;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
//        FloatingActionButton fab = findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);

        birthday = findViewById(R.id.profile_birthday_textview);

    }

Inside the onCreate method initialize birthday variable with a findViewById. If you don't initialize your variable, the IDE won’t tell you about an error and you won't notice it until running it, crashing the application because of a null pointer exception.

Later, create a method inside this class, I’ll name it pickDateOnClick. The method has to require a parameter of type View, has to be public, and return nothing, that is, void.

Note that every time you create a method to be performed on click event, it has a view parameter of type View, otherwise, the IDE will show you a syntax error, saying your method doesn’t exist even you coded it in the right way.

Inside the method pickDateOnClick, we’ll create:

Calendar instance (getting today’s date)
Date picker dialog using android widget. It’ll require you to implement the method onDateSet, the IDE won’t let you skip this warning, and also the most important part of the code will be written there.

Your code should be similar to this.

Important note: Calendar instance needs to be final, in other words, our c variable can’t be modified. Remember, final keyword is to let a variable be assigned once.

final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);

DatePickerDialog datePickerDialog = 
    new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
               @Override
               public void onDateSet(DatePicker datePicker, int i, 
                                      int i1, int i2) {

               }
    });

As you might notice, our date picker dialog implementation has three variables, i, i1, and i2. These variables mean to be year, month, and day respectively. In my personal opinion… they’re not understandable, and to tackle down the meaning of every one of them you have to debug and evaluate their values, awful. For the sake of our mental health, we change it to their corresponding variable names.

Calendar widget has to be initialized, too; else it throw an error. The initialization corresponds to the initial date the widget will show. Here’s when our global variables enter in action, after the second curly bracket, before the parenthesis and semicolon we add the year, month, and date, separated by comma. At this point, your code is something akin this.

final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);

DatePickerDialog datePickerDialog = 
    new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
               @Override
               public void onDateSet(DatePicker datePicker, int year, 
                                      int month, int day) {

               }
    }, mYear, mMonth, mDay);

We’re not far away to accomplish our goals, keep it up.
The logic inside our datepicker implementation is the following:

Convert input variables into string
Convert month number into month name
Add missing zero to day
Show final text

The reason of converting the input variables into string is to concatenate them into a single string with the date.

We’ll create one more method in the main class named getMonth, the logic of this method is getting the month name using DateFormatSymbols.

private String getMonth(int month){
    return new DateFormatSymbols().getMonths()[month];
}

This section is optional, you can bypass it to continue with the rest of the code, implying no impact in the results.

Further you need to translate or convert the month into something else, for example, I’m a Spanish speaker, so I’d want the month in Spanish. This achievement will be done by creating a Map<Integer, String> variable.

private Map<Integer, String> monthTranslation = new HashMap<>();

I’ll populate this variable inside the onCreate method, remind to start from 0.

monthTranslation.put(0, "Enero");
monthTranslation.put(1, "Febrero");
monthTranslation.put(2, "Marzo");
monthTranslation.put(3, "Abril");
monthTranslation.put(4, "Mayo");
monthTranslation.put(5, "Junio");
monthTranslation.put(6, "Julio");
monthTranslation.put(7, "Agosto");
monthTranslation.put(8, "Septiembre");
monthTranslation.put(9, "Octubre");
monthTranslation.put(10, "Noviembre");
monthTranslation.put(11, "Diciembre");

Next, go to your method getMonth and make a get from your map variable (in my case is monthTranslation)

private String getMonth(int month) {
    return monthTranslation.get(month); Translation
}

And here you go, you got month in Spanish. Returning to our main objective.

The fourth point is adding a zero to the left in our day variable. I opt to complement the variable with a zero because my perception says it looks great.

One more method will be created, on our main class, with a string parameter and returning a string. The logic is checking the parameter length, if it’s lower than 2, that is 1, then we add a zero behind the parameter, and otherwise stay the same. I made use of ternary operator to avoid adding unnecessary lines.

private String addLeftZero(String s) {
    String newString = (s.length() < 2) ? "0"+s : s;
    return newString;
}

The final part is joining everything together inside the datepicker implementation. We’ll convert day and year to string, month stay integer but is parameter for our method getMonth.
String day is parameter of addLeftZero method, to lastly concatenate everything together in the textview.
So your code should be like this

    public void pickDateOnClick(View view) {
        final Calendar c = Calendar.getInstance();
        mYear = c.get(Calendar.YEAR);
        mMonth = c.get(Calendar.MONTH);
        mDay = c.get(Calendar.DAY_OF_MONTH);

        DatePickerDialog datePickerDialog = new DatePickerDialog(this, 
                 new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker datePicker, int year, int month, int day) {
                String sDay = String.valueOf(day);
                String sMonth = getMonth(month);
                String sYear = String.valueOf(year);

                sDay = addLeftZero(sDay);

                birthday.setText(sMonth + " " + sDay + ", " + sYear);
            }
        }, mYear, mMonth, mDay);
        datePickerDialog.show();
    }

I almost forget it!, don’t miss to add a show to your datepicker variable, contrarily it won’t be shown in your screen.

To finalize all functionality, we return to the design, select your textview appointed to be the datepicker and look for the onClick attribute on the attributes menu, editing it with the datepicker method name.

All code shown here is public on github, feel free to make use of it.

How to create an Android App Part 1

EdRome — Thu, 08 Aug 2019 22:12:42 +0000

Hi everyone!

I’ll start a tutorial, written on Java, on how to develop an app that manage user profile, the basic functionality will be:

Editing user name
Choosing gender
Choosing birthday
Changing profile photo user
Store profile in a database

Based on described functionality, the content has the following topics:

Starting a new Android project and first steps
Date pickup
Operating camera
CircularImageView
Playing around slide menu
Operating Android Room database

All content will be partitioned into various parts, updates will come once a week. The code will be updated here

To begin, once android studio is opened, we create a new navigation drawer activity. I recommend to use the navigation drawer activity because it provides a ready-to-use slide menu (and it looks great for profile editing)

We’ll choose application’s name, in my case it is ProfileApp. I recommend to change package name to one more appropriate, as I show below.

Don’t forget to properly select your save location!

The application start with a content_main, having a hello world text, a floating button and a navigation bar.

As it, the application can run an show the slide bar functionality, but it’s far away from our main objective. Meaning we need to do the following modifications.

Remove floating button by editing the XML code on app_bar_main layout. You can choose between commenting or removing it. I prefer to comment it just in case we need to use it further steps.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <!--<com.google.android.material.floatingactionbutton.FloatingActionButton-->
        <!--android:id="@+id/fab"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="bottom|end"-->
        <!--android:layout_margin="@dimen/fab_margin"-->
        <!--app:srcCompat="@android:drawable/ic_dialog_email" />-->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Remove code from main activity, otherwise it’ll throw an error. Again, you can prefer removing it instead of commenting it.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
//        FloatingActionButton fab = findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }

Into content_main.xml we add TextView and EditText to let user enter name, gender, birthday, profile photo, and a button to save information. The id of each component has to be adjusted to something understandable, just imagine yourself looking into a bunch of id’s all similar to each other, horrible.

If you're like me, spending hours trying to figure out the variables or id names I suggest to predefine a nomenclature, so your variable/id convention name would be easy. For example, my name convention for component’s id is “component purpose”_”component description”_”component type” giving me names like profile_photo_textview, profile_username_textview, etc. You can take a look at the github project link.

When all textviews are inserted (consider at this point we’re not looking at design), add a edit text just for name, the other ones will be using a different type of component that we will review later on.

As you have already noticed, android has a variety of edit text, everyone of them has its own purpose. We won’t review every single of them, but I provide a brief description of the ones we will be using.

For username we will insert a plain text edit text, to let the user be able to write down the username of his choice. It allow all kind of characters, no limits.
To select gender the most common alternative is a radio button. Radio buttons are different from others buttons because you’re just allowed to select one option or another, but by default radio buttons itself haven’t that property; to create that behavior it’s necessary to create a radio button group. Android has that option on palette -> buttons -> RadioGroup.

Then drag & drop the object, position it wherever you have you select gender option (mine is in front of its text view) and make it as big as you want. Don’t worry about the size at first, we can adjust it latter.

Once the radio group is set, drag & drop two radio buttons inside it. Select just your radio group and, on your attributes (the panel at right) set an id, because that would be the name of the group for your radio buttons.

Change id and text for your radio buttons.

Now is just missing the birthday option, I really like the text view option, because it would be able to play around in an easy way around it. I want to write full date inside that text view using a date picker inside it.

After all that, the result would be something like this. One additional step is create constraints, although we’re just inferring constraints to not complicate to much this post.

As you can see, there’s still a lot to do to improve design and functionality, but I think is enough for this one post.

Hi community

EdRome — Sat, 01 Jun 2019 17:50:17 +0000

Hey everyone, I just reach out this page while reading comments on Twitter and I'm pretty excited to share with all of you my recent knowledge on Machine Learning.
I just start a new project a couple of weeks ago, deciding to leave my last job to accomplish that objective. Taking advantage of that situation, I resolved to use this platform to write what I've been founding out there, posting errors with quantifier documentation, share code and try to help and be helped by all of you.
Also, English is not my mother language, so surely you'll become aware of some errors.