DEV Community: Raul Montero

Remove committed file from a repository

Raul Montero — Thu, 31 Oct 2019 14:30:27 +0000

No matter what kind of project you are working on, they all have auto-generated files that don’t need to go inside the remote repository, but more often than not, we find ourselves working on projects that have those files already pushed and end up having to deal with conflicts that could have been avoided otherwise.

Thankfully, there is a way to remove those files and make sure no other developer commits them ever again.

1. Remove the file locally

git rm -r --cached route/to/file.cs

2. Prevent the file to be added ever again by adding it to the .gitignore definition.

Open the terminal and navigate to the root of your project folder
Enter open .gitignore to open the gitignore file in your default text editor. If you don’t have one you can find one configured for your specific project in gitignore.io.
Add the relative path of the file you wish to ignore. Here’s a sample ignoring the AndroidResource.designer.cs of a xamarin project

# http://Xamarin.Android Resource.Designer.cs files

**/*.Android/**/[Rr]esource.[Dd]esigner.cs
**/*.Droid/**/[Rr]esource.[Dd]esigner.cs
**/Android/**/[Rr]esource.[Dd]esigner.cs
**/Droid/**/[Rr]esource.[Dd]esigner.cs

3. Stash changed files

git add route/to/file.cs && git add .gitignore

4. Commit changes

git commit -m "Removed auto-generated [file] from repository"

5. Push changes

git push origin master

Mobile releases made easy with Appcenter.

Raul Montero — Thu, 10 Oct 2019 00:32:34 +0000

This article is part of the October xamarin best practices challenge

Release, deployment, and distribution are some of the words we use to refer to the process of putting the latest features and enhancements of our application at the hands of our users. In the context of mobile apps, this translates to the process that allows our users to download the latest version of the app to see what’s new.

This is a process that tends to grow in complexity as our application evolves, needing more checks, validations, scripts to be run, testing environments to be created and so on, to ensure everything works and the users get the best experience possible. As you might expect, this causes the releases to become more delicate and error-prone (when done manually) as the time passes and therefore taking longer to arrive at our user’s hands.

With Appcenter your app is a couple of clicks away from your users, every time, in every platform.

Thankfully, it doesn’t have to be like this. With tools like Appcenter, we can automatize most (if not all) of the steps of our release process to significantly reduce its complexity. Here, we are going to walk through the process of creating a release using the appcenter email release and while at it, understand the configuration options available to us..

Connect your apps to appcenter

The first thing we need to do is access Appcenter’s website and log in using your preferred service. It currently supports Microsoft, Github, Facebook, and Google.

Once you are inside, you should see a screen similar to this one.

Appcenter start screen

Click on the Add app button to start configuring our application.

You will notice you’ll need to configure an app for each platform you support, even if you are using a cross-platform technology. For our case, we are going to use xamarin with apps releases for android and iOS. Fill in the name and platform of the app and click Ok to display it on the dashboard.

This is how the app setup looks like for the android app. For iOS, the configuration is the same, except we’ll select iOS instead.

Define applications on AppCenter

Once that’s done, your dashboard will be updated with two new applications, one for android and another for iOS.

Dashboard with apps

The last thing we need to do is to connect these applications to the repository where the source code is located.

To do so, we select either one of the applications available on the dashboard and once inside select the Build option from the side menu. There you will find the available repository services Appcenter supports, find yours, look for your repository and click ok.

Connect to repository

After that, you should be able to see all the branches available from your repository indicating that the connection was performed successfully.

Connected repository

Defining automatic builds

The next thing in the list is to configure the build so it knows how to build (and run) our app automatically, whenever new changes are added.

Since we are already in the build tab of our application (from the previous step), we just need to select which branch we want to build and click on the Configure Build button on the next screen.

Create build configuration

This action will display a side screen with all the options available for us to customize our build.

Build configuration details

It can be a bit overwhelming at first, but it’s actually quite simple once you understand the basics around it. Let’s dive into each option to see them in detail

Project : The .csproj file to build upon
Configuration: The build configuration to use, either Debug or release for android and additional AdHoc and AppStore for iOS only
SDK Version : The version of Xamarin.Android or Xamarin.iOSwe’ll be using to build our project.
Build Scripts: Scripts to be run before or after the build is executed.
Build Frequency: Either build this automatically on every push or manually whenever we click the build button directly on Appcenter.
Android App Bundle: Specific to Android, tells Appcenter to use the new distribution mechanism for android apps. More info here
Increment version code: Automatically increment the build version of the app each time the build is run. This is especially useful if you are distributing to the stores where each build number must be unique.
Environment Variables: This allows you to provide placeholders in your configuration files that are later replaced with the values provided here. Really useful when dealing with sensitive data you don’t want to store in the repository or values that change depending on the environment the app is run on.
Sign Builds: We will see more of this later. For now, you can think of sign build as a way to certify the app’s binary to be safe to use and not harmful for users.
Test on a real device: Configure UI Test to run on real devices available on the Appcenter’s device farm.
Advance: Build Status Badge: Link to the badge with current build status. This is usually found in readme-files in repositories.

With this new knowledge, it’s time to create our own build configuration that will let us know that our application was built correctly and was able to be launched on a real device.

Our setup will be as follows:

