DEV Community: Bashua Mutiat

Getting started as a Mobile App Developer

Bashua Mutiat — Sat, 06 Jul 2024 16:36:50 +0000

I've always been fascinated by how mobile apps work and are built. This curiosity grew as I developed my skills in frontend development. Eventually, after learning how to use React I decided to take a new step and learn about mobile development using React Native. Through this journey, I've explored various mobile development platforms and common software architecture patterns. In this article, I'll walk you through these platforms and patterns, along with their pros and cons. Let’s get started 🚀🚀

Mobile Development Platforms

Native Development

iOS (Swift/Objective-C)
Swift or Objective-C is used for iOS development. This ensures high performance and responsiveness, with access to the latest iOS features and updates through Xcode. However, it's limited to iOS devices and requires knowledge of Swift or Objective-C, leading to higher development costs.

Android (Kotlin/Java)
Android development typically uses Kotlin or Java, providing wide device compatibility and extensive community support. While it allows access to the latest Android features, it faces fragmentation issues due to diverse devices and requires Kotlin/Java knowledge, making testing more complex.

Cross-Platform Development

React Native
React Native uses JavaScript and React to build apps for both iOS and Android. It enables code reuse between platforms, speeding up development with features like hot reloading. However, it may not match the performance of native apps and has limited access to platform-specific features, often relying on third-party libraries.

Flutter
Flutter was developed by Google and uses Dart for a single codebase that works on both iOS and Android. It offers high-performance rendering and a rich set of pre-designed widgets. However, learning Dart can be challenging, and apps tend to have a larger size with fewer third-party libraries compared to React Native.

Xamarin
Xamarin, supported by Microsoft, uses C# for building cross-platform apps, allowing shared code between iOS, Android, and Windows. It integrates well with Visual Studio but introduces performance overhead and larger app size, requiring knowledge of C# and the .NET ecosystem

Software Architecture Patterns

MVC (Model-View-Controller)
MVC divides an application into three components: Model, View, and Controller.

Pros:

Easier to manage and test code.
Organized and reusable code.

Cons:

Can become complex for large apps.
Tightly coupled components.

MVP (Model-View-Presenter)
MVP improves upon MVC by decoupling the UI and business logic.

Pros:

Better separation of concerns.
Easier unit testing.

Cons:

More boilerplate code.
Presenter can become bloated.

MVVM (Model-View-ViewModel)
MVVM provides a clear separation between UI and business logic, with the ViewModel as an intermediary.

Pros:

Great separation of concerns.
Two-way data binding.
Easier to unit test.

Cons:

Steeper learning curve.
Potential performance issues.

Clean Architecture
Clean Architecture emphasizes modularity and decoupling.

Pros:

Highly modular and decoupled.
Promotes testability and maintainability.

Cons:

Increased complexity.
Requires more effort and understanding.

As a developer, choosing the right platform and architecture pattern is essential for building scalable applications. Native development offers optimal performance and access to platform-specific features, while cross-platform solutions like React Native and Flutter provide code reusability and faster development cycles.

In the next two months, I will be participating in the HNG internship under the mobile app development track. My aim is to enhance my skills as a mobile app developer. Reflecting on my experience as a finalist in the frontend development track during the last HNG internship, I realized how much those challenges contributed to my growth as a developer. The HNG internship provides an excellent opportunity to gain practical experience and further my knowledge, I look forward to becoming a better Mobile App Developer.

For anyone interested in learning more about the program you can visit their website HNG Internship. The program is free, but for those seeking a certificate and job opportunities, there is a premium option available - HNG Premium.

Oh No... CORS Error! A Backend Developer's Journey

Bashua Mutiat — Thu, 04 Jul 2024 17:49:40 +0000

As a frontend developer, encountering the "CORS error" message was a common but frustrating experience. While I didn't fully understand the cause, I knew it was a recurring challenge when dealing with APIs provided by backend developers. But when I decided to start my journey as backend developer, I realized that I was now in the same boat.

