DEV Community: Anayo Samson Oleru

Answer: Unable to load script from assets index.android.bundle on android - react-native

Anayo Samson Oleru — Sat, 23 Nov 2024 17:23:10 +0000

Run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Or you can automate the above steps by placing them in scripts part of package.json like this:

"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

How to update version number of react native app for android and ios (Manual)

Anayo Samson Oleru — Sat, 17 Aug 2024 18:15:00 +0000

Android

You should be changing your versionCode and versionName in android/app/build.gradle:

android {

    defaultConfig {

        versionCode 1
        versionName "1.0"

        {...}
    }

    {...}
}

The versionCode has to be in an integer that is larger than the ones used for previous releases while versionName is the human-readable version, as it will be shown to users. So use something readable and understandable like what is the main purpose for the release.

iOS

Using Xcode:

You will need to change an iOS project's target target iOS version. XCode > Project Navigator > "General" tab > Deployment Info > Target.

This can be either under Target or Identity section.

Using react-native code:

Go to ios folder and then go to Podfile. At the top, you will find the ios version, there you can change it manually.

If you found this helpful, please do leave me a star on my open-source project: Quicksi, https://github.com/Quicksi-CLI/quicksiCLI.

Like, share and you can follow me on Twitter(X), Instagram and LinkedIn, as I share a lot of helpful technical tips.

Interacting with AWS

Anayo Samson Oleru — Thu, 17 Aug 2023 09:31:38 +0000

You need an understanding of AWS, to fully understand this article. If you don't, please schedule a 1:1 session with me and I can help you fully understand Cloud computing such as types and benefit of cloud computing, cloud computing scenerios, traditional data centers and setting up an AWS account, AWS Global Infrastructure such as regions, availability zones, local and wavelength zones, Cloud Economics such as organizing and optimizing AWS Costs, Building a business case for the cloud and how to apply cloud economics.

So please feel free to reach out to me.

Today in this post we are going to look at methods of interacting with AWS, and when to use those methods with real life examples and scenerios.

Methods of interacting with AWS and when to use it

At the time of writing this post, there are three different approaches when it comes to interacting with AWS:

1. AWS Management Console: When you set up your initial AWS account, you use this. This is leveraged on the browser to configure resources. It is a web(Figure 1) and mobile app(Figure 2) based interface that provides access to almost all the 150+ AWS services. All major browsers and operating system are supported. You can use and download the mobile version of AWS and also use it on your own.

Figure 1

Figure 2

When you need or want to test out AWS services for the first time, spin up a virtual server, maybe you are looking out on testing a new AWS service just announced, AWS console is a great method.

2. AWS Command Line Interface (CLI): This allows you to access the same AWS resources, but this time from the command line on your machine as seen in Figure 3, be it Windows, Mac, and Linux. Most of the everyday task that can be done in the Console, can be done in with the CLI.

Figure 3

You use AWS CLI for repeated task that can be automated.Logging in AWS console in the browser to perform automated task can be cumbersome.

3. AWS Software Developer Kit (SDK): If you want to leverage a program access to your AWS resources, the AWS SDK helps with that. AWS SDK gives you access to AWS resources from your program or application or code, and it is supported across a variety of languages such as Java, NodeJS, JavaScript(Browser) as seen in Figure 4, .NET, Python, Go, Ruby, C++ and PHP. A very good thing about AWS SDK is that it if you want to automate many aspects of how you interact with AWS platform, AWS SDK is the best for it.

Figure 4

When you wwant to enable AWS tasks automation within custom applications, then the SDK becomes a great choice for that.

Real life examples and scenerios

To better understand when to use either of the AWS interaction approaches, let us look at 3 scenerios that will prompt you to choose which AWS resources you will use, take a pause and think about the problem, what approach to use and why that approach.
But don't worry at the end I will tell you the answers to each Scenerio and why.