Set the project to the android/iOS .csproj file
Set the configuration to Release mode on Android and Ad Hoc for iOS.
Set the build frequency to build on every push
Enable the Android app bundle when building the android app
Enable test on a real device to be sure it can be launched.

Basic Build configuration

After setting the configuration, we should be able to create a build and be sure our app is building correctly without issues. Press the Save and Build button to start running the build and after it finishes, you should see a screen similar to the one below, with all the logs, details and final status of the build performed.

Buil output

Add release configuration

Now that we are able to create builds automatically, we can focus on how to distribute it to users by email. To do so, we need two things:

Sign Builds.
Add Sign build configuration to our build process in AppCenter.

What is a signed build? Basically, it’s the signature of the author and it’s used to claim ownership of a given application. Without it, you can’t publish your app to either of the stores (AppStore or Play Store) or even run it on a real user’s device, so in order to distribute our app, we first need to have it properly signed.

The signing process of each platform is different and therefore requires different configuration steps to be performed for Appcenter to validate it as a signed build., we will see them in detail.

Sign Android builds

The signing process in Android is straight forward, we just need to generate a keystore file and connect it to the build configuration we already have in place.

To create the file you can follow the official android guide or if using Xamarin, you can use Microsoft’s guide using Visual Studio

With the keystore file at hand, we go to the build configuration (for our android app) in Appcenter and enable the sign builds option. We’ll need to attach the file and provide the keystore’s password and alias.

Sign Android Builds

Sign iOS builds

Unlike Android, Apple doesn’t allow us to run our app on just any device, not even on our development environment, to do so, we must sign our builds using two files:

Provisioning Profile (.mobileprovising)
Certificate (.p12)

Those files are created in our account inside the Apple developers portal, there we will need to specify which devices can install our app and what kind of services it will be using, then we’ll download the mobileprovising which contains all these details, along with a certificate file that must be installed on our mac which validates our identity as a developer of our app.

For a detailed guide on how to get those files, you can see the official guide or use Microsoft’s guide for a more visual walkthrough.

Same as with android, now that we have the required files, we go to the build configuration (for our iOS app) in Appcenter and enable the sign build option, attaching the necessary files and providing the certificate password as well.

Sign iOS Builds

Releasing the app

With the signed builds in place we have only one thing remaining, distribute the app to our users. We do so by enabling the option “Distribute Build”.

Distribute Release

Here you will see two options: Groups and Store. With groups, we’ll distribute it to a specific number of users via email while store will connect to the platform’s application store and distribute it directly there.

In this case, we will focus on the first one, groups. This is a good option when you want to deliver internal builds for testing purposes or even to provide key people with the latest available build.

There are two things to take into account in order for this to work properly:

On android, be sure to enable “applications from unknown sources” option on the device the app is going to be installed on.
On iOS, be sure the provisioning profile type is either Apple distribution or iOS distribution and includes all the services your app is using.

Finally, if you want to modify the distribution list, you can do so by going to the distribute/groups option on the side menu and create additional user groups and add as many members as you need.

Distribution list configuration

Final thoughts

Awesome!, at this point, we have configured Appcenter to release a new version directly to our users every time a new change is added, automatically, without further interaction, allowing us to focus our efforts on other things, like creating more features and enhancements for our app.

The best thing is, once you get used to the process, it becomes a matter of minutes to configure an automatic release pipeline on any app you work with.

A thing to notice here is that the release we just did is simple, in a production application we might need extra configuration to be done before releasing the app to our users. Thankfully, Appcenter has a few tricks left that enable support for more complex scenarios, such as:

Running pre and post scripts.
Updating the value of different configuration variables, depending on the release type.
Releasing the app directly to the platform’s application store for alpha, beta and production release.

Unfortunately, they didn’t make it into this post so it wouldn’t become too big and tedious to read. Nonetheless, they are important topics and we’ll be talking about these topics in a future post to make our release process as smooth as possible.

Recyclerview basics (Part 2): Adapters and ViewHolder

Raul Montero — Thu, 21 Mar 2019 22:08:17 +0000

Welcome back! After having an introduction to what the recyclerview is, it is time to start digging into the details.

This time, we will be talking about the adapter and viewholder objects and how they work together. At this point, we know what they are and what roles they play, now it is time to take that knowledge into practice.

If this doesn’t make a lot of sense to you yet or this is your first post of the series, spare a couple of minutes to read theintroduction to the recyclerview and then come back.

Step One: Define our tasks.

The first step to accomplishing anything is to have a clear goal and a series of steps and tasks to help us get us there. In this case, our goal is learning about adapters and viewholders and to achieve that, we are going to use a sample project, something simple that can illustrate the main usage of the adapters and viewholder without worrying too much about other details.

This android application will list all the countries with name and flag of all the folks that have come here to read at least once. When we are done we should have something similar to the image below

Step Two: Add UI and resources.

Now with a clear goal to pursue, the next step is adding the visual resources that the user will be interacting with, in this case, the flag images and the layout of the elements (more on this later).

Adding flag images

For now, we are just going to import the images into our project to be able to use them when we are creating the UI (on a later step).

To get the images, simply go here and copy all the drawable folders into your project’s res folder and wait for the project to sync.

Creating the UI

The recyclerview has three components it uses to display data to the user:

The recyclerview tag inside the fragment or activity that will contain it.
The Layout that describes how to display each individual element of the recyclerview.
The LayoutManager that describes how the elements are arranged inside the recyclerview.

We first start defining the recyclerview tag. In our case, we just need to edit the activity_main.xml layout file, removing all but the root container and then adding the recyclerview tag, ensuring it takes all the available space, as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              xmlns:tools="http://schemas.android.com/tools" 
              android:layout_width="match_parent" 
              android:layout_height="match_parent" 
              tools:context=".MainActivity" 
              android:orientation="vertical"/> 

    <android.support.v7.widget.RecyclerView 
            android:id="@+id/countryRecyclerView" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            tools:listitem="@layout/country_item" /> 

<LinearLayout/>

With that set, we can continue with the layout for each of the elements. Defining the layout is very straightforward, similarly to what we did before, we create a new xml layout file inside the layout folder, name it country_item.xml and define it’s content the same way we would do with an activity or fragment.

In our case, to keep it simple, we just have the flag image on the left side, the text on the right side and a view serving as a line separator for each element. Here’s the code:

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="@dimen/country_item_size">
    <ImageView
            android:id="@+id/countryFlag"
            android:layout_width="@dimen/flag_size"
            android:layout_height="match_parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:srcCompat="@drawable/dominican_republic"
            android:padding="@dimen/normal_padding"
            android:contentDescription="@string/country_flag_description"/>
    <TextView
            android:id="@+id/countryName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@id/countryFlag"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="Dominican Republic"
            android:textSize="@dimen/normal_text_size"/>
    <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/country_element_separator"
            app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

A few things to notice here:

I used a ConstraintLayout because I find it easier (and more performant) to describe the layout this way, this is not the only way to do it, you could have used a LinearLayout or even a GridLayout.
I use @dimen/key and @color/key to prevent using hardcoded size and color values. This works just like @strings/key and the strings.xml file.
I avoid using match_parent on the height property to prevent a single element from taking all the screen space. In this case, I used a specific value but wrap_content could be used if it made sense to you.
I use the tools namespace to define values that are only visible for the previewer such as the name and image of the country.

What about the layout manager? Well, for this case, we are going to use the LinearLayoutManager object which organizes the layout into a list of elements where each row takes all the width available, we are setting it up in our final step.

Step Three: Implementing the Adapter and ViewHolder classes

With all the resources at hand, we can now focus on getting data to the recyclerview. We do that with the adapter and ViewHolder objects.

If you remember from the last post, the adapter object is in charge to get data from the model, process it and send it to the recyclerview using ViewHolder objects as a way to bind (display) the data to the UI since they are representations from the kotlin/java side of each row’s element.

With that said, it is time to create our adapter class and get the data through. The first step is creating the adapter and viewholder classes each one inheriting from their corresponding superclasses

The adapter class inherits from Adapter<VH extends RecyclerView.ViewHolder>
The viewholder class inherits from RecyclerView.ViewHolder

Then, we will have to implement the inherited methods from the base adapter class, each one with a different purpose:

OnCreateViewHolder: Returns the viewholder (representation from kotlin/java code) for each row
GetItemCount: Returns the total number of elements
OnBindViewHolder: Bind the data from the model to the UI

When we add all that, we end up with the skeleton code for both classes, as follows:

package com.raulmonteroc.countryflags
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import com.raulmonteroc.countryflags.CountryAdapter.FlagViewHolder

class CountryAdapter : RecyclerView.Adapter<FlagViewHolder>() {

    override fun onCreateViewHolder(p0: ViewGroup, p1: Int): FlagViewHolder {
    }

    override fun getItemCount(): Int {
    }

    override fun onBindViewHolder(p0: FlagViewHolder, p1: Int) {
    }

    class FlagViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

Now, it’s time to implement all the methods:

For the onCreateViewHolder , we just need to return a viewholder object and since the view holder constructor needs a view, we’ll just inflate the XML layout we just created earlier for the rows and pass that view instance to the new viewholder’s constructor.
For the getItemCount , we will pass a collection of elements to the adapter’s constructor to hold all the elements and use that collection’s size to return the number of elements involved.
For the *onBindViewHolder, * we will create a bind method on the viewholder object where we get the element from the layout(the layout we passed in the first method we implemented) and assign the values of the model object we pass through, just like we would do with any activity or fragment.

I know this could be a bit abstract without code to see, so here’s the completed adapter code with all the functionality described above.

package com.raulmonteroc.countryflags
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import com.raulmonteroc.countryflags.CountryAdapter.FlagViewHolder

class CountryAdapter(private val countries: List<Country>) : RecyclerView.Adapter<FlagViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FlagViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        val view = layoutInflater.inflate(R.layout.country_item, parent,false)
        return FlagViewHolder(view)
    }

    override fun getItemCount() = countries.size

    override fun onBindViewHolder(viewHolder: FlagViewHolder, position: Int) = viewHolder.bind(countries[position])

    class FlagViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        private val name:TextView = itemView.findViewById(R.id.countryName)
        private val flag:ImageView = itemView.findViewById(R.id.countryFlag)

        fun bind(country : Country) {
            name.text = country.name
            flag.setImageResource(country.flagImageResource)
        }
    }
}

