DEV Community: TutsCoder

Announcement: Launch of Powerful Code Scripts to Simplify Development

TutsCoder — Sat, 05 Oct 2024 17:20:23 +0000

At TutsCoder, we're always striving to help developers save time, boost productivity, and deliver top-quality projects. Today, we’re thrilled to announce the launch of our powerful code scripts collection, designed specifically to simplify complex development tasks and give you ready-to-use solutions right out of the box.

Whether you're a seasoned developer or just starting out, these scripts will help you accelerate your workflow and focus on what truly matters—building amazing projects. Let's dive into the features and benefits of our new code scripts that are now available for purchase!

And this is just the beginning! We’re already working on more scripts to expand our library, offering even more solutions to common development challenges. Stay tuned for future releases, but for now, let’s dive into the amazing scripts that are already live and ready to transform your workflow.

Our Featured Code Scripts

Here’s a closer look at the scripts currently available on our platform:

Effortlessly integrate secure social logins with platforms like Google, Facebook, and GitHub. This script is ideal for anyone looking to add authentication without the hassle of coding it from scratch.

👉 Get the Social Authentication Script Today

2. Google Analytics Insights Dashboard

Make data-driven decisions easier with a beautiful, real-time dashboard that connects directly to your Google Analytics account. Track user behavior, traffic, and key metrics with ease.

👉 Unlock the Power of Analytics – Purchase Now

3. Database Backup Automation Script

Automate your database backups and never worry about losing important data again. This script takes care of backups at scheduled intervals, ensuring your data is always secure.

Never worry about data loss again! Automate backups and ensure your data is always safe with this efficient tool.

👉 Automate Your Backups – Get It Here

4. Imagico: Total Image Transformation Tool

Transform your images with a versatile tool that handles everything from resizing and cropping to compression and format conversion, all with minimal effort.

Transform images effortlessly! Resize, compress, and convert formats with this all-in-one image tool.

👉 Transform Your Images – Shop Now

Easily integrate a secure login system into your MEAN stack projects. With features like user registration, login, and password reset, this script ensures robust user authentication for your web app.

👉 Secure Your App with MEANAUTH – Get It Here

6. Razorpay Payment Gateway Integration with Node.js

Simplify payment processing with Razorpay! Seamlessly integrate Razorpay's payment gateway into your Node.js app and start accepting payments with ease. Perfect for eCommerce, subscription services, and more.

👉 Streamline Payments with Razorpay – Purchase Now

7. Cashfree Payment Gateway Integration with Node.js

Effortlessly integrate Cashfree’s payment gateway into your Node.js application. This script helps you securely manage transactions, allowing for smooth payment processing across different platforms.

👉 Enable Cashfree Payments Today – Get It Here

8. Stripe Payment Gateway Integration with Node.js

Take the hassle out of payment processing with Stripe. This integration script allows you to securely accept payments, manage subscriptions, and handle transactions directly through your Node.js app.

👉 Simplify Payments with Stripe – Buy It Now

A complete login solution for Node.js applications, NODEAUTH offers user registration, login, password reset, and session management. Perfect for securing any Node.js-based app with minimal effort.

👉 Secure Your Node.js App with NODEAUTH – Get It Here

10. AWS S3 Presigned Upload & Download Script

Easily manage file uploads and downloads with AWS S3. This script generates presigned URLs for secure and temporary file access, perfect for apps that handle user-uploaded content.

👉 Enhance File Management with AWS S3 – Purchase Now

Why Our Code Scripts Are a Must-Have

These scripts are designed with both speed and simplicity in mind. Here’s why you should consider integrating them into your projects:

Time-Saving: Avoid reinventing the wheel. Each script offers a plug-and-play solution for common development tasks, so you can focus on building your product.
High Quality: All of our scripts are thoroughly tested and optimized to ensure peak performance and seamless integration.
Easy Customization: We know every project is unique, so we’ve made our scripts fully customizable to meet your specific needs.
Affordable: Get access to premium tools at a fraction of the cost of developing them from scratch.
Developer Support: Our team is here to help if you need assistance with integration or customization.

What’s Coming Next?

We’re just getting started! Our team is hard at work developing more scripts that will cover a wide range of functionalities, including:

Advanced User Analytics Dashboards
AI-Powered Content Generators
Customizable CMS Solutions
Push Notification Systems

And so much more! Keep an eye on our announcements for new releases coming soon.

How to Get These Scripts

Purchasing and integrating our scripts is simple. Here’s how you can get started:

Visit Our Scripts Page: Browse through the collection of scripts currently available.
Choose Your Script: Click on the script you want and review the detailed description, key features, and pricing.
Add to Cart and Checkout: Once you’ve found what you need, add it to your cart and proceed to checkout.
Download & Integrate: Instantly download your purchased script and easily integrate it into your project.

Shop Our Scripts Now

Special Launch Offer: Save 20% on All Scripts!

To celebrate the launch, we’re offering a 20% discount on all of our code scripts for a limited time. Simply use the promo code LAUNCH20 at checkout to enjoy this exclusive deal. This offer won’t last long, so take advantage of it while you can!

How to Purchase

Ready to simplify your development process? Here’s how you can get started:

Visit our Code Scripts Page: TutsCoder Code Scripts
Browse through the scripts: Check out detailed descriptions and features.
Add to Cart: Choose the scripts that best fit your needs.
Apply Discount: Don’t forget to use LAUNCH20 for 20% off your purchase.
Download & Integrate: Instantly download the script and start improving your projects!

Stay Tuned for More!

This is just the beginning of our journey to bring you powerful, ready-to-use tools to enhance your development experience. New scripts are on the way, and we can’t wait to share them with you. Follow us on social media and subscribe to our newsletter to stay updated on future releases and special offers.

Start simplifying your development today with our premium code scripts—more exciting tools are coming soon!

Thank you for being part of the TutsCoder community—we can't wait to see how these scripts make your development easier and more efficient.

Shop Now

Automate Node.js Deployment on a VPS Using GitHub Actions

TutsCoder — Tue, 06 Aug 2024 12:13:05 +0000

In today's fast-paced development environment, automating your Node.js deployment process is crucial. One effective way to achieve this for your Node.js application is by using GitHub Actions.

In this article, we'll walk you through setting up a GitHub Actions workflow to automate the deployment of your Node.js application to a Virtual Private Server (VPS).

Why Automate Node.js Deployment?

Automating Node.js deployment has several benefits:

Consistency: Ensures the same steps are followed every time you deploy, reducing human error.
Speed: Saves time by eliminating manual steps.
Reliability: Automated tests and checks can catch issues before they reach production.
Read the full guide on my blog: Automate Node.js Deployment on a VPS Using GitHub Actions

How to Implement Role-Based Access Control with JWT-Based Authorization in Angular

TutsCoder — Sun, 12 Mar 2023 14:30:00 +0000

As web applications become more complex and user data is increasingly sensitive, it is essential to implement proper access control mechanisms to secure the application resources.

One effective method for implementing access control is Role-Based Access Control (RBAC).

In this blog post, we will show you how to implement RBAC with JSON Web Token (JWT) based authorization in an Angular application.

Step 1: Setup Angular Application

First, we need to set up an Angular application,Open your terminal and run the following command:

ng new angular-rbac-jwt

Step 2: Create User and Role Interfaces

Next, we need to define user and role interfaces. In this example, we will create two interfaces in a new file named user.ts:

Also read,Optimize Page Load Speed With Lazy Loading Images in Angular

export interface User {

  id: number;

  username: string;

  password: string;

  role: Role;

}

export interface Role {

  id: number;

  name: string;

  permissions: string[];

}

We define a user interface with an id, username, password, and role. The role property is an object of type Role that has an id, name, and permissions array.

Step 3: Create JWT Service

To handle JWT-based authentication and authorization, we need to create a service. Create a new file named auth.service.ts and add the following code:

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

import { tap } from 'rxjs/operators';

import { User } from './user';

@Injectable({

  providedIn: 'root'

})

export class AuthService {

  private apiUrl = 'http://localhost:3000/api/auth';

constructor(private http: HttpClient) { }

login(username: string, password: string): Observable<any> {

    return this.http.post<any>(${this.apiUrl}/login, { username, password })

      .pipe(

        tap(res => {

          localStorage.setItem('access_token', res.access_token);

        })

      );

  }

logout() {

    localStorage.removeItem('access_token');

  }

public get loggedIn(): boolean {

    return localStorage.getItem('access_token') !== null;

  }

get currentUser(): User {

    const token = localStorage.getItem('access_token');

    if (!token) {

      return null;

    }

    const payload = JSON.parse(atob(token.split('.')[1]));

    return payload.user;

  }

public hasPermission(permission: string): boolean {

    const user = this.currentUser;

    if (!user || !user.role || !user.role.permissions) {

      return false;

    }

    return user.role.permissions.includes(permission);

  }

}

We define an AuthService class with a login() method that sends a POST request to our API with the username and password. If the API returns an access token, we store it in local storage using the tap() operator. We also define a logout() method to remove the access token from local storage.