Scenerio 1
Thomas' company wants to transition to AWS. They want to leverage Amazon RDS(Relational Database Service). Thomas wants to test out a single database service.

What interaction approach will Thomas use for this use case?

Scenerio 2
Cooper's company is a startup. Her company helps farmers sell their produce to retail companies through a Web and mobile application. Cooper has a set of tasks she needs to run on AWS each day to generate reports.

What interaction approach will Cooper use for this use case?

Scenerio 3
MeadCourt is a company that runs several production workloads in AWS. They have a new web application that manages digital assets for marketing. They need to automatically create a user account in Amazon Incognito on sign-up. They want this step to be seamlessly integrated into the web application.

What interaction approach will MeadCourt use for this use case?

Run through it and note down the answers and why you chose them instead of the others.

Answers Real life examples and scenerios

In this article, I have discussed the ways and approached you can interact with AWS, and the use cases. And we showed examples of when you would have to make the decision on which approach to use. Finally we will look at the answers to those use cases and why we chose the answer.

Scenerio 1 answer
Thomas' company wants to transition to AWS. They want to leverage Amazon RDS(Relational Database Service). Thomas wants to test out a single database service.

What interaction approach will Thomas use for this use case?
Answer: AWS Management Console
Reason: Thomas is transitioning into AWS, probably for the first time, and he wants to test out an AWS service before he uses it. He just wants to get in and use the service, he is not deploying anything to production yet. AWS Management Console gives him an interface to quickly startup an RDS and test it out.

Scenerio 2 answer
Cooper's company is a startup. Her company helps farmers sell their produce to retail companies through a Web and mobile application. Cooper has a set of tasks she needs to run on AWS each day to generate reports.

What interaction approach will Cooper use for this use case?
Answer: AWS SDK(best option) or AWS CLI(second option)
Reason: Copper wants to generate reports on a daily basis, it will be an automated tasks. And it would be great to run that automated task from the within application. It would be cumbersome to log in to AWS console each day to generate the reports, or open up the terminal to run AWS CLI each day to generate reports. She can write the

Designing Versioning for your API

Anayo Samson Oleru — Thu, 17 Aug 2023 09:24:55 +0000

In this article, I am going to show you how to design versioning for your API. We will start by talking about why versioning is important for an API and then the strategies for versioning your API.

First question you want to ask yourself is: Do I really need to version my API? This is something very important to think about, because once you publish your API, and once client have written against the API or users have started relying on that API, it is set on stone, you won't want to make changes that would break your client and you won't want to be in a position where when there is a new API change, you are always thinking about how to make those changes without breaking the client.

But versioning can also be a overkill, if the API is only being used by your team. But if your API has internal or external customers, that has developers writing code using your API, that may not be just your small team then versioning your API is super important from the planning phase.

Your API requirements will always change, no matter what you do, no matter how much you designed it. And when this happens, your API will have to change. Again, another reason to consider and learn how to version your API.
The goal is to evolve your API without breaking existing client. What this doesn't mean is that, every time you release a product version that you're going to change your API. API versioning is different and harder than product versioning.The reason for this is that you need to support both old and new versions, side-by-side deployment of multiple versions, you will need an indication from clients about what version they want to use, and allow older code to make changes to allow them continue to use the API.
And so planning for and designing versioning upfront, will make maintenance of your API easier in longer term.

Ways to version your API

There are a lot of ways to version your API, with their own advantage and disadvantage. You should find the mechanism or way of doing version that makes the most sense to your organisation. And this is going to depend a bit on the requirements, remember you are serving your clients not yourself. Making versioning easy to use for your clients is way more important than making it way more easier on your development staff.

1. Versioning in the URI path
This is the commonly used API versioning.

https://anayooleru.com/api/v2/articles

We can see in the example above that the 'v2' inside the path to my articles API is indicating the version of the API. The advantage of this, is that it makes it clear to the client which version they are using and where the version is handled. But the disadvantage, is that every time there is a version change, clients would have to change all the URIs and that can be a lot of repeated work.