Step Four: Connect the recyclerview to the activity.

Now that we have all the pieces working, what’s left is to connect them together, more specifically, make the adapter, recyclerview and activity work like a fine-tuned orchestra.

We do that by setting up some recyclerview properties and make sure they are called from the onCreate method, here are the steps:

Get an instance of the recyclerview using findViewById
Set the layout manager to the LinearLayoutManager to render the Recylerview as a list of items
Set the adapter property

package com.raulmonteroc.countryflags
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    lateinit var countryRecyclerView: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setupRecyclerView()
    }

    private fun setupRecyclerView() {
        countryRecyclerView = findViewById(R.id.countryRecyclerView)
        countryRecyclerView.layoutManager = LinearLayoutManager(this)
        countryRecyclerView.adapter = CountryAdapter(CountrySeed().seed())       
    }
}

You can note here a seed() method is passed when initializing the adapter, this is simply to provide the data the recyclerview is going to display.

Here’s the code

package com.raulmonteroc.countryflags
class CountrySeed {

    fun seed(): List<Country> {
        val countries = listOf<Country>(
            Country("Brazil", R.drawable.brazil),
            Country("Canada", R.drawable.canada),
            Country("China", R.drawable.china),
            Country("Dominican Republic", R.drawable.dominican_republic),
            Country("Germany", R.drawable.germany),
            Country("India", R.drawable.india),
            Country("Netherlands", R.drawable.netherlands),
            Country("norway", R.drawable.norway),
            Country("Peru", R.drawable.peru),
            Country("Philippines", R.drawable.philipines),
            Country("Poland", R.drawable.poland),
            Country("Romania", R.drawable.romania),
            Country("South Africa", R.drawable.south_africa),
            Country("Spain", R.drawable.spain),
            Country("Sweden", R.drawable.sweden),
            Country("United Kingdom", R.drawable.united_kingdom),
            Country("United States", R.drawable.united_states)
        )
        countries.sortedBy { it.name }
        return countries
    }
}

Coming up next

Now we got a working recyclerview, with data and a custom layout for its elements, and only with a bit of effort, that’s great right?.

Following up in our recyclerview series, we will be updating this project to enable the recyclerview to respond to touch gestures such as drag and swipes

See you then!

Recyclerview basics (Part 1): Introduction

Raul Montero — Thu, 14 Mar 2019 14:00:10 +0000

The Recyclerview is the replacement of the Listview with a simpler API, better performance and a couple of new nice extra features. If you don’t know what a ListView is, don’t worry, you won’t need to in order to understand the recyclerview, simply think of it as a UI component used to represent related items in a list with scrolling capabilities.

Components of a Recyclerview

The Recyclerview is mainly used to list related elements together, however, the way you do it can be dramatically customized to make your users have a unique experience in your app. Things such as determine how the elements are arranged together, enable custom views per element, respond to touch gestures, among other options, are available for you.

These options are not directly accessible from the Recyclerview object itself, instead, a group of related objects is used for each specific configuration, allowing for cleaner code and reusability.

Along the course of series we will be working with the most relevant components of the Recyclerview but for now, I’ll leave a little description as a tease to what we will working with next, here they are:

ViewHolder

The view holder object is a static representation of an element inside the Recyclerview, accessible from kotlin or java code. The main responsibility of the ViewHolder is to display each element with bound data from the adapter object.

Adapter

The Recyclerview doesn’t work with the data directly, it is only responsible for displaying it on the screen. The data management is done via an adapter object which in turn uses ViewHolder objects as containers for each element’s data. The adapter is tasked with three things:

Serve as an Intermediary between the model data and the Recyclerview object.
Bind the provided data to each ViewHolder object.
Determine which XML layout should be used to load the ViewHolders.

LayoutManager

The Recyclerview is in charge of the display of the elements of the list but the way it does that is delegated to a LayoutManager object. Android provides a few layout managers built-in such as the LinearLayoutManager and GridLayoutManager but you can also provide your own if you want a more tailored experience for your Recyclerview.

ItemTouchHelper

Once we have our adapter setup and our layout manager selected, we can enable our Recyclerview to respond to touch gestures such as dragging elements or swiping to the side. For these purposes, we use the ItemTouchHelper object.

Next Step

Now that we have a rough understanding of what a Recyclerview is, what the components are and what they can do, we are ready to start a small coding adventure.

On the following post, we will be working with the Recyclerview’s ViewHolder & Adapter components to create a simple list of elements to put all this theory into action.

Setup a splash-screen on Xamarin.Forms

Raul Montero — Tue, 26 Feb 2019 15:41:19 +0000

A splash screens it’s what we call to those screens that show up at the beginning of an app and last only while the application loads.

This is a common design pattern in general mobile development, allowing the user to receive feedback immediately after touching an app’s icon, showing them something right from the beginning instead of staring at a black screen until the application finishes loading.

Best of all, adding a splash screen is simple, so you’ll get a better user experience without much effort. Let’s begin!

Creating a splash-screen

Before we begin, we need to understand is that there is no cross-platform way of adding a splash screen. This is because of the Xamarin.Forms library loads after MainActivity/AppDelegate finishes loading and by that time it’s too late, we need something to display before and during those classes load, after all, that’s what splash screens are all about.