The loggedIn property returns a boolean indicating whether the user is currently authenticated based on the presence of the access token in local storage. The currentUser property returns the user object stored in the access token's payload. Finally, the hasPermission() method takes a permission string and checks if the current user has that permission based on their role.

Step 4: Implement Role-Based Access Control

To implement role-based access control, we will create a guard that checks if the user has the required permission to access a route. Create a new file named role.guard.ts and add the following code:

import { Injectable } from '@angular/core';

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

import { AuthService } from './auth.service';

@Injectable({

  providedIn: 'root'

})

export class RoleGuard implements CanActivate {

constructor(private authService: AuthService, private router: Router) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    const requiredPermission = route.data.requiredPermission;

    if (this.authService.hasPermission(requiredPermission)) {

      return true;

    }

    this.router.navigate(['/login']);

    return false;

  }

}

The RoleGuard class implements the CanActivate interface and defines a canActivate() method. This method checks if the current user has the required permission to access the route. If the user has the required permission, the method returns true, allowing the user to access the route. If the user does not have the required permission, the method redirects the user to the login page and returns false.

Step 5: Use the RoleGuard

Now that we have defined the RoleGuard, we can use it to protect routes that require specific permissions. For example, suppose we have a route that allows only users with the viewReports permission to access. We can protect this route by adding the RoleGuard to the route's canActivate property and passing the required permission as data. Here's an example:

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { LoginComponent } from './login/login.component';

import { ReportsComponent } from './reports/reports.component';

import { RoleGuard } from './role.guard';

const routes: Routes = [

  { path: '', component: HomeComponent },

  { path: 'login', component: LoginComponent },

  { path: 'reports', component: ReportsComponent, canActivate: [RoleGuard], data: { requiredPermission: 'viewReports' } }

];


@NgModule({


  imports: [RouterModule.forRoot(routes)],


  exports: [RouterModule]


})


export class AppRoutingModule { }

In the above code, we add the RoleGuard to the canActivate property of the ReportsComponent route and pass the viewReports permission as data.

Step 6: Test the Application

To test the application, we need to create a mock API that returns an access token with a user object containing a role with permissions. For this example, we will use json-server to create a mock API.

Create a db.json file with the following code:

{


  "users": [


    {


      "id": 1,


      "username": "admin",


      "password": "admin",


      "role": {


        "id": 1,


        "name": "Administrator",


        "permissions": ["viewReports", "editReports", "deleteReports"]


      }


    },


    {


      "id": 2,


      "username": "user",


      "password": "user",


      "role": {


        "id": 2,


        "name": "User",


        "permissions": ["viewReports"]


      }


    }


  ]


}

This file defines two users with different roles and permissions.

To start the mock API, run the following command in your terminal:

json-server --watch db.json

This will start a mock API server at http://localhost:3000.

Now we can test the application by logging in with the admin user and trying to access the /reports route. The admin user has the viewReports, editReports, and deleteReports permissions, so they should be able to access the /reports route.

To log in, enter the admin username and password on the login page. Once logged in, click on the "Reports" link in the navigation menu. This should take you to the ReportsComponent.

To test if the RoleGuard is working, add the canActivate property to the HomeComponent route and set it to the RoleGuard with the viewReports permission. This will prevent users without the viewReports permission from accessing the home page.

Here's an example of how to protect the home page with the RoleGuard:

{ path: '', component: HomeComponent, canActivate: [RoleGuard], data: { requiredPermission: 'viewReports' } },

Now, if you log in with the user username and password, which only has the viewReports permission, you should be redirected to the login page when trying to access the home page.

Congratulations! You have successfully implemented role-based access control with JWT-based authorization in Angular.

How To Implement Role-Based Access Control With JWT-Based Authorization In Angular

Revert Your Git Changes: A Step-by-Step Guide

TutsCoder — Fri, 10 Mar 2023 13:25:49 +0000

In this article, we will learn how to undo changes in Git using different methods such as git revert, git reset, and git checkout.

Git is a popular version control system that allows developers to track and manage their code changes. However, mistakes can happen, and sometimes you may need to revert changes made in your Git repository.

Revert Your Git Changes step by step

Method 1 : Git Revert

Git revert is a safe option for undoing changes in Git as it only reverses specific commits, preserving the project's history. To revert changes using git revert, you need to specify the commit hash that you want to revert.

Steps:

Open the command line in your local repository
Type git log to view the list of commits
Copy the commit hash of the commit you want to revert
Type git revert <commit_hash> to revert the changes
Push the changes to your remote repository using git push

Method 2 : Git Reset

Git reset is a powerful command that allows you to reset your repository to a previous state. However, it can also permanently erase commits and alter the project's history.

Steps:

Open the command line in your local repository
Type git log to view the list of commits
Copy the commit hash of the commit you want to revert to
Type git reset --hard <commit_hash> to revert the changes
Push the changes to your remote repository using git push

Method 3 : Git Checkout

Git checkout is a versatile command that allows you to switch between branches or restore specific files to a previous state. To undo changes in Git using git checkout, you need to specify the file or branch you want to restore.

Steps:

Open the command line in your local repository
Type git status to view the list of modified files
Type git checkout <file> to restore a specific file to its previous state
Or type git checkout <branch_name> to switch to a previous branch and restore its state
Push the changes to your remote repository using git push

Conclusion:

Git provides several methods to undo changes, each with its own benefits and drawbacks. Git revert is a safe option that preserves the project's history, while git reset allows you to reset the repository to a previous state, and git checkout is a versatile command that allows you to switch between branches or restore specific files. We hope this step-by-step guide will help you effectively revert changes in your Git repository.

Optimize Page Load Speed with Lazy Loading Images in Angular 15

TutsCoder — Fri, 10 Mar 2023 13:24:53 +0000

Lazy loading images is a technique that helps to optimize the performance of a website by deferring the loading of images until they are needed. This can significantly improve the page load time, especially for websites with many images. In this article, we will be discussing how to implement lazy loading of images in an Angular 15 application using the ng-lazyload-image plugin.

ng-lazyload-image is a popular and highly-rated Angular library that makes it easy to implement lazy loading of images. It uses IntersectionObserver, a native API for detecting when an element enters or exits the viewport, to determine when to load images. This approach is much more efficient than using the traditional scroll or resize event-based approaches, which can negatively impact the performance of a website.

Getting started with ng-lazyload-image is simple. To install it, simply run the following command in your Angular project:

npm install ng-lazyload-image --save

Once installed, you can import the LazyLoadImageModule in your Angular module to make it available throughout your application:

import { LazyLoadImageModule } from 'ng-lazyload-image';

@NgModule({
  imports: [
    LazyLoadImageModule
  ]
})
export class AppModule { }

Next, you can use the lazyLoad directive in your templates to specify the images that should be lazy loaded:

<img [lazyLoad]="imageUrl" [offset]="offset" [defaultImage]="defaultImage" [errorImage]="errorImage">

The lazyLoad directive takes several optional parameters:

offset: The number of pixels before the image enters the viewport to start loading it.
defaultImage: An image to display while the lazy-loaded image is loading.
errorImage: An image to display if the lazy-loaded image fails to load.

By using ng-lazyload-image, you can significantly improve the performance of your Angular 15 application and provide a better user experience for your users. Give it a try today!

In conclusion, ng-lazyload-image is a simple and efficient way to implement lazy loading of images in an Angular 15 application. It's easy to install and use, and can have a significant impact on the performance of your website. Give it a try and see for yourself!

Hello, World!

TutsCoder — Sat, 25 Feb 2023 16:17:02 +0000

Hello DEV, this is my first post

How to check-uncheck all checkbox With jQuery

TutsCoder — Fri, 10 Feb 2023 05:59:55 +0000

Howdy Coders,

In this post, we are going to see how to check-uncheck all checkboxes using jQuery.

It becomes useful when you want to allow users to select or deselect all checkboxes at once by clicking one checkbox rather than selecting one by one checkbox Just like Amazon, Flipkart like size uses for its product filtering.

Steps by step Guide to select/Deselect checkbox using jQuery:

If you are new to Jquery or want to learn some basic before starting this tutorial, I must recommend to please checkout learn-javascript-from-scratch and jquery-step-by-step-tutorial-for-beginners

So, here I am going to show how this can be done by using Jquery. It can become handy and I have also used it on many projects and it's working great for me.

So let’s start.

STEP-1:

First of all, you have to add the jquery library to your page:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

STEP-2:

Create a Blank HTML file and put the following code:

<body>
<div id="container">
    <div id="body">
        <div class="header" >Check/Uncheck all checkbox with Jquery</div>

            <table class="bordered" >
                <tr>
                    <th width="10%"><input type="checkbox" name="chk_all" class="chk_all"></th>
                    <th >Select All Items</th>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="6" ></td>
                    <td > Item-1 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="7" ></td>
                    <td > Item-2 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="8" ></td>
                    <td > Item-3 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="9" ></td>
                    <td > Item-4 </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
                    <td > Item-5 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
                    <td > Item-6 </td>
                </tr>

            </table>

    </div>
</div>
</body>

STEP-3:

After ending the HTML tag add some Javascript code including with script tag as follow:

<script type="text/javascript">
    $(document).ready(function () {

        //To Check all checkbox
        $(".chk_all").click(function () {

            var checkAll = $(".chk_all").prop('checked');
            if (checkAll) {
                $(".checkboxes").prop("checked", true);
            } else {
                $(".checkboxes").prop("checked", false);
            }

        });

        // if all checkbox are selected, check the chk_all checkbox
        $(".checkboxes").click(function ()
        {
            if($(".checkboxes").length==$(".subscheked:checked").length)
            {
                $(".chk_all").attr("checked", "checked");
            }
            else
            {
                $(".chk_all").removeAttr("checked");
            }
        });

    });
</script>

Now you are done. If you find any issue checkout the complete source code given below:

Complete source code:

Index.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
    <div id="body">
        <div class="header" >Check/Uncheck all checkbox with Jquery</div>

            <table class="bordered" >
                <tr>
                    <th width="10%"><input type="checkbox" name="chk_all" class="chk_all"></th>
                    <th >Select All Items</th>
                </tr>

                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="6" ></td>
                    <td > Item-1 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="7" ></td>
                    <td > Item-2 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="8" ></td>
                    <td > Item-3 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="9" ></td>
                    <td > Item-4 </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
                    <td > Item-5 </td>
                </tr>
                <tr>
                    <td ><input type="checkbox" name="country_id" class="checkboxes" value="10" ></td>
                    <td > Item-6 </td>
                </tr>

            </table>

    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {

        //To Check all checkbox
        $(".chk_all").click(function () {

            var checkAll = $(".chk_all").prop('checked');
            if (checkAll) {
                $(".checkboxes").prop("checked", true);
            } else {
                $(".checkboxes").prop("checked", false);
            }

        });

        // if all checkbox are selected, check the chk_all checkbox
        $(".checkboxes").click(function ()
        {
            if($(".checkboxes").length==$(".subscheked:checked").length)
            {
                $(".chk_all").attr("checked", "checked");
            }
            else
            {
                $(".chk_all").removeAttr("checked");
            }
        });

    });
</script>

CSS:

html, body {
   margin:0;
   padding:0;
   height:100%;
}
body {
    border: 0;
    color: #000;
}

#body{
    width: 500px;
    margin: 0 auto;
    max-width: 100%;
    padding:20px 0 70px 0;
    height: 100%;
}

#container {
   min-height:100%;
   position:relative;
}

.header{
    font-size: 25px;
    text-align: center;
    background-color: #d0dafd;
}
table {
    *border-collapse: collapse;
    border-spacing: 5px;
    width: 100%;
}

.bordered {
    border: solid darkgoldenrod 3px;
    box-shadow: 0 1px 1px darkgoldenrod;
}

.bordered td {
    padding: 10px;
    border-bottom: 2px solid #d0dafd;

}
.bordered th {
    padding: 10px;
    border-bottom: 2px solid darkgoldenrod;
    background-color: #eee;
    border-top: none;
    text-align:center;
}

.bordered tbody tr:nth-child(even) {
    background: #eeeeee;
    border:1px solid #000;

}
.bordered tbody tr:hover td {
    background: #d0dafd;
    color: #FF0000;
}
tr td {
    text-align: center;
}

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter.

3 Easy Steps for Setting up React Native Development Environment

TutsCoder — Fri, 10 Feb 2023 05:59:29 +0000

One of the top cross-platform Interface frameworks for developers in 2022 is undoubtedly React Native. It was introduced by Meta early in 2015 and is now the best-known UI framework supporting cross-platform development.

We can create apps with React Native for almost every known mobile, web, and Smart TV operating system, spanning Android, iOS, macOS, Android TV, tvOS, and Windows. Going to set up the React Native Development Environment ought to be the initial stage of your project, regardless of the platform you are developing on.

We will discuss how to set up the React Native Development Environment for Windows in this article.

It can also be configured in iOS, but we'll learn how to do it in a future blog post.

Why is a development environment necessary?

Before deploying our codes, we need to construct and edit them locally in a development environment. This gives programmers a significant deal of freedom and flexibility.

Simply said, a development environment is a work area where we conduct development. A development environment is often made up of many resources and services that help us create the program or write the code for the application we want. This help can take many different forms and typically includes everything we would require when coding for our projects.

The majority of development environments have built-in debugging and patching facilities.
They frequently help with activities related to maintaining and updating our codes.
Integrated Development Environments, or IDEs, give us a synchronized interface to inspect our programs as we build them. This is how we typically work today.
For developers, the entire development process—writing, testing, and packaging—is greatly simplified.

It is crucial to remember that development environments might be toolkit environments or single-language settings.

Knowing that React Native is supposed to be a framework that supports several different languages, it should come as no surprise that we use toolkit environments when developing on React Native.

React Native Development Environment Setup

When developing for React Native, we typically use the Expo CLI or React Native CLI in conjunction with Android Studio as well as XCode.

You are free to utilize any of these for the projects you work on, but if you're unsure which is best for you, my article may be able to help.

Expo Snack

Snack is a browser-based programming environment for React Native Development, or as its creators like to refer to it, a playground. That's true, you don't need to set up any IDEs, customize them, install CLIs, or start off totally committed to React Native. You may easily start developing any React Native project by going to the Snack web environment. It is ideal for both novices and senior citizens who want to experiment a little. You can simply create, debug, and bundle your codes thanks to it.

But we're here on a more serious journey. We'll talk about how to set up a React Native development environment on your system. There are two options, one of which is simpler. Let's explore those!

Expo Go

If you are new to mobile development, Expo Go is suggested for starting up a React Native development environment for creating mobile user interfaces. As we will discover in a moment, setting up Expo Go is pretty simple. A number of helpful features that are based on React Native are included with Expo Go. All that is required to establish Expo Go is one emulator as well as the latest edition of Node.js, and you should be all set.

Let's make a "MyfirstProject" React Native project in Expo Go!

You can quickly launch a development server if you're using npm by:

npx create-expo-app MyfirstProject 
cd MyfirstProject
npm start 
# you can also use: npx expo start

For launching this development server using yarn:

yarn create expo-app MyfirstProject
cd MyfirstProject
yarn start 
# you can also use: yarn expo start

Problems with Expo Go

Expo Go makes it simple to begin working on a new React Native project, but it comes with a number of limitations that will ultimately limit your ability to code in React Native.

It forbids the use of native codes.
In Expo Go, a number of Android and iOS APIs might not be available.
Not always appropriate when you intend to create lightweight apps.
Your free builds may occasionally become queued in Expo Go.

In light of these, it would be sager to learn how to set up a React Native development environment in your system using the React Native CLI. Let’s get to it.

React Native CLI

Compared to Expo, setting up React Native CLI is only slightly more difficult because it needs XCode or Android Studio.

If you have experience with mobile development, setting up and using React Native CLI should be a breeze for you.

It would take some time to install and set up any of the IDEs when you are a newbie and also do not already have XCode or Android Studio installed. This can be a little intimidating, especially if you're just starting.

As we will be creating a development environment for projects targeted at Android OS, we will be using Android Studio for these demonstrations. It's crucial to remember that the setup procedures vary slightly depending on the Development OS. The instructions for Windows will be covered in this blog.

Step 1 - Installing Dependency

You would also require Node.js, the Java SE Development Kit (JDK), plus Android Studio to be installed in addition to React Native CLI. Using the well-known Windows package manager Chocolatey, you would have to install the LTS version of Node. However, it would be preferable to install Node using the Node version of Windows manager, nvm-windows, if you are going to swap between LTS and other versions of Node. To install JDK using Chocolatey:

choco install -y nodejs-lts openjdk11

Step 2 - Installing Android SDK in Android Studio

Given the number of stages, establishing the development environment may seem a little challenging. Installing and configuring Android Studio is required to create the development environment. React Native requires the Android 12 (S) SDK which can be installed from the SDK Manager in Android Studio. Also, you have to ensure that 31.0.0 is opted for under the Android SDK Build-tools in the SDK Tools tab.

Android-Studio

Step 3 - Configuring ANDROID_HOME

An environment variable called ANDROID HOME is required to use React Native. To set this up from the Windows Control Panel, go to User Accounts and select Change my environment variable. Now you can click "New…" to establish a new user variable called ANDROID_HOME that points to your Android SDK path.

Configure-Android-home

Android Studio is now fully set up. Simply use the npx react-native <command> to run React Native CLI to finish setting up your development environment.

You are now prepared to launch a new React Native project on Windows! Use the following command to start a new project:

npx react-native init MyfirstProject

Wrapping up

Now that you've hopefully successfully installed the React Native Development Environment and even launched your first React Native Project on your computer.

Run my first project is all that remains to be done! To run applications, React Native leverages Metro, a JavaScript bundler that is included with it. To learn how to launch and execute your React Native applications using the Metro Bundler, refer to the Metro Docs. Additionally, the React Native Team's Integration Guide may be useful to you if you wish to integrate your newly created React Native code within an already existing application. If not, feel free to return here for another in-depth discussion of these!

How to get current location in Angular 14+

TutsCoder — Thu, 02 Feb 2023 10:59:46 +0000

In this article, we will see how to get the user's current location in Angular 14+.

Generate location service

ng g service services/location/location

It will create location service inside services folder

Now add below code in it

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LocationService {
  constructor() {}

  getCurrentLocation() {
    return new Promise((resolve, reject) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            if (position) {
              console.log(
                'Latitude: ' +
                  position.coords.latitude +
                  'Longitude: ' +
                  position.coords.longitude
              );
              let lat = position.coords.latitude;
              let lng = position.coords.longitude;

              const location = {
                lat,
                lng,
              };
              resolve(location);
            }
          },
          (error) => console.log(error)
        );
      } else {
        reject('Geolocation is not supported by this browser.');
      }
    });
  }
}

Now use this location service in app.component.ts file as below:

 const position: any = await this.locationService.getCurrentLocation();
 console.log(position);

You will get the current latitude and longitude on the console.

How to show Google map in Angular 14+

TutsCoder — Thu, 02 Feb 2023 10:59:30 +0000

In this article, we will learn how to show Google Map using javascript API step by step.

Show Google map in Angular 14+

Create a New map component

ng g c map

Update map.component.html

<div class="map" #map></div>

Generate Google Maps service

ng g service services/google-maps/google-maps

It will Create google-maps service inside the services folder.

Now replace this code with google-maps.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class GoogleMapsService {
  constructor() {}

  loadGoogleMaps(): Promise<any> {
    const win = window as any;
    const gModule = win.google;
    if (gModule && gModule.maps) {
      return Promise.resolve(gModule.maps);
    }

    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src =
        'https://maps.googleapis.com/maps/api/js?key=' +
        environment.googleMapsApiKey +
        '&libraries=places';
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);

      script.onload = () => {
        const loadedGoogleModule = win.google;
        if (loadedGoogleModule && loadedGoogleModule.maps) {
          resolve(loadedGoogleModule.maps);
        } else {
          reject('Google Map SDK is not Available');
        }
      };
    });
  }

}

Then update map.component.ts

import {
  AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnInit,
  Output,
  Renderer2,
  ViewChild,
} from '@angular/core';
import { GoogleMapsService } from 'src/app/services/google-maps/google-maps.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit, AfterViewInit {
  @ViewChild('map', { static: true }) mapElementRef: ElementRef;
  googleMaps: any;
  map: any;
  center = { lat: 23.01997577399075, lng: 73.07245691797758 };
  
  constructor(
    private maps: GoogleMapsService,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {}
  ngAfterViewInit() {
    this.loadMap();
  }

  async loadMap() {
    try {
      let googleMaps: any = await this.maps.loadGoogleMaps();
      this.googleMaps = googleMaps;
      const mapEl = this.mapElementRef.nativeElement;

      const location = new googleMaps.LatLng(this.center.lat, this.center.lng);
      this.map = new googleMaps.Map(mapEl, {
        center: location,
        zoom: 15,
        scaleControl: false,
        streetViewControl: false,
        zoomControl: false,
        overviewMapControl: false,
        mapTypeControl: false,
        mapTypeControlOptions: {
          mapTypeIds: [googleMaps.MapTypeId.ROADMAP, 'mapId'],
        },
      });
      const style = [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [{ saturation: -100 }],
        },
      ];

      var mapType = new googleMaps.StyledMapType(style, { name: 'Grayscale' });
      this.map.mapTypes.set('mapId', mapType);
      this.map.setMapTypeId('mapId');
      this.renderer.addClass(mapEl, 'visible');
    } catch (e) {
      console.log(e);
    }
  }

}

Now update map.component.scss

.map {
    height: 30vh;
    width: 100%;
    background-color: transparent;
}
.map.visible {
  opacity: 1;
}

Now your map will be visible on browser

How to add a Marker in Google Maps?

Add the addMarker function as below in map.componenets.ts as below:

  addMarker(location) {
    let googleMaps: any = this.googleMaps;
    const icon = {
      url: 'assets/icons/location-pin.png',
      scaledSize: new googleMaps.Size(50, 50),
    };
    this.marker = new googleMaps.Marker({
      position: location,
      map: this.map,
      icon: icon,
      draggable: true,
      animation: googleMaps.Animation.DROP,
    });
  }

Then call this function at bottom of loadMap function

this.addMarker(location);

Now you can also see the marker on the map at the center position.

How to create a Google Maps API key for Website

TutsCoder — Thu, 02 Feb 2023 10:59:16 +0000

In this article, we will learn how to create a Google Maps API key for your website, which you can use to show google Maps on your website.

What is a Google Maps API key?

An individual code supplied by Google to access Google Maps on website is known as a Google Maps API key.

You receive a certain number of free Google Map queries using your API key.

In order to access google maps, we need to have google map API connected to our App and to do that we need to follow a certain process.

Create a Google Maps API key step by step:

1. Go to Google Maps Platform and Sign up or log in with your existing with your Google account

Google-map-Started

2. Enable billing for your project

Enable-Billing-Alert

Give your billing project a name, then click Continue. Your contact information and payment details should be entered into the form. Choose Next.

Create-Billing-Account-FormPayments-Profile

3. Create New Project

Please choose an existing project from the list if you wish to use one. If not, choose "Create a new project" and provide an appropriate project name.

Create-New-Project

4. Create Your API and Enable Javascript API

Now from Dashboard select 'API and Services' from Quick Access menu.

Project-Dashboard

Then Select Maps Javascript API from the list

Maps-Javascript-API

Now Enable Javascript API

Enable-Javascript-API

Your API key will be displayed in a new window for you. Press Save the key so you can use it, then click Done.

Generate-API-Key 👉Note:

Any usage that goes over your allotted amount will be immediately charged to your Google account.

Billing Model:

You only pay for what you use while using Google Maps, Routes, and Places, as well as the associated APIs (Maps JavaScript API, Directions API, Timezone API, and Geocoding API).

You can establish usage limitations to guard against unforeseen cost rises, and you receive a regular $200 credit on your billing account each month to offset your usage charges.

How to get address location from latitude and longitude in Angular15+

TutsCoder — Thu, 02 Feb 2023 10:57:18 +0000

In this article, we will see how we can get address location from latitude and longitude in Angular15+ by using the Reverse Geocoding technique.

What is Reverse Geocoding?

Reverse geocoding is the process to convert the latitude and longitude coordinates to a readable address.

How to Get address location from latitude and longitude in Angular15+

Generate map componenent

ng g c map

 getAddress(lat: number, lng: number): Promise<any> {


    return new Promise((resolve, reject) => {


      this.http


        .get<any>(


          https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&amp;amp;key=${environment.googleMapsApiKey}


        )


        .pipe(


          map((geoData) => {


            if (!geoData || !geoData.results || geoData.results.length === 0)


              throw null;


            return geoData.results[0];


          })


        )


        .subscribe(


          (data) => {


            resolve(data);


          },


          (e) => {


            reject(e);


          }


        );


    });


  }

and now use this function as below:

this.getAddress(23.01997577399075, 73.07245691797758);

DEV Community: TutsCoder

Announcement: Launch of Powerful Code Scripts to Simplify Development

Our Featured Code Scripts

1. Social Authentication Script

2. Google Analytics Insights Dashboard

3. Database Backup Automation Script

4. Imagico: Total Image Transformation Tool

5. MEANAUTH – Login System

6. Razorpay Payment Gateway Integration with Node.js

7. Cashfree Payment Gateway Integration with Node.js

8. Stripe Payment Gateway Integration with Node.js

9. NODEAUTH – Login System

10. AWS S3 Presigned Upload & Download Script

Why Our Code Scripts Are a Must-Have

What’s Coming Next?

How to Get These Scripts

Special Launch Offer: Save 20% on All Scripts!

How to Purchase

Stay Tuned for More!

Automate Node.js Deployment on a VPS Using GitHub Actions

Why Automate Node.js Deployment?

How to Implement Role-Based Access Control with JWT-Based Authorization in Angular

Step 1: Setup Angular Application

Step 2: Create User and Role Interfaces

Step 3: Create JWT Service

Step 4: Implement Role-Based Access Control

Step 5: Use the RoleGuard

Revert Your Git Changes: A Step-by-Step Guide

Revert Your Git Changes step by step

Method 1 : Git Revert

Method 2 : Git Reset

Method 3 : Git Checkout

Conclusion:

Optimize Page Load Speed with Lazy Loading Images in Angular 15

Hello, World!

How to check-uncheck all checkbox With jQuery

Steps by step Guide to select/Deselect checkbox using jQuery:

3 Easy Steps for Setting up React Native Development Environment

Why is a development environment necessary?

React Native Development Environment Setup

Expo Snack

Expo Go

Problems with Expo Go

React Native CLI

Step 1 - Installing Dependency

Step 2 - Installing Android SDK in Android Studio

Step 3 - Configuring ANDROID_HOME

Wrapping up

How to get current location in Angular 14+

How to show Google map in Angular 14+

Show Google map in Angular 14+

How to add a Marker in Google Maps?

How to create a Google Maps API key for Website

What is a Google Maps API key?

Create a Google Maps API key step by step:

Billing Model:

How to get address location from latitude and longitude in Angular15+

What is Reverse Geocoding?

How to Get address location from latitude and longitude in Angular15+