2. Versioning with Query String

Another versioning strategy is the query string versioning.

https://anayooleru.com/api/articles?v=2.0

In this case, like the example above we can add a query string that ask for a specific version of our API. The advantage of this is that we can have a default version that will always be used by our API when the version query string isn't supplied, and that can be the latest version or whatever default version we set. So it makes versioning optional. But the downside of this is clients can easily forget or missed that they need to set a version, what is the point of versioning if it isn't being used.

3. Versioning with Headers

GET /api/articles HTTP/1.1
Host: localhost:44388
Content-Type: application/json
X-Version: 2.0

In the above example, the X-Version header is used to specify the version of an API to be used. This approach offers some advantages similar to using query strings, but it separates versioning from the rest of the API. Instead of requiring changes in the actual API code, only the interceptor in the API client needs to add this version header. This decoupling allows for easier maintenance and updates to the API, as well as providing flexibility in managing different API versions. However, implementing this approach may require a more experienced developer who understands how to add headers and intercept API calls to include the required headers in their client code.

4. Versioning with Accept Header

GET /api/camps HTTP/1.1
Host: localhost:44388
Content-Type: application/json
Accept: application/json;version=2.0

In the example, the Accept header is used to specify the desired version of the API. By including the version information in the Accept header, the client can indicate the specific version it expects in the response. This approach allows the server to send back the content with the corresponding version information, ensuring proper versioning throughout the communication.

One advantage of using the Accept header for versioning is that it can provide a standardised way to handle versioning within the API. The Accept header is a well-known HTTP header that is widely supported. Additionally, it allows for flexibility in managing different versions of the API.

However, implementing versioning through the Accept header may require a more experienced developer who understands how to manipulate headers and handle the versioning logic in the client code. It can be more sophisticated compared to other versioning approaches, but it offers the benefit of keeping the version information within the communication flow.

5. Versioning with Content Type
This is the most complex type of versioning to use, and can be very useful:

GET /api/camps HTTP/1.1
Host: localhost:44388
Content-Type: application/vnd.yourapp.article.v1+json
Accept: application/vnd.yourapp.article.v1+json

A custom Content type is used to indicate the specific version of the API being requested and the version expected in the response. This approach allows for granular versioning, where different parts of the application can be in different versions.

Using custom Content Types and Accept headers for versioning can be particularly useful for long-lived applications. It allows for tracking the version of the content received from the API, rather than just the version of the API itself. This is beneficial when dealing with scenarios where data might be retrieved at one point and updated at a later time. The content and accept headers associated with the stored data can help identify the specific version of the content.

However, it's important to note that implementing and maintaining this type of versioning can be more complex and requires a higher level of developer maturity. Handling different versions of the API and managing custom content types can involve additional complexities. Therefore, it is important to carefully consider the trade-offs and ensure that the benefits outweigh the added complexity for the specific use case.

What we have learned

1. Versioning is critical: For a mature, long lasting API, I have shown you that versioning your API is crucial at the very start of your design process.
2. Decide on the which versioning scheme will fit your requirements: I showed you some of the important versioning strategy out there. Find the one that fits best for both the team you have and along with the kind of customer requirements you have.
3. Content-Type versioning: One of the most complex versioning strategy but with long lasting API benefit.

2023 Industry Trends in Mobile Application User Interface

Anayo Samson Oleru — Thu, 17 Aug 2023 08:59:00 +0000

From 2021, the mobile application - talking about Android and iOS, industry has changed dramatically when it comes to user interface design. Instead of the most beautiful mobile application design, users today want the most useful application design. What this means for mobile app designers and developers is that we now prioritise useful app designs for sustainability. We now incorporate sustainable design principles into our work, creating apps that are both environmentally friendly and socially responsible. What are these industry trends, let us look into some of them below:

Minimalism: The very first and most important is Minimalism. Instead complicated multiple features on one mobile app screen, the trend towards simpler, cleaner interfaces continues, with many app designs focusing on using negative space and simple, intuitive layouts to guide users.
Personalisation: Rather dumping on a Figma board design that looks like facebook, instagram, or just looks good, Mobile apps are becoming increasingly personalised, with designers using user data to tailor the user experience and deliver more relevant content.
Bold Typography: This wasn't as important before and was pretty much ignored, but today typography has become an important element of mobile app design, with designers using bold, eye-catching fonts to grab users' attention and communicate important information.
Gesture-Based Navigation: Too much touch is going away, time to upgrade. Due to larger screens and bezel-less designs becoming more common, gesture-based navigation is a trend in mobile app design UI. Gestures such as swipe, pinch, and pull can provide a more intuitive and natural user experience.
Dark Mode: Yes, I know many times, this feature is left out of our M.V.P. But with the increasing popularity of OLED screens, dark mode has become a trend in mobile app design UI. Dark mode reduces eye strain, saves battery life, and provides a sleek and modern aesthetic. And should be considered part of the M.V.P.
Custom Illustrations:Instead hand-picking illustrations from a website used by thousands of others. Custom illustrations are becoming more popular in mobile app design, with designers creating unique and memorable illustrations that reflect the brand's personality and values.
Haptic Feedback: I know this one sounds weird. Haptic feedback involves using touch-based sensations to enhance the user experience. This trend is expected to become more prevalent in mobile app design, with designers incorporating haptic feedback to create a more immersive and engaging user experience.
Micro-Interactions: Micro-interactions are small animations or visual cues that provide feedback to the user. They can add a layer of fun and interactivity to the user experience.

These are some of the trends. There are many others, if you want to learn them. Send me an email. And I will list them all and guide you on practical ways to apply them in your mobile app development or design.

I hope this was helpful. Please leave a like if you found it helpful. See you soon, thank you.

No Permission Handler Detected (IOS)

Anayo Samson Oleru — Thu, 10 Mar 2022 06:22:56 +0000

Simply go to node_modules --> react-native-permission --> RNPermissions.m

In this file Search for "No permission handler detected"
and comment this line "RCTLogError(@"%@", message)"

then you're good to go, for now.

If you found this helpful, please do leave me a star on my open-source project: Quicksi, https://github.com/Quicksi-CLI/quicksiCLI.

Module.createRequire is not a function

Anayo Samson Oleru — Fri, 31 Dec 2021 22:07:07 +0000

Anayo Debugging 2

This is one simpler issue, but the simplest bug can be the biggest at times, so I made sure I document it and can help anyone out there too.

Bug

In my react project's root I have a GitLab-ci.yml file that automatically runs whenever I push a commit to the server. It triggers a notification to the runner I specified, and then it processes the series of tasks I specified.

Which involves building and deploying.

This is a legacy React project, and had long been updated. After upgrading the packages I git committed. Build built successfully but deployment failed. With the following error:

Solution

I read through the error to understand what the problem really was, and I found it:



Module.createRequire is not a function

That was the only error that was reasonably clear indeed and meant something.

So I Googled it, and I found out that it's an issue with Create React App, it's always on or looking for the latest, which means the Node engine version has to always be the latest and that includes my npm version, else some things might break.

So in essence whatever machine running that project has to have Node >= 14.0.0 and npm >= 5.6

Fix

My GitLab-ci.yml contains a Docker image with a node version of 10.15.3, so there is a need to upgrade.



image: giona69/node-10.15.3-aws-eb

And I temporarily replaced the docker image with the latest node.



image: node:14.18.2

Rebuilt Node-Sass

I added
npm rebuild node-sass
to the deploy script

And Voila!! That fixed the issue. These weeks has been simple, this is the issues I have been experiencing.

My name is Anayo Oleru, I specialise in Backend Development(NodeJS & ExpressJS), but I am experienced with Web frontend(ReactJS) and mobile(React-native). And I am open to offers in these fields.

You can follow me on Twitter at @anayooleru or send an email to: anayo_oleru@outlook.com

Cheers and take care.

java.lang.NoClassDefFoundError: failed for class com.facebook.flipper.android.EventBase

Anayo Samson Oleru — Wed, 29 Dec 2021 09:06:11 +0000

Anayo Debugging 1

Bug

Generating an Android build package(APK)from Android Studio builds successfully. But running the generated APK on a real device or device connected to Android Studio Crashes on launch and returns the following errors.

getWifiLinkLayerStats_1_3_Internal(l.973) failed {.code = ERROR_NOT_SUPPORTED, .description = }


/? E/studio.deploy: Could not get package user id: run-as: unknown package: com....


/? E/studio.deploy: Could not find apks for this package: com....


/? E/Finsky: [2] VerifyPerSourceInstallationConsentInstallTask.d(2): Package name null is not an installed package


/? E/installd: Couldn't opendir /data/app/vmdl1184715882.tmp: No such file or directory


/? E/installd: Failed to delete /data/app/vmdl1184715882.tmp: No such file or directory


/? E/ssioncontrolle: Not starting debugger since process cannot load the jdwp agent.


java.lang.NoClassDefFoundError: <clinit> failed for class com.facebook.flipper.android.EventBase; see exception in other thread

I read through all, trying to understand each of them. But what stood out from these errors, and that has some sort of clarity is the last one:

java.lang.NoClassDefFoundError: <clinit> failed for class com.facebook.flipper.android.EventBase; see exception in other thread

I was a bit skeptical, because it's getting really difficult to justify Flipper, a debug tool shouldn't crash and block the development process.

How I solved it

After several trial and error, I was able to arrive at a solution that worked. I had to re-think, this particular error happens when after I try running the generated APK and not when I was generating a build. And I looked at how the Android build process works, the compiler converts the source code into DEX(whatever the name is) files, which include byte code that runs on android devices. So this would mean that while compiling, there was possibly a mix of old and new source code(which is possible since there is no such thing as a perfect compiler), or if there isn't no issue, then there must be something wrong with the compiled files.

What is the best way to resolve something like this? As any other way, deleting the build and starting afresh as a new build.

This is what I did, and it worked.

Here is what I did, the steps I took:

Deleted android build file, you can find this file in: android>app inside app delete build folder
Then I cleaned the gradlew:

cd android &&./gradlew clean

Next I rebuilt the application again
Then I ran the APK

Voila! It solved all the above issues. I hope this will help you and save you time, if you face similar error or the same error.

If it helps you, like this post.

My name is Anayo Oleru, I specialise in Backend Development(NodeJS & ExpressJS), but I am experienced with Web frontend(ReactJS) and mobile(React-native). And I am open to offers in these fields.

You can follow me on Twitter at @AnayoOleru or send an email to: anayo_oleru@outlook.com

Cheers and take care.

Modifying an existing sequelize migration

Anayo Samson Oleru — Tue, 12 May 2020 18:22:04 +0000

If you've just started using sequelize and sequelize CLI in development, you definitely had frequent addition and deletions of columns. And yeah, all these times you directly modified the migrations file, dropped all migrations and re-ran migrations again, so that your changes will take effect.

But I'm glad you're here because you realize that's wrong, or if you're just finding out for the first time, happy for you. In production, you can't just drop all database tables because you updated a migration. That'll be one big mess up, even though there are backups.

Anyways in this article, I'll show you how to update the column, add a new column or columns, and delete an existing column from/in an existing migration.

Here's something you should know and understand, it'll help when you have issues with sequelize modifications. But if you just want a quick solution you can skip this and move to the more meaty part.

QueryInterface: A migration is simply a set of instructions using the queryInterface method, it's a middleman between you and your database, so there is you and there is the database, you create and customize your table yourself, now you want to load that table into the database, you tell queryInterface to take the table you created and put it into the database, with the createTable command.

Now we don't want to create a new table, we want to modify the existing table. queryInterface is still your man, but it doesn't understand all commands, it has its own command it understands, so to communicate with it you have to use its own command, you can tell it to:

addColumn if you want to add a new column or columns. This is a sequelize method queryInterface uses, to add a new column to a table. It takes the column and the name of the table from you goes into the database, searches for the table name, and adds it.

changeColumn if you want to change column, probably the datatype of a column. This is also a sequelize method queryInterface uses, to alter a column. It takes the new adjustments you gave to it, the name of the table, and goes into the database, looks for the table and make the adjustment.

removeColumn if you want to remove a column, probably if you find it unuseful. This is a sequelize method queryInterface uses, to delete a column. It looks for the table and column and makes the action for you, you still have to provide the name of the table and then name of the column.

createTable if you are creating a whole new table entirely. I believe you may already be familiar with this. Without this one, I guess you can't add, change or remove a column.

In essence, you have to give queryInterface something to add, here's how you can do it. This is where we get down on it, we'll use a project to test.

So if you don't have a project ready-up and you just want to learn this, I made a starter on Quicksi you can easily use, everything is set up for you, check it up here:
https://quicksi-bot.now.sh/docs/en/Node-JS#node-js-pgsequelize

If you're using the starter, kindly follow the how to get started to get the starter, then create a .env file and add your database URL. Then create a new sequelize migration, that you can make modification on.

(I). Updating a column
Now let's update a column in the migration you have or created from the starter.

So let's say we have a User table, with firstname, lastname, and april columns. And we want to update the april datatype from INTEGER to FLOAT, with an allowNull key and a property of false.

User table before:

module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.createTable('users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      firstName: {
        type: Sequelize.STRING
      },
      april: {
        type: Sequelize.INTEGER
      },
      lastName: {
        type: Sequelize.STRING
      },
      email: {
        type: Sequelize.STRING
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.dropTable('users');
  }
};

queryInterface is waiting for you to give it the command, including what it should update and in what table it should it be done.

To give queryInterface something, you need to create a new migration:

Run this command:

$ sequelize migration:create --name name_of_your_migration

A new migration has been generated for you. Next edit the new migration created.

module.exports = {
  up: (queryInterface, Sequelize) => {
    return Promise.all([
      queryInterface.changeColumn('users', 'april', {
        type: Sequelize.FLOAT,
        allowNull: false
      }),
    ]);
  },

  down: (queryInterface) => {
    return Promise.all([queryInterface.changeColumn('users', 'april')]);
  },
};

Then run the migration:

$ sequelize db:migrate

And that's it! Notice we passed in the name of the table and the column in the table we want to update, queryInterface takes this and does its job in the Database.

(II). Deleting a column
Let's delete the column you updated on the User table above.

You need to create another migration file.

$ sequelize migration:create --name name_of_your_migration

Now edit the migration file and give it to queryInterface with the removeColumn method.

return queryInterface.removeColumn('users', 'april');

Run migration:

$ sequelize db:migrate

(III). Adding a new column
Now let's add a new column in the user migration. Let's say we want to add another column called June. Create another migration file.

$ sequelize migration:create --name name_of_your_migration

Now edit the migration file and give it to queryInterface with the addColumn method.

module.exports = {
  up: (queryInterface, Sequelize) => {
    return Promise.all([
      queryInterface.addColumn('users', 'june', {
        type: Sequelize.STRING,
        allowNull: true,
      }),
    ]);
  },

  down: (queryInterface) => {
    return Promise.all([queryInterface.removeColumn('users', 'june')]);
  },
};

Don't forget to update your models with your new changes.

I do hope this explains sequelize modification methods clearer.
Follow me on twitter: @anayooleru

Have a great day and stay safe.