With that in mind, what’s left is to create the splash-screen file and configuration on each platform. In our case, the splash-screen will consist of a logo and a background color.

Android

The first thing we need is the logo image. Android defines how to add images and ensure it looks good on every platform, you can read about it here

After that, we are to create the splash screen file, which loads the image and sets the background we need. For that, we are going to define an XML drawable, here’s the code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"/>
    <item android:drawable="@color/splash\_background" />
    <item android:gravity="center"/> 
        <bitmap android:src="@drawable/splash" />
    </item>
</layer-list>

Here, we defined a layer-list which essentially allows us to have a background color and an image background at the same time, having the first <item> define the background color and the second one the image logo centered on the screen.

With that in place, then we define a new style to set this drawable as the background and ensure it takes up all the screen available on the device by removing any action/status bar, here’s the code:

<style name="Splash" parent="Theme.AppCompat.Light.NoActionBar"/>
    <item name="android:windowBackground"/>@drawable/splash/_screen/</item/>
    <item name="android:windowNoTitle"/>true</item>
    <item name="android:windowFullscreen"/>true</item> 
</style>

Finally, we create a new activity called SplashActivity where we configure it as the MainLauncher (be sure to remove it from the MainActivity.cs) and make it use the new style we defined.

Then, we start the MainActivity from the OnCreate() method, that way, it loads the screen that starts up the rest of the app once it’s ready.

[Activity(Label = "SplashActivity", Theme = "@style/Splash", MainLauncher = true)] 
public class SplashActivity : Activity 
{ 
    protected override void OnCreate(Bundle savedInstanceState) 
    { 
        base.OnCreate(savedInstanceState); 
        StartActivity(typeof(MainActivity)); 
        Finish(); 
    } 
}

Some additional notes :

The call to Finish is to ensure the activity doesn’t stay up on memory while the app is running since we won’t need it ever again.
We created a new activity instead of using the MainActivity because the drawable we defined becomes the background of the activity and therefore we would end up overriding the background property on each Xamarin.forms page.
We use an XML drawable and not a standard layout because this approach is much faster.

iOS

As with Android, on iOS we need to include the logo image according to the apple standards to ensure it looks good in all their supported resolutions, you can find the guide here.

With all the images at hand, it’s time to add it to our project and to do so we are going add them to a special folder called Assets.xcassets. We can find it on the iOS project section inside the solution explorer window.

Double click it and a new tab window will appear. Here, we will find a sidebar with name identifiers for the images (on the left side) and placeholders to put our images at the right side.

What will do next, is right-click on the sidebar and select new image set and give it a name (I used splash for mine). After that, what’s left is to add the images. Drag & drop the image files into the first row of placeholder boxes according to the resolutions defined by Apple.

Finally, what’s left is to update the LaunchScreen.storyboard to include our new image, define its constraints to ensure its always centered and set up the background color, all from the Visual Studio iOS designer, no code required.

If you don’t have a lot of experience working with the iOS designer, check out this guide from Microsoft which explains it step by step.

Find yourself a mentor

Raul Montero — Sat, 11 Aug 2018 01:13:43 +0000

Originally posted at https://raulmonteroc.com

What is a mentor?

There is a lot of definitions for a mentor, but the general idea is someone with vast experience in an area willing to teach/transmit that knowledge to someone else. Essentially, someone who takes the time to help you grow in a specific area.

Benefits of a mentorship

When I started developing software I had no clear path to what I wanted to do so I would pick up anything that seems interesting, no matter how unrelated it was from my tech stack or what would be the benefit of doing it. I was a drifting boat until I started meeting people sharing my interest but were a little bit ahead on the journey. They provided me with insight, experience and opened my eyes to new opportunities and ways to improve myself. This is what a mentor does.

The main reason to have one is to avoid tunnel vision about your future and your ideas

The main reason to have one is to avoid tunnel vision about your future and your ideas, show you new things and find ways to continuously improve yourself in a given area through his/her example, experience and knowledge.

In short, a mentor shows you their path and their experience so you can improve and move faster on your own journey.

Where to find mentors.

Chances are you already have one. A mentoring relationship does not necessarily go on explicitly, it often evolves naturally. An old teacher you often talk to, an approachable boss or a senior coworker/student are some examples.
If for some reason you don't have any of those, don't worry, you can also find a lot of people interested in helping you. But how do you find them? There are a few options that come to mind:

Work on an open source project. The open source community is full of people wanting to help out. Select a project that matches your skill level and interests and start pushing some code. Start small and ask for help from any of the regular contributors. You will find one or two regularly reaching out. That's the starting point.
Work on interesting projects with interesting people. You can find a mentor next to you at work or university. When someone is working on a project, offer help. Help is always appreciated, no matter how much or how little.
Go to developer's reunions. One of the best ways to find people like-minded is the local development community. Like the other cases, reach out, talk with others and stay in touch. You will find more than one in the same path you are and a couple a few steps further.

What's Next

A mentor's job is to be a guide, your's is to have an idea to where you want to go or what your goal is for the next year or two and be aware of the reason why you spent time learning those languages and platforms. Do you want to become a front-end dev? a back-end? a mobile? What is your main tech stack? Why do you spend time learning those things in the first place? What do you want to achieve?