I remember creating my first API and then testing it in a react project, only to be met with the same CORS error. Initially, I was confused and uncertain about the cause.
Of course, I had to turned to Google my friend 😊 and read various articles about CORS (Cross-Origin Resource Sharing).

I learned that CORS is a security feature enforced by browsers to prevent web applications from making requests to a different domain than the one that served the web page. While essential for security, it is a significant challenge for development.After going through different articles, these were the steps I followed to resolve the issue

Step 1: Install the cors package

Since I hadn’t already installed the cors package, I did so by running the following command:

npm install cors

Step 2: Configure CORS to Allow Specific Origins

First, I configured my server to allow requests from specific origins by using the cors middleware.

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  origin: ['http://localhost:3000', 'https://edture.vercel.app'],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true,
  optionsSuccessStatus: 204
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Data fetched' });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 3: Testing

To ensure the CORS configuration worked locally, I tested locally on the frontend port I had allowed.
I checked the network tab in the browser's developer tools to ensure the request was successful and no CORS errors appeared.
I also did the same on the live frontend url I specified.

I realized that there might be scenarios were i would want to test my api from any origin, so I had to allow all origins

const express = require('express');
const cors = require('cors');
const app = express();

// Using the CORS middleware with the default configuration to allow all origins
app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Data fetched' });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

By following these steps, I was able to configure my backend server to handle CORS properly, both for specific origins and for allowing all origins. This enabled my frontend application to make requests without encountering CORS errors.

In the next two months, I will be participating in the HNG internship, focusing on backend development. My aim is to enhance my skills as a backend developer. Reflecting on my experience as a finalist in the frontend development track during the last HNG internship, I realized how much those challenges contributed to my growth as a developer. The HNG internship provides an excellent opportunity to gain practical experience and further my knowledge, I look forward to becoming a better Backend Developer.

For anyone interested in learning more about the HNG internship, you can visit their website HNG Internship. The program is free, but for those seeking a certificate and job opportunities, there is a premium option available - HNG Premium.

What is Technical Writing?

Bashua Mutiat — Mon, 30 Oct 2023 14:59:46 +0000

Understanding Web Accessibility

Bashua Mutiat — Mon, 30 Oct 2023 14:58:13 +0000

In our digital age, the internet is essential for basically everything we do, from shopping, learning, and connecting. But what if it's not open to everyone? Web accessibility is all about making sure that everyone can use the web, no matter their abilities. In this article, I’ll discuss about understanding web accessibility and how to make the digital world more inclusive.

Understanding Accessibility: The Basics

Accessibility is about designing and developing websites and applications in a way that everyone can perceive, navigate, and interact with them. This includes individuals with disabilities, such as visual, auditory, motor, or cognitive impairments. Accessibility is not just a rule; it's a matter of inclusion and respect for all users.

The Importance of Color Contrast

One fundamental aspect of web accessibility is color contrast. It may seem like a small detail, but the choice of colors can greatly impact the readability of web content. Ensuring that text has sufficient contrast against its background is essential. For instance, if you've ever adjusted text colors to ensure readability, you're practicing web accessibility. Remember that not everyone has perfect vision, and color choices matter.

Basic Accessibility Features

Here are some basic accessibility features I consider when developing websites to ensure inclusivity:

Alt Text for Images: I always ensure to add alternative text (alt text) for images to convey their content to users who are visually impaired.
Semantic HTML: Using semantic HTML tags like headings, lists, and paragraphs to structure my content for screen readers and other assistive technologies.
Keyboard Navigation: Ensuring that all interactive elements can be navigated and activated using a keyboard for users who cannot use a mouse.
Color Contrast: I also maintain a sufficient color contrast between text and its background to make text readable for users with visual impairments.
Responsive Design: I take responsiveness really important as not everyone has access to laptops, so I ensure the website is mobile-friendly responsive and adaptable to different devices and screen sizes, benefiting users with various assistive devices.

How I Practice Web Accessibility

To improve color contrast, I do the following:

I use online tools to check my design's colors.
Pick colors that follow accessibility guidelines.
Ask people with vision issues to test my website.

The Impact of Accessibility

Web accessibility is about making a web for everyone, not just a few. When we design with accessibility in mind, we create a digital space that welcomes everyone. This inclusive design benefits not only those with disabilities but also a broader audience. Improved accessibility leads to better user experiences, increased reach, and a positive brand image.

To wrap it up, don’t think of web accessibility as something trivial, It's a really important. We need to learn the basics, make simple changes, and welcome everyone to the digital world.

Creating a static web app using azure

Bashua Mutiat — Tue, 23 May 2023 06:55:16 +0000

This is a final project for the SCA cloud school

Creating an instance in Amazon Web Services (AWS)

Bashua Mutiat — Sat, 08 Apr 2023 09:22:05 +0000

Imagine having access to over 200 fully featured services that can help your business scale and grow, all from a single platform!
That's exactly what the Amazon Web Services (AWS) platform provides. With data centers located all around the world, AWS is the most comprehensive cloud platform available, offering scalable and cost-effective solutions for all kinds of businesses.

What are Instances

Now that you know what AWS offers, let’s find out what an instances are.

An instance in AWS is a virtual server that you can create and manage within the AWS environment. It's like having a magical computer that lives in the cloud and can do anything you need it to do!

Instances are based on Amazon Machine Images (AMIs), which are pre-configured virtual machines that include everything from the operating system to the software applications you need.

And the best part? With AWS, you only pay for what you use, so you can save money and resources without sacrificing performance.

Steps in creating an instance

1. Create an account with AWS

Before you can create an instance, you need to have an account with AWS. If you already have an account, skip this step. If you don’t, you can create a free tier here Amazon Web Services.
You also need to have a credit card that accepts international payments.

Note:A fee of $1 will be
debited

2. Navigate to EC2 dashboard

Once you are logged into your account, you’ll see a dashboard, navigate to EC2 on the left panel. Afterwards click on instances, which leads you to a page where you can view all your instances. Click on Launch Instance button.

3. Configure/Customize your instance

Once you click on the launch instance button, it leads you to a page where you can configure your instance. On this page you can do the following:

Name your instance You’ll see an input field where you can give your instance any name you like. I named mine scavirtual

Select the Amazon Machine Image (AMI) Select the AMI that meets your needs. AWS provides a wide range of pre-configured AMIs that include various operating systems and software packages

Choose an instance type that meets your needs Choose an instance type that meets your needs in terms of computing power, memory, and storage. AWS provides a variety of instance types to choose from, depending on your workload requirements and budget.

Create a key pair You will be asked to choose or create a key pair, which will allow you to securely access your instance via SSH. You can give it a name you can easily recall and make sure you download it on your computer because you’ll be needing it later.

Review On the right hand side, there’s a summary panel to review all of your configurations and make sure everything is set up correctly. If you're happy with the settings, click on the "Launch" button.

3. Launching the instance

Once you click on the launch instance button. A message will pop-up notifying you that your instance has been successfully launched.

4. Connecting your instance

We’ll be connecting our instance using remote

First, click on the “Get password” button which will require us to upload the pair key we created and downloaded the other time.

Next we’ll be able to generate a password, copy this password as it will be required to connect to your virtual machine.

Afterwards, click on the download remote button. Once it has downloaded, open it , accept the conditions. You’ll be promoted to provide a password, paste the password that was generated earlier.

5. On your virtual machine

The screen might go blank for a while, don’t fret. Your instance will be available soon.

There you have it, a virtual windows right in your computer.
Everything you do while on the instance will be stored there.
You can exit the instance if you are done working on it.

6. Terminating the instance

Once you are done working on the instance and you are sure you no longer need it, it is important you terminate the instance to prevent you from incurring unnecessary charges for resources.
Click on instance states, navigate to terminate instance

A notification stating that the instance has been successfully terminated.

Viola! We have successfully launched, connected and terminated an instance.