DEV Community: Muslim Zabirov

React Native on Android, changing app name, package name and version code

Muslim Zabirov — Fri, 23 Sep 2022 03:50:15 +0000

There are things one may need to change in the release build for Android. Things like App Name are a case here. Suppose you start developing by initializing to a generic App Name and at the time of release one need to change to the actual App Name. The same goes for package name, which is visible in Google Play Store and as well in the App details of the Android phone.

Generate with correct names

Before we move forward and change things in the final version of the app. There is a way to fix this from the beginning. Generate an react native app with a proper package name with the command below.

react-native init MyAwesome -package "com.name.app"

But however if at all you have initialized the app as

react-native init RnApp

then the option remains to hack things in the end.

So read on.

App Name

Lets start with App Name. This is the name that's visible in user's screen. To change this name, you have to change it in strings.xml.

Full path is

android/app/src/main/res/values/strings.xml

and the entry is

<string name="app_name">My Android App</string>

Package name

This is shown in the Play Store and the details in About App of your Android device. This should say something like com.myapp or com.company.appname or something similar.

To change this, you have to edit four files.

android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java
android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java
android/app/src/main/AndroidManifest.xml ( optional as per my experience )
android/app/build.gradle

The first two Java files have the package name as something like below.

package com.ReactNativeApp;

Change it to your desired package name.

package com.myComp.MyApp;

At this point it should be required to make the physical changes to the Java files in the proper package. But somehow it does not work! Rather it breaks the build. Just keep in mind, that we have changed the package names and that should reflect in the actual package. In case the builds break, you know where to find.

Version Code

This is a number which Google Play store recognizes and does not allow uploading another APK having the same value. Just think of this as build number. The same build can not be uploaded twice. So the point is every time, you make a build or release-apk, you must have a different number or more specifically incremental number. If your first version of the application has a version code of 5, then the second version must have a version code which is more than 5.

Along with version code, you might need to update the version name also. Which is the version number of your application and visible in Google Play Store.

While version code is used by Play Store to manage your APK, version name is used by Play Store to notify user that an update to your app is available.

To change these two values, you need to edit

android/app/build.gradle
android/app/src/main/AndroidManifest.xml (optional as per my experience )

These settings are taken from build.gradle while making a build with gradle but for the purpose of sanity, it's better to change in both of the files above.

Making the release build

Finally making a release build is done from inside the android folder of the React Native application. The commands are as below.

./gradlew clean
./gradlew assembleRelease

Done

How to get visitor's location (country) using geolocation in JavaScript?

Muslim Zabirov — Thu, 22 Sep 2022 17:23:47 +0000

I wanted to localize client side pricing for few countries without using any external API, so I used local Date object to fetch the country using new Date()).toString().split('(')[1].split(" ")[0]

document.write((new Date()).toString().split('(')[1].split(" ")[0])

Basically this small code snippet extracts the first word from the Date object. To check for various time zone, you can change the time of your local machine.

In my case, our service only included three countries, so I was able to get the location using the following code.

const countries = ["India", "Australia", "Singapore"]
const countryTimeZoneCodes = {
  "IND": 0,
  "IST": 0,
  "AUS": 1,
  "AES": 1,
  "ACS": 1,
  "AWS": 1,
  "SGT": 2,
  "SIN": 2,
  "SST": 2
} // Probable three characters from timezone part of Date object
let index = 0
try {
  const codeToCheck = (new Date()).toString().split('(')[1].split(" ")[0].toUpperCase().substring(0, 3)
  index = countryTimeZoneCodes[codeToCheck]

} catch (e) {

  document.write(e)
  index = 0
}

document.write(countries[index])

This was just to improve user experience. It's not a full proof solution to detect location. As a fallback for not detecting correctly, I added a dropdown in the menubar for selecting the country.

Another solution:

You can look their IP address up in any IP-to-location service (like maxmind, ipregistry or ip2location). This will be accurate most of the time.

Here is a client-side example with Ipregistry:

fetch('https://api.ipregistry.co/?key=tryout')
    .then(function (response) {
        return response.json();
    })
    .then(function (payload) {
        console.log(payload.location.country.name + ', ' + payload.location.city);
    });

Easy way to build admin login into a Laravel 5

Muslim Zabirov — Thu, 25 Nov 2021 03:41:54 +0000

Authorization can be tricky. There are thousands of posts about how to perform authentication, but actually verifying who someone is and managing user permissions can be a whole can of worms. Fortunately, Laravel has systems in place that make a tiered login system very easy to implement.

To add authentication to a Laravel 5 app, all you need is one command:

php artisan make:auth

Easy solution for making a Laravel admin page using custom middleware
I am using Laravel 5.5 right now, the latest release. The only specific Laravel 5.5 thing going on is the @guest helper in the frontend Blade directives. In the HTML section of the application, these helpers allow us to easily check if the user is logged in or not:

@auth
    // The user is authenticated...
@endauth

@guest
    // The user is not authenticated...
@endguest

If you’re not using Laravel 5.5 there are other workarounds but you might as well upgrade to the latest version for the new features!

✌ How we achieve this is to add a type column on the users table and check if a user has that type via custom middleware. It sounds fancy but it’s pretty easy!

1) Add the types you want to the User model and a method to check if a user is an admin.

/* app/User.php */
const ADMIN_TYPE = 'admin';
const DEFAULT_TYPE = 'default';
public function isAdmin()    {        
    return $this->type === self::ADMIN_TYPE;    
}

2) Add the type column to the migration that created your users table

/* database/migrations/2014_10_12_000000_create_users_table.php */
$table->string('type')->default('default');
</code></pre>

#### 3) Add a type value to the create method in register controller

<pre><code class="language-php">
/* app/Http/Controllers/Auth/RegisterController.php */
protected function create(array $data)    {        
    return User::create([            
        'name' => $data['name'],
        'email' => $data['email'],            
        'password' => bcrypt($data['password']),            
        'type' => User::DEFAULT_TYPE,        
    ]);    
}

4) Create a custom middleware file to check if a user is an admin. Generate this file using:

php artisan make:middleware IsAdmin

namespace App\Http\Middleware;
use Closure;
class IsAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if(auth()->user()->isAdmin()) {
            return $next($request);
        }
        return redirect('home');
    }
}

5) Register the middleware you just created

/* app/Http/Kernel.php */
'is_admin' => \App\Http\Middleware\IsAdmin::class,

6) Add some routes that invoke the middleware

/* routes/web.php */
Route::view('/', 'welcome');
Auth::routes();
Route::get('/home', 'HomeController@index')    
    ->name('home');
Route::get('/admin', 'AdminController@admin')    
    ->middleware('is_admin')    
    ->name('admin');

7) Create an admin controller with

php artisan make:controller AdminController

8) This controller returns the dashboard for whatever view you want your admin to see.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }
    public function admin()
    {
        return view('admin');
    }
}

🎉 That’s pretty much it!
Now if you visit /admin and you’re not logged in or logged in as an administrator you won’t be able to access the page. In order to create an admin user you can use the tinker artisan command:

$ php artisan tinker
>>> use App\User;
>>>User::where('email', 'connorleech@gmail.com')->update(['type' => 'admin']);