Those questions are yours to answer, they mark the journey you will take moving forward. You don't need to have all the answers but you do need to have a general idea. Once you do that, then you can ask for your mentor for guidance.

Remember, a mentor is simply a guide, the path is yours to take

After all, that, how much you improve and how fast is entirely up to you. In the end, you will be the one putting up the hours to get better but they will be much better invested when knowing what to learn and how from people that came before you.

Variables and types in kotlin

Raul Montero — Thu, 09 Aug 2018 03:47:14 +0000

All languages are different but at the same time, they have a lot of things in common, a lot of similar components.

Chances are, this is not your first language and therefore you are familiar with the concept of variables and the different common types you could expect in a language. Still, I’m going to walk you through the bits and pieces where kotlin is different so you are able to start feeling comfortable with the language’s philosophy and way to do things.

Let’s start.

Variables

A variable’s job is simple, assign a value and give it a name to be called for later. Kotlin takes this simple concept and adds some additional rules to enhance code performance and readability.

Declaration

In Kotlin, variable declarations have a simple structure :

var (or val) keyword to indicate the start of a variable declaration.
The name of the variable.
two dots followed by the variable’s type. (optional)
an equal sign to assign a value to the variable.

Here is an example in action of a variable declaration

// Using var 
var a:String = "Something Interesting" 

// Using val 
val b:String = "Something even more interesting"

As you can see, we can declare a variable either using var or val keywords. The main difference between them is mutability or the capacity to change. With var, you can change the value of the variable while with val you can not, and when I say value I mean instance since in kotlin everything is an object. The object’s properties are able to change but not the instance it refers to when we use val.

Another interesting thing to note is that val-declared variables behave similar to constant values but with one major difference: val allows to assign it an expression that will resolve into a value, while the const only permits a primitive or string literals.

Here we can see an example of val vs const

val value:Int = 1+1 // Valid const 

val constant:Int = 1+1 //Invalid const 
val constant2:Int = 1 //Valid

And here with var and val

// Using var 
var a:Int = 5 
a = 6 // Valid 

// Using val 
val b:Int = 5 
b = 6 // Invalid

Initialization

Kotlin doesn’t allow null values out of the box, which means you can’t declare a variable without assigning it a value right away, at least not with the standard declaration. Even using nullable values, due to kotlin’s readability-promoting philosophy, you are required to assign the value explicitly (even null) when declaring the variable’s initial state.

But what about the cases where we don’t know the value of the variable right away, like for example with instance variables in a class? We can do it, but we do it by telling kotlin our intent explicitly. We do this by using the keyword lateinit before the variable declaration.

You can think of the lateinit as a promise. A promise to initialize the variable at a later time _before _you try to use it. The compiler then believes in you and let you do it your way, but just in case you are feeling a bit adventurous, it will throw an exception if you try to access it before assigning a value.

Now, let’s see this in action

//Without lateinit 
var a:Int //Error 
a = 5 //Error 

//With lateinit 
lateinit b:Int // valid 
b.toString() // Throws exception 

b = 5 
b.toString() // valid

Duck-typing

Kotlin is a statically-typed language, which means all variables types are evaluated at compile-time, but that doesn’t mean you need to specify the variable type explicitly. Kotlin has a system called duck-typing that allows it to infer the type based on the value it is being assigned to, saving you the need to do it yourself.

Do not be confused with the dynamic typing characteristic that is present in other languages (javascript, for example) that let you change the variable’s type at run-time depending on the value it holds. Although kotlin can infer the variable type, this happens at compile-time and once a variable type has been determined it can never be changed.

Types

Here we will discuss the common types (or kind of information) a variable can hold out of the box. Most of them should be very familiar to you but at the same time, they come with a small twist.

Numbers

Numbers (in any of their variants) are objects and as such, they hold methods and properties.

In the particular case of running kotlin on top of the JVM, those numbers are stored as primitives and in case a nullable number is used, the boxing/unboxing process is done automatically.

Something curious in kotlin is that numbers are not implicitly cast. That means you can’t assign an int variable to a long one without doing a cast beforehand.

var small:Int = 5 
var large:Long = small // Invalid 

var larger:Long = (Long) small //Valid

Another curious thing is you can add any number of underscore characters to a number literal to make it more readable and the kotlin compiler will remove those underscores and use the remaining number as its value.

This means,

var number1:Int = 1\_000 
var numer2:Int = 1000 
number1 == numer2 //Evaluates to true

Characters

Characters represent a single letter or number and pretty much any symbol you can find in the ASCII table. You define them using single quotes.

val c: Char = 'C'

In some languages, you can use the numeric representation of a character to compare to an int. In kotlin this doesn’t happen out of the box, instead, you must use the method toInt() to do the conversion.

Strings

If you have done any text manipulation in the past you will feel comfortable with strings in kotlin. The way kotlin handles strings is very standard, the methods and properties are very straightforward and easy to understand.

Here are a few key points about this data type:

A String is a collection of characters, therefore can use the collection’s way of accessing their elements by using the indexing operator, and also have access to the collection’s methods to manipulate its contents.
Strings are immutable, which means any operation that “modifies” an existing string, what does, in reality, is dispatching the previous string and creating a new one with the result.
There are two types of strings, the ones that are escaped and the ones that aren’t. With the first type, any special character must be included explicitly through the use of special escape characters whereas the other one is sufficient to be included in the string literal.
You can evaluate variables and expressions inside a string. The process is called string templates and you use it prepending the currency sign ($) before a variable or wrap it with curly braces in the case its an expression.

Alright, it’s time to put the words into actions with some examples. First, let’s use the indexing operator to get a character in a given position of a string. Just like with arrays, you use the variable name next to the opening and closing brackets with a number inside indicating the position of the element you want.

var text:String = "This is a text!" text[1] // Returns h

Now, let’s see how to escape vs not escape string compare to each other. Do notice that the raw string (not escaped) variant requires three double quotes while the escaped one just two.

In this example, we can see the escaped string doesn’t recognize the line break (newline) character inside the text while the other one does. If we wanted to have a line break, inside the escaped string we had to add the escaped character (\n) explicitly.

var escaped:String = "first line second line" // Throws a compiler error var raw:String = """first line second line""" // Valid

Finally, we’ll see how to get a variable’s value or execute an expression from inside the string literal

var age:Int = "29" 
var text:String = "Hello!, I'm Raul and I'm $age years old" // That prints Hello!, I'm Raul and I'm 29 years old 
var expression:String = "1+1 = ${1+1}" // That prints 1+1 = 2

To be continued …

I hope this was enough information to give you a rough idea of how kotlin interacts with variables and types. There is still a bit more to cover about kotlin’s main data types but we got off a good start.

Next up we’ll see arrays and collections and how they work and interact with the information they hold. We will also see Pairs which is a kotlin-specific type, very similar to tuples in other languages.

This post is part of a series aimed to give you an introduction to the language and a taste of the way kotlin does things. You can find it here:
A guide to the kotlin language

A guide to the Kotlin language

Raul Montero — Wed, 01 Aug 2018 03:09:34 +0000

Have you heard of kotlin? It’s a relatively new language officially launched in 2016 by JetBrains. They originally created the language as a more flexible and expressive alternative to Java, with the ability to run on top of the JVM, allowing developers to use kotlin and java code interchangeably in a project.

Since then, a lot has happened, kotlin can now do a few extra tricks:

It is officially supported on Android (and Android Studio) since Google announced it on the Google I/O of 2017.
Trans-compile to javascript (as CoffeeScript or Typescript do)
Run without a VM using kotlin native
Run on top iOS and mac os with interop with Objective-C

I started learning kotlin not too long ago and found it quite interesting the way it handles things and the expressiveness it adds in an environment known for its verbose nature. The more I learned about the language, the more I enjoyed it. So I decided to share my thoughts and experiences with it by writing a mini blog series that can expose the language’s pragmatic nature and philosophy.

I hope this serves you as much as it has to me and even if you don’t end up using it, at least you can take with you the kotlin way of thinking.

Let’s dive in

Kotlin has numerous features some you can find in other languages and some other are very unique to kotlin but what all of those feature have in common is the promotion of concise and expressive code as part of the language philosophy.

I’ll leave here the table of contents with a brief description of what you will encounter. Feel free to read it in any order you prefer.

Unfortunately, not all posts are available yet since this is an on-going series but you are welcome to read those that are ready. I’ll be posting the updates here and twitter, so don’t forget to subscribe.

Variables and types. Variables in Kotlin are a bit different from what we are used to. Here we are going to explore the difference as well as the type system used and how it compares to other languages.
Arrays and collections. We use data to interact with our application and the way we do that is using arrays and collections. In this section, we will learn about the particularities of these data structures how and how to take the most advantage.
Nullability. Nullability is a very interesting topic on kotlin, mainly because unlike other strongly typed languages, it doesn’t allow null values out of the box protecting your code against the famous NullPointerException
Operators. Every language has operators to express logic in a straight-forward way. Kotlin uses the one we are used to in C-descendants languages and also provides a few of its own.
Flow control and loops. If you have been programming in any other language you must be used to flow control and loops, on kotlin we add a little sugar on top to make it even more expressive and easier to read.
Classes and Object Oriented Programming. Have you developed in _any _OOP language you surely will feel comfortable with this topic *but * as usual, Kotlin take this a bit further with composable objects, default implementations and even simpler ways to express and declare classes.
Generics. Have you used a collection of a particular type? Something like Array<String>? Here we will learn how to use a template on your class that you can pass a type later on to provide extra flexibility and reusability, and just like collections, you will feel you have multiple classes and only wright one.

Nullability in kotlin, a pragmatic approach.

Raul Montero — Wed, 25 Jul 2018 01:25:32 +0000

Coming from other strongly-typed languages like Java or C#, the NullPointerException is one of the most common exceptions you can find, providing long debug sessions simply because a null reference was passed around and eventually called for.

Kotlin addressed this issue at a compiler-level, using it to throw errors when trying to assign a value to an object that has the potential to contain null values, *unless * you explicitly let kotlin know that is the intended behavior, and even then, you need a special syntax to access that object’s methods from thereon.

// Java and C# 
string str = null; // valid

//Kotlin 
var str:String = null; // not valid

In the above code, you can see, kotlin doesn’t even allow the assignation of null value to a variable, if you wish to do so you must use a nullable type, which is kotlin’s way to tell the compiler that this variable has the potential to hold null values.

You indicate this adding a question mark at the end of the variable’s type, as follows

var str:String? = null; // valid

This code does compile and allows you to use variables holding null values in kotlin by stating it explicitly to the compiler that this is your intent.

Now, there is a catch. Remember the special syntax we talk about earlier? Well, now is the time to use it. You see, once a variable contains a nullable type you can’t use the dot notation anymore, so you must take one of two approaches when calling one the object’s methods or properties:

Use the double bang syntax(!!) to access the method and throw a runtime exception if a null value is encountered.
Use the safe-call syntax (?.) to access the method and return the null value (if encountered) while keeping the workflow of the program intact

// Alternative 1: Throw an exception 
var nullError:String? = null var count1 = nullError!!length() // Throws an exception 

// Alternative 2 : Return the null value 
var returnValue:String? = null var count2 = returnValue?.length // Returns the null value and keep the program running 

// dot notation 
var invalidSyntax:String? = null var count3 = invalidSyntax.length //Not valid for nullable types. A compile error is thrown

Elvis Operator

Although kotlin does not encourage the usage of null values, the language provides a null check operator for those cases where you must interact with them simplifying the code and making it more readable. The operator is called the Elvis operator (?:) and works as follows:

Evaluate the expression at the right of the operator
If it returns null, then evaluate and return the expression on the left side and return it
If not, return the right side

// right side invalid 
var str:String? = null var count = str ?: "" // right side is null, evaluate and return the left side 

//right side valid 
var validStr:String = "Test" var count = validStr ?: "" // right side is not null, return the right side without evaluating the left

Conclusion

The approach to work with null values in kotlin is very pragmatic, you get compiler validation at the expense of not using null values unless explicitly stating it using special syntax which in turn makes you want to avoid them as much as possible and at it, preventing unwanted NullPointerExcepetions.

From my perspective, this is a great tradeoff. I know I won’t miss those exceptions one bit.

This post is part of a series aimed to give you an introduction to the language and a taste of the way kotlin does things. You can find it here: A guide to the kotlin language

Demystifying Remote Work, the truth and the myth

Raul Montero — Thu, 12 Apr 2018 02:44:42 +0000

Ah, working on the beach (or mountains), having time to yourself, no boss breathing behind your neck, in other words, freedom while still being a responsible adult. Sounds good, right? The idea of remote work really is appealing. When the location becomes optional a lot of ideas comes to mind.

Unfortunately, the reality of remote work is not as the media and the internet make it sound.

Remote work is awesome but not everybody likes it nor is it for everyone. The problem is, only a portion of the experience gets the spotlight, while the other you can only get an insight from someone else already in the remote boat.

What remote work really is about

Remote work is (surprisingly) really about work. In fact, I would say as a remote worker you need to work harder than your on-site counter-part. Here is why :

1. You are not physically there

Other people can’t see you work, which means you need to make yourself present by the job you do, the solutions you provide and your contributions to your team.

2. There is no tech support.

You use your own hardware with your own setup and as such you are responsible for it. You are in charge of maintaining it clean, updated and virus-free and even have a backup computer in case your main one fails you. There are some companies who alleviate this a bit, but at the end of the day, you are still in charge of keeping everything in order.

3. Working spaces are not as easy to come by

Let’s be honest, you can work one day or two at the beach when the work is light, but that’s no place when you really need to focus. For most cases, you will need a quiet, comfortable space where you can hear your own thoughts and be free of external distractions.

This is not as easy as it sounds, getting your family used to the fact you are at home but are not available takes time. Ideally, you should find a place where you can use exclusively for work at home or get a membership at a near coworking space.

4. You get paid by the hour.

Most remote contracts are paid by worked hours instead of having a fixed salary. This serves as a double edge sword, on one end, you can get an extra cash when you need it by working a bit more but on the other end, if you made 38 hours a given week, you don’t get paid 40. Some companies have policies for this kind of things, but not all of them.

5. You don’t get the social factor

As a remote worker, you don’t interact with people as much. This gives you a boost in productivity but also privates you from the natural daily social interaction, this may seem little for the less social kind of people, but trust me, it weights over time if not taken seriously.

Still, working remote is awesome

I know, seeing remote work as a whole, may seem a little discouraging or even a challenge, but let me tell you, working remote can be described in one word, freedom.

Depending on the kind of person you are, this is going to be a good thing or not. Having freedom will let you do things the way it works best for you.

You can work anywhere. This goes way beyond working at the beach, this means you tap into the international market which expands exponentially your possibilities and depending where you live, you can take advantage of the difference in economies, earning like you live in a high-cost city, while living in a lower-cost one, making your earnings more meaningful.
No more sitting on a desktop or chair you don’t like. Now you can adjust your work environment to your style, making you feel more comfortable and ergonomic even.
Your rules. Now you can select an operating system, tools and environment in general that makes you most productive, adjusted to your work style.

Final Thoughts

In the end, remote work is an amazing modality and an excellent way for you to work the way that suits you best. Yes, not everything is pink-colored, there are some things you must take in account before diving in, but for the most part, working remotely, in my opinion, is the best way to work while maintaining a balanced and healthy life, on your own